diff --git a/.devcontainer/README.md b/.devcontainer/README.md deleted file mode 100644 index 05ee5ff..0000000 --- a/.devcontainer/README.md +++ /dev/null @@ -1,207 +0,0 @@ -# DevContainer Setup für Thats-Me - -## Was ist ein DevContainer? - -Ein DevContainer ist eine vollständige Entwicklungsumgebung in Docker. Cursor/VSCode läuft direkt im Container und Sie entwickeln mit allen Tools, die bereits vorinstalliert sind. - -## Voraussetzungen - -1. **Docker Desktop** muss laufen -2. **Traefik Proxy** als externes Netzwerk: - ```bash - docker network create proxy - ``` - -## DevContainer starten - -1. **In Cursor/VSCode:** - - - Drücken Sie `Cmd+Shift+P` (macOS) oder `Ctrl+Shift+P` (Windows/Linux) - - Wählen Sie: **"Dev Containers: Reopen in Container"** - - Warten Sie, bis alle Container gebaut und gestartet sind - -2. **Beim ersten Start:** - - Der Laravel Container wird gebaut (kann einige Minuten dauern) - - Alle Services werden gestartet (MySQL, Redis, Mailpit, Quasar) - - Sie werden automatisch im Laravel Container eingeloggt - -## Was passiert beim Start? - -Der DevContainer startet folgende Services: - -- **laravel.test** - Laravel Backend (Sie arbeiten in diesem Container) -- **mysql** - Datenbank -- **redis** - Cache/Queue -- **mailpit** - E-Mail Testing -- **quasar.app** - Frontend App (läuft automatisch) - -## Arbeiten im Container - -### Terminal - -Das Terminal in Cursor/VSCode ist bereits im Container. Sie können direkt arbeiten: - -```bash -# Sie sind im /var/www/html Verzeichnis (= ./backend vom Host) -php artisan migrate -php artisan serve -composer install -npm install -npm run dev -``` - -### Verfügbare Services - -Im DevContainer können Sie direkt auf die anderen Services zugreifen: - -```bash -# MySQL Verbindung -mysql -h mysql -u sail -p -# Passwort: password - -# Redis -redis-cli -h redis - -# Composer -composer install -composer update - -# Artisan -php artisan migrate -php artisan tinker -``` - -## Zugriff von außerhalb - -### Von Ihrem Browser (Host) - -Die Ports werden automatisch weitergeleitet: - -- **Laravel App:** http://localhost (Port 80) -- **Vite Dev Server:** http://localhost:5173 -- **Mailpit Dashboard:** http://localhost:8025 -- **Quasar App:** http://localhost:9000 - -### Mit Traefik - -Wenn Traefik läuft, können Sie auch die Domains verwenden: - -- https://thats-me.test -- https://portal.thats-me.test -- https://api.thats-me.test -- https://app.thats-me.test -- https://assets.thats-me.test - -## Backend .env Konfiguration - -Stellen Sie sicher, dass `backend/.env` folgende Werte hat: - -```env -DB_CONNECTION=mysql -DB_HOST=mysql -DB_PORT=3306 -DB_DATABASE=thats-me -DB_USERNAME=sail -DB_PASSWORD=password - -MAIL_MAILER=smtp -MAIL_HOST=mailpit -MAIL_PORT=1025 - -REDIS_HOST=redis -REDIS_PORT=6379 -``` - -## Vite Dev Server starten - -```bash -# Im DevContainer Terminal -npm install -npm run dev -``` - -Vite läuft dann auf Port 5173 und ist verfügbar unter: - -- http://localhost:5173 (vom Host) -- https://assets.thats-me.test (mit Traefik) - -## Quasar App - -Die Quasar App läuft automatisch in einem separaten Container und ist verfügbar unter: - -- http://localhost:9000 (vom Host) -- https://app.thats-me.test (mit Traefik) - -## Troubleshooting - -### Container startet nicht - -```bash -# Schließen Sie den DevContainer -# Öffnen Sie ein normales Terminal auf dem Host -docker-compose down -v -docker-compose build --no-cache -# Dann neu starten: "Dev Containers: Reopen in Container" -``` - -### "Dockerfile not found" Fehler - -Stellen Sie sicher, dass Laravel Sail installiert ist: - -```bash -cd backend -composer require laravel/sail --dev -``` - -### Permission-Probleme - -Die User-IDs in `devcontainer.json` anpassen: - -```json -"containerEnv": { - "WWWUSER": "1000", // Ihre User-ID - "WWWGROUP": "1000" // Ihre Group-ID -} -``` - -Finden Sie Ihre IDs mit: - -```bash -id -u # User ID -id -g # Group ID -``` - -### Logs ansehen - -```bash -# Im DevContainer Terminal -docker-compose logs -f - -# Nur MySQL -docker-compose logs -f mysql - -# Nur Quasar -docker-compose logs -f quasar.app -``` - -## DevContainer verlassen - -1. Drücken Sie `Cmd+Shift+P` / `Ctrl+Shift+P` -2. Wählen Sie: **"Dev Containers: Reopen Folder Locally"** - -## Container stoppen - -Nach dem Verlassen des DevContainers: - -```bash -docker-compose down -``` - -## Vorteile des DevContainers - -✅ Alle arbeiten mit der gleichen Umgebung -✅ Keine lokale PHP/MySQL Installation nötig -✅ Automatische Service-Verwaltung -✅ Isolierte Entwicklungsumgebung -✅ Einfaches Onboarding für neue Entwickler - diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json deleted file mode 100644 index 1e8fdeb..0000000 --- a/.devcontainer/devcontainer.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "name": "Thats-Me (Dev Container)", - "dockerComposeFile": [ - "../docker-compose.yml" - ], - "service": "laravel.test", - "workspaceFolder": "/workspace", - "remoteUser": "sail", - "features": {}, - "customizations": { - "vscode": { - "extensions": [ - "bmewburn.vscode-intelephense-client", - "onecentlin.laravel-blade", - "shufo.vscode-blade-formatter", - "bradlc.vscode-tailwindcss", - "Anthropic.claude-code", - "adrianwilczynski.alpine-js-intellisense", - "onecentlin.laravel-extension-pack", - "cierra.livewire-vscode", - "Vue.volar" - ] - } - }, - "runServices": [ - "laravel.test", - "quasar.app" - ], - "containerEnv": { - "WWWUSER": "501", - "WWWGROUP": "20", - "LARAVEL_SAIL": "1" - }, - "forwardPorts": [ - 5173, - 9000 - ], - "portsAttributes": { - "5173": { - "label": "Vite Dev Server (Backend)", - "onAutoForward": "notify" - }, - "9000": { - "label": "Quasar App (Frontend)", - "onAutoForward": "notify" - } - } -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index ce8cafa..f628679 100644 --- a/.gitignore +++ b/.gitignore @@ -1,58 +1,24 @@ -# Laravel -/.phpunit.cache -/node_modules -/public/build -/public/hot -/public/storage -/public/vendor -/storage/*.key -/storage/app -/storage/framework -/storage/language -/storage/logs -/storage/pail -/vendor -.env -.env.backup -.env.production -.phpactor.json -.phpunit.result.cache -Homestead.json -Homestead.yaml -auth.json -npm-debug.log -yarn-error.log - -# IDEs & Editors -/.fleet -/.idea -/.nova -/.vscode -/.zed -.claude/ -.cursor/ - -# macOS .DS_Store -.AppleDouble -.LSOverride -._* -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk -Icon +node_modules +/dist -# Project specific -_static/ -_work/ -_storage/ +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? +/.history diff --git a/.mcp.json b/.mcp.json deleted file mode 100644 index ef9d714..0000000 --- a/.mcp.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "mcpServers": { - "laravel-boost": { - "command": "sh", - "args": [ - "-c", - "cd /workspace/backend && php artisan boost:mcp" - ] - }, - "context7": { - "command": "npx", - "args": [ - "-y", - "@upstash/context7-mcp", - "--api-key", - "ctx7sk-119cd4ab-8983-4229-8702-e84c59c34fc9" - ] - }, - "sequential-thinking": { - "command": "npx", - "args": [ - "-y", - "@modelcontextprotocol/server-sequential-thinking" - ] - } - } -} \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 0c099f5..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,90 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Project Overview - -"That's Me" is a full-stack offline-first web application with a Quasar/Vue.js 3 frontend and a Laravel 12 backend, orchestrated via Docker Compose with Traefik reverse proxy. - -## Architecture - -The project is a monorepo with two independent applications: - -- **`frontend/`** — Quasar v2 SPA (Vue.js 3, Pinia, Vite). Serves the user-facing app at `app.thats-me.test`. Designed as offline-first with IndexedDB (via Dexie.js) for local storage and sync queue. -- **`backend/`** — Laravel 12 (PHP 8.4). Serves multiple roles via separate domains: - - `thats-me.test` — Public landing page (Blade + Tailwind + Flux UI) - - `portal.thats-me.test` — Admin panel (Livewire/Volt + Tailwind + Flux UI) - - `api.thats-me.test` — REST API for the Quasar frontend (OAuth2 via Laravel Passport) - - `assets.thats-me.test` — Vite dev server (HMR) - -Data flow: User interaction → Vue component → Pinia store → IndexedDB → Sync queue → Laravel REST API → MySQL / Synology C2 Object Storage (for multimedia). - -## Development Environment (Docker) - -Requires Docker Desktop and a Traefik proxy network (`docker network create proxy`). Add domains to `/etc/hosts` pointing to `127.0.0.1`. - -```bash -# Start all services -docker-compose up -d - -# Access containers -docker-compose exec laravel.test bash # Laravel (PHP) -docker-compose exec quasar.app sh # Quasar (Node) -docker-compose exec mysql mysql -u sail -p # MySQL (password: password) -``` - -### Services & Ports - -| Service | Port | Purpose | -|----------------|-------|----------------------------| -| quasar.app | 9000 | Quasar frontend dev server | -| mysql | 33070 | MySQL database | -| mailpit | 8028 | Email testing dashboard | -| redis | 6383 | Cache & queue | -| laravel.test | 5180 | Vite dev server (HMR) | - -## Common Commands - -### Backend (run inside `laravel.test` container or prefix with `docker-compose exec laravel.test`) - -```bash -composer dev # Full dev environment (server + queue + pail + npm dev) -php artisan serve # Laravel server only -php artisan test --compact # Run all tests (Pest v3) -php artisan test --compact --filter=testName # Run specific test -vendor/bin/pint --dirty --format agent # Format code (Laravel Pint) -php artisan migrate # Run database migrations -php artisan db:seed # Seed database -npm run build # Build backend assets with Vite -``` - -### Frontend (run inside `quasar.app` container or from `frontend/` directory) - -```bash -npm run dev # Quasar dev server with HMR -npm run build # Production build -npm run lint # ESLint check -npm run format # Prettier formatting -``` - -## Backend Conventions - -The `backend/CLAUDE.md` file contains comprehensive Laravel Boost guidelines that must be followed. Key points: - -- **PHP 8.4** with constructor property promotion, explicit return types, curly braces for all control structures -- **Testing**: Every change must be tested with Pest v3. Run `php artisan test --compact` with filter for targeted runs. Create tests with `php artisan make:test --pest {name}`. -- **Code formatting**: Always run `vendor/bin/pint --dirty --format agent` before finalizing changes. -- **Artisan generators**: Use `php artisan make:*` commands with `--no-interaction` to create files (controllers, models, migrations, etc.) -- **Database**: Prefer Eloquent over raw queries. Use `Model::query()` instead of `DB::`. Use eager loading to prevent N+1. -- **Config**: Never use `env()` outside config files; use `config()` instead. -- **Admin Panel UI**: Livewire + Volt (single-file components) styled with Tailwind CSS v4 + Flux UI (`` components) -- **Laravel Boost MCP**: Use `search-docs`, `tinker`, `database-query`, `database-schema`, and `list-artisan-commands` tools when available. - -## Frontend Conventions - -- **State management**: Pinia stores in `frontend/src/stores/` -- **Routing**: Vue Router with hash mode, config in `frontend/src/router/` -- **UI framework**: Quasar components (preferred over custom HTML). Tailwind CSS only for specific customizations. -- **Animation**: Anime.js for the "LifeWave" SVG visualization -- **Build target**: ES2022, Firefox 115+, Chrome 115+, Safari 14+ -- **Dev server host**: `app.thats-me.test` on port 9000 diff --git a/DEV-NOTES.md b/DEV-NOTES.md deleted file mode 100644 index a216720..0000000 --- a/DEV-NOTES.md +++ /dev/null @@ -1,119 +0,0 @@ -# Dev Notes – Stand 25.02.2026 - -## node_modules-Konflikt: Mac ↔ Docker ↔ Cursor (gelöst) - -### Ausgangslage - -Die Quasar App läuft in drei Kontexten parallel: - -| Kontext | Pfad | Plattform | -|---|---|---| -| **`quasar.app` Docker-Service** | Docker Volume (isoliert) | Linux ARM64 | -| **Cursor IDE Terminal** | `/workspace/frontend/node_modules` | Linux ARM64 | -| **Mac Terminal** | `~/Sites/thats-me.local/frontend/node_modules` | macOS ARM64 | - -Der `frontend/`-Ordner ist überall **derselbe** (gemountetes Host-Filesystem). Rollup und andere native Pakete benötigen plattformspezifische Binaries – ein `npm install` auf einer Seite überschrieb bisher die Binaries der anderen. - ---- - -### Fix 1 – Docker Volume für `quasar.app` (docker-compose.yml) - -Der `quasar.app`-Service nutzt ein eigenes benanntes Docker-Volume für `node_modules`. Dadurch bleibt sein Linux-`node_modules` vollständig vom Host isoliert: - -```yaml -# quasar.app Service: -volumes: - - './frontend:/app' - - 'quasar-node-modules:/app/node_modules' # überschattet Host-Ordner - -# volumes-Block: -volumes: - quasar-node-modules: - driver: local -``` - -Der `quasar.app`-Container führt beim Start automatisch `npm install && npm run dev` aus (in sein isoliertes Volume). Er ist damit **völlig unabhängig** vom Host-`node_modules`. - ---- - -### Fix 2 – Rollup-Binaries als `optionalDependencies` (package.json) - -Das Cursor-Terminal und der Mac teilen denselben `node_modules`-Ordner. Um den gegenseitigen Konflikt abzumildern, wurden alle relevanten Rollup-Plattform-Binaries explizit als `optionalDependencies` eingetragen: - -```json -"optionalDependencies": { - "@rollup/rollup-darwin-arm64": "^4.0.0", - "@rollup/rollup-linux-arm64-gnu": "^4.0.0", - "@rollup/rollup-linux-x64-gnu": "^4.0.0" -} -``` - -npm installiert davon nur die zur aktuellen Plattform passenden, schlägt aber nie fehl wenn eine fehlt. - ---- - -### Fix 3 – `npm run dev` repariert sich selbst (package.json) - -Das `dev`-Script führt vor dem Start automatisch `npm install` aus: - -```json -"dev": "npm install && quasar dev" -``` - -Damit werden nach einem Mac-`npm install` die Linux-Binaries im Cursor-Terminal beim nächsten `npm run dev` automatisch nachgezogen. - ---- - -### Wichtig: Cursor Terminal ≠ `quasar.app`-Container - -Das Cursor IDE Terminal hat **keinen** Zugriff auf das isolierte Docker-Volume des `quasar.app`-Services. Für den Web-Dev-Server gilt: - -- **Empfohlen:** `docker-compose up -d quasar.app` → App läuft unter `app.thats-me.test` (isoliertes Volume, kein Konflikt) -- **Alternativ:** `npm run dev` direkt im Cursor-Terminal (teilt node_modules mit dem Mac, aber Fix 3 gleicht das aus) - ---- - -### Workflow: iOS-Build auf dem Mac - -Nach einem `npm install` im Linux-Kontext (Cursor oder Docker) müssen auf dem Mac die node_modules neu installiert werden: - -```bash -cd ~/Sites/thats-me.local/frontend -rm -rf node_modules && npm install -npx quasar build -m capacitor -T ios --ide -``` - ---- - -## Allgemeiner Projekt-Stand - -- **Backend:** Laravel 12, API-Routes unter `api.thats-me.test`, OAuth2 via Passport -- **Frontend:** Quasar v2 SPA, offline-first mit Dexie.js (IndexedDB) -- **Mobile:** Capacitor für iOS/Android (in `frontend/src-capacitor/`) -- **Neue Komponenten:** - - `AppSettingsModal.vue`, `ModalCard.vue`, `UserMenu.vue`, `ZoomControl.vue` - - `frontend/src/composables/`, `frontend/src/db/`, `frontend/src/services/` - - Backend API-Controller + Requests + Resources in `backend/app/Http/` - - Event-Model + Migrations + Factory - ---- - -## Wichtige Domains (lokale Entwicklung) - -| Domain | Zweck | -|---|---| -| `app.thats-me.test` | Quasar Frontend (Quasar Dev-Server) | -| `api.thats-me.test` | Laravel REST API | -| `portal.thats-me.test` | Admin Panel | -| `thats-me.test` | Landingpage | -| `assets.thats-me.test` | Vite HMR (Laravel Backend Assets) | - -## Services & Ports - -| Service | Port | Purpose | -|---|---|---| -| `quasar.app` | 9000 | Quasar Frontend Dev-Server | -| `mysql` | 33070 | MySQL Datenbank | -| `mailpit` | 8028 | E-Mail Testing Dashboard | -| `redis` | 6383 | Cache & Queue | -| `laravel.test` | 5180 | Vite Dev-Server (HMR) | diff --git a/DOCKER-SETUP.md b/DOCKER-SETUP.md deleted file mode 100644 index 2a853c9..0000000 --- a/DOCKER-SETUP.md +++ /dev/null @@ -1,296 +0,0 @@ -# Docker Setup für Thats-Me Projekt - -## Übersicht - -Dieses Projekt verwendet Docker mit Laravel Sail für das Backend und einen Node-Container für die Quasar Frontend App. - -### Services - -- **laravel.test** - Laravel Backend (PHP 8.4) -- **quasar.app** - Quasar Frontend App (Node 20) -- **mysql** - MySQL 8.0 Database -- **mailpit** - E-Mail Testing Tool -- **redis** - Cache & Queue Service - -### Domains - -Das Setup konfiguriert 4 Domains über Traefik: - -1. **thats-me.test** - Laravel Webseite/Landingpage -2. **portal.thats-me.test** - Laravel Admin Panel -3. **api.thats-me.test** - Laravel API für Quasar App -4. **app.thats-me.test** - Quasar Frontend App - -Zusätzlich: - -- **assets.thats-me.test** - Vite Dev Server für Laravel Assets - -## Voraussetzungen - -1. **Docker Desktop** installiert -2. **Traefik Proxy** muss als externes Netzwerk verfügbar sein: - ```bash - docker network create proxy - ``` -3. **Laravel Sail** muss im Backend installiert sein: - ```bash - cd backend - composer require laravel/sail --dev - ``` - -## Installation - -### 1. Environment Dateien einrichten - -**Root .env Datei:** - -```bash -cp .env.docker .env -``` - -**Backend .env Datei:** - -```bash -cd backend -cp .env.example .env -php artisan key:generate -``` - -Bearbeite `backend/.env` und stelle sicher, dass diese Einstellungen gesetzt sind: - -```env -DB_CONNECTION=mysql -DB_HOST=mysql -DB_PORT=3306 -DB_DATABASE=thats-me -DB_USERNAME=sail -DB_PASSWORD=password - -MAIL_MAILER=smtp -MAIL_HOST=mailpit -MAIL_PORT=1025 - -REDIS_HOST=redis -REDIS_PORT=6379 -``` - -### 2. Hosts-Datei konfigurieren - -Füge folgende Einträge zu deiner `/etc/hosts` Datei hinzu: - -``` -127.0.0.1 thats-me.test -127.0.0.1 portal.thats-me.test -127.0.0.1 api.thats-me.test -127.0.0.1 app.thats-me.test -127.0.0.1 assets.thats-me.test -``` - -### 3. Docker Container starten - -```bash -docker-compose up -d -``` - -### 4. Laravel Installation abschließen - -Beim ersten Start: - -```bash -# In den Laravel Container einsteigen -docker-compose exec laravel.test bash - -# Composer Dependencies installieren -composer install - -# Datenbank migrieren -php artisan migrate - -# Optional: Seeder ausführen -php artisan db:seed -``` - -### 5. Frontend Dependencies installieren - -Der Quasar Container installiert automatisch die Dependencies beim Start. -Falls manuell nötig: - -```bash -docker-compose exec quasar.app npm install -``` - -## Verwendung - -### Container starten - -```bash -docker-compose up -d -``` - -### Container stoppen - -```bash -docker-compose down -``` - -### Logs ansehen - -```bash -# Alle Services -docker-compose logs -f - -# Nur Laravel -docker-compose logs -f laravel.test - -# Nur Quasar -docker-compose logs -f quasar.app -``` - -### In Container einsteigen - -**Laravel:** - -```bash -docker-compose exec laravel.test bash -``` - -**Quasar:** - -```bash -docker-compose exec quasar.app sh -``` - -**MySQL:** - -```bash -docker-compose exec mysql mysql -u sail -p -# Passwort: password -``` - -### Artisan Commands - -```bash -docker-compose exec laravel.test php artisan migrate -docker-compose exec laravel.test php artisan cache:clear -docker-compose exec laravel.test php artisan queue:work -``` - -### NPM Commands (Frontend) - -```bash -docker-compose exec quasar.app npm run dev -docker-compose exec quasar.app npm run build -``` - -## Zugriff auf die Anwendung - -### Mit Traefik (empfohlen) - -- **Hauptwebseite:** https://thats-me.test -- **Admin Portal:** https://portal.thats-me.test -- **API:** https://api.thats-me.test -- **Frontend App:** https://app.thats-me.test -- **Vite Assets:** https://assets.thats-me.test - -### Direkt über Ports - -- **Laravel App:** http://localhost (Port 80 über Traefik) -- **Vite Dev Server:** http://localhost:5179 (Host) → 5173 (Container) -- **Quasar App:** http://localhost:9000 -- **Mailpit Dashboard:** http://localhost:8028 -- **MySQL:** localhost:33070 -- **Redis:** localhost:6383 - -## Vite Development Server - -Um den Vite Dev Server für Laravel zu starten: - -```bash -docker-compose exec laravel.test npm install -docker-compose exec laravel.test npm run dev -``` - -Dann ist HMR (Hot Module Replacement) unter https://assets.thats-me.test verfügbar. - -## Troubleshooting - -### Proxy-Netzwerk existiert nicht - -```bash -docker network create proxy -``` - -### Port-Konflikte - -Ändere die Ports in der `.env` Datei: - -```env -FORWARD_DB_PORT=33071 -FORWARD_MAILPIT_DASHBOARD_PORT=8029 -QUASAR_PORT=9001 -VITE_PORT=5180 -``` - -### Permission-Probleme - -```bash -# User/Group IDs in .env anpassen -WWWUSER=1000 -WWWGROUP=1000 -``` - -### Container neu bauen - -```bash -docker-compose down -v -docker-compose build --no-cache -docker-compose up -d -``` - -### Quasar startet nicht - -```bash -# Manuell im Container starten -docker-compose exec quasar.app sh -cd /app -npm install -npm run dev -``` - -## Entwicklung ohne Traefik - -Falls Sie kein Traefik haben, können Sie die Container auch direkt über Ports erreichen: - -1. Entfernen Sie die `labels` Sektion aus `docker-compose.yml` -2. Aktivieren Sie den Port-Mapping für Laravel: - ```yaml - ports: - - "${APP_PORT:-80}:80" - - "${VITE_PORT:-5173}:5173" - ``` -3. Zugriff dann über: - - Laravel: http://localhost - - Vite: http://localhost:5173 - - Quasar: http://localhost:9000 - -## Nützliche Befehle - -```bash -# Container Status -docker-compose ps - -# Container neu starten -docker-compose restart - -# Bestimmten Service neu starten -docker-compose restart laravel.test - -# Container und Volumes löschen -docker-compose down -v - -# Logs von heute -docker-compose logs --since 24h - -# Ressourcen-Nutzung -docker stats -``` diff --git a/README.md b/README.md index ad4cd7b..159c8b4 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,6 @@ Eine kurze Beschreibung, was dieses Projekt macht (ein oder zwei Sätze). -## Domains auf dem Testserver - -app.thats-me.test = frontend Quasar APP -portal.thats-me.test = backend Laravel Admin Panel mit Tailwind CSS + FluxUI -thats-me.test = backend Laravel Webseite / Landinpage mit Tailwind CSS + FluxUI -api.thats-me.test = backend Laravel API für Quasar APP - ## Inhaltsverzeichnis - [Start des Projekts](#start) @@ -100,4 +93,4 @@ Erkläre, wie andere zum Projekt beitragen können. Gibt es Richtlinien für Pul Gib an, unter welcher Lizenz das Projekt veröffentlicht wird. Zum Beispiel: -Dieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die [LICENSE.md](LICENSE.md)-Datei für Details (falls vorhanden). +Dieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die [LICENSE.md](LICENSE.md)-Datei für Details (falls vorhanden). \ No newline at end of file diff --git a/backend/.mcp.json b/backend/.mcp.json deleted file mode 100644 index 8c6715a..0000000 --- a/backend/.mcp.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "mcpServers": { - "laravel-boost": { - "command": "php", - "args": [ - "artisan", - "boost:mcp" - ] - } - } -} \ No newline at end of file diff --git a/backend/AGENTS.md b/backend/AGENTS.md deleted file mode 100644 index 8b56834..0000000 --- a/backend/AGENTS.md +++ /dev/null @@ -1,269 +0,0 @@ - -=== foundation rules === - -# Laravel Boost Guidelines - -The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications. - -## Foundational Context - -This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions. - -- php - 8.4.13 -- laravel/framework (LARAVEL) - v12 -- laravel/prompts (PROMPTS) - v0 -- livewire/flux (FLUXUI_FREE) - v2 -- livewire/livewire (LIVEWIRE) - v4 -- livewire/volt (VOLT) - v1 -- laravel/boost (BOOST) - v2 -- laravel/mcp (MCP) - v0 -- laravel/pail (PAIL) - v1 -- laravel/pint (PINT) - v1 -- laravel/sail (SAIL) - v1 -- pestphp/pest (PEST) - v3 -- phpunit/phpunit (PHPUNIT) - v11 -- tailwindcss (TAILWINDCSS) - v4 - -## Skills Activation - -This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck. - -- `fluxui-development` — Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals, inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux; working with flux: components; or when the user mentions Flux, component library, UI components, form fields, or asks about available Flux components. -- `volt-development` — Develops single-file Livewire components with Volt. Activates when creating Volt components, converting Livewire to Volt, working with @volt directive, functional or class-based Volt APIs; or when the user mentions Volt, single-file components, functional Livewire, or inline component logic in Blade files. -- `pest-testing` — Tests applications using the Pest 3 PHP framework. Activates when writing tests, creating unit or feature tests, adding assertions, testing Livewire components, architecture testing, debugging test failures, working with datasets or mocking; or when the user mentions test, spec, TDD, expects, assertion, coverage, or needs to verify functionality works. -- `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes. - -## Conventions - -- You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming. -- Use descriptive names for variables and methods. For example, `isRegisteredForDiscounts`, not `discount()`. -- Check for existing components to reuse before writing a new one. - -## Verification Scripts - -- Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important. - -## Application Structure & Architecture - -- Stick to existing directory structure; don't create new base folders without approval. -- Do not change the application's dependencies without approval. - -## Frontend Bundling - -- If the user doesn't see a frontend change reflected in the UI, it could mean they need to run `npm run build`, `npm run dev`, or `composer run dev`. Ask them. - -## Documentation Files - -- You must only create documentation files if explicitly requested by the user. - -## Replies - -- Be concise in your explanations - focus on what's important rather than explaining obvious details. - -=== boost rules === - -# Laravel Boost - -- Laravel Boost is an MCP server that comes with powerful tools designed specifically for this application. Use them. - -## Artisan - -- Use the `list-artisan-commands` tool when you need to call an Artisan command to double-check the available parameters. - -## URLs - -- Whenever you share a project URL with the user, you should use the `get-absolute-url` tool to ensure you're using the correct scheme, domain/IP, and port. - -## Tinker / Debugging - -- You should use the `tinker` tool when you need to execute PHP to debug code or query Eloquent models directly. -- Use the `database-query` tool when you only need to read from the database. -- Use the `database-schema` tool to inspect table structure before writing migrations or models. - -## Reading Browser Logs With the `browser-logs` Tool - -- You can read browser logs, errors, and exceptions using the `browser-logs` tool from Boost. -- Only recent browser logs will be useful - ignore old logs. - -## Searching Documentation (Critically Important) - -- Boost comes with a powerful `search-docs` tool you should use before trying other approaches when working with Laravel or Laravel ecosystem packages. This tool automatically passes a list of installed packages and their versions to the remote Boost API, so it returns only version-specific documentation for the user's circumstance. You should pass an array of packages to filter on if you know you need docs for particular packages. -- Search the documentation before making code changes to ensure we are taking the correct approach. -- Use multiple, broad, simple, topic-based queries at once. For example: `['rate limiting', 'routing rate limiting', 'routing']`. The most relevant results will be returned first. -- Do not add package names to queries; package information is already shared. For example, use `test resource table`, not `filament 4 test resource table`. - -### Available Search Syntax - -1. Simple Word Searches with auto-stemming - query=authentication - finds 'authenticate' and 'auth'. -2. Multiple Words (AND Logic) - query=rate limit - finds knowledge containing both "rate" AND "limit". -3. Quoted Phrases (Exact Position) - query="infinite scroll" - words must be adjacent and in that order. -4. Mixed Queries - query=middleware "rate limit" - "middleware" AND exact phrase "rate limit". -5. Multiple Queries - queries=["authentication", "middleware"] - ANY of these terms. - -=== php rules === - -# PHP - -- Always use curly braces for control structures, even for single-line bodies. - -## Constructors - -- Use PHP 8 constructor property promotion in `__construct()`. - - `public function __construct(public GitHub $github) { }` -- Do not allow empty `__construct()` methods with zero parameters unless the constructor is private. - -## Type Declarations - -- Always use explicit return type declarations for methods and functions. -- Use appropriate PHP type hints for method parameters. - - -```php -protected function isAccessible(User $user, ?string $path = null): bool -{ - ... -} -``` - -## Enums - -- Typically, keys in an Enum should be TitleCase. For example: `FavoritePerson`, `BestLake`, `Monthly`. - -## Comments - -- Prefer PHPDoc blocks over inline comments. Never use comments within the code itself unless the logic is exceptionally complex. - -## PHPDoc Blocks - -- Add useful array shape type definitions when appropriate. - -=== tests rules === - -# Test Enforcement - -- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass. -- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter. - -=== laravel/core rules === - -# Do Things the Laravel Way - -- Use `php artisan make:` commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using the `list-artisan-commands` tool. -- If you're creating a generic PHP class, use `php artisan make:class`. -- Pass `--no-interaction` to all Artisan commands to ensure they work without user input. You should also pass the correct `--options` to ensure correct behavior. - -## Database - -- Always use proper Eloquent relationship methods with return type hints. Prefer relationship methods over raw queries or manual joins. -- Use Eloquent models and relationships before suggesting raw database queries. -- Avoid `DB::`; prefer `Model::query()`. Generate code that leverages Laravel's ORM capabilities rather than bypassing them. -- Generate code that prevents N+1 query problems by using eager loading. -- Use Laravel's query builder for very complex database operations. - -### Model Creation - -- When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using `list-artisan-commands` to check the available options to `php artisan make:model`. - -### APIs & Eloquent Resources - -- For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention. - -## Controllers & Validation - -- Always create Form Request classes for validation rather than inline validation in controllers. Include both validation rules and custom error messages. -- Check sibling Form Requests to see if the application uses array or string based validation rules. - -## Authentication & Authorization - -- Use Laravel's built-in authentication and authorization features (gates, policies, Sanctum, etc.). - -## URL Generation - -- When generating links to other pages, prefer named routes and the `route()` function. - -## Queues - -- Use queued jobs for time-consuming operations with the `ShouldQueue` interface. - -## Configuration - -- Use environment variables only in configuration files - never use the `env()` function directly outside of config files. Always use `config('app.name')`, not `env('APP_NAME')`. - -## Testing - -- When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model. -- Faker: Use methods such as `$this->faker->word()` or `fake()->randomDigit()`. Follow existing conventions whether to use `$this->faker` or `fake()`. -- When creating tests, make use of `php artisan make:test [options] {name}` to create a feature test, and pass `--unit` to create a unit test. Most tests should be feature tests. - -## Vite Error - -- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run `npm run build` or ask the user to run `npm run dev` or `composer run dev`. - -=== laravel/v12 rules === - -# Laravel 12 - -- CRITICAL: ALWAYS use `search-docs` tool for version-specific Laravel documentation and updated code examples. -- Since Laravel 11, Laravel has a new streamlined file structure which this project uses. - -## Laravel 12 Structure - -- In Laravel 12, middleware are no longer registered in `app/Http/Kernel.php`. -- Middleware are configured declaratively in `bootstrap/app.php` using `Application::configure()->withMiddleware()`. -- `bootstrap/app.php` is the file to register middleware, exceptions, and routing files. -- `bootstrap/providers.php` contains application specific service providers. -- The `app\Console\Kernel.php` file no longer exists; use `bootstrap/app.php` or `routes/console.php` for console configuration. -- Console commands in `app/Console/Commands/` are automatically available and do not require manual registration. - -## Database - -- When modifying a column, the migration must include all of the attributes that were previously defined on the column. Otherwise, they will be dropped and lost. -- Laravel 12 allows limiting eagerly loaded records natively, without external packages: `$query->latest()->limit(10);`. - -### Models - -- Casts can and likely should be set in a `casts()` method on a model rather than the `$casts` property. Follow existing conventions from other models. - -=== fluxui-free/core rules === - -# Flux UI Free - -- Flux UI is the official Livewire component library. This project uses the free edition, which includes all free components and variants but not Pro components. -- Use `` components when available; they are the recommended way to build Livewire interfaces. -- IMPORTANT: Activate `fluxui-development` when working with Flux UI components. - -=== volt/core rules === - -# Livewire Volt - -- Single-file Livewire components: PHP logic and Blade templates in one file. -- Always check existing Volt components to determine functional vs class-based style. -- IMPORTANT: Always use `search-docs` tool for version-specific Volt documentation and updated code examples. -- IMPORTANT: Activate `volt-development` every time you're working with a Volt or single-file component-related task. - -=== pint/core rules === - -# Laravel Pint Code Formatter - -- You must run `vendor/bin/pint --dirty --format agent` before finalizing changes to ensure your code matches the project's expected style. -- Do not run `vendor/bin/pint --test --format agent`, simply run `vendor/bin/pint --format agent` to fix any formatting issues. - -=== pest/core rules === - -## Pest - -- This project uses Pest for testing. Create tests: `php artisan make:test --pest {name}`. -- Run tests: `php artisan test --compact` or filter: `php artisan test --compact --filter=testName`. -- Do NOT delete tests without approval. -- CRITICAL: ALWAYS use `search-docs` tool for version-specific Pest documentation and updated code examples. -- IMPORTANT: Activate `pest-testing` every time you're working with a Pest or testing-related task. - -=== tailwindcss/core rules === - -# Tailwind CSS - -- Always use existing Tailwind conventions; check project patterns before adding new ones. -- IMPORTANT: Always use `search-docs` tool for version-specific Tailwind CSS documentation and updated code examples. Never rely on training data. -- IMPORTANT: Activate `tailwindcss-development` every time you're working with a Tailwind CSS or styling-related task. - - diff --git a/backend/CLAUDE.md b/backend/CLAUDE.md deleted file mode 100644 index 8b56834..0000000 --- a/backend/CLAUDE.md +++ /dev/null @@ -1,269 +0,0 @@ - -=== foundation rules === - -# Laravel Boost Guidelines - -The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications. - -## Foundational Context - -This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions. - -- php - 8.4.13 -- laravel/framework (LARAVEL) - v12 -- laravel/prompts (PROMPTS) - v0 -- livewire/flux (FLUXUI_FREE) - v2 -- livewire/livewire (LIVEWIRE) - v4 -- livewire/volt (VOLT) - v1 -- laravel/boost (BOOST) - v2 -- laravel/mcp (MCP) - v0 -- laravel/pail (PAIL) - v1 -- laravel/pint (PINT) - v1 -- laravel/sail (SAIL) - v1 -- pestphp/pest (PEST) - v3 -- phpunit/phpunit (PHPUNIT) - v11 -- tailwindcss (TAILWINDCSS) - v4 - -## Skills Activation - -This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck. - -- `fluxui-development` — Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals, inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux; working with flux: components; or when the user mentions Flux, component library, UI components, form fields, or asks about available Flux components. -- `volt-development` — Develops single-file Livewire components with Volt. Activates when creating Volt components, converting Livewire to Volt, working with @volt directive, functional or class-based Volt APIs; or when the user mentions Volt, single-file components, functional Livewire, or inline component logic in Blade files. -- `pest-testing` — Tests applications using the Pest 3 PHP framework. Activates when writing tests, creating unit or feature tests, adding assertions, testing Livewire components, architecture testing, debugging test failures, working with datasets or mocking; or when the user mentions test, spec, TDD, expects, assertion, coverage, or needs to verify functionality works. -- `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes. - -## Conventions - -- You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming. -- Use descriptive names for variables and methods. For example, `isRegisteredForDiscounts`, not `discount()`. -- Check for existing components to reuse before writing a new one. - -## Verification Scripts - -- Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important. - -## Application Structure & Architecture - -- Stick to existing directory structure; don't create new base folders without approval. -- Do not change the application's dependencies without approval. - -## Frontend Bundling - -- If the user doesn't see a frontend change reflected in the UI, it could mean they need to run `npm run build`, `npm run dev`, or `composer run dev`. Ask them. - -## Documentation Files - -- You must only create documentation files if explicitly requested by the user. - -## Replies - -- Be concise in your explanations - focus on what's important rather than explaining obvious details. - -=== boost rules === - -# Laravel Boost - -- Laravel Boost is an MCP server that comes with powerful tools designed specifically for this application. Use them. - -## Artisan - -- Use the `list-artisan-commands` tool when you need to call an Artisan command to double-check the available parameters. - -## URLs - -- Whenever you share a project URL with the user, you should use the `get-absolute-url` tool to ensure you're using the correct scheme, domain/IP, and port. - -## Tinker / Debugging - -- You should use the `tinker` tool when you need to execute PHP to debug code or query Eloquent models directly. -- Use the `database-query` tool when you only need to read from the database. -- Use the `database-schema` tool to inspect table structure before writing migrations or models. - -## Reading Browser Logs With the `browser-logs` Tool - -- You can read browser logs, errors, and exceptions using the `browser-logs` tool from Boost. -- Only recent browser logs will be useful - ignore old logs. - -## Searching Documentation (Critically Important) - -- Boost comes with a powerful `search-docs` tool you should use before trying other approaches when working with Laravel or Laravel ecosystem packages. This tool automatically passes a list of installed packages and their versions to the remote Boost API, so it returns only version-specific documentation for the user's circumstance. You should pass an array of packages to filter on if you know you need docs for particular packages. -- Search the documentation before making code changes to ensure we are taking the correct approach. -- Use multiple, broad, simple, topic-based queries at once. For example: `['rate limiting', 'routing rate limiting', 'routing']`. The most relevant results will be returned first. -- Do not add package names to queries; package information is already shared. For example, use `test resource table`, not `filament 4 test resource table`. - -### Available Search Syntax - -1. Simple Word Searches with auto-stemming - query=authentication - finds 'authenticate' and 'auth'. -2. Multiple Words (AND Logic) - query=rate limit - finds knowledge containing both "rate" AND "limit". -3. Quoted Phrases (Exact Position) - query="infinite scroll" - words must be adjacent and in that order. -4. Mixed Queries - query=middleware "rate limit" - "middleware" AND exact phrase "rate limit". -5. Multiple Queries - queries=["authentication", "middleware"] - ANY of these terms. - -=== php rules === - -# PHP - -- Always use curly braces for control structures, even for single-line bodies. - -## Constructors - -- Use PHP 8 constructor property promotion in `__construct()`. - - `public function __construct(public GitHub $github) { }` -- Do not allow empty `__construct()` methods with zero parameters unless the constructor is private. - -## Type Declarations - -- Always use explicit return type declarations for methods and functions. -- Use appropriate PHP type hints for method parameters. - - -```php -protected function isAccessible(User $user, ?string $path = null): bool -{ - ... -} -``` - -## Enums - -- Typically, keys in an Enum should be TitleCase. For example: `FavoritePerson`, `BestLake`, `Monthly`. - -## Comments - -- Prefer PHPDoc blocks over inline comments. Never use comments within the code itself unless the logic is exceptionally complex. - -## PHPDoc Blocks - -- Add useful array shape type definitions when appropriate. - -=== tests rules === - -# Test Enforcement - -- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass. -- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter. - -=== laravel/core rules === - -# Do Things the Laravel Way - -- Use `php artisan make:` commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using the `list-artisan-commands` tool. -- If you're creating a generic PHP class, use `php artisan make:class`. -- Pass `--no-interaction` to all Artisan commands to ensure they work without user input. You should also pass the correct `--options` to ensure correct behavior. - -## Database - -- Always use proper Eloquent relationship methods with return type hints. Prefer relationship methods over raw queries or manual joins. -- Use Eloquent models and relationships before suggesting raw database queries. -- Avoid `DB::`; prefer `Model::query()`. Generate code that leverages Laravel's ORM capabilities rather than bypassing them. -- Generate code that prevents N+1 query problems by using eager loading. -- Use Laravel's query builder for very complex database operations. - -### Model Creation - -- When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using `list-artisan-commands` to check the available options to `php artisan make:model`. - -### APIs & Eloquent Resources - -- For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention. - -## Controllers & Validation - -- Always create Form Request classes for validation rather than inline validation in controllers. Include both validation rules and custom error messages. -- Check sibling Form Requests to see if the application uses array or string based validation rules. - -## Authentication & Authorization - -- Use Laravel's built-in authentication and authorization features (gates, policies, Sanctum, etc.). - -## URL Generation - -- When generating links to other pages, prefer named routes and the `route()` function. - -## Queues - -- Use queued jobs for time-consuming operations with the `ShouldQueue` interface. - -## Configuration - -- Use environment variables only in configuration files - never use the `env()` function directly outside of config files. Always use `config('app.name')`, not `env('APP_NAME')`. - -## Testing - -- When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model. -- Faker: Use methods such as `$this->faker->word()` or `fake()->randomDigit()`. Follow existing conventions whether to use `$this->faker` or `fake()`. -- When creating tests, make use of `php artisan make:test [options] {name}` to create a feature test, and pass `--unit` to create a unit test. Most tests should be feature tests. - -## Vite Error - -- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run `npm run build` or ask the user to run `npm run dev` or `composer run dev`. - -=== laravel/v12 rules === - -# Laravel 12 - -- CRITICAL: ALWAYS use `search-docs` tool for version-specific Laravel documentation and updated code examples. -- Since Laravel 11, Laravel has a new streamlined file structure which this project uses. - -## Laravel 12 Structure - -- In Laravel 12, middleware are no longer registered in `app/Http/Kernel.php`. -- Middleware are configured declaratively in `bootstrap/app.php` using `Application::configure()->withMiddleware()`. -- `bootstrap/app.php` is the file to register middleware, exceptions, and routing files. -- `bootstrap/providers.php` contains application specific service providers. -- The `app\Console\Kernel.php` file no longer exists; use `bootstrap/app.php` or `routes/console.php` for console configuration. -- Console commands in `app/Console/Commands/` are automatically available and do not require manual registration. - -## Database - -- When modifying a column, the migration must include all of the attributes that were previously defined on the column. Otherwise, they will be dropped and lost. -- Laravel 12 allows limiting eagerly loaded records natively, without external packages: `$query->latest()->limit(10);`. - -### Models - -- Casts can and likely should be set in a `casts()` method on a model rather than the `$casts` property. Follow existing conventions from other models. - -=== fluxui-free/core rules === - -# Flux UI Free - -- Flux UI is the official Livewire component library. This project uses the free edition, which includes all free components and variants but not Pro components. -- Use `` components when available; they are the recommended way to build Livewire interfaces. -- IMPORTANT: Activate `fluxui-development` when working with Flux UI components. - -=== volt/core rules === - -# Livewire Volt - -- Single-file Livewire components: PHP logic and Blade templates in one file. -- Always check existing Volt components to determine functional vs class-based style. -- IMPORTANT: Always use `search-docs` tool for version-specific Volt documentation and updated code examples. -- IMPORTANT: Activate `volt-development` every time you're working with a Volt or single-file component-related task. - -=== pint/core rules === - -# Laravel Pint Code Formatter - -- You must run `vendor/bin/pint --dirty --format agent` before finalizing changes to ensure your code matches the project's expected style. -- Do not run `vendor/bin/pint --test --format agent`, simply run `vendor/bin/pint --format agent` to fix any formatting issues. - -=== pest/core rules === - -## Pest - -- This project uses Pest for testing. Create tests: `php artisan make:test --pest {name}`. -- Run tests: `php artisan test --compact` or filter: `php artisan test --compact --filter=testName`. -- Do NOT delete tests without approval. -- CRITICAL: ALWAYS use `search-docs` tool for version-specific Pest documentation and updated code examples. -- IMPORTANT: Activate `pest-testing` every time you're working with a Pest or testing-related task. - -=== tailwindcss/core rules === - -# Tailwind CSS - -- Always use existing Tailwind conventions; check project patterns before adding new ones. -- IMPORTANT: Always use `search-docs` tool for version-specific Tailwind CSS documentation and updated code examples. Never rely on training data. -- IMPORTANT: Activate `tailwindcss-development` every time you're working with a Tailwind CSS or styling-related task. - - diff --git a/backend/app/Http/Controllers/Api/EventController.php b/backend/app/Http/Controllers/Api/EventController.php deleted file mode 100644 index 9ea816f..0000000 --- a/backend/app/Http/Controllers/Api/EventController.php +++ /dev/null @@ -1,199 +0,0 @@ -user()->events()->orderBy('date'); - - // Delta sync: only events updated since a given timestamp - if ($request->has('since')) { - $since = $request->date('since'); - $query->where('updated_at', '>', $since); - } - - // Cursor-based pagination (default 50, max 200) - $limit = min((int) $request->input('limit', 50), 200); - - return EventResource::collection( - $query->cursorPaginate($limit) - ); - } - - /** - * POST /api/events - */ - public function store(StoreEventRequest $request): JsonResponse - { - $event = $request->user()->events()->create([ - 'client_id' => $request->validated('id'), - 'title' => $request->validated('title'), - 'date' => $request->validated('date'), - 'emotion' => $request->validated('emotion'), - 'custom_color' => $request->validated('customColor'), - 'gradient_preset' => $request->validated('gradientPreset'), - 'image' => $request->validated('image'), - 'note' => $request->validated('note'), - ]); - - return (new EventResource($event)) - ->response() - ->setStatusCode(201); - } - - /** - * GET /api/events/{clientId} - */ - public function show(Request $request, string $clientId): EventResource - { - $event = $request->user()->events() - ->where('client_id', $clientId) - ->firstOrFail(); - - return new EventResource($event); - } - - /** - * PUT /api/events/{clientId} - */ - public function update(UpdateEventRequest $request, string $clientId): EventResource - { - $event = $request->user()->events() - ->where('client_id', $clientId) - ->firstOrFail(); - - $data = []; - $validated = $request->validated(); - - if (isset($validated['title'])) { - $data['title'] = $validated['title']; - } - if (isset($validated['date'])) { - $data['date'] = $validated['date']; - } - if (isset($validated['emotion'])) { - $data['emotion'] = $validated['emotion']; - } - if (array_key_exists('customColor', $validated)) { - $data['custom_color'] = $validated['customColor']; - } - if (array_key_exists('gradientPreset', $validated)) { - $data['gradient_preset'] = $validated['gradientPreset']; - } - if (array_key_exists('image', $validated)) { - $data['image'] = $validated['image']; - } - if (array_key_exists('note', $validated)) { - $data['note'] = $validated['note']; - } - - $event->update($data); - - return new EventResource($event->fresh()); - } - - /** - * DELETE /api/events/{clientId} - */ - public function destroy(Request $request, string $clientId): JsonResponse - { - $event = $request->user()->events() - ->where('client_id', $clientId) - ->firstOrFail(); - - $event->delete(); - - return response()->json(null, 204); - } - - /** - * POST /api/events/sync - * Batch sync: process multiple mutations in one request. - */ - public function sync(Request $request): JsonResponse - { - $request->validate([ - 'mutations' => ['required', 'array', 'max:100'], - 'mutations.*.action' => ['required', 'in:create,update,delete'], - 'mutations.*.eventId' => ['required', 'uuid'], - 'mutations.*.payload' => ['nullable', 'array'], - ]); - - $user = $request->user(); - $results = []; - - foreach ($request->input('mutations') as $mutation) { - $action = $mutation['action']; - $clientId = $mutation['eventId']; - $payload = $mutation['payload'] ?? []; - - try { - if ($action === 'create') { - $event = $user->events()->where('client_id', $clientId)->first(); - if (! $event) { - $event = $user->events()->create([ - 'client_id' => $clientId, - 'title' => $payload['title'] ?? 'Untitled', - 'date' => $payload['date'] ?? now()->format('Y-m-d'), - 'emotion' => $payload['emotion'] ?? 0, - 'custom_color' => $payload['customColor'] ?? null, - 'gradient_preset' => $payload['gradientPreset'] ?? null, - 'image' => $payload['image'] ?? null, - 'note' => $payload['note'] ?? null, - ]); - } - $results[] = ['eventId' => $clientId, 'status' => 'ok']; - } elseif ($action === 'update') { - $event = $user->events()->where('client_id', $clientId)->first(); - if ($event) { - $data = []; - if (isset($payload['title'])) { - $data['title'] = $payload['title']; - } - if (isset($payload['date'])) { - $data['date'] = $payload['date']; - } - if (isset($payload['emotion'])) { - $data['emotion'] = $payload['emotion']; - } - if (array_key_exists('customColor', $payload)) { - $data['custom_color'] = $payload['customColor']; - } - if (array_key_exists('gradientPreset', $payload)) { - $data['gradient_preset'] = $payload['gradientPreset']; - } - if (array_key_exists('image', $payload)) { - $data['image'] = $payload['image']; - } - if (array_key_exists('note', $payload)) { - $data['note'] = $payload['note']; - } - $event->update($data); - } - $results[] = ['eventId' => $clientId, 'status' => 'ok']; - } elseif ($action === 'delete') { - $user->events()->where('client_id', $clientId)->delete(); - $results[] = ['eventId' => $clientId, 'status' => 'ok']; - } - } catch (\Throwable $e) { - $results[] = ['eventId' => $clientId, 'status' => 'error', 'message' => $e->getMessage()]; - } - } - - return response()->json(['results' => $results]); - } -} diff --git a/backend/app/Http/Requests/StoreEventRequest.php b/backend/app/Http/Requests/StoreEventRequest.php deleted file mode 100644 index 2556d13..0000000 --- a/backend/app/Http/Requests/StoreEventRequest.php +++ /dev/null @@ -1,27 +0,0 @@ - ['required', 'uuid', 'unique:events,client_id'], - 'title' => ['required', 'string', 'max:255'], - 'date' => ['required', 'date_format:Y-m-d'], - 'emotion' => ['required', 'numeric', 'min:-1', 'max:1'], - 'customColor' => ['nullable', 'string', 'max:20'], - 'gradientPreset' => ['nullable', 'integer', 'min:0', 'max:9'], - 'image' => ['nullable', 'string', 'max:500'], - 'note' => ['nullable', 'string', 'max:5000'], - ]; - } -} diff --git a/backend/app/Http/Requests/UpdateEventRequest.php b/backend/app/Http/Requests/UpdateEventRequest.php deleted file mode 100644 index da31962..0000000 --- a/backend/app/Http/Requests/UpdateEventRequest.php +++ /dev/null @@ -1,26 +0,0 @@ - ['sometimes', 'required', 'string', 'max:255'], - 'date' => ['sometimes', 'required', 'date_format:Y-m-d'], - 'emotion' => ['sometimes', 'required', 'numeric', 'min:-1', 'max:1'], - 'customColor' => ['nullable', 'string', 'max:20'], - 'gradientPreset' => ['nullable', 'integer', 'min:0', 'max:9'], - 'image' => ['nullable', 'string', 'max:500'], - 'note' => ['nullable', 'string', 'max:5000'], - ]; - } -} diff --git a/backend/app/Http/Resources/EventResource.php b/backend/app/Http/Resources/EventResource.php deleted file mode 100644 index a547f62..0000000 --- a/backend/app/Http/Resources/EventResource.php +++ /dev/null @@ -1,26 +0,0 @@ - $this->client_id, - 'title' => $this->title, - 'date' => $this->date->format('Y-m-d'), - 'emotion' => (float) $this->emotion, - 'customColor' => $this->custom_color, - 'gradientPreset' => $this->gradient_preset, - 'image' => $this->image, - 'note' => $this->note ?? '', - 'syncStatus' => 'synced', - 'createdAt' => $this->created_at->getTimestampMs(), - 'updatedAt' => $this->updated_at->getTimestampMs(), - ]; - } -} diff --git a/backend/app/Models/Event.php b/backend/app/Models/Event.php deleted file mode 100644 index a4463f7..0000000 --- a/backend/app/Models/Event.php +++ /dev/null @@ -1,38 +0,0 @@ - */ - use HasFactory; - - protected $fillable = [ - 'client_id', - 'title', - 'date', - 'emotion', - 'custom_color', - 'gradient_preset', - 'image', - 'note', - ]; - - protected function casts(): array - { - return [ - 'date' => 'date:Y-m-d', - 'emotion' => 'decimal:3', - 'gradient_preset' => 'integer', - ]; - } - - public function user(): BelongsTo - { - return $this->belongsTo(User::class); - } -} diff --git a/backend/app/Models/User.php b/backend/app/Models/User.php index abec552..2d9bad8 100644 --- a/backend/app/Models/User.php +++ b/backend/app/Models/User.php @@ -4,16 +4,14 @@ namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; -use Illuminate\Database\Eloquent\Relations\HasMany; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Support\Str; -use Laravel\Passport\HasApiTokens; class User extends Authenticatable { /** @use HasFactory<\Database\Factories\UserFactory> */ - use HasApiTokens, HasFactory, Notifiable; + use HasFactory, Notifiable; /** * The attributes that are mass assignable. @@ -52,11 +50,6 @@ class User extends Authenticatable /** * Get the user's initials */ - public function events(): HasMany - { - return $this->hasMany(Event::class); - } - public function initials(): string { return Str::of($this->name) diff --git a/backend/boost.json b/backend/boost.json deleted file mode 100644 index 1b50694..0000000 --- a/backend/boost.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "agents": [ - "claude_code", - "cursor" - ], - "guidelines": true, - "herd_mcp": false, - "mcp": true, - "nightwatch_mcp": false, - "sail": false, - "skills": [ - "fluxui-development", - "volt-development", - "pest-testing", - "tailwindcss-development" - ] -} diff --git a/backend/bootstrap/app.php b/backend/bootstrap/app.php index d654276..7b162da 100644 --- a/backend/bootstrap/app.php +++ b/backend/bootstrap/app.php @@ -7,7 +7,6 @@ use Illuminate\Foundation\Configuration\Middleware; return Application::configure(basePath: dirname(__DIR__)) ->withRouting( web: __DIR__.'/../routes/web.php', - api: __DIR__.'/../routes/api.php', commands: __DIR__.'/../routes/console.php', health: '/up', ) diff --git a/backend/composer.json b/backend/composer.json index cb428cb..e0a0e24 100644 --- a/backend/composer.json +++ b/backend/composer.json @@ -11,17 +11,15 @@ "require": { "php": "^8.2", "laravel/framework": "^12.0", - "laravel/passport": "^13.0", "laravel/tinker": "^2.10.1", "livewire/flux": "^2.0", "livewire/volt": "^1.7.0" }, "require-dev": { "fakerphp/faker": "^1.23", - "laravel/boost": "^2.1", "laravel/pail": "^1.2.2", "laravel/pint": "^1.18", - "laravel/sail": "^1.46", + "laravel/sail": "^1.41", "mockery/mockery": "^1.6", "nunomaduro/collision": "^8.6", "pestphp/pest": "^3.7", @@ -76,4 +74,4 @@ }, "minimum-stability": "stable", "prefer-stable": true -} +} \ No newline at end of file diff --git a/backend/composer.lock b/backend/composer.lock index 227afe2..1554f64 100644 --- a/backend/composer.lock +++ b/backend/composer.lock @@ -4,29 +4,29 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "0200c9a860f66ce072c8de2892b42e7c", + "content-hash": "b17142323a68267a6e0b99a3d80c5654", "packages": [ { "name": "brick/math", - "version": "0.14.8", + "version": "0.12.3", "source": { "type": "git", "url": "https://github.com/brick/math.git", - "reference": "63422359a44b7f06cae63c3b429b59e8efcc0629" + "reference": "866551da34e9a618e64a819ee1e01c20d8a588ba" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/brick/math/zipball/63422359a44b7f06cae63c3b429b59e8efcc0629", - "reference": "63422359a44b7f06cae63c3b429b59e8efcc0629", + "url": "https://api.github.com/repos/brick/math/zipball/866551da34e9a618e64a819ee1e01c20d8a588ba", + "reference": "866551da34e9a618e64a819ee1e01c20d8a588ba", "shasum": "" }, "require": { - "php": "^8.2" + "php": "^8.1" }, "require-dev": { "php-coveralls/php-coveralls": "^2.2", - "phpstan/phpstan": "2.1.22", - "phpunit/phpunit": "^11.5" + "phpunit/phpunit": "^10.1", + "vimeo/psalm": "6.8.8" }, "type": "library", "autoload": { @@ -56,7 +56,7 @@ ], "support": { "issues": "https://github.com/brick/math/issues", - "source": "https://github.com/brick/math/tree/0.14.8" + "source": "https://github.com/brick/math/tree/0.12.3" }, "funding": [ { @@ -64,7 +64,7 @@ "type": "github" } ], - "time": "2026-02-10T14:33:43+00:00" + "time": "2025-02-28T13:11:00+00:00" }, { "name": "carbonphp/carbon-doctrine-types", @@ -135,73 +135,6 @@ ], "time": "2024-02-09T16:56:22+00:00" }, - { - "name": "defuse/php-encryption", - "version": "v2.4.0", - "source": { - "type": "git", - "url": "https://github.com/defuse/php-encryption.git", - "reference": "f53396c2d34225064647a05ca76c1da9d99e5828" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/defuse/php-encryption/zipball/f53396c2d34225064647a05ca76c1da9d99e5828", - "reference": "f53396c2d34225064647a05ca76c1da9d99e5828", - "shasum": "" - }, - "require": { - "ext-openssl": "*", - "paragonie/random_compat": ">= 2", - "php": ">=5.6.0" - }, - "require-dev": { - "phpunit/phpunit": "^5|^6|^7|^8|^9|^10", - "yoast/phpunit-polyfills": "^2.0.0" - }, - "bin": [ - "bin/generate-defuse-key" - ], - "type": "library", - "autoload": { - "psr-4": { - "Defuse\\Crypto\\": "src" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Taylor Hornby", - "email": "taylor@defuse.ca", - "homepage": "https://defuse.ca/" - }, - { - "name": "Scott Arciszewski", - "email": "info@paragonie.com", - "homepage": "https://paragonie.com" - } - ], - "description": "Secure PHP Encryption Library", - "keywords": [ - "aes", - "authenticated encryption", - "cipher", - "crypto", - "cryptography", - "encrypt", - "encryption", - "openssl", - "security", - "symmetric key cryptography" - ], - "support": { - "issues": "https://github.com/defuse/php-encryption/issues", - "source": "https://github.com/defuse/php-encryption/tree/v2.4.0" - }, - "time": "2023-06-19T06:10:36+00:00" - }, { "name": "dflydev/dot-access-data", "version": "v3.0.3", @@ -279,32 +212,33 @@ }, { "name": "doctrine/inflector", - "version": "2.1.0", + "version": "2.0.10", "source": { "type": "git", "url": "https://github.com/doctrine/inflector.git", - "reference": "6d6c96277ea252fc1304627204c3d5e6e15faa3b" + "reference": "5817d0659c5b50c9b950feb9af7b9668e2c436bc" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/doctrine/inflector/zipball/6d6c96277ea252fc1304627204c3d5e6e15faa3b", - "reference": "6d6c96277ea252fc1304627204c3d5e6e15faa3b", + "url": "https://api.github.com/repos/doctrine/inflector/zipball/5817d0659c5b50c9b950feb9af7b9668e2c436bc", + "reference": "5817d0659c5b50c9b950feb9af7b9668e2c436bc", "shasum": "" }, "require": { "php": "^7.2 || ^8.0" }, "require-dev": { - "doctrine/coding-standard": "^12.0 || ^13.0", - "phpstan/phpstan": "^1.12 || ^2.0", - "phpstan/phpstan-phpunit": "^1.4 || ^2.0", - "phpstan/phpstan-strict-rules": "^1.6 || ^2.0", - "phpunit/phpunit": "^8.5 || ^12.2" + "doctrine/coding-standard": "^11.0", + "phpstan/phpstan": "^1.8", + "phpstan/phpstan-phpunit": "^1.1", + "phpstan/phpstan-strict-rules": "^1.3", + "phpunit/phpunit": "^8.5 || ^9.5", + "vimeo/psalm": "^4.25 || ^5.4" }, "type": "library", "autoload": { "psr-4": { - "Doctrine\\Inflector\\": "src" + "Doctrine\\Inflector\\": "lib/Doctrine/Inflector" } }, "notification-url": "https://packagist.org/downloads/", @@ -349,7 +283,7 @@ ], "support": { "issues": "https://github.com/doctrine/inflector/issues", - "source": "https://github.com/doctrine/inflector/tree/2.1.0" + "source": "https://github.com/doctrine/inflector/tree/2.0.10" }, "funding": [ { @@ -365,7 +299,7 @@ "type": "tidelift" } ], - "time": "2025-08-10T19:31:58+00:00" + "time": "2024-02-18T20:23:39+00:00" }, { "name": "doctrine/lexer", @@ -446,28 +380,29 @@ }, { "name": "dragonmantank/cron-expression", - "version": "v3.6.0", + "version": "v3.4.0", "source": { "type": "git", "url": "https://github.com/dragonmantank/cron-expression.git", - "reference": "d61a8a9604ec1f8c3d150d09db6ce98b32675013" + "reference": "8c784d071debd117328803d86b2097615b457500" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/dragonmantank/cron-expression/zipball/d61a8a9604ec1f8c3d150d09db6ce98b32675013", - "reference": "d61a8a9604ec1f8c3d150d09db6ce98b32675013", + "url": "https://api.github.com/repos/dragonmantank/cron-expression/zipball/8c784d071debd117328803d86b2097615b457500", + "reference": "8c784d071debd117328803d86b2097615b457500", "shasum": "" }, "require": { - "php": "^8.2|^8.3|^8.4|^8.5" + "php": "^7.2|^8.0", + "webmozart/assert": "^1.0" }, "replace": { "mtdowling/cron-expression": "^1.0" }, "require-dev": { - "phpstan/extension-installer": "^1.4.3", - "phpstan/phpstan": "^1.12.32|^2.1.31", - "phpunit/phpunit": "^8.5.48|^9.0" + "phpstan/extension-installer": "^1.0", + "phpstan/phpstan": "^1.0", + "phpunit/phpunit": "^7.0|^8.0|^9.0" }, "type": "library", "extra": { @@ -498,7 +433,7 @@ ], "support": { "issues": "https://github.com/dragonmantank/cron-expression/issues", - "source": "https://github.com/dragonmantank/cron-expression/tree/v3.6.0" + "source": "https://github.com/dragonmantank/cron-expression/tree/v3.4.0" }, "funding": [ { @@ -506,7 +441,7 @@ "type": "github" } ], - "time": "2025-10-31T18:51:33+00:00" + "time": "2024-10-09T13:47:03+00:00" }, { "name": "egulias/email-validator", @@ -575,96 +510,33 @@ ], "time": "2025-03-06T22:45:56+00:00" }, - { - "name": "firebase/php-jwt", - "version": "v7.0.2", - "source": { - "type": "git", - "url": "https://github.com/firebase/php-jwt.git", - "reference": "5645b43af647b6947daac1d0f659dd1fbe8d3b65" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/firebase/php-jwt/zipball/5645b43af647b6947daac1d0f659dd1fbe8d3b65", - "reference": "5645b43af647b6947daac1d0f659dd1fbe8d3b65", - "shasum": "" - }, - "require": { - "php": "^8.0" - }, - "require-dev": { - "guzzlehttp/guzzle": "^7.4", - "phpspec/prophecy-phpunit": "^2.0", - "phpunit/phpunit": "^9.5", - "psr/cache": "^2.0||^3.0", - "psr/http-client": "^1.0", - "psr/http-factory": "^1.0" - }, - "suggest": { - "ext-sodium": "Support EdDSA (Ed25519) signatures", - "paragonie/sodium_compat": "Support EdDSA (Ed25519) signatures when libsodium is not present" - }, - "type": "library", - "autoload": { - "psr-4": { - "Firebase\\JWT\\": "src" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "BSD-3-Clause" - ], - "authors": [ - { - "name": "Neuman Vong", - "email": "neuman+pear@twilio.com", - "role": "Developer" - }, - { - "name": "Anant Narayanan", - "email": "anant@php.net", - "role": "Developer" - } - ], - "description": "A simple library to encode and decode JSON Web Tokens (JWT) in PHP. Should conform to the current spec.", - "homepage": "https://github.com/firebase/php-jwt", - "keywords": [ - "jwt", - "php" - ], - "support": { - "issues": "https://github.com/firebase/php-jwt/issues", - "source": "https://github.com/firebase/php-jwt/tree/v7.0.2" - }, - "time": "2025-12-16T22:17:28+00:00" - }, { "name": "fruitcake/php-cors", - "version": "v1.4.0", + "version": "v1.3.0", "source": { "type": "git", "url": "https://github.com/fruitcake/php-cors.git", - "reference": "38aaa6c3fd4c157ffe2a4d10aa8b9b16ba8de379" + "reference": "3d158f36e7875e2f040f37bc0573956240a5a38b" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/fruitcake/php-cors/zipball/38aaa6c3fd4c157ffe2a4d10aa8b9b16ba8de379", - "reference": "38aaa6c3fd4c157ffe2a4d10aa8b9b16ba8de379", + "url": "https://api.github.com/repos/fruitcake/php-cors/zipball/3d158f36e7875e2f040f37bc0573956240a5a38b", + "reference": "3d158f36e7875e2f040f37bc0573956240a5a38b", "shasum": "" }, "require": { - "php": "^8.1", - "symfony/http-foundation": "^5.4|^6.4|^7.3|^8" + "php": "^7.4|^8.0", + "symfony/http-foundation": "^4.4|^5.4|^6|^7" }, "require-dev": { - "phpstan/phpstan": "^2", + "phpstan/phpstan": "^1.4", "phpunit/phpunit": "^9", - "squizlabs/php_codesniffer": "^4" + "squizlabs/php_codesniffer": "^3.5" }, "type": "library", "extra": { "branch-alias": { - "dev-master": "1.3-dev" + "dev-master": "1.2-dev" } }, "autoload": { @@ -695,7 +567,7 @@ ], "support": { "issues": "https://github.com/fruitcake/php-cors/issues", - "source": "https://github.com/fruitcake/php-cors/tree/v1.4.0" + "source": "https://github.com/fruitcake/php-cors/tree/v1.3.0" }, "funding": [ { @@ -707,28 +579,28 @@ "type": "github" } ], - "time": "2025-12-03T09:33:47+00:00" + "time": "2023-10-12T05:21:21+00:00" }, { "name": "graham-campbell/result-type", - "version": "v1.1.4", + "version": "v1.1.3", "source": { "type": "git", "url": "https://github.com/GrahamCampbell/Result-Type.git", - "reference": "e01f4a821471308ba86aa202fed6698b6b695e3b" + "reference": "3ba905c11371512af9d9bdd27d99b782216b6945" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/GrahamCampbell/Result-Type/zipball/e01f4a821471308ba86aa202fed6698b6b695e3b", - "reference": "e01f4a821471308ba86aa202fed6698b6b695e3b", + "url": "https://api.github.com/repos/GrahamCampbell/Result-Type/zipball/3ba905c11371512af9d9bdd27d99b782216b6945", + "reference": "3ba905c11371512af9d9bdd27d99b782216b6945", "shasum": "" }, "require": { "php": "^7.2.5 || ^8.0", - "phpoption/phpoption": "^1.9.5" + "phpoption/phpoption": "^1.9.3" }, "require-dev": { - "phpunit/phpunit": "^8.5.41 || ^9.6.22 || ^10.5.45 || ^11.5.7" + "phpunit/phpunit": "^8.5.39 || ^9.6.20 || ^10.5.28" }, "type": "library", "autoload": { @@ -757,7 +629,7 @@ ], "support": { "issues": "https://github.com/GrahamCampbell/Result-Type/issues", - "source": "https://github.com/GrahamCampbell/Result-Type/tree/v1.1.4" + "source": "https://github.com/GrahamCampbell/Result-Type/tree/v1.1.3" }, "funding": [ { @@ -769,26 +641,26 @@ "type": "tidelift" } ], - "time": "2025-12-27T19:43:20+00:00" + "time": "2024-07-20T21:45:45+00:00" }, { "name": "guzzlehttp/guzzle", - "version": "7.10.0", + "version": "7.9.3", "source": { "type": "git", "url": "https://github.com/guzzle/guzzle.git", - "reference": "b51ac707cfa420b7bfd4e4d5e510ba8008e822b4" + "reference": "7b2f29fe81dc4da0ca0ea7d42107a0845946ea77" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/guzzle/guzzle/zipball/b51ac707cfa420b7bfd4e4d5e510ba8008e822b4", - "reference": "b51ac707cfa420b7bfd4e4d5e510ba8008e822b4", + "url": "https://api.github.com/repos/guzzle/guzzle/zipball/7b2f29fe81dc4da0ca0ea7d42107a0845946ea77", + "reference": "7b2f29fe81dc4da0ca0ea7d42107a0845946ea77", "shasum": "" }, "require": { "ext-json": "*", - "guzzlehttp/promises": "^2.3", - "guzzlehttp/psr7": "^2.8", + "guzzlehttp/promises": "^1.5.3 || ^2.0.3", + "guzzlehttp/psr7": "^2.7.0", "php": "^7.2.5 || ^8.0", "psr/http-client": "^1.0", "symfony/deprecation-contracts": "^2.2 || ^3.0" @@ -879,7 +751,7 @@ ], "support": { "issues": "https://github.com/guzzle/guzzle/issues", - "source": "https://github.com/guzzle/guzzle/tree/7.10.0" + "source": "https://github.com/guzzle/guzzle/tree/7.9.3" }, "funding": [ { @@ -895,20 +767,20 @@ "type": "tidelift" } ], - "time": "2025-08-23T22:36:01+00:00" + "time": "2025-03-27T13:37:11+00:00" }, { "name": "guzzlehttp/promises", - "version": "2.3.0", + "version": "2.2.0", "source": { "type": "git", "url": "https://github.com/guzzle/promises.git", - "reference": "481557b130ef3790cf82b713667b43030dc9c957" + "reference": "7c69f28996b0a6920945dd20b3857e499d9ca96c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/guzzle/promises/zipball/481557b130ef3790cf82b713667b43030dc9c957", - "reference": "481557b130ef3790cf82b713667b43030dc9c957", + "url": "https://api.github.com/repos/guzzle/promises/zipball/7c69f28996b0a6920945dd20b3857e499d9ca96c", + "reference": "7c69f28996b0a6920945dd20b3857e499d9ca96c", "shasum": "" }, "require": { @@ -916,7 +788,7 @@ }, "require-dev": { "bamarni/composer-bin-plugin": "^1.8.2", - "phpunit/phpunit": "^8.5.44 || ^9.6.25" + "phpunit/phpunit": "^8.5.39 || ^9.6.20" }, "type": "library", "extra": { @@ -962,7 +834,7 @@ ], "support": { "issues": "https://github.com/guzzle/promises/issues", - "source": "https://github.com/guzzle/promises/tree/2.3.0" + "source": "https://github.com/guzzle/promises/tree/2.2.0" }, "funding": [ { @@ -978,20 +850,20 @@ "type": "tidelift" } ], - "time": "2025-08-22T14:34:08+00:00" + "time": "2025-03-27T13:27:01+00:00" }, { "name": "guzzlehttp/psr7", - "version": "2.8.0", + "version": "2.7.1", "source": { "type": "git", "url": "https://github.com/guzzle/psr7.git", - "reference": "21dc724a0583619cd1652f673303492272778051" + "reference": "c2270caaabe631b3b44c85f99e5a04bbb8060d16" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/guzzle/psr7/zipball/21dc724a0583619cd1652f673303492272778051", - "reference": "21dc724a0583619cd1652f673303492272778051", + "url": "https://api.github.com/repos/guzzle/psr7/zipball/c2270caaabe631b3b44c85f99e5a04bbb8060d16", + "reference": "c2270caaabe631b3b44c85f99e5a04bbb8060d16", "shasum": "" }, "require": { @@ -1007,7 +879,7 @@ "require-dev": { "bamarni/composer-bin-plugin": "^1.8.2", "http-interop/http-factory-tests": "0.9.0", - "phpunit/phpunit": "^8.5.44 || ^9.6.25" + "phpunit/phpunit": "^8.5.39 || ^9.6.20" }, "suggest": { "laminas/laminas-httphandlerrunner": "Emit PSR-7 responses" @@ -1078,7 +950,7 @@ ], "support": { "issues": "https://github.com/guzzle/psr7/issues", - "source": "https://github.com/guzzle/psr7/tree/2.8.0" + "source": "https://github.com/guzzle/psr7/tree/2.7.1" }, "funding": [ { @@ -1094,20 +966,20 @@ "type": "tidelift" } ], - "time": "2025-08-23T21:21:41+00:00" + "time": "2025-03-27T12:30:47+00:00" }, { "name": "guzzlehttp/uri-template", - "version": "v1.0.5", + "version": "v1.0.4", "source": { "type": "git", "url": "https://github.com/guzzle/uri-template.git", - "reference": "4f4bbd4e7172148801e76e3decc1e559bdee34e1" + "reference": "30e286560c137526eccd4ce21b2de477ab0676d2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/guzzle/uri-template/zipball/4f4bbd4e7172148801e76e3decc1e559bdee34e1", - "reference": "4f4bbd4e7172148801e76e3decc1e559bdee34e1", + "url": "https://api.github.com/repos/guzzle/uri-template/zipball/30e286560c137526eccd4ce21b2de477ab0676d2", + "reference": "30e286560c137526eccd4ce21b2de477ab0676d2", "shasum": "" }, "require": { @@ -1116,7 +988,7 @@ }, "require-dev": { "bamarni/composer-bin-plugin": "^1.8.2", - "phpunit/phpunit": "^8.5.44 || ^9.6.25", + "phpunit/phpunit": "^8.5.36 || ^9.6.15", "uri-template/tests": "1.0.0" }, "type": "library", @@ -1164,7 +1036,7 @@ ], "support": { "issues": "https://github.com/guzzle/uri-template/issues", - "source": "https://github.com/guzzle/uri-template/tree/v1.0.5" + "source": "https://github.com/guzzle/uri-template/tree/v1.0.4" }, "funding": [ { @@ -1180,24 +1052,24 @@ "type": "tidelift" } ], - "time": "2025-08-22T14:27:06+00:00" + "time": "2025-02-03T10:55:03+00:00" }, { "name": "laravel/framework", - "version": "v12.52.0", + "version": "v12.4.1", "source": { "type": "git", "url": "https://github.com/laravel/framework.git", - "reference": "d5511fa74f4608dbb99864198b1954042aa8d5a7" + "reference": "cdefd852ecb459a65392cd6ccb578c92a15b8e2b" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/framework/zipball/d5511fa74f4608dbb99864198b1954042aa8d5a7", - "reference": "d5511fa74f4608dbb99864198b1954042aa8d5a7", + "url": "https://api.github.com/repos/laravel/framework/zipball/cdefd852ecb459a65392cd6ccb578c92a15b8e2b", + "reference": "cdefd852ecb459a65392cd6ccb578c92a15b8e2b", "shasum": "" }, "require": { - "brick/math": "^0.11|^0.12|^0.13|^0.14", + "brick/math": "^0.11|^0.12", "composer-runtime-api": "^2.2", "doctrine/inflector": "^2.0.5", "dragonmantank/cron-expression": "^3.4", @@ -1214,7 +1086,7 @@ "guzzlehttp/uri-template": "^1.0", "laravel/prompts": "^0.3.0", "laravel/serializable-closure": "^1.3|^2.0", - "league/commonmark": "^2.7", + "league/commonmark": "^2.6", "league/flysystem": "^3.25.1", "league/flysystem-local": "^3.25.1", "league/uri": "^7.5.1", @@ -1233,9 +1105,7 @@ "symfony/http-kernel": "^7.2.0", "symfony/mailer": "^7.2.0", "symfony/mime": "^7.2.0", - "symfony/polyfill-php83": "^1.33", - "symfony/polyfill-php84": "^1.33", - "symfony/polyfill-php85": "^1.33", + "symfony/polyfill-php83": "^1.31", "symfony/process": "^7.2.0", "symfony/routing": "^7.2.0", "symfony/uid": "^7.2.0", @@ -1271,7 +1141,6 @@ "illuminate/filesystem": "self.version", "illuminate/hashing": "self.version", "illuminate/http": "self.version", - "illuminate/json-schema": "self.version", "illuminate/log": "self.version", "illuminate/macroable": "self.version", "illuminate/mail": "self.version", @@ -1281,7 +1150,6 @@ "illuminate/process": "self.version", "illuminate/queue": "self.version", "illuminate/redis": "self.version", - "illuminate/reflection": "self.version", "illuminate/routing": "self.version", "illuminate/session": "self.version", "illuminate/support": "self.version", @@ -1305,14 +1173,13 @@ "league/flysystem-read-only": "^3.25.1", "league/flysystem-sftp-v3": "^3.25.1", "mockery/mockery": "^1.6.10", - "opis/json-schema": "^2.4.1", - "orchestra/testbench-core": "^10.9.0", - "pda/pheanstalk": "^5.0.6|^7.0.0", + "orchestra/testbench-core": "^10.0.0", + "pda/pheanstalk": "^5.0.6", "php-http/discovery": "^1.15", "phpstan/phpstan": "^2.0", "phpunit/phpunit": "^10.5.35|^11.5.3|^12.0.1", - "predis/predis": "^2.3|^3.0", - "resend/resend-php": "^0.10.0|^1.0", + "predis/predis": "^2.3", + "resend/resend-php": "^0.10.0", "symfony/cache": "^7.2.0", "symfony/http-client": "^7.2.0", "symfony/psr-http-message-bridge": "^7.2.0", @@ -1331,7 +1198,7 @@ "ext-pdo": "Required to use all database features.", "ext-posix": "Required to use all features of the queue worker.", "ext-redis": "Required to use the Redis cache and queue drivers (^4.0|^5.0|^6.0).", - "fakerphp/faker": "Required to generate fake data using the fake() helper (^1.23).", + "fakerphp/faker": "Required to use the eloquent factory builder (^1.9.1).", "filp/whoops": "Required for friendly error pages in development (^2.14.3).", "laravel/tinker": "Required to use the tinker console command (^2.0).", "league/flysystem-aws-s3-v3": "Required to use the Flysystem S3 driver (^3.25.1).", @@ -1343,10 +1210,10 @@ "pda/pheanstalk": "Required to use the beanstalk queue driver (^5.0).", "php-http/discovery": "Required to use PSR-7 bridging features (^1.15).", "phpunit/phpunit": "Required to use assertions and run tests (^10.5.35|^11.5.3|^12.0.1).", - "predis/predis": "Required to use the predis connector (^2.3|^3.0).", + "predis/predis": "Required to use the predis connector (^2.3).", "psr/http-message": "Required to allow Storage::put to accept a StreamInterface (^1.0).", "pusher/pusher-php-server": "Required to use the Pusher broadcast driver (^6.0|^7.0).", - "resend/resend-php": "Required to enable support for the Resend mail transport (^0.10.0|^1.0).", + "resend/resend-php": "Required to enable support for the Resend mail transport (^0.10.0).", "symfony/cache": "Required to PSR-6 cache bridge (^7.2).", "symfony/filesystem": "Required to enable support for relative symbolic links (^7.2).", "symfony/http-client": "Required to enable support for the Symfony API mail transports (^7.2).", @@ -1368,7 +1235,6 @@ "src/Illuminate/Filesystem/functions.php", "src/Illuminate/Foundation/helpers.php", "src/Illuminate/Log/functions.php", - "src/Illuminate/Reflection/helpers.php", "src/Illuminate/Support/functions.php", "src/Illuminate/Support/helpers.php" ], @@ -1377,8 +1243,7 @@ "Illuminate\\Support\\": [ "src/Illuminate/Macroable/", "src/Illuminate/Collections/", - "src/Illuminate/Conditionable/", - "src/Illuminate/Reflection/" + "src/Illuminate/Conditionable/" ] } }, @@ -1402,113 +1267,38 @@ "issues": "https://github.com/laravel/framework/issues", "source": "https://github.com/laravel/framework" }, - "time": "2026-02-17T17:07:04+00:00" - }, - { - "name": "laravel/passport", - "version": "v13.5.0", - "source": { - "type": "git", - "url": "https://github.com/laravel/passport.git", - "reference": "d5bff1040c764da679d96edbed1705b542b33c3d" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/laravel/passport/zipball/d5bff1040c764da679d96edbed1705b542b33c3d", - "reference": "d5bff1040c764da679d96edbed1705b542b33c3d", - "shasum": "" - }, - "require": { - "ext-json": "*", - "ext-openssl": "*", - "firebase/php-jwt": "^6.4|^7.0", - "illuminate/auth": "^11.35|^12.0|^13.0", - "illuminate/console": "^11.35|^12.0|^13.0", - "illuminate/container": "^11.35|^12.0|^13.0", - "illuminate/contracts": "^11.35|^12.0|^13.0", - "illuminate/cookie": "^11.35|^12.0|^13.0", - "illuminate/database": "^11.35|^12.0|^13.0", - "illuminate/encryption": "^11.35|^12.0|^13.0", - "illuminate/http": "^11.35|^12.0|^13.0", - "illuminate/support": "^11.35|^12.0|^13.0", - "league/oauth2-server": "^9.2", - "php": "^8.2", - "php-http/discovery": "^1.20", - "phpseclib/phpseclib": "^3.0", - "psr/http-factory-implementation": "*", - "symfony/console": "^7.1|^8.0", - "symfony/psr-http-message-bridge": "^7.1|^8.0" - }, - "require-dev": { - "orchestra/testbench": "^9.15|^10.8|^11.0", - "phpstan/phpstan": "^2.0" - }, - "type": "library", - "extra": { - "laravel": { - "providers": [ - "Laravel\\Passport\\PassportServiceProvider" - ] - } - }, - "autoload": { - "psr-4": { - "Laravel\\Passport\\": "src/", - "Laravel\\Passport\\Database\\Factories\\": "database/factories/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Taylor Otwell", - "email": "taylor@laravel.com" - } - ], - "description": "Laravel Passport provides OAuth2 server support to Laravel.", - "keywords": [ - "laravel", - "oauth", - "passport" - ], - "support": { - "issues": "https://github.com/laravel/passport/issues", - "source": "https://github.com/laravel/passport" - }, - "time": "2026-02-23T15:45:16+00:00" + "time": "2025-03-30T16:27:26+00:00" }, { "name": "laravel/prompts", - "version": "v0.3.13", + "version": "v0.3.5", "source": { "type": "git", "url": "https://github.com/laravel/prompts.git", - "reference": "ed8c466571b37e977532fb2fd3c272c784d7050d" + "reference": "57b8f7efe40333cdb925700891c7d7465325d3b1" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/prompts/zipball/ed8c466571b37e977532fb2fd3c272c784d7050d", - "reference": "ed8c466571b37e977532fb2fd3c272c784d7050d", + "url": "https://api.github.com/repos/laravel/prompts/zipball/57b8f7efe40333cdb925700891c7d7465325d3b1", + "reference": "57b8f7efe40333cdb925700891c7d7465325d3b1", "shasum": "" }, "require": { "composer-runtime-api": "^2.2", "ext-mbstring": "*", "php": "^8.1", - "symfony/console": "^6.2|^7.0|^8.0" + "symfony/console": "^6.2|^7.0" }, "conflict": { "illuminate/console": ">=10.17.0 <10.25.0", "laravel/framework": ">=10.17.0 <10.25.0" }, "require-dev": { - "illuminate/collections": "^10.0|^11.0|^12.0|^13.0", + "illuminate/collections": "^10.0|^11.0|^12.0", "mockery/mockery": "^1.5", - "pestphp/pest": "^2.3|^3.4|^4.0", - "phpstan/phpstan": "^1.12.28", - "phpstan/phpstan-mockery": "^1.1.3" + "pestphp/pest": "^2.3|^3.4", + "phpstan/phpstan": "^1.11", + "phpstan/phpstan-mockery": "^1.1" }, "suggest": { "ext-pcntl": "Required for the spinner to be animated." @@ -1534,33 +1324,33 @@ "description": "Add beautiful and user-friendly forms to your command-line applications.", "support": { "issues": "https://github.com/laravel/prompts/issues", - "source": "https://github.com/laravel/prompts/tree/v0.3.13" + "source": "https://github.com/laravel/prompts/tree/v0.3.5" }, - "time": "2026-02-06T12:17:10+00:00" + "time": "2025-02-11T13:34:40+00:00" }, { "name": "laravel/serializable-closure", - "version": "v2.0.9", + "version": "v2.0.4", "source": { "type": "git", "url": "https://github.com/laravel/serializable-closure.git", - "reference": "8f631589ab07b7b52fead814965f5a800459cb3e" + "reference": "b352cf0534aa1ae6b4d825d1e762e35d43f8a841" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/8f631589ab07b7b52fead814965f5a800459cb3e", - "reference": "8f631589ab07b7b52fead814965f5a800459cb3e", + "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/b352cf0534aa1ae6b4d825d1e762e35d43f8a841", + "reference": "b352cf0534aa1ae6b4d825d1e762e35d43f8a841", "shasum": "" }, "require": { "php": "^8.1" }, "require-dev": { - "illuminate/support": "^10.0|^11.0|^12.0|^13.0", + "illuminate/support": "^10.0|^11.0|^12.0", "nesbot/carbon": "^2.67|^3.0", - "pestphp/pest": "^2.36|^3.0|^4.0", + "pestphp/pest": "^2.36|^3.0", "phpstan/phpstan": "^2.0", - "symfony/var-dumper": "^6.2.0|^7.0.0|^8.0.0" + "symfony/var-dumper": "^6.2.0|^7.0.0" }, "type": "library", "extra": { @@ -1597,20 +1387,20 @@ "issues": "https://github.com/laravel/serializable-closure/issues", "source": "https://github.com/laravel/serializable-closure" }, - "time": "2026-02-03T06:55:34+00:00" + "time": "2025-03-19T13:51:03+00:00" }, { "name": "laravel/tinker", - "version": "v2.11.1", + "version": "v2.10.1", "source": { "type": "git", "url": "https://github.com/laravel/tinker.git", - "reference": "c9f80cc835649b5c1842898fb043f8cc098dd741" + "reference": "22177cc71807d38f2810c6204d8f7183d88a57d3" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/tinker/zipball/c9f80cc835649b5c1842898fb043f8cc098dd741", - "reference": "c9f80cc835649b5c1842898fb043f8cc098dd741", + "url": "https://api.github.com/repos/laravel/tinker/zipball/22177cc71807d38f2810c6204d8f7183d88a57d3", + "reference": "22177cc71807d38f2810c6204d8f7183d88a57d3", "shasum": "" }, "require": { @@ -1619,7 +1409,7 @@ "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0", "php": "^7.2.5|^8.0", "psy/psysh": "^0.11.1|^0.12.0", - "symfony/var-dumper": "^4.3.4|^5.0|^6.0|^7.0|^8.0" + "symfony/var-dumper": "^4.3.4|^5.0|^6.0|^7.0" }, "require-dev": { "mockery/mockery": "~1.3.3|^1.4.2", @@ -1661,159 +1451,22 @@ ], "support": { "issues": "https://github.com/laravel/tinker/issues", - "source": "https://github.com/laravel/tinker/tree/v2.11.1" + "source": "https://github.com/laravel/tinker/tree/v2.10.1" }, - "time": "2026-02-06T14:12:35+00:00" - }, - { - "name": "lcobucci/clock", - "version": "3.5.0", - "source": { - "type": "git", - "url": "https://github.com/lcobucci/clock.git", - "reference": "a3139d9e97d47826f27e6a17bb63f13621f86058" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/lcobucci/clock/zipball/a3139d9e97d47826f27e6a17bb63f13621f86058", - "reference": "a3139d9e97d47826f27e6a17bb63f13621f86058", - "shasum": "" - }, - "require": { - "php": "~8.3.0 || ~8.4.0 || ~8.5.0", - "psr/clock": "^1.0" - }, - "provide": { - "psr/clock-implementation": "1.0" - }, - "require-dev": { - "infection/infection": "^0.31", - "lcobucci/coding-standard": "^11.2.0", - "phpstan/extension-installer": "^1.3.1", - "phpstan/phpstan": "^2.0.0", - "phpstan/phpstan-deprecation-rules": "^2.0.0", - "phpstan/phpstan-phpunit": "^2.0.0", - "phpstan/phpstan-strict-rules": "^2.0.0", - "phpunit/phpunit": "^12.0.0" - }, - "type": "library", - "autoload": { - "psr-4": { - "Lcobucci\\Clock\\": "src" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Luís Cobucci", - "email": "lcobucci@gmail.com" - } - ], - "description": "Yet another clock abstraction", - "support": { - "issues": "https://github.com/lcobucci/clock/issues", - "source": "https://github.com/lcobucci/clock/tree/3.5.0" - }, - "funding": [ - { - "url": "https://github.com/lcobucci", - "type": "github" - }, - { - "url": "https://www.patreon.com/lcobucci", - "type": "patreon" - } - ], - "time": "2025-10-27T09:03:17+00:00" - }, - { - "name": "lcobucci/jwt", - "version": "5.6.0", - "source": { - "type": "git", - "url": "https://github.com/lcobucci/jwt.git", - "reference": "bb3e9f21e4196e8afc41def81ef649c164bca25e" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/lcobucci/jwt/zipball/bb3e9f21e4196e8afc41def81ef649c164bca25e", - "reference": "bb3e9f21e4196e8afc41def81ef649c164bca25e", - "shasum": "" - }, - "require": { - "ext-openssl": "*", - "ext-sodium": "*", - "php": "~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0", - "psr/clock": "^1.0" - }, - "require-dev": { - "infection/infection": "^0.29", - "lcobucci/clock": "^3.2", - "lcobucci/coding-standard": "^11.0", - "phpbench/phpbench": "^1.2", - "phpstan/extension-installer": "^1.2", - "phpstan/phpstan": "^1.10.7", - "phpstan/phpstan-deprecation-rules": "^1.1.3", - "phpstan/phpstan-phpunit": "^1.3.10", - "phpstan/phpstan-strict-rules": "^1.5.0", - "phpunit/phpunit": "^11.1" - }, - "suggest": { - "lcobucci/clock": ">= 3.2" - }, - "type": "library", - "autoload": { - "psr-4": { - "Lcobucci\\JWT\\": "src" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "BSD-3-Clause" - ], - "authors": [ - { - "name": "Luís Cobucci", - "email": "lcobucci@gmail.com", - "role": "Developer" - } - ], - "description": "A simple library to work with JSON Web Token and JSON Web Signature", - "keywords": [ - "JWS", - "jwt" - ], - "support": { - "issues": "https://github.com/lcobucci/jwt/issues", - "source": "https://github.com/lcobucci/jwt/tree/5.6.0" - }, - "funding": [ - { - "url": "https://github.com/lcobucci", - "type": "github" - }, - { - "url": "https://www.patreon.com/lcobucci", - "type": "patreon" - } - ], - "time": "2025-10-17T11:30:53+00:00" + "time": "2025-01-27T14:24:01+00:00" }, { "name": "league/commonmark", - "version": "2.8.0", + "version": "2.6.1", "source": { "type": "git", "url": "https://github.com/thephpleague/commonmark.git", - "reference": "4efa10c1e56488e658d10adf7b7b7dcd19940bfb" + "reference": "d990688c91cedfb69753ffc2512727ec646df2ad" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/4efa10c1e56488e658d10adf7b7b7dcd19940bfb", - "reference": "4efa10c1e56488e658d10adf7b7b7dcd19940bfb", + "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/d990688c91cedfb69753ffc2512727ec646df2ad", + "reference": "d990688c91cedfb69753ffc2512727ec646df2ad", "shasum": "" }, "require": { @@ -1842,7 +1495,7 @@ "symfony/process": "^5.4 | ^6.0 | ^7.0", "symfony/yaml": "^2.3 | ^3.0 | ^4.0 | ^5.0 | ^6.0 | ^7.0", "unleashedtech/php-coding-standard": "^3.1.1", - "vimeo/psalm": "^4.24.0 || ^5.0.0 || ^6.0.0" + "vimeo/psalm": "^4.24.0 || ^5.0.0" }, "suggest": { "symfony/yaml": "v2.3+ required if using the Front Matter extension" @@ -1850,7 +1503,7 @@ "type": "library", "extra": { "branch-alias": { - "dev-main": "2.9-dev" + "dev-main": "2.7-dev" } }, "autoload": { @@ -1907,7 +1560,7 @@ "type": "tidelift" } ], - "time": "2025-11-26T21:48:24+00:00" + "time": "2024-12-29T14:10:59+00:00" }, { "name": "league/config", @@ -1991,77 +1644,18 @@ ], "time": "2022-12-11T20:36:23+00:00" }, - { - "name": "league/event", - "version": "3.0.3", - "source": { - "type": "git", - "url": "https://github.com/thephpleague/event.git", - "reference": "ec38ff7ea10cad7d99a79ac937fbcffb9334c210" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/thephpleague/event/zipball/ec38ff7ea10cad7d99a79ac937fbcffb9334c210", - "reference": "ec38ff7ea10cad7d99a79ac937fbcffb9334c210", - "shasum": "" - }, - "require": { - "php": ">=7.2.0", - "psr/event-dispatcher": "^1.0" - }, - "provide": { - "psr/event-dispatcher-implementation": "1.0" - }, - "require-dev": { - "friendsofphp/php-cs-fixer": "^2.16", - "phpstan/phpstan": "^0.12.45", - "phpunit/phpunit": "^8.5" - }, - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "3.0-dev" - } - }, - "autoload": { - "psr-4": { - "League\\Event\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Frank de Jonge", - "email": "info@frenky.net" - } - ], - "description": "Event package", - "keywords": [ - "emitter", - "event", - "listener" - ], - "support": { - "issues": "https://github.com/thephpleague/event/issues", - "source": "https://github.com/thephpleague/event/tree/3.0.3" - }, - "time": "2024-09-04T16:06:53+00:00" - }, { "name": "league/flysystem", - "version": "3.31.0", + "version": "3.29.1", "source": { "type": "git", "url": "https://github.com/thephpleague/flysystem.git", - "reference": "1717e0b3642b0df65ecb0cc89cdd99fa840672ff" + "reference": "edc1bb7c86fab0776c3287dbd19b5fa278347319" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/1717e0b3642b0df65ecb0cc89cdd99fa840672ff", - "reference": "1717e0b3642b0df65ecb0cc89cdd99fa840672ff", + "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/edc1bb7c86fab0776c3287dbd19b5fa278347319", + "reference": "edc1bb7c86fab0776c3287dbd19b5fa278347319", "shasum": "" }, "require": { @@ -2085,13 +1679,13 @@ "composer/semver": "^3.0", "ext-fileinfo": "*", "ext-ftp": "*", - "ext-mongodb": "^1.3|^2", + "ext-mongodb": "^1.3", "ext-zip": "*", "friendsofphp/php-cs-fixer": "^3.5", "google/cloud-storage": "^1.23", "guzzlehttp/psr7": "^2.6", "microsoft/azure-storage-blob": "^1.1", - "mongodb/mongodb": "^1.2|^2", + "mongodb/mongodb": "^1.2", "phpseclib/phpseclib": "^3.0.36", "phpstan/phpstan": "^1.10", "phpunit/phpunit": "^9.5.11|^10.0", @@ -2129,22 +1723,22 @@ ], "support": { "issues": "https://github.com/thephpleague/flysystem/issues", - "source": "https://github.com/thephpleague/flysystem/tree/3.31.0" + "source": "https://github.com/thephpleague/flysystem/tree/3.29.1" }, - "time": "2026-01-23T15:38:47+00:00" + "time": "2024-10-08T08:58:34+00:00" }, { "name": "league/flysystem-local", - "version": "3.31.0", + "version": "3.29.0", "source": { "type": "git", "url": "https://github.com/thephpleague/flysystem-local.git", - "reference": "2f669db18a4c20c755c2bb7d3a7b0b2340488079" + "reference": "e0e8d52ce4b2ed154148453d321e97c8e931bd27" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/thephpleague/flysystem-local/zipball/2f669db18a4c20c755c2bb7d3a7b0b2340488079", - "reference": "2f669db18a4c20c755c2bb7d3a7b0b2340488079", + "url": "https://api.github.com/repos/thephpleague/flysystem-local/zipball/e0e8d52ce4b2ed154148453d321e97c8e931bd27", + "reference": "e0e8d52ce4b2ed154148453d321e97c8e931bd27", "shasum": "" }, "require": { @@ -2178,9 +1772,9 @@ "local" ], "support": { - "source": "https://github.com/thephpleague/flysystem-local/tree/3.31.0" + "source": "https://github.com/thephpleague/flysystem-local/tree/3.29.0" }, - "time": "2026-01-23T15:30:45+00:00" + "time": "2024-08-09T21:24:39+00:00" }, { "name": "league/mime-type-detection", @@ -2238,136 +1832,35 @@ ], "time": "2024-09-21T08:32:55+00:00" }, - { - "name": "league/oauth2-server", - "version": "9.3.0", - "source": { - "type": "git", - "url": "https://github.com/thephpleague/oauth2-server.git", - "reference": "d8e2f39f645a82b207bbac441694d6e6079357cb" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/thephpleague/oauth2-server/zipball/d8e2f39f645a82b207bbac441694d6e6079357cb", - "reference": "d8e2f39f645a82b207bbac441694d6e6079357cb", - "shasum": "" - }, - "require": { - "defuse/php-encryption": "^2.4", - "ext-json": "*", - "ext-openssl": "*", - "lcobucci/clock": "^2.3 || ^3.0", - "lcobucci/jwt": "^5.0", - "league/event": "^3.0", - "league/uri": "^7.0", - "php": "~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0", - "psr/http-message": "^2.0", - "psr/http-server-middleware": "^1.0" - }, - "replace": { - "league/oauth2server": "*", - "lncd/oauth2": "*" - }, - "require-dev": { - "laminas/laminas-diactoros": "^3.5", - "php-parallel-lint/php-parallel-lint": "^1.3.2", - "phpstan/extension-installer": "^1.3.1", - "phpstan/phpstan": "^1.12|^2.0", - "phpstan/phpstan-deprecation-rules": "^1.1.4|^2.0", - "phpstan/phpstan-phpunit": "^1.3.15|^2.0", - "phpstan/phpstan-strict-rules": "^1.5.2|^2.0", - "phpunit/phpunit": "^10.5|^11.5|^12.0", - "roave/security-advisories": "dev-master", - "slevomat/coding-standard": "^8.14.1", - "squizlabs/php_codesniffer": "^3.8" - }, - "type": "library", - "autoload": { - "psr-4": { - "League\\OAuth2\\Server\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Alex Bilbie", - "email": "hello@alexbilbie.com", - "homepage": "http://www.alexbilbie.com", - "role": "Developer" - }, - { - "name": "Andy Millington", - "email": "andrew@noexceptions.io", - "homepage": "https://www.noexceptions.io", - "role": "Developer" - } - ], - "description": "A lightweight and powerful OAuth 2.0 authorization and resource server library with support for all the core specification grants. This library will allow you to secure your API with OAuth and allow your applications users to approve apps that want to access their data from your API.", - "homepage": "https://oauth2.thephpleague.com/", - "keywords": [ - "Authentication", - "api", - "auth", - "authorisation", - "authorization", - "oauth", - "oauth 2", - "oauth 2.0", - "oauth2", - "protect", - "resource", - "secure", - "server" - ], - "support": { - "issues": "https://github.com/thephpleague/oauth2-server/issues", - "source": "https://github.com/thephpleague/oauth2-server/tree/9.3.0" - }, - "funding": [ - { - "url": "https://github.com/sephster", - "type": "github" - } - ], - "time": "2025-11-25T22:51:15+00:00" - }, { "name": "league/uri", - "version": "7.8.0", + "version": "7.5.1", "source": { "type": "git", "url": "https://github.com/thephpleague/uri.git", - "reference": "4436c6ec8d458e4244448b069cc572d088230b76" + "reference": "81fb5145d2644324614cc532b28efd0215bda430" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/thephpleague/uri/zipball/4436c6ec8d458e4244448b069cc572d088230b76", - "reference": "4436c6ec8d458e4244448b069cc572d088230b76", + "url": "https://api.github.com/repos/thephpleague/uri/zipball/81fb5145d2644324614cc532b28efd0215bda430", + "reference": "81fb5145d2644324614cc532b28efd0215bda430", "shasum": "" }, "require": { - "league/uri-interfaces": "^7.8", - "php": "^8.1", - "psr/http-factory": "^1" + "league/uri-interfaces": "^7.5", + "php": "^8.1" }, "conflict": { "league/uri-schemes": "^1.0" }, "suggest": { "ext-bcmath": "to improve IPV4 host parsing", - "ext-dom": "to convert the URI into an HTML anchor tag", "ext-fileinfo": "to create Data URI from file contennts", "ext-gmp": "to improve IPV4 host parsing", "ext-intl": "to handle IDN host with the best performance", - "ext-uri": "to use the PHP native URI class", - "jeremykendall/php-domain-parser": "to further parse the URI host and resolve its Public Suffix and Top Level Domain", - "league/uri-components": "to provide additional tools to manipulate URI objects components", - "league/uri-polyfill": "to backport the PHP URI extension for older versions of PHP", + "jeremykendall/php-domain-parser": "to resolve Public Suffix and Top Level Domain", + "league/uri-components": "Needed to easily manipulate URI objects components", "php-64bit": "to improve IPV4 host parsing", - "rowbot/url": "to handle URLs using the WHATWG URL Living Standard specification", "symfony/polyfill-intl-idn": "to handle IDN host via the Symfony polyfill if ext-intl is not present" }, "type": "library", @@ -2395,7 +1888,6 @@ "description": "URI manipulation library", "homepage": "https://uri.thephpleague.com", "keywords": [ - "URN", "data-uri", "file-uri", "ftp", @@ -2408,11 +1900,9 @@ "psr-7", "query-string", "querystring", - "rfc2141", "rfc3986", "rfc3987", "rfc6570", - "rfc8141", "uri", "uri-template", "url", @@ -2422,7 +1912,7 @@ "docs": "https://uri.thephpleague.com", "forum": "https://thephpleague.slack.com", "issues": "https://github.com/thephpleague/uri-src/issues", - "source": "https://github.com/thephpleague/uri/tree/7.8.0" + "source": "https://github.com/thephpleague/uri/tree/7.5.1" }, "funding": [ { @@ -2430,25 +1920,26 @@ "type": "github" } ], - "time": "2026-01-14T17:24:56+00:00" + "time": "2024-12-08T08:40:02+00:00" }, { "name": "league/uri-interfaces", - "version": "7.8.0", + "version": "7.5.0", "source": { "type": "git", "url": "https://github.com/thephpleague/uri-interfaces.git", - "reference": "c5c5cd056110fc8afaba29fa6b72a43ced42acd4" + "reference": "08cfc6c4f3d811584fb09c37e2849e6a7f9b0742" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/thephpleague/uri-interfaces/zipball/c5c5cd056110fc8afaba29fa6b72a43ced42acd4", - "reference": "c5c5cd056110fc8afaba29fa6b72a43ced42acd4", + "url": "https://api.github.com/repos/thephpleague/uri-interfaces/zipball/08cfc6c4f3d811584fb09c37e2849e6a7f9b0742", + "reference": "08cfc6c4f3d811584fb09c37e2849e6a7f9b0742", "shasum": "" }, "require": { "ext-filter": "*", "php": "^8.1", + "psr/http-factory": "^1", "psr/http-message": "^1.1 || ^2.0" }, "suggest": { @@ -2456,7 +1947,6 @@ "ext-gmp": "to improve IPV4 host parsing", "ext-intl": "to handle IDN host with the best performance", "php-64bit": "to improve IPV4 host parsing", - "rowbot/url": "to handle URLs using the WHATWG URL Living Standard specification", "symfony/polyfill-intl-idn": "to handle IDN host via the Symfony polyfill if ext-intl is not present" }, "type": "library", @@ -2481,7 +1971,7 @@ "homepage": "https://nyamsprod.com" } ], - "description": "Common tools for parsing and resolving RFC3987/RFC3986 URI", + "description": "Common interfaces and classes for URI representation and interaction", "homepage": "https://uri.thephpleague.com", "keywords": [ "data-uri", @@ -2506,7 +1996,7 @@ "docs": "https://uri.thephpleague.com", "forum": "https://thephpleague.slack.com", "issues": "https://github.com/thephpleague/uri-src/issues", - "source": "https://github.com/thephpleague/uri-interfaces/tree/7.8.0" + "source": "https://github.com/thephpleague/uri-interfaces/tree/7.5.0" }, "funding": [ { @@ -2514,20 +2004,20 @@ "type": "github" } ], - "time": "2026-01-15T06:54:53+00:00" + "time": "2024-12-08T08:18:47+00:00" }, { "name": "livewire/flux", - "version": "v2.12.1", + "version": "v2.1.1", "source": { "type": "git", "url": "https://github.com/livewire/flux.git", - "reference": "24c139b97b6df1e67c0235637f0e08c206bf4486" + "reference": "f5b7169e4538039d59a750cdcc64494e2fc0729c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/livewire/flux/zipball/24c139b97b6df1e67c0235637f0e08c206bf4486", - "reference": "24c139b97b6df1e67c0235637f0e08c206bf4486", + "url": "https://api.github.com/repos/livewire/flux/zipball/f5b7169e4538039d59a750cdcc64494e2fc0729c", + "reference": "f5b7169e4538039d59a750cdcc64494e2fc0729c", "shasum": "" }, "require": { @@ -2535,13 +2025,10 @@ "illuminate/support": "^10.0|^11.0|^12.0", "illuminate/view": "^10.0|^11.0|^12.0", "laravel/prompts": "^0.1|^0.2|^0.3", - "livewire/livewire": "^3.7.4|^4.0", + "livewire/livewire": "^3.5.19", "php": "^8.1", "symfony/console": "^6.0|^7.0" }, - "conflict": { - "livewire/blaze": "<1.0.0-beta.2" - }, "type": "library", "extra": { "laravel": { @@ -2578,22 +2065,22 @@ ], "support": { "issues": "https://github.com/livewire/flux/issues", - "source": "https://github.com/livewire/flux/tree/v2.12.1" + "source": "https://github.com/livewire/flux/tree/v2.1.1" }, - "time": "2026-02-17T21:12:27+00:00" + "time": "2025-03-20T21:34:31+00:00" }, { "name": "livewire/livewire", - "version": "v4.1.4", + "version": "v3.6.2", "source": { "type": "git", "url": "https://github.com/livewire/livewire.git", - "reference": "4697085e02a1f5f11410a1b5962400e3539f8843" + "reference": "8f8914731f5eb43b6bb145d87c8d5a9edfc89313" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/livewire/livewire/zipball/4697085e02a1f5f11410a1b5962400e3539f8843", - "reference": "4697085e02a1f5f11410a1b5962400e3539f8843", + "url": "https://api.github.com/repos/livewire/livewire/zipball/8f8914731f5eb43b6bb145d87c8d5a9edfc89313", + "reference": "8f8914731f5eb43b6bb145d87c8d5a9edfc89313", "shasum": "" }, "require": { @@ -2648,7 +2135,7 @@ "description": "A front-end framework for Laravel.", "support": { "issues": "https://github.com/livewire/livewire/issues", - "source": "https://github.com/livewire/livewire/tree/v4.1.4" + "source": "https://github.com/livewire/livewire/tree/v3.6.2" }, "funding": [ { @@ -2656,31 +2143,32 @@ "type": "github" } ], - "time": "2026-02-09T22:59:54+00:00" + "time": "2025-03-12T20:24:15+00:00" }, { "name": "livewire/volt", - "version": "v1.10.2", + "version": "v1.7.0", "source": { "type": "git", "url": "https://github.com/livewire/volt.git", - "reference": "4aa52b9adbdcb0f58af9cdb1ebabfbcbee32fac9" + "reference": "94091094aa745c8636f9c7bed1e2da2d2a3f32b3" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/livewire/volt/zipball/4aa52b9adbdcb0f58af9cdb1ebabfbcbee32fac9", - "reference": "4aa52b9adbdcb0f58af9cdb1ebabfbcbee32fac9", + "url": "https://api.github.com/repos/livewire/volt/zipball/94091094aa745c8636f9c7bed1e2da2d2a3f32b3", + "reference": "94091094aa745c8636f9c7bed1e2da2d2a3f32b3", "shasum": "" }, "require": { "laravel/framework": "^10.38.2|^11.0|^12.0", - "livewire/livewire": "^3.6.1|^4.0", + "livewire/livewire": "^3.6.1", "php": "^8.1" }, "require-dev": { "laravel/folio": "^1.1", - "orchestra/testbench": "^8.36|^9.15|^10.8", - "pestphp/pest": "^2.9.5|^3.0|^4.0", + "mockery/mockery": "^1.6", + "orchestra/testbench": "^8.15.0|^9.0|^10.0", + "pestphp/pest": "^2.9.5|^3.0", "phpstan/phpstan": "^1.10" }, "type": "library", @@ -2727,20 +2215,20 @@ "issues": "https://github.com/livewire/volt/issues", "source": "https://github.com/livewire/volt" }, - "time": "2026-01-28T03:03:30+00:00" + "time": "2025-03-05T15:20:55+00:00" }, { "name": "monolog/monolog", - "version": "3.10.0", + "version": "3.9.0", "source": { "type": "git", "url": "https://github.com/Seldaek/monolog.git", - "reference": "b321dd6749f0bf7189444158a3ce785cc16d69b0" + "reference": "10d85740180ecba7896c87e06a166e0c95a0e3b6" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Seldaek/monolog/zipball/b321dd6749f0bf7189444158a3ce785cc16d69b0", - "reference": "b321dd6749f0bf7189444158a3ce785cc16d69b0", + "url": "https://api.github.com/repos/Seldaek/monolog/zipball/10d85740180ecba7896c87e06a166e0c95a0e3b6", + "reference": "10d85740180ecba7896c87e06a166e0c95a0e3b6", "shasum": "" }, "require": { @@ -2758,7 +2246,7 @@ "graylog2/gelf-php": "^1.4.2 || ^2.0", "guzzlehttp/guzzle": "^7.4.5", "guzzlehttp/psr7": "^2.2", - "mongodb/mongodb": "^1.8 || ^2.0", + "mongodb/mongodb": "^1.8", "php-amqplib/php-amqplib": "~2.4 || ^3", "php-console/php-console": "^3.1.8", "phpstan/phpstan": "^2", @@ -2818,7 +2306,7 @@ ], "support": { "issues": "https://github.com/Seldaek/monolog/issues", - "source": "https://github.com/Seldaek/monolog/tree/3.10.0" + "source": "https://github.com/Seldaek/monolog/tree/3.9.0" }, "funding": [ { @@ -2830,20 +2318,20 @@ "type": "tidelift" } ], - "time": "2026-01-02T08:56:05+00:00" + "time": "2025-03-24T10:02:05+00:00" }, { "name": "nesbot/carbon", - "version": "3.11.1", + "version": "3.8.6", "source": { "type": "git", "url": "https://github.com/CarbonPHP/carbon.git", - "reference": "f438fcc98f92babee98381d399c65336f3a3827f" + "reference": "ff2f20cf83bd4d503720632ce8a426dc747bf7fd" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/CarbonPHP/carbon/zipball/f438fcc98f92babee98381d399c65336f3a3827f", - "reference": "f438fcc98f92babee98381d399c65336f3a3827f", + "url": "https://api.github.com/repos/CarbonPHP/carbon/zipball/ff2f20cf83bd4d503720632ce8a426dc747bf7fd", + "reference": "ff2f20cf83bd4d503720632ce8a426dc747bf7fd", "shasum": "" }, "require": { @@ -2851,9 +2339,9 @@ "ext-json": "*", "php": "^8.1", "psr/clock": "^1.0", - "symfony/clock": "^6.3.12 || ^7.0 || ^8.0", + "symfony/clock": "^6.3 || ^7.0", "symfony/polyfill-mbstring": "^1.0", - "symfony/translation": "^4.4.18 || ^5.2.1 || ^6.0 || ^7.0 || ^8.0" + "symfony/translation": "^4.4.18 || ^5.2.1|| ^6.0 || ^7.0" }, "provide": { "psr/clock-implementation": "1.0" @@ -2861,13 +2349,14 @@ "require-dev": { "doctrine/dbal": "^3.6.3 || ^4.0", "doctrine/orm": "^2.15.2 || ^3.0", - "friendsofphp/php-cs-fixer": "^v3.87.1", + "friendsofphp/php-cs-fixer": "^3.57.2", "kylekatarnls/multi-tester": "^2.5.3", + "ondrejmirtes/better-reflection": "^6.25.0.4", "phpmd/phpmd": "^2.15.0", - "phpstan/extension-installer": "^1.4.3", - "phpstan/phpstan": "^2.1.22", - "phpunit/phpunit": "^10.5.53", - "squizlabs/php_codesniffer": "^3.13.4 || ^4.0.0" + "phpstan/extension-installer": "^1.3.1", + "phpstan/phpstan": "^1.11.2", + "phpunit/phpunit": "^10.5.20", + "squizlabs/php_codesniffer": "^3.9.0" }, "bin": [ "bin/carbon" @@ -2910,14 +2399,14 @@ } ], "description": "An API extension for DateTime that supports 281 different languages.", - "homepage": "https://carbonphp.github.io/carbon/", + "homepage": "https://carbon.nesbot.com", "keywords": [ "date", "datetime", "time" ], "support": { - "docs": "https://carbonphp.github.io/carbon/guide/getting-started/introduction.html", + "docs": "https://carbon.nesbot.com/docs", "issues": "https://github.com/CarbonPHP/carbon/issues", "source": "https://github.com/CarbonPHP/carbon" }, @@ -2935,29 +2424,29 @@ "type": "tidelift" } ], - "time": "2026-01-29T09:26:29+00:00" + "time": "2025-02-20T17:33:38+00:00" }, { "name": "nette/schema", - "version": "v1.3.4", + "version": "v1.3.2", "source": { "type": "git", "url": "https://github.com/nette/schema.git", - "reference": "086497a2f34b82fede9b5a41cc8e131d087cd8f7" + "reference": "da801d52f0354f70a638673c4a0f04e16529431d" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nette/schema/zipball/086497a2f34b82fede9b5a41cc8e131d087cd8f7", - "reference": "086497a2f34b82fede9b5a41cc8e131d087cd8f7", + "url": "https://api.github.com/repos/nette/schema/zipball/da801d52f0354f70a638673c4a0f04e16529431d", + "reference": "da801d52f0354f70a638673c4a0f04e16529431d", "shasum": "" }, "require": { "nette/utils": "^4.0", - "php": "8.1 - 8.5" + "php": "8.1 - 8.4" }, "require-dev": { - "nette/tester": "^2.6", - "phpstan/phpstan": "^2.0@stable", + "nette/tester": "^2.5.2", + "phpstan/phpstan-nette": "^1.0", "tracy/tracy": "^2.8" }, "type": "library", @@ -2967,9 +2456,6 @@ } }, "autoload": { - "psr-4": { - "Nette\\": "src" - }, "classmap": [ "src/" ] @@ -2998,37 +2484,35 @@ ], "support": { "issues": "https://github.com/nette/schema/issues", - "source": "https://github.com/nette/schema/tree/v1.3.4" + "source": "https://github.com/nette/schema/tree/v1.3.2" }, - "time": "2026-02-08T02:54:00+00:00" + "time": "2024-10-06T23:10:23+00:00" }, { "name": "nette/utils", - "version": "v4.1.3", + "version": "v4.0.6", "source": { "type": "git", "url": "https://github.com/nette/utils.git", - "reference": "bb3ea637e3d131d72acc033cfc2746ee893349fe" + "reference": "ce708655043c7050eb050df361c5e313cf708309" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nette/utils/zipball/bb3ea637e3d131d72acc033cfc2746ee893349fe", - "reference": "bb3ea637e3d131d72acc033cfc2746ee893349fe", + "url": "https://api.github.com/repos/nette/utils/zipball/ce708655043c7050eb050df361c5e313cf708309", + "reference": "ce708655043c7050eb050df361c5e313cf708309", "shasum": "" }, "require": { - "php": "8.2 - 8.5" + "php": "8.0 - 8.4" }, "conflict": { "nette/finder": "<3", "nette/schema": "<1.2.2" }, "require-dev": { - "jetbrains/phpstorm-attributes": "^1.2", - "nette/phpstan-rules": "^1.0", + "jetbrains/phpstorm-attributes": "dev-master", "nette/tester": "^2.5", - "phpstan/extension-installer": "^1.4@stable", - "phpstan/phpstan": "^2.1@stable", + "phpstan/phpstan": "^1.0", "tracy/tracy": "^2.9" }, "suggest": { @@ -3042,13 +2526,10 @@ "type": "library", "extra": { "branch-alias": { - "dev-master": "4.1-dev" + "dev-master": "4.0-dev" } }, "autoload": { - "psr-4": { - "Nette\\": "src" - }, "classmap": [ "src/" ] @@ -3089,22 +2570,22 @@ ], "support": { "issues": "https://github.com/nette/utils/issues", - "source": "https://github.com/nette/utils/tree/v4.1.3" + "source": "https://github.com/nette/utils/tree/v4.0.6" }, - "time": "2026-02-13T03:05:33+00:00" + "time": "2025-03-30T21:06:30+00:00" }, { "name": "nikic/php-parser", - "version": "v5.7.0", + "version": "v5.4.0", "source": { "type": "git", "url": "https://github.com/nikic/PHP-Parser.git", - "reference": "dca41cd15c2ac9d055ad70dbfd011130757d1f82" + "reference": "447a020a1f875a434d62f2a401f53b82a396e494" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/dca41cd15c2ac9d055ad70dbfd011130757d1f82", - "reference": "dca41cd15c2ac9d055ad70dbfd011130757d1f82", + "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/447a020a1f875a434d62f2a401f53b82a396e494", + "reference": "447a020a1f875a434d62f2a401f53b82a396e494", "shasum": "" }, "require": { @@ -3123,7 +2604,7 @@ "type": "library", "extra": { "branch-alias": { - "dev-master": "5.x-dev" + "dev-master": "5.0-dev" } }, "autoload": { @@ -3147,37 +2628,37 @@ ], "support": { "issues": "https://github.com/nikic/PHP-Parser/issues", - "source": "https://github.com/nikic/PHP-Parser/tree/v5.7.0" + "source": "https://github.com/nikic/PHP-Parser/tree/v5.4.0" }, - "time": "2025-12-06T11:56:16+00:00" + "time": "2024-12-30T11:07:19+00:00" }, { "name": "nunomaduro/termwind", - "version": "v2.4.0", + "version": "v2.3.0", "source": { "type": "git", "url": "https://github.com/nunomaduro/termwind.git", - "reference": "712a31b768f5daea284c2169a7d227031001b9a8" + "reference": "52915afe6a1044e8b9cee1bcff836fb63acf9cda" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/712a31b768f5daea284c2169a7d227031001b9a8", - "reference": "712a31b768f5daea284c2169a7d227031001b9a8", + "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/52915afe6a1044e8b9cee1bcff836fb63acf9cda", + "reference": "52915afe6a1044e8b9cee1bcff836fb63acf9cda", "shasum": "" }, "require": { "ext-mbstring": "*", "php": "^8.2", - "symfony/console": "^7.4.4 || ^8.0.4" + "symfony/console": "^7.1.8" }, "require-dev": { - "illuminate/console": "^11.47.0", - "laravel/pint": "^1.27.1", + "illuminate/console": "^11.33.2", + "laravel/pint": "^1.18.2", "mockery/mockery": "^1.6.12", - "pestphp/pest": "^2.36.0 || ^3.8.4 || ^4.3.2", - "phpstan/phpstan": "^1.12.32", - "phpstan/phpstan-strict-rules": "^1.6.2", - "symfony/var-dumper": "^7.3.5 || ^8.0.4", + "pestphp/pest": "^2.36.0", + "phpstan/phpstan": "^1.12.11", + "phpstan/phpstan-strict-rules": "^1.6.1", + "symfony/var-dumper": "^7.1.8", "thecodingmachine/phpstan-strict-rules": "^1.0.0" }, "type": "library", @@ -3209,7 +2690,7 @@ "email": "enunomaduro@gmail.com" } ], - "description": "It's like Tailwind CSS, but for the console.", + "description": "Its like Tailwind CSS, but for the console.", "keywords": [ "cli", "console", @@ -3220,7 +2701,7 @@ ], "support": { "issues": "https://github.com/nunomaduro/termwind/issues", - "source": "https://github.com/nunomaduro/termwind/tree/v2.4.0" + "source": "https://github.com/nunomaduro/termwind/tree/v2.3.0" }, "funding": [ { @@ -3236,218 +2717,20 @@ "type": "github" } ], - "time": "2026-02-16T23:10:27+00:00" - }, - { - "name": "paragonie/constant_time_encoding", - "version": "v3.1.3", - "source": { - "type": "git", - "url": "https://github.com/paragonie/constant_time_encoding.git", - "reference": "d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/paragonie/constant_time_encoding/zipball/d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77", - "reference": "d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77", - "shasum": "" - }, - "require": { - "php": "^8" - }, - "require-dev": { - "infection/infection": "^0", - "nikic/php-fuzzer": "^0", - "phpunit/phpunit": "^9|^10|^11", - "vimeo/psalm": "^4|^5|^6" - }, - "type": "library", - "autoload": { - "psr-4": { - "ParagonIE\\ConstantTime\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Paragon Initiative Enterprises", - "email": "security@paragonie.com", - "homepage": "https://paragonie.com", - "role": "Maintainer" - }, - { - "name": "Steve 'Sc00bz' Thomas", - "email": "steve@tobtu.com", - "homepage": "https://www.tobtu.com", - "role": "Original Developer" - } - ], - "description": "Constant-time Implementations of RFC 4648 Encoding (Base-64, Base-32, Base-16)", - "keywords": [ - "base16", - "base32", - "base32_decode", - "base32_encode", - "base64", - "base64_decode", - "base64_encode", - "bin2hex", - "encoding", - "hex", - "hex2bin", - "rfc4648" - ], - "support": { - "email": "info@paragonie.com", - "issues": "https://github.com/paragonie/constant_time_encoding/issues", - "source": "https://github.com/paragonie/constant_time_encoding" - }, - "time": "2025-09-24T15:06:41+00:00" - }, - { - "name": "paragonie/random_compat", - "version": "v9.99.100", - "source": { - "type": "git", - "url": "https://github.com/paragonie/random_compat.git", - "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/paragonie/random_compat/zipball/996434e5492cb4c3edcb9168db6fbb1359ef965a", - "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a", - "shasum": "" - }, - "require": { - "php": ">= 7" - }, - "require-dev": { - "phpunit/phpunit": "4.*|5.*", - "vimeo/psalm": "^1" - }, - "suggest": { - "ext-libsodium": "Provides a modern crypto API that can be used to generate random bytes." - }, - "type": "library", - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Paragon Initiative Enterprises", - "email": "security@paragonie.com", - "homepage": "https://paragonie.com" - } - ], - "description": "PHP 5.x polyfill for random_bytes() and random_int() from PHP 7", - "keywords": [ - "csprng", - "polyfill", - "pseudorandom", - "random" - ], - "support": { - "email": "info@paragonie.com", - "issues": "https://github.com/paragonie/random_compat/issues", - "source": "https://github.com/paragonie/random_compat" - }, - "time": "2020-10-15T08:29:30+00:00" - }, - { - "name": "php-http/discovery", - "version": "1.20.0", - "source": { - "type": "git", - "url": "https://github.com/php-http/discovery.git", - "reference": "82fe4c73ef3363caed49ff8dd1539ba06044910d" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/php-http/discovery/zipball/82fe4c73ef3363caed49ff8dd1539ba06044910d", - "reference": "82fe4c73ef3363caed49ff8dd1539ba06044910d", - "shasum": "" - }, - "require": { - "composer-plugin-api": "^1.0|^2.0", - "php": "^7.1 || ^8.0" - }, - "conflict": { - "nyholm/psr7": "<1.0", - "zendframework/zend-diactoros": "*" - }, - "provide": { - "php-http/async-client-implementation": "*", - "php-http/client-implementation": "*", - "psr/http-client-implementation": "*", - "psr/http-factory-implementation": "*", - "psr/http-message-implementation": "*" - }, - "require-dev": { - "composer/composer": "^1.0.2|^2.0", - "graham-campbell/phpspec-skip-example-extension": "^5.0", - "php-http/httplug": "^1.0 || ^2.0", - "php-http/message-factory": "^1.0", - "phpspec/phpspec": "^5.1 || ^6.1 || ^7.3", - "sebastian/comparator": "^3.0.5 || ^4.0.8", - "symfony/phpunit-bridge": "^6.4.4 || ^7.0.1" - }, - "type": "composer-plugin", - "extra": { - "class": "Http\\Discovery\\Composer\\Plugin", - "plugin-optional": true - }, - "autoload": { - "psr-4": { - "Http\\Discovery\\": "src/" - }, - "exclude-from-classmap": [ - "src/Composer/Plugin.php" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Márk Sági-Kazár", - "email": "mark.sagikazar@gmail.com" - } - ], - "description": "Finds and installs PSR-7, PSR-17, PSR-18 and HTTPlug implementations", - "homepage": "http://php-http.org", - "keywords": [ - "adapter", - "client", - "discovery", - "factory", - "http", - "message", - "psr17", - "psr7" - ], - "support": { - "issues": "https://github.com/php-http/discovery/issues", - "source": "https://github.com/php-http/discovery/tree/1.20.0" - }, - "time": "2024-10-02T11:20:13+00:00" + "time": "2024-11-21T10:39:51+00:00" }, { "name": "phpoption/phpoption", - "version": "1.9.5", + "version": "1.9.3", "source": { "type": "git", "url": "https://github.com/schmittjoh/php-option.git", - "reference": "75365b91986c2405cf5e1e012c5595cd487a98be" + "reference": "e3fac8b24f56113f7cb96af14958c0dd16330f54" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/schmittjoh/php-option/zipball/75365b91986c2405cf5e1e012c5595cd487a98be", - "reference": "75365b91986c2405cf5e1e012c5595cd487a98be", + "url": "https://api.github.com/repos/schmittjoh/php-option/zipball/e3fac8b24f56113f7cb96af14958c0dd16330f54", + "reference": "e3fac8b24f56113f7cb96af14958c0dd16330f54", "shasum": "" }, "require": { @@ -3455,7 +2738,7 @@ }, "require-dev": { "bamarni/composer-bin-plugin": "^1.8.2", - "phpunit/phpunit": "^8.5.44 || ^9.6.25 || ^10.5.53 || ^11.5.34" + "phpunit/phpunit": "^8.5.39 || ^9.6.20 || ^10.5.28" }, "type": "library", "extra": { @@ -3497,7 +2780,7 @@ ], "support": { "issues": "https://github.com/schmittjoh/php-option/issues", - "source": "https://github.com/schmittjoh/php-option/tree/1.9.5" + "source": "https://github.com/schmittjoh/php-option/tree/1.9.3" }, "funding": [ { @@ -3509,117 +2792,7 @@ "type": "tidelift" } ], - "time": "2025-12-27T19:41:33+00:00" - }, - { - "name": "phpseclib/phpseclib", - "version": "3.0.49", - "source": { - "type": "git", - "url": "https://github.com/phpseclib/phpseclib.git", - "reference": "6233a1e12584754e6b5daa69fe1289b47775c1b9" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/phpseclib/phpseclib/zipball/6233a1e12584754e6b5daa69fe1289b47775c1b9", - "reference": "6233a1e12584754e6b5daa69fe1289b47775c1b9", - "shasum": "" - }, - "require": { - "paragonie/constant_time_encoding": "^1|^2|^3", - "paragonie/random_compat": "^1.4|^2.0|^9.99.99", - "php": ">=5.6.1" - }, - "require-dev": { - "phpunit/phpunit": "*" - }, - "suggest": { - "ext-dom": "Install the DOM extension to load XML formatted public keys.", - "ext-gmp": "Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.", - "ext-libsodium": "SSH2/SFTP can make use of some algorithms provided by the libsodium-php extension.", - "ext-mcrypt": "Install the Mcrypt extension in order to speed up a few other cryptographic operations.", - "ext-openssl": "Install the OpenSSL extension in order to speed up a wide variety of cryptographic operations." - }, - "type": "library", - "autoload": { - "files": [ - "phpseclib/bootstrap.php" - ], - "psr-4": { - "phpseclib3\\": "phpseclib/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Jim Wigginton", - "email": "terrafrost@php.net", - "role": "Lead Developer" - }, - { - "name": "Patrick Monnerat", - "email": "pm@datasphere.ch", - "role": "Developer" - }, - { - "name": "Andreas Fischer", - "email": "bantu@phpbb.com", - "role": "Developer" - }, - { - "name": "Hans-Jürgen Petrich", - "email": "petrich@tronic-media.com", - "role": "Developer" - }, - { - "name": "Graham Campbell", - "email": "graham@alt-three.com", - "role": "Developer" - } - ], - "description": "PHP Secure Communications Library - Pure-PHP implementations of RSA, AES, SSH2, SFTP, X.509 etc.", - "homepage": "http://phpseclib.sourceforge.net", - "keywords": [ - "BigInteger", - "aes", - "asn.1", - "asn1", - "blowfish", - "crypto", - "cryptography", - "encryption", - "rsa", - "security", - "sftp", - "signature", - "signing", - "ssh", - "twofish", - "x.509", - "x509" - ], - "support": { - "issues": "https://github.com/phpseclib/phpseclib/issues", - "source": "https://github.com/phpseclib/phpseclib/tree/3.0.49" - }, - "funding": [ - { - "url": "https://github.com/terrafrost", - "type": "github" - }, - { - "url": "https://www.patreon.com/phpseclib", - "type": "patreon" - }, - { - "url": "https://tidelift.com/funding/github/packagist/phpseclib/phpseclib", - "type": "tidelift" - } - ], - "time": "2026-01-27T09:17:28+00:00" + "time": "2024-07-20T21:41:07+00:00" }, { "name": "psr/clock", @@ -3932,119 +3105,6 @@ }, "time": "2023-04-04T09:54:51+00:00" }, - { - "name": "psr/http-server-handler", - "version": "1.0.2", - "source": { - "type": "git", - "url": "https://github.com/php-fig/http-server-handler.git", - "reference": "84c4fb66179be4caaf8e97bd239203245302e7d4" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/php-fig/http-server-handler/zipball/84c4fb66179be4caaf8e97bd239203245302e7d4", - "reference": "84c4fb66179be4caaf8e97bd239203245302e7d4", - "shasum": "" - }, - "require": { - "php": ">=7.0", - "psr/http-message": "^1.0 || ^2.0" - }, - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "1.0.x-dev" - } - }, - "autoload": { - "psr-4": { - "Psr\\Http\\Server\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "PHP-FIG", - "homepage": "https://www.php-fig.org/" - } - ], - "description": "Common interface for HTTP server-side request handler", - "keywords": [ - "handler", - "http", - "http-interop", - "psr", - "psr-15", - "psr-7", - "request", - "response", - "server" - ], - "support": { - "source": "https://github.com/php-fig/http-server-handler/tree/1.0.2" - }, - "time": "2023-04-10T20:06:20+00:00" - }, - { - "name": "psr/http-server-middleware", - "version": "1.0.2", - "source": { - "type": "git", - "url": "https://github.com/php-fig/http-server-middleware.git", - "reference": "c1481f747daaa6a0782775cd6a8c26a1bf4a3829" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/php-fig/http-server-middleware/zipball/c1481f747daaa6a0782775cd6a8c26a1bf4a3829", - "reference": "c1481f747daaa6a0782775cd6a8c26a1bf4a3829", - "shasum": "" - }, - "require": { - "php": ">=7.0", - "psr/http-message": "^1.0 || ^2.0", - "psr/http-server-handler": "^1.0" - }, - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "1.0.x-dev" - } - }, - "autoload": { - "psr-4": { - "Psr\\Http\\Server\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "PHP-FIG", - "homepage": "https://www.php-fig.org/" - } - ], - "description": "Common interface for HTTP server-side middleware", - "keywords": [ - "http", - "http-interop", - "middleware", - "psr", - "psr-15", - "psr-7", - "request", - "response" - ], - "support": { - "issues": "https://github.com/php-fig/http-server-middleware/issues", - "source": "https://github.com/php-fig/http-server-middleware/tree/1.0.2" - }, - "time": "2023-04-11T06:14:47+00:00" - }, { "name": "psr/log", "version": "3.0.2", @@ -4148,16 +3208,16 @@ }, { "name": "psy/psysh", - "version": "v0.12.20", + "version": "v0.12.8", "source": { "type": "git", "url": "https://github.com/bobthecow/psysh.git", - "reference": "19678eb6b952a03b8a1d96ecee9edba518bb0373" + "reference": "85057ceedee50c49d4f6ecaff73ee96adb3b3625" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/bobthecow/psysh/zipball/19678eb6b952a03b8a1d96ecee9edba518bb0373", - "reference": "19678eb6b952a03b8a1d96ecee9edba518bb0373", + "url": "https://api.github.com/repos/bobthecow/psysh/zipball/85057ceedee50c49d4f6ecaff73ee96adb3b3625", + "reference": "85057ceedee50c49d4f6ecaff73ee96adb3b3625", "shasum": "" }, "require": { @@ -4165,19 +3225,18 @@ "ext-tokenizer": "*", "nikic/php-parser": "^5.0 || ^4.0", "php": "^8.0 || ^7.4", - "symfony/console": "^8.0 || ^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4", - "symfony/var-dumper": "^8.0 || ^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4" + "symfony/console": "^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4", + "symfony/var-dumper": "^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4" }, "conflict": { "symfony/console": "4.4.37 || 5.3.14 || 5.3.15 || 5.4.3 || 5.4.4 || 6.0.3 || 6.0.4" }, "require-dev": { - "bamarni/composer-bin-plugin": "^1.2", - "composer/class-map-generator": "^1.6" + "bamarni/composer-bin-plugin": "^1.2" }, "suggest": { - "composer/class-map-generator": "Improved tab completion performance with better class discovery.", "ext-pcntl": "Enabling the PCNTL extension makes PsySH a lot happier :)", + "ext-pdo-sqlite": "The doc command requires SQLite to work.", "ext-posix": "If you have PCNTL, you'll want the POSIX extension as well." }, "bin": [ @@ -4208,11 +3267,12 @@ "authors": [ { "name": "Justin Hileman", - "email": "justin@justinhileman.info" + "email": "justin@justinhileman.info", + "homepage": "http://justinhileman.com" } ], "description": "An interactive shell for modern PHP.", - "homepage": "https://psysh.org", + "homepage": "http://psysh.org", "keywords": [ "REPL", "console", @@ -4221,9 +3281,9 @@ ], "support": { "issues": "https://github.com/bobthecow/psysh/issues", - "source": "https://github.com/bobthecow/psysh/tree/v0.12.20" + "source": "https://github.com/bobthecow/psysh/tree/v0.12.8" }, - "time": "2026-02-11T15:05:28+00:00" + "time": "2025-03-16T03:05:19+00:00" }, { "name": "ralouphie/getallheaders", @@ -4347,20 +3407,21 @@ }, { "name": "ramsey/uuid", - "version": "4.9.2", + "version": "4.7.6", "source": { "type": "git", "url": "https://github.com/ramsey/uuid.git", - "reference": "8429c78ca35a09f27565311b98101e2826affde0" + "reference": "91039bc1faa45ba123c4328958e620d382ec7088" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/ramsey/uuid/zipball/8429c78ca35a09f27565311b98101e2826affde0", - "reference": "8429c78ca35a09f27565311b98101e2826affde0", + "url": "https://api.github.com/repos/ramsey/uuid/zipball/91039bc1faa45ba123c4328958e620d382ec7088", + "reference": "91039bc1faa45ba123c4328958e620d382ec7088", "shasum": "" }, "require": { - "brick/math": "^0.8.16 || ^0.9 || ^0.10 || ^0.11 || ^0.12 || ^0.13 || ^0.14", + "brick/math": "^0.8.8 || ^0.9 || ^0.10 || ^0.11 || ^0.12", + "ext-json": "*", "php": "^8.0", "ramsey/collection": "^1.2 || ^2.0" }, @@ -4368,23 +3429,26 @@ "rhumsaa/uuid": "self.version" }, "require-dev": { - "captainhook/captainhook": "^5.25", + "captainhook/captainhook": "^5.10", "captainhook/plugin-composer": "^5.3", - "dealerdirect/phpcodesniffer-composer-installer": "^1.0", - "ergebnis/composer-normalize": "^2.47", - "mockery/mockery": "^1.6", + "dealerdirect/phpcodesniffer-composer-installer": "^0.7.0", + "doctrine/annotations": "^1.8", + "ergebnis/composer-normalize": "^2.15", + "mockery/mockery": "^1.3", "paragonie/random-lib": "^2", - "php-mock/php-mock": "^2.6", - "php-mock/php-mock-mockery": "^1.5", - "php-parallel-lint/php-parallel-lint": "^1.4.0", - "phpbench/phpbench": "^1.2.14", - "phpstan/extension-installer": "^1.4", - "phpstan/phpstan": "^2.1", - "phpstan/phpstan-mockery": "^2.0", - "phpstan/phpstan-phpunit": "^2.0", - "phpunit/phpunit": "^9.6", - "slevomat/coding-standard": "^8.18", - "squizlabs/php_codesniffer": "^3.13" + "php-mock/php-mock": "^2.2", + "php-mock/php-mock-mockery": "^1.3", + "php-parallel-lint/php-parallel-lint": "^1.1", + "phpbench/phpbench": "^1.0", + "phpstan/extension-installer": "^1.1", + "phpstan/phpstan": "^1.8", + "phpstan/phpstan-mockery": "^1.1", + "phpstan/phpstan-phpunit": "^1.1", + "phpunit/phpunit": "^8.5 || ^9", + "ramsey/composer-repl": "^1.4", + "slevomat/coding-standard": "^8.4", + "squizlabs/php_codesniffer": "^3.5", + "vimeo/psalm": "^4.9" }, "suggest": { "ext-bcmath": "Enables faster math with arbitrary-precision integers using BCMath.", @@ -4419,27 +3483,38 @@ ], "support": { "issues": "https://github.com/ramsey/uuid/issues", - "source": "https://github.com/ramsey/uuid/tree/4.9.2" + "source": "https://github.com/ramsey/uuid/tree/4.7.6" }, - "time": "2025-12-14T04:43:48+00:00" + "funding": [ + { + "url": "https://github.com/ramsey", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/ramsey/uuid", + "type": "tidelift" + } + ], + "time": "2024-04-27T21:32:50+00:00" }, { "name": "symfony/clock", - "version": "v8.0.0", + "version": "v7.2.0", "source": { "type": "git", "url": "https://github.com/symfony/clock.git", - "reference": "832119f9b8dbc6c8e6f65f30c5969eca1e88764f" + "reference": "b81435fbd6648ea425d1ee96a2d8e68f4ceacd24" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/clock/zipball/832119f9b8dbc6c8e6f65f30c5969eca1e88764f", - "reference": "832119f9b8dbc6c8e6f65f30c5969eca1e88764f", + "url": "https://api.github.com/repos/symfony/clock/zipball/b81435fbd6648ea425d1ee96a2d8e68f4ceacd24", + "reference": "b81435fbd6648ea425d1ee96a2d8e68f4ceacd24", "shasum": "" }, "require": { - "php": ">=8.4", - "psr/clock": "^1.0" + "php": ">=8.2", + "psr/clock": "^1.0", + "symfony/polyfill-php83": "^1.28" }, "provide": { "psr/clock-implementation": "1.0" @@ -4478,7 +3553,7 @@ "time" ], "support": { - "source": "https://github.com/symfony/clock/tree/v8.0.0" + "source": "https://github.com/symfony/clock/tree/v7.2.0" }, "funding": [ { @@ -4489,37 +3564,32 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-11-12T15:46:48+00:00" + "time": "2024-09-25T14:21:43+00:00" }, { "name": "symfony/console", - "version": "v7.4.4", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/console.git", - "reference": "41e38717ac1dd7a46b6bda7d6a82af2d98a78894" + "reference": "e51498ea18570c062e7df29d05a7003585b19b88" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/console/zipball/41e38717ac1dd7a46b6bda7d6a82af2d98a78894", - "reference": "41e38717ac1dd7a46b6bda7d6a82af2d98a78894", + "url": "https://api.github.com/repos/symfony/console/zipball/e51498ea18570c062e7df29d05a7003585b19b88", + "reference": "e51498ea18570c062e7df29d05a7003585b19b88", "shasum": "" }, "require": { "php": ">=8.2", - "symfony/deprecation-contracts": "^2.5|^3", "symfony/polyfill-mbstring": "~1.0", "symfony/service-contracts": "^2.5|^3", - "symfony/string": "^7.2|^8.0" + "symfony/string": "^6.4|^7.0" }, "conflict": { "symfony/dependency-injection": "<6.4", @@ -4533,16 +3603,16 @@ }, "require-dev": { "psr/log": "^1|^2|^3", - "symfony/config": "^6.4|^7.0|^8.0", - "symfony/dependency-injection": "^6.4|^7.0|^8.0", - "symfony/event-dispatcher": "^6.4|^7.0|^8.0", - "symfony/http-foundation": "^6.4|^7.0|^8.0", - "symfony/http-kernel": "^6.4|^7.0|^8.0", - "symfony/lock": "^6.4|^7.0|^8.0", - "symfony/messenger": "^6.4|^7.0|^8.0", - "symfony/process": "^6.4|^7.0|^8.0", - "symfony/stopwatch": "^6.4|^7.0|^8.0", - "symfony/var-dumper": "^6.4|^7.0|^8.0" + "symfony/config": "^6.4|^7.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/event-dispatcher": "^6.4|^7.0", + "symfony/http-foundation": "^6.4|^7.0", + "symfony/http-kernel": "^6.4|^7.0", + "symfony/lock": "^6.4|^7.0", + "symfony/messenger": "^6.4|^7.0", + "symfony/process": "^6.4|^7.0", + "symfony/stopwatch": "^6.4|^7.0", + "symfony/var-dumper": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -4576,7 +3646,7 @@ "terminal" ], "support": { - "source": "https://github.com/symfony/console/tree/v7.4.4" + "source": "https://github.com/symfony/console/tree/v7.2.5" }, "funding": [ { @@ -4587,33 +3657,29 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-13T11:36:38+00:00" + "time": "2025-03-12T08:11:12+00:00" }, { "name": "symfony/css-selector", - "version": "v8.0.0", + "version": "v7.2.0", "source": { "type": "git", "url": "https://github.com/symfony/css-selector.git", - "reference": "6225bd458c53ecdee056214cb4a2ffaf58bd592b" + "reference": "601a5ce9aaad7bf10797e3663faefce9e26c24e2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/css-selector/zipball/6225bd458c53ecdee056214cb4a2ffaf58bd592b", - "reference": "6225bd458c53ecdee056214cb4a2ffaf58bd592b", + "url": "https://api.github.com/repos/symfony/css-selector/zipball/601a5ce9aaad7bf10797e3663faefce9e26c24e2", + "reference": "601a5ce9aaad7bf10797e3663faefce9e26c24e2", "shasum": "" }, "require": { - "php": ">=8.4" + "php": ">=8.2" }, "type": "library", "autoload": { @@ -4645,7 +3711,7 @@ "description": "Converts CSS selectors to XPath expressions", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/css-selector/tree/v8.0.0" + "source": "https://github.com/symfony/css-selector/tree/v7.2.0" }, "funding": [ { @@ -4656,29 +3722,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-10-30T14:17:19+00:00" + "time": "2024-09-25T14:21:43+00:00" }, { "name": "symfony/deprecation-contracts", - "version": "v3.6.0", + "version": "v3.5.1", "source": { "type": "git", "url": "https://github.com/symfony/deprecation-contracts.git", - "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62" + "reference": "74c71c939a79f7d5bf3c1ce9f5ea37ba0114c6f6" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/63afe740e99a13ba87ec199bb07bbdee937a5b62", - "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62", + "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/74c71c939a79f7d5bf3c1ce9f5ea37ba0114c6f6", + "reference": "74c71c939a79f7d5bf3c1ce9f5ea37ba0114c6f6", "shasum": "" }, "require": { @@ -4691,7 +3753,7 @@ "name": "symfony/contracts" }, "branch-alias": { - "dev-main": "3.6-dev" + "dev-main": "3.5-dev" } }, "autoload": { @@ -4716,7 +3778,7 @@ "description": "A generic function and convention to trigger deprecation notices", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/deprecation-contracts/tree/v3.6.0" + "source": "https://github.com/symfony/deprecation-contracts/tree/v3.5.1" }, "funding": [ { @@ -4732,38 +3794,35 @@ "type": "tidelift" } ], - "time": "2024-09-25T14:21:43+00:00" + "time": "2024-09-25T14:20:29+00:00" }, { "name": "symfony/error-handler", - "version": "v7.4.4", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/error-handler.git", - "reference": "8da531f364ddfee53e36092a7eebbbd0b775f6b8" + "reference": "102be5e6a8e4f4f3eb3149bcbfa33a80d1ee374b" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/error-handler/zipball/8da531f364ddfee53e36092a7eebbbd0b775f6b8", - "reference": "8da531f364ddfee53e36092a7eebbbd0b775f6b8", + "url": "https://api.github.com/repos/symfony/error-handler/zipball/102be5e6a8e4f4f3eb3149bcbfa33a80d1ee374b", + "reference": "102be5e6a8e4f4f3eb3149bcbfa33a80d1ee374b", "shasum": "" }, "require": { "php": ">=8.2", "psr/log": "^1|^2|^3", - "symfony/polyfill-php85": "^1.32", - "symfony/var-dumper": "^6.4|^7.0|^8.0" + "symfony/var-dumper": "^6.4|^7.0" }, "conflict": { "symfony/deprecation-contracts": "<2.5", "symfony/http-kernel": "<6.4" }, "require-dev": { - "symfony/console": "^6.4|^7.0|^8.0", "symfony/deprecation-contracts": "^2.5|^3", - "symfony/http-kernel": "^6.4|^7.0|^8.0", - "symfony/serializer": "^6.4|^7.0|^8.0", - "symfony/webpack-encore-bundle": "^1.0|^2.0" + "symfony/http-kernel": "^6.4|^7.0", + "symfony/serializer": "^6.4|^7.0" }, "bin": [ "Resources/bin/patch-type-declarations" @@ -4794,7 +3853,7 @@ "description": "Provides tools to manage errors and ease debugging PHP code", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/error-handler/tree/v7.4.4" + "source": "https://github.com/symfony/error-handler/tree/v7.2.5" }, "funding": [ { @@ -4805,37 +3864,33 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-20T16:42:42+00:00" + "time": "2025-03-03T07:12:39+00:00" }, { "name": "symfony/event-dispatcher", - "version": "v8.0.4", + "version": "v7.2.0", "source": { "type": "git", "url": "https://github.com/symfony/event-dispatcher.git", - "reference": "99301401da182b6cfaa4700dbe9987bb75474b47" + "reference": "910c5db85a5356d0fea57680defec4e99eb9c8c1" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/99301401da182b6cfaa4700dbe9987bb75474b47", - "reference": "99301401da182b6cfaa4700dbe9987bb75474b47", + "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/910c5db85a5356d0fea57680defec4e99eb9c8c1", + "reference": "910c5db85a5356d0fea57680defec4e99eb9c8c1", "shasum": "" }, "require": { - "php": ">=8.4", + "php": ">=8.2", "symfony/event-dispatcher-contracts": "^2.5|^3" }, "conflict": { - "symfony/security-http": "<7.4", + "symfony/dependency-injection": "<6.4", "symfony/service-contracts": "<2.5" }, "provide": { @@ -4844,14 +3899,13 @@ }, "require-dev": { "psr/log": "^1|^2|^3", - "symfony/config": "^7.4|^8.0", - "symfony/dependency-injection": "^7.4|^8.0", - "symfony/error-handler": "^7.4|^8.0", - "symfony/expression-language": "^7.4|^8.0", - "symfony/framework-bundle": "^7.4|^8.0", - "symfony/http-foundation": "^7.4|^8.0", + "symfony/config": "^6.4|^7.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/error-handler": "^6.4|^7.0", + "symfony/expression-language": "^6.4|^7.0", + "symfony/http-foundation": "^6.4|^7.0", "symfony/service-contracts": "^2.5|^3", - "symfony/stopwatch": "^7.4|^8.0" + "symfony/stopwatch": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -4879,7 +3933,7 @@ "description": "Provides tools that allow your application components to communicate with each other by dispatching events and listening to them", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/event-dispatcher/tree/v8.0.4" + "source": "https://github.com/symfony/event-dispatcher/tree/v7.2.0" }, "funding": [ { @@ -4890,29 +3944,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-05T11:45:55+00:00" + "time": "2024-09-25T14:21:43+00:00" }, { "name": "symfony/event-dispatcher-contracts", - "version": "v3.6.0", + "version": "v3.5.1", "source": { "type": "git", "url": "https://github.com/symfony/event-dispatcher-contracts.git", - "reference": "59eb412e93815df44f05f342958efa9f46b1e586" + "reference": "7642f5e970b672283b7823222ae8ef8bbc160b9f" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/event-dispatcher-contracts/zipball/59eb412e93815df44f05f342958efa9f46b1e586", - "reference": "59eb412e93815df44f05f342958efa9f46b1e586", + "url": "https://api.github.com/repos/symfony/event-dispatcher-contracts/zipball/7642f5e970b672283b7823222ae8ef8bbc160b9f", + "reference": "7642f5e970b672283b7823222ae8ef8bbc160b9f", "shasum": "" }, "require": { @@ -4926,7 +3976,7 @@ "name": "symfony/contracts" }, "branch-alias": { - "dev-main": "3.6-dev" + "dev-main": "3.5-dev" } }, "autoload": { @@ -4959,7 +4009,7 @@ "standards" ], "support": { - "source": "https://github.com/symfony/event-dispatcher-contracts/tree/v3.6.0" + "source": "https://github.com/symfony/event-dispatcher-contracts/tree/v3.5.1" }, "funding": [ { @@ -4975,27 +4025,27 @@ "type": "tidelift" } ], - "time": "2024-09-25T14:21:43+00:00" + "time": "2024-09-25T14:20:29+00:00" }, { "name": "symfony/finder", - "version": "v7.4.5", + "version": "v7.2.2", "source": { "type": "git", "url": "https://github.com/symfony/finder.git", - "reference": "ad4daa7c38668dcb031e63bc99ea9bd42196a2cb" + "reference": "87a71856f2f56e4100373e92529eed3171695cfb" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/finder/zipball/ad4daa7c38668dcb031e63bc99ea9bd42196a2cb", - "reference": "ad4daa7c38668dcb031e63bc99ea9bd42196a2cb", + "url": "https://api.github.com/repos/symfony/finder/zipball/87a71856f2f56e4100373e92529eed3171695cfb", + "reference": "87a71856f2f56e4100373e92529eed3171695cfb", "shasum": "" }, "require": { "php": ">=8.2" }, "require-dev": { - "symfony/filesystem": "^6.4|^7.0|^8.0" + "symfony/filesystem": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -5023,7 +4073,7 @@ "description": "Finds files and directories via an intuitive fluent interface", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/finder/tree/v7.4.5" + "source": "https://github.com/symfony/finder/tree/v7.2.2" }, "funding": [ { @@ -5034,35 +4084,32 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-26T15:07:59+00:00" + "time": "2024-12-30T19:00:17+00:00" }, { "name": "symfony/http-foundation", - "version": "v7.4.5", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/http-foundation.git", - "reference": "446d0db2b1f21575f1284b74533e425096abdfb6" + "reference": "371272aeb6286f8135e028ca535f8e4d6f114126" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/http-foundation/zipball/446d0db2b1f21575f1284b74533e425096abdfb6", - "reference": "446d0db2b1f21575f1284b74533e425096abdfb6", + "url": "https://api.github.com/repos/symfony/http-foundation/zipball/371272aeb6286f8135e028ca535f8e4d6f114126", + "reference": "371272aeb6286f8135e028ca535f8e4d6f114126", "shasum": "" }, "require": { "php": ">=8.2", - "symfony/deprecation-contracts": "^2.5|^3", - "symfony/polyfill-mbstring": "^1.1" + "symfony/deprecation-contracts": "^2.5|^3.0", + "symfony/polyfill-mbstring": "~1.1", + "symfony/polyfill-php83": "^1.27" }, "conflict": { "doctrine/dbal": "<3.6", @@ -5071,13 +4118,12 @@ "require-dev": { "doctrine/dbal": "^3.6|^4", "predis/predis": "^1.1|^2.0", - "symfony/cache": "^6.4.12|^7.1.5|^8.0", - "symfony/clock": "^6.4|^7.0|^8.0", - "symfony/dependency-injection": "^6.4|^7.0|^8.0", - "symfony/expression-language": "^6.4|^7.0|^8.0", - "symfony/http-kernel": "^6.4|^7.0|^8.0", - "symfony/mime": "^6.4|^7.0|^8.0", - "symfony/rate-limiter": "^6.4|^7.0|^8.0" + "symfony/cache": "^6.4.12|^7.1.5", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/expression-language": "^6.4|^7.0", + "symfony/http-kernel": "^6.4|^7.0", + "symfony/mime": "^6.4|^7.0", + "symfony/rate-limiter": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -5105,7 +4151,7 @@ "description": "Defines an object-oriented layer for the HTTP specification", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/http-foundation/tree/v7.4.5" + "source": "https://github.com/symfony/http-foundation/tree/v7.2.5" }, "funding": [ { @@ -5116,38 +4162,34 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-27T16:16:02+00:00" + "time": "2025-03-25T15:54:33+00:00" }, { "name": "symfony/http-kernel", - "version": "v7.4.5", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/http-kernel.git", - "reference": "229eda477017f92bd2ce7615d06222ec0c19e82a" + "reference": "b1fe91bc1fa454a806d3f98db4ba826eb9941a54" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/http-kernel/zipball/229eda477017f92bd2ce7615d06222ec0c19e82a", - "reference": "229eda477017f92bd2ce7615d06222ec0c19e82a", + "url": "https://api.github.com/repos/symfony/http-kernel/zipball/b1fe91bc1fa454a806d3f98db4ba826eb9941a54", + "reference": "b1fe91bc1fa454a806d3f98db4ba826eb9941a54", "shasum": "" }, "require": { "php": ">=8.2", "psr/log": "^1|^2|^3", "symfony/deprecation-contracts": "^2.5|^3", - "symfony/error-handler": "^6.4|^7.0|^8.0", - "symfony/event-dispatcher": "^7.3|^8.0", - "symfony/http-foundation": "^7.4|^8.0", + "symfony/error-handler": "^6.4|^7.0", + "symfony/event-dispatcher": "^6.4|^7.0", + "symfony/http-foundation": "^6.4|^7.0", "symfony/polyfill-ctype": "^1.8" }, "conflict": { @@ -5157,7 +4199,6 @@ "symfony/console": "<6.4", "symfony/dependency-injection": "<6.4", "symfony/doctrine-bridge": "<6.4", - "symfony/flex": "<2.10", "symfony/form": "<6.4", "symfony/http-client": "<6.4", "symfony/http-client-contracts": "<2.5", @@ -5175,27 +4216,27 @@ }, "require-dev": { "psr/cache": "^1.0|^2.0|^3.0", - "symfony/browser-kit": "^6.4|^7.0|^8.0", - "symfony/clock": "^6.4|^7.0|^8.0", - "symfony/config": "^6.4|^7.0|^8.0", - "symfony/console": "^6.4|^7.0|^8.0", - "symfony/css-selector": "^6.4|^7.0|^8.0", - "symfony/dependency-injection": "^6.4|^7.0|^8.0", - "symfony/dom-crawler": "^6.4|^7.0|^8.0", - "symfony/expression-language": "^6.4|^7.0|^8.0", - "symfony/finder": "^6.4|^7.0|^8.0", + "symfony/browser-kit": "^6.4|^7.0", + "symfony/clock": "^6.4|^7.0", + "symfony/config": "^6.4|^7.0", + "symfony/console": "^6.4|^7.0", + "symfony/css-selector": "^6.4|^7.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/dom-crawler": "^6.4|^7.0", + "symfony/expression-language": "^6.4|^7.0", + "symfony/finder": "^6.4|^7.0", "symfony/http-client-contracts": "^2.5|^3", - "symfony/process": "^6.4|^7.0|^8.0", - "symfony/property-access": "^7.1|^8.0", - "symfony/routing": "^6.4|^7.0|^8.0", - "symfony/serializer": "^7.1|^8.0", - "symfony/stopwatch": "^6.4|^7.0|^8.0", - "symfony/translation": "^6.4|^7.0|^8.0", + "symfony/process": "^6.4|^7.0", + "symfony/property-access": "^7.1", + "symfony/routing": "^6.4|^7.0", + "symfony/serializer": "^7.1", + "symfony/stopwatch": "^6.4|^7.0", + "symfony/translation": "^6.4|^7.0", "symfony/translation-contracts": "^2.5|^3", - "symfony/uid": "^6.4|^7.0|^8.0", - "symfony/validator": "^6.4|^7.0|^8.0", - "symfony/var-dumper": "^6.4|^7.0|^8.0", - "symfony/var-exporter": "^6.4|^7.0|^8.0", + "symfony/uid": "^6.4|^7.0", + "symfony/validator": "^6.4|^7.0", + "symfony/var-dumper": "^6.4|^7.0", + "symfony/var-exporter": "^6.4|^7.0", "twig/twig": "^3.12" }, "type": "library", @@ -5224,7 +4265,7 @@ "description": "Provides a structured process for converting a Request into a Response", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/http-kernel/tree/v7.4.5" + "source": "https://github.com/symfony/http-kernel/tree/v7.2.5" }, "funding": [ { @@ -5235,29 +4276,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-28T10:33:42+00:00" + "time": "2025-03-28T13:32:50+00:00" }, { "name": "symfony/mailer", - "version": "v7.4.4", + "version": "v7.2.3", "source": { "type": "git", "url": "https://github.com/symfony/mailer.git", - "reference": "7b750074c40c694ceb34cb926d6dffee231c5cd6" + "reference": "f3871b182c44997cf039f3b462af4a48fb85f9d3" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/mailer/zipball/7b750074c40c694ceb34cb926d6dffee231c5cd6", - "reference": "7b750074c40c694ceb34cb926d6dffee231c5cd6", + "url": "https://api.github.com/repos/symfony/mailer/zipball/f3871b182c44997cf039f3b462af4a48fb85f9d3", + "reference": "f3871b182c44997cf039f3b462af4a48fb85f9d3", "shasum": "" }, "require": { @@ -5265,8 +4302,8 @@ "php": ">=8.2", "psr/event-dispatcher": "^1", "psr/log": "^1|^2|^3", - "symfony/event-dispatcher": "^6.4|^7.0|^8.0", - "symfony/mime": "^7.2|^8.0", + "symfony/event-dispatcher": "^6.4|^7.0", + "symfony/mime": "^7.2", "symfony/service-contracts": "^2.5|^3" }, "conflict": { @@ -5277,10 +4314,10 @@ "symfony/twig-bridge": "<6.4" }, "require-dev": { - "symfony/console": "^6.4|^7.0|^8.0", - "symfony/http-client": "^6.4|^7.0|^8.0", - "symfony/messenger": "^6.4|^7.0|^8.0", - "symfony/twig-bridge": "^6.4|^7.0|^8.0" + "symfony/console": "^6.4|^7.0", + "symfony/http-client": "^6.4|^7.0", + "symfony/messenger": "^6.4|^7.0", + "symfony/twig-bridge": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -5308,7 +4345,7 @@ "description": "Helps sending emails", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/mailer/tree/v7.4.4" + "source": "https://github.com/symfony/mailer/tree/v7.2.3" }, "funding": [ { @@ -5319,53 +4356,48 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-08T08:25:11+00:00" + "time": "2025-01-27T11:08:17+00:00" }, { "name": "symfony/mime", - "version": "v7.4.5", + "version": "v7.2.4", "source": { "type": "git", "url": "https://github.com/symfony/mime.git", - "reference": "b18c7e6e9eee1e19958138df10412f3c4c316148" + "reference": "87ca22046b78c3feaff04b337f33b38510fd686b" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/mime/zipball/b18c7e6e9eee1e19958138df10412f3c4c316148", - "reference": "b18c7e6e9eee1e19958138df10412f3c4c316148", + "url": "https://api.github.com/repos/symfony/mime/zipball/87ca22046b78c3feaff04b337f33b38510fd686b", + "reference": "87ca22046b78c3feaff04b337f33b38510fd686b", "shasum": "" }, "require": { "php": ">=8.2", - "symfony/deprecation-contracts": "^2.5|^3", "symfony/polyfill-intl-idn": "^1.10", "symfony/polyfill-mbstring": "^1.0" }, "conflict": { "egulias/email-validator": "~3.0.0", - "phpdocumentor/reflection-docblock": "<5.2|>=6", - "phpdocumentor/type-resolver": "<1.5.1", + "phpdocumentor/reflection-docblock": "<3.2.2", + "phpdocumentor/type-resolver": "<1.4.0", "symfony/mailer": "<6.4", "symfony/serializer": "<6.4.3|>7.0,<7.0.3" }, "require-dev": { "egulias/email-validator": "^2.1.10|^3.1|^4", "league/html-to-markdown": "^5.0", - "phpdocumentor/reflection-docblock": "^5.2", - "symfony/dependency-injection": "^6.4|^7.0|^8.0", - "symfony/process": "^6.4|^7.0|^8.0", - "symfony/property-access": "^6.4|^7.0|^8.0", - "symfony/property-info": "^6.4|^7.0|^8.0", - "symfony/serializer": "^6.4.3|^7.0.3|^8.0" + "phpdocumentor/reflection-docblock": "^3.0|^4.0|^5.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/process": "^6.4|^7.0", + "symfony/property-access": "^6.4|^7.0", + "symfony/property-info": "^6.4|^7.0", + "symfony/serializer": "^6.4.3|^7.0.3" }, "type": "library", "autoload": { @@ -5397,7 +4429,7 @@ "mime-type" ], "support": { - "source": "https://github.com/symfony/mime/tree/v7.4.5" + "source": "https://github.com/symfony/mime/tree/v7.2.4" }, "funding": [ { @@ -5408,20 +4440,16 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-27T08:59:58+00:00" + "time": "2025-02-19T08:51:20+00:00" }, { "name": "symfony/polyfill-ctype", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-ctype.git", @@ -5480,7 +4508,7 @@ "portable" ], "support": { - "source": "https://github.com/symfony/polyfill-ctype/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-ctype/tree/v1.31.0" }, "funding": [ { @@ -5491,10 +4519,6 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" @@ -5504,16 +4528,16 @@ }, { "name": "symfony/polyfill-intl-grapheme", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-intl-grapheme.git", - "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70" + "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/380872130d3a5dd3ace2f4010d95125fde5d5c70", - "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70", + "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe", + "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe", "shasum": "" }, "require": { @@ -5562,7 +4586,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.31.0" }, "funding": [ { @@ -5573,29 +4597,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-06-27T09:58:17+00:00" + "time": "2024-09-09T11:45:10+00:00" }, { "name": "symfony/polyfill-intl-idn", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-intl-idn.git", - "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3" + "reference": "c36586dcf89a12315939e00ec9b4474adcb1d773" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/9614ac4d8061dc257ecc64cba1b140873dce8ad3", - "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3", + "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/c36586dcf89a12315939e00ec9b4474adcb1d773", + "reference": "c36586dcf89a12315939e00ec9b4474adcb1d773", "shasum": "" }, "require": { @@ -5649,7 +4669,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.31.0" }, "funding": [ { @@ -5660,20 +4680,16 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2024-09-10T14:38:51+00:00" + "time": "2024-09-09T11:45:10+00:00" }, { "name": "symfony/polyfill-intl-normalizer", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-intl-normalizer.git", @@ -5734,7 +4750,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.31.0" }, "funding": [ { @@ -5745,10 +4761,6 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" @@ -5758,20 +4770,19 @@ }, { "name": "symfony/polyfill-mbstring", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-mbstring.git", - "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493" + "reference": "85181ba99b2345b0ef10ce42ecac37612d9fd341" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/6d857f4d76bd4b343eac26d6b539585d2bc56493", - "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493", + "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/85181ba99b2345b0ef10ce42ecac37612d9fd341", + "reference": "85181ba99b2345b0ef10ce42ecac37612d9fd341", "shasum": "" }, "require": { - "ext-iconv": "*", "php": ">=7.2" }, "provide": { @@ -5819,7 +4830,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.31.0" }, "funding": [ { @@ -5830,29 +4841,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2024-12-23T08:48:59+00:00" + "time": "2024-09-09T11:45:10+00:00" }, { "name": "symfony/polyfill-php80", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-php80.git", - "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608" + "reference": "60328e362d4c2c802a54fcbf04f9d3fb892b4cf8" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/0cc9dd0f17f61d8131e7df6b84bd344899fe2608", - "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608", + "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/60328e362d4c2c802a54fcbf04f9d3fb892b4cf8", + "reference": "60328e362d4c2c802a54fcbf04f9d3fb892b4cf8", "shasum": "" }, "require": { @@ -5903,7 +4910,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-php80/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-php80/tree/v1.31.0" }, "funding": [ { @@ -5914,29 +4921,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-01-02T08:10:11+00:00" + "time": "2024-09-09T11:45:10+00:00" }, { "name": "symfony/polyfill-php83", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-php83.git", - "reference": "17f6f9a6b1735c0f163024d959f700cfbc5155e5" + "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/17f6f9a6b1735c0f163024d959f700cfbc5155e5", - "reference": "17f6f9a6b1735c0f163024d959f700cfbc5155e5", + "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/2fb86d65e2d424369ad2905e83b236a8805ba491", + "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491", "shasum": "" }, "require": { @@ -5983,7 +4986,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-php83/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-php83/tree/v1.31.0" }, "funding": [ { @@ -5994,180 +4997,16 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-07-08T02:45:35+00:00" - }, - { - "name": "symfony/polyfill-php84", - "version": "v1.33.0", - "source": { - "type": "git", - "url": "https://github.com/symfony/polyfill-php84.git", - "reference": "d8ced4d875142b6a7426000426b8abc631d6b191" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-php84/zipball/d8ced4d875142b6a7426000426b8abc631d6b191", - "reference": "d8ced4d875142b6a7426000426b8abc631d6b191", - "shasum": "" - }, - "require": { - "php": ">=7.2" - }, - "type": "library", - "extra": { - "thanks": { - "url": "https://github.com/symfony/polyfill", - "name": "symfony/polyfill" - } - }, - "autoload": { - "files": [ - "bootstrap.php" - ], - "psr-4": { - "Symfony\\Polyfill\\Php84\\": "" - }, - "classmap": [ - "Resources/stubs" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Nicolas Grekas", - "email": "p@tchwork.com" - }, - { - "name": "Symfony Community", - "homepage": "https://symfony.com/contributors" - } - ], - "description": "Symfony polyfill backporting some PHP 8.4+ features to lower PHP versions", - "homepage": "https://symfony.com", - "keywords": [ - "compatibility", - "polyfill", - "portable", - "shim" - ], - "support": { - "source": "https://github.com/symfony/polyfill-php84/tree/v1.33.0" - }, - "funding": [ - { - "url": "https://symfony.com/sponsor", - "type": "custom" - }, - { - "url": "https://github.com/fabpot", - "type": "github" - }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, - { - "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", - "type": "tidelift" - } - ], - "time": "2025-06-24T13:30:11+00:00" - }, - { - "name": "symfony/polyfill-php85", - "version": "v1.33.0", - "source": { - "type": "git", - "url": "https://github.com/symfony/polyfill-php85.git", - "reference": "d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-php85/zipball/d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91", - "reference": "d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91", - "shasum": "" - }, - "require": { - "php": ">=7.2" - }, - "type": "library", - "extra": { - "thanks": { - "url": "https://github.com/symfony/polyfill", - "name": "symfony/polyfill" - } - }, - "autoload": { - "files": [ - "bootstrap.php" - ], - "psr-4": { - "Symfony\\Polyfill\\Php85\\": "" - }, - "classmap": [ - "Resources/stubs" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Nicolas Grekas", - "email": "p@tchwork.com" - }, - { - "name": "Symfony Community", - "homepage": "https://symfony.com/contributors" - } - ], - "description": "Symfony polyfill backporting some PHP 8.5+ features to lower PHP versions", - "homepage": "https://symfony.com", - "keywords": [ - "compatibility", - "polyfill", - "portable", - "shim" - ], - "support": { - "source": "https://github.com/symfony/polyfill-php85/tree/v1.33.0" - }, - "funding": [ - { - "url": "https://symfony.com/sponsor", - "type": "custom" - }, - { - "url": "https://github.com/fabpot", - "type": "github" - }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, - { - "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", - "type": "tidelift" - } - ], - "time": "2025-06-23T16:12:55+00:00" + "time": "2024-09-09T11:45:10+00:00" }, { "name": "symfony/polyfill-uuid", - "version": "v1.33.0", + "version": "v1.31.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-uuid.git", @@ -6226,7 +5065,7 @@ "uuid" ], "support": { - "source": "https://github.com/symfony/polyfill-uuid/tree/v1.33.0" + "source": "https://github.com/symfony/polyfill-uuid/tree/v1.31.0" }, "funding": [ { @@ -6237,10 +5076,6 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" @@ -6250,16 +5085,16 @@ }, { "name": "symfony/process", - "version": "v7.4.5", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/process.git", - "reference": "608476f4604102976d687c483ac63a79ba18cc97" + "reference": "87b7c93e57df9d8e39a093d32587702380ff045d" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/process/zipball/608476f4604102976d687c483ac63a79ba18cc97", - "reference": "608476f4604102976d687c483ac63a79ba18cc97", + "url": "https://api.github.com/repos/symfony/process/zipball/87b7c93e57df9d8e39a093d32587702380ff045d", + "reference": "87b7c93e57df9d8e39a093d32587702380ff045d", "shasum": "" }, "require": { @@ -6291,7 +5126,7 @@ "description": "Executes commands in sub-processes", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/process/tree/v7.4.5" + "source": "https://github.com/symfony/process/tree/v7.2.5" }, "funding": [ { @@ -6302,116 +5137,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-26T15:07:59+00:00" - }, - { - "name": "symfony/psr-http-message-bridge", - "version": "v8.0.4", - "source": { - "type": "git", - "url": "https://github.com/symfony/psr-http-message-bridge.git", - "reference": "d6edf266746dd0b8e81e754a79da77b08dc00531" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/symfony/psr-http-message-bridge/zipball/d6edf266746dd0b8e81e754a79da77b08dc00531", - "reference": "d6edf266746dd0b8e81e754a79da77b08dc00531", - "shasum": "" - }, - "require": { - "php": ">=8.4", - "psr/http-message": "^1.0|^2.0", - "symfony/http-foundation": "^7.4|^8.0" - }, - "conflict": { - "php-http/discovery": "<1.15" - }, - "require-dev": { - "nyholm/psr7": "^1.1", - "php-http/discovery": "^1.15", - "psr/log": "^1.1.4|^2|^3", - "symfony/browser-kit": "^7.4|^8.0", - "symfony/config": "^7.4|^8.0", - "symfony/event-dispatcher": "^7.4|^8.0", - "symfony/framework-bundle": "^7.4|^8.0", - "symfony/http-kernel": "^7.4|^8.0", - "symfony/runtime": "^7.4|^8.0" - }, - "type": "symfony-bridge", - "autoload": { - "psr-4": { - "Symfony\\Bridge\\PsrHttpMessage\\": "" - }, - "exclude-from-classmap": [ - "/Tests/" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Fabien Potencier", - "email": "fabien@symfony.com" - }, - { - "name": "Symfony Community", - "homepage": "https://symfony.com/contributors" - } - ], - "description": "PSR HTTP message bridge", - "homepage": "https://symfony.com", - "keywords": [ - "http", - "http-message", - "psr-17", - "psr-7" - ], - "support": { - "source": "https://github.com/symfony/psr-http-message-bridge/tree/v8.0.4" - }, - "funding": [ - { - "url": "https://symfony.com/sponsor", - "type": "custom" - }, - { - "url": "https://github.com/fabpot", - "type": "github" - }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, - { - "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", - "type": "tidelift" - } - ], - "time": "2026-01-03T23:40:55+00:00" + "time": "2025-03-13T12:21:46+00:00" }, { "name": "symfony/routing", - "version": "v7.4.4", + "version": "v7.2.3", "source": { "type": "git", "url": "https://github.com/symfony/routing.git", - "reference": "0798827fe2c79caeed41d70b680c2c3507d10147" + "reference": "ee9a67edc6baa33e5fae662f94f91fd262930996" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/routing/zipball/0798827fe2c79caeed41d70b680c2c3507d10147", - "reference": "0798827fe2c79caeed41d70b680c2c3507d10147", + "url": "https://api.github.com/repos/symfony/routing/zipball/ee9a67edc6baa33e5fae662f94f91fd262930996", + "reference": "ee9a67edc6baa33e5fae662f94f91fd262930996", "shasum": "" }, "require": { @@ -6425,11 +5169,11 @@ }, "require-dev": { "psr/log": "^1|^2|^3", - "symfony/config": "^6.4|^7.0|^8.0", - "symfony/dependency-injection": "^6.4|^7.0|^8.0", - "symfony/expression-language": "^6.4|^7.0|^8.0", - "symfony/http-foundation": "^6.4|^7.0|^8.0", - "symfony/yaml": "^6.4|^7.0|^8.0" + "symfony/config": "^6.4|^7.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/expression-language": "^6.4|^7.0", + "symfony/http-foundation": "^6.4|^7.0", + "symfony/yaml": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -6463,7 +5207,7 @@ "url" ], "support": { - "source": "https://github.com/symfony/routing/tree/v7.4.4" + "source": "https://github.com/symfony/routing/tree/v7.2.3" }, "funding": [ { @@ -6474,29 +5218,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-12T12:19:02+00:00" + "time": "2025-01-17T10:56:55+00:00" }, { "name": "symfony/service-contracts", - "version": "v3.6.1", + "version": "v3.5.1", "source": { "type": "git", "url": "https://github.com/symfony/service-contracts.git", - "reference": "45112560a3ba2d715666a509a0bc9521d10b6c43" + "reference": "e53260aabf78fb3d63f8d79d69ece59f80d5eda0" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/service-contracts/zipball/45112560a3ba2d715666a509a0bc9521d10b6c43", - "reference": "45112560a3ba2d715666a509a0bc9521d10b6c43", + "url": "https://api.github.com/repos/symfony/service-contracts/zipball/e53260aabf78fb3d63f8d79d69ece59f80d5eda0", + "reference": "e53260aabf78fb3d63f8d79d69ece59f80d5eda0", "shasum": "" }, "require": { @@ -6514,7 +5254,7 @@ "name": "symfony/contracts" }, "branch-alias": { - "dev-main": "3.6-dev" + "dev-main": "3.5-dev" } }, "autoload": { @@ -6550,7 +5290,7 @@ "standards" ], "support": { - "source": "https://github.com/symfony/service-contracts/tree/v3.6.1" + "source": "https://github.com/symfony/service-contracts/tree/v3.5.1" }, "funding": [ { @@ -6561,47 +5301,44 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-07-15T11:30:57+00:00" + "time": "2024-09-25T14:20:29+00:00" }, { "name": "symfony/string", - "version": "v8.0.4", + "version": "v7.2.0", "source": { "type": "git", "url": "https://github.com/symfony/string.git", - "reference": "758b372d6882506821ed666032e43020c4f57194" + "reference": "446e0d146f991dde3e73f45f2c97a9faad773c82" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/string/zipball/758b372d6882506821ed666032e43020c4f57194", - "reference": "758b372d6882506821ed666032e43020c4f57194", + "url": "https://api.github.com/repos/symfony/string/zipball/446e0d146f991dde3e73f45f2c97a9faad773c82", + "reference": "446e0d146f991dde3e73f45f2c97a9faad773c82", "shasum": "" }, "require": { - "php": ">=8.4", - "symfony/polyfill-ctype": "^1.8", - "symfony/polyfill-intl-grapheme": "^1.33", - "symfony/polyfill-intl-normalizer": "^1.0", - "symfony/polyfill-mbstring": "^1.0" + "php": ">=8.2", + "symfony/polyfill-ctype": "~1.8", + "symfony/polyfill-intl-grapheme": "~1.0", + "symfony/polyfill-intl-normalizer": "~1.0", + "symfony/polyfill-mbstring": "~1.0" }, "conflict": { "symfony/translation-contracts": "<2.5" }, "require-dev": { - "symfony/emoji": "^7.4|^8.0", - "symfony/http-client": "^7.4|^8.0", - "symfony/intl": "^7.4|^8.0", + "symfony/emoji": "^7.1", + "symfony/error-handler": "^6.4|^7.0", + "symfony/http-client": "^6.4|^7.0", + "symfony/intl": "^6.4|^7.0", "symfony/translation-contracts": "^2.5|^3.0", - "symfony/var-exporter": "^7.4|^8.0" + "symfony/var-exporter": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -6640,7 +5377,7 @@ "utf8" ], "support": { - "source": "https://github.com/symfony/string/tree/v8.0.4" + "source": "https://github.com/symfony/string/tree/v7.2.0" }, "funding": [ { @@ -6651,58 +5388,60 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-12T12:37:40+00:00" + "time": "2024-11-13T13:31:26+00:00" }, { "name": "symfony/translation", - "version": "v8.0.4", + "version": "v7.2.4", "source": { "type": "git", "url": "https://github.com/symfony/translation.git", - "reference": "db70c8ce7db74fd2da7b1d268db46b2a8ce32c10" + "reference": "283856e6981286cc0d800b53bd5703e8e363f05a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/translation/zipball/db70c8ce7db74fd2da7b1d268db46b2a8ce32c10", - "reference": "db70c8ce7db74fd2da7b1d268db46b2a8ce32c10", + "url": "https://api.github.com/repos/symfony/translation/zipball/283856e6981286cc0d800b53bd5703e8e363f05a", + "reference": "283856e6981286cc0d800b53bd5703e8e363f05a", "shasum": "" }, "require": { - "php": ">=8.4", - "symfony/polyfill-mbstring": "^1.0", - "symfony/translation-contracts": "^3.6.1" + "php": ">=8.2", + "symfony/deprecation-contracts": "^2.5|^3", + "symfony/polyfill-mbstring": "~1.0", + "symfony/translation-contracts": "^2.5|^3.0" }, "conflict": { - "nikic/php-parser": "<5.0", + "symfony/config": "<6.4", + "symfony/console": "<6.4", + "symfony/dependency-injection": "<6.4", "symfony/http-client-contracts": "<2.5", - "symfony/service-contracts": "<2.5" + "symfony/http-kernel": "<6.4", + "symfony/service-contracts": "<2.5", + "symfony/twig-bundle": "<6.4", + "symfony/yaml": "<6.4" }, "provide": { "symfony/translation-implementation": "2.3|3.0" }, "require-dev": { - "nikic/php-parser": "^5.0", + "nikic/php-parser": "^4.18|^5.0", "psr/log": "^1|^2|^3", - "symfony/config": "^7.4|^8.0", - "symfony/console": "^7.4|^8.0", - "symfony/dependency-injection": "^7.4|^8.0", - "symfony/finder": "^7.4|^8.0", + "symfony/config": "^6.4|^7.0", + "symfony/console": "^6.4|^7.0", + "symfony/dependency-injection": "^6.4|^7.0", + "symfony/finder": "^6.4|^7.0", "symfony/http-client-contracts": "^2.5|^3.0", - "symfony/http-kernel": "^7.4|^8.0", - "symfony/intl": "^7.4|^8.0", + "symfony/http-kernel": "^6.4|^7.0", + "symfony/intl": "^6.4|^7.0", "symfony/polyfill-intl-icu": "^1.21", - "symfony/routing": "^7.4|^8.0", + "symfony/routing": "^6.4|^7.0", "symfony/service-contracts": "^2.5|^3", - "symfony/yaml": "^7.4|^8.0" + "symfony/yaml": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -6733,7 +5472,7 @@ "description": "Provides tools to internationalize your application", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/translation/tree/v8.0.4" + "source": "https://github.com/symfony/translation/tree/v7.2.4" }, "funding": [ { @@ -6744,29 +5483,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-13T13:06:50+00:00" + "time": "2025-02-13T10:27:23+00:00" }, { "name": "symfony/translation-contracts", - "version": "v3.6.1", + "version": "v3.5.1", "source": { "type": "git", "url": "https://github.com/symfony/translation-contracts.git", - "reference": "65a8bc82080447fae78373aa10f8d13b38338977" + "reference": "4667ff3bd513750603a09c8dedbea942487fb07c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/65a8bc82080447fae78373aa10f8d13b38338977", - "reference": "65a8bc82080447fae78373aa10f8d13b38338977", + "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/4667ff3bd513750603a09c8dedbea942487fb07c", + "reference": "4667ff3bd513750603a09c8dedbea942487fb07c", "shasum": "" }, "require": { @@ -6779,7 +5514,7 @@ "name": "symfony/contracts" }, "branch-alias": { - "dev-main": "3.6-dev" + "dev-main": "3.5-dev" } }, "autoload": { @@ -6815,7 +5550,7 @@ "standards" ], "support": { - "source": "https://github.com/symfony/translation-contracts/tree/v3.6.1" + "source": "https://github.com/symfony/translation-contracts/tree/v3.5.1" }, "funding": [ { @@ -6826,29 +5561,25 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-07-15T13:41:35+00:00" + "time": "2024-09-25T14:20:29+00:00" }, { "name": "symfony/uid", - "version": "v7.4.4", + "version": "v7.2.0", "source": { "type": "git", "url": "https://github.com/symfony/uid.git", - "reference": "7719ce8aba76be93dfe249192f1fbfa52c588e36" + "reference": "2d294d0c48df244c71c105a169d0190bfb080426" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/uid/zipball/7719ce8aba76be93dfe249192f1fbfa52c588e36", - "reference": "7719ce8aba76be93dfe249192f1fbfa52c588e36", + "url": "https://api.github.com/repos/symfony/uid/zipball/2d294d0c48df244c71c105a169d0190bfb080426", + "reference": "2d294d0c48df244c71c105a169d0190bfb080426", "shasum": "" }, "require": { @@ -6856,7 +5587,7 @@ "symfony/polyfill-uuid": "^1.15" }, "require-dev": { - "symfony/console": "^6.4|^7.0|^8.0" + "symfony/console": "^6.4|^7.0" }, "type": "library", "autoload": { @@ -6893,7 +5624,7 @@ "uuid" ], "support": { - "source": "https://github.com/symfony/uid/tree/v7.4.4" + "source": "https://github.com/symfony/uid/tree/v7.2.0" }, "funding": [ { @@ -6904,44 +5635,40 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-03T23:30:35+00:00" + "time": "2024-09-25T14:21:43+00:00" }, { "name": "symfony/var-dumper", - "version": "v7.4.4", + "version": "v7.2.3", "source": { "type": "git", "url": "https://github.com/symfony/var-dumper.git", - "reference": "0e4769b46a0c3c62390d124635ce59f66874b282" + "reference": "82b478c69745d8878eb60f9a049a4d584996f73a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/var-dumper/zipball/0e4769b46a0c3c62390d124635ce59f66874b282", - "reference": "0e4769b46a0c3c62390d124635ce59f66874b282", + "url": "https://api.github.com/repos/symfony/var-dumper/zipball/82b478c69745d8878eb60f9a049a4d584996f73a", + "reference": "82b478c69745d8878eb60f9a049a4d584996f73a", "shasum": "" }, "require": { "php": ">=8.2", - "symfony/deprecation-contracts": "^2.5|^3", "symfony/polyfill-mbstring": "~1.0" }, "conflict": { "symfony/console": "<6.4" }, "require-dev": { - "symfony/console": "^6.4|^7.0|^8.0", - "symfony/http-kernel": "^6.4|^7.0|^8.0", - "symfony/process": "^6.4|^7.0|^8.0", - "symfony/uid": "^6.4|^7.0|^8.0", + "ext-iconv": "*", + "symfony/console": "^6.4|^7.0", + "symfony/http-kernel": "^6.4|^7.0", + "symfony/process": "^6.4|^7.0", + "symfony/uid": "^6.4|^7.0", "twig/twig": "^3.12" }, "bin": [ @@ -6980,7 +5707,7 @@ "dump" ], "support": { - "source": "https://github.com/symfony/var-dumper/tree/v7.4.4" + "source": "https://github.com/symfony/var-dumper/tree/v7.2.3" }, "funding": [ { @@ -6991,36 +5718,32 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2026-01-01T22:13:48+00:00" + "time": "2025-01-17T11:39:41+00:00" }, { "name": "tijsverkoyen/css-to-inline-styles", - "version": "v2.4.0", + "version": "v2.3.0", "source": { "type": "git", "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git", - "reference": "f0292ccf0ec75843d65027214426b6b163b48b41" + "reference": "0d72ac1c00084279c1816675284073c5a337c20d" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/f0292ccf0ec75843d65027214426b6b163b48b41", - "reference": "f0292ccf0ec75843d65027214426b6b163b48b41", + "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/0d72ac1c00084279c1816675284073c5a337c20d", + "reference": "0d72ac1c00084279c1816675284073c5a337c20d", "shasum": "" }, "require": { "ext-dom": "*", "ext-libxml": "*", "php": "^7.4 || ^8.0", - "symfony/css-selector": "^5.4 || ^6.0 || ^7.0 || ^8.0" + "symfony/css-selector": "^5.4 || ^6.0 || ^7.0" }, "require-dev": { "phpstan/phpstan": "^2.0", @@ -7053,32 +5776,32 @@ "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles", "support": { "issues": "https://github.com/tijsverkoyen/CssToInlineStyles/issues", - "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.4.0" + "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.3.0" }, - "time": "2025-12-02T11:56:42+00:00" + "time": "2024-12-21T16:25:41+00:00" }, { "name": "vlucas/phpdotenv", - "version": "v5.6.3", + "version": "v5.6.1", "source": { "type": "git", "url": "https://github.com/vlucas/phpdotenv.git", - "reference": "955e7815d677a3eaa7075231212f2110983adecc" + "reference": "a59a13791077fe3d44f90e7133eb68e7d22eaff2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/vlucas/phpdotenv/zipball/955e7815d677a3eaa7075231212f2110983adecc", - "reference": "955e7815d677a3eaa7075231212f2110983adecc", + "url": "https://api.github.com/repos/vlucas/phpdotenv/zipball/a59a13791077fe3d44f90e7133eb68e7d22eaff2", + "reference": "a59a13791077fe3d44f90e7133eb68e7d22eaff2", "shasum": "" }, "require": { "ext-pcre": "*", - "graham-campbell/result-type": "^1.1.4", + "graham-campbell/result-type": "^1.1.3", "php": "^7.2.5 || ^8.0", - "phpoption/phpoption": "^1.9.5", - "symfony/polyfill-ctype": "^1.26", - "symfony/polyfill-mbstring": "^1.26", - "symfony/polyfill-php80": "^1.26" + "phpoption/phpoption": "^1.9.3", + "symfony/polyfill-ctype": "^1.24", + "symfony/polyfill-mbstring": "^1.24", + "symfony/polyfill-php80": "^1.24" }, "require-dev": { "bamarni/composer-bin-plugin": "^1.8.2", @@ -7127,7 +5850,7 @@ ], "support": { "issues": "https://github.com/vlucas/phpdotenv/issues", - "source": "https://github.com/vlucas/phpdotenv/tree/v5.6.3" + "source": "https://github.com/vlucas/phpdotenv/tree/v5.6.1" }, "funding": [ { @@ -7139,7 +5862,7 @@ "type": "tidelift" } ], - "time": "2025-12-27T19:49:13+00:00" + "time": "2024-07-20T21:52:34+00:00" }, { "name": "voku/portable-ascii", @@ -7214,21 +5937,79 @@ } ], "time": "2024-11-21T01:49:47+00:00" + }, + { + "name": "webmozart/assert", + "version": "1.11.0", + "source": { + "type": "git", + "url": "https://github.com/webmozarts/assert.git", + "reference": "11cb2199493b2f8a3b53e7f19068fc6aac760991" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/webmozarts/assert/zipball/11cb2199493b2f8a3b53e7f19068fc6aac760991", + "reference": "11cb2199493b2f8a3b53e7f19068fc6aac760991", + "shasum": "" + }, + "require": { + "ext-ctype": "*", + "php": "^7.2 || ^8.0" + }, + "conflict": { + "phpstan/phpstan": "<0.12.20", + "vimeo/psalm": "<4.6.1 || 4.6.2" + }, + "require-dev": { + "phpunit/phpunit": "^8.5.13" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.10-dev" + } + }, + "autoload": { + "psr-4": { + "Webmozart\\Assert\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Bernhard Schussek", + "email": "bschussek@gmail.com" + } + ], + "description": "Assertions to validate method input/output with nice error messages.", + "keywords": [ + "assert", + "check", + "validate" + ], + "support": { + "issues": "https://github.com/webmozarts/assert/issues", + "source": "https://github.com/webmozarts/assert/tree/1.11.0" + }, + "time": "2022-06-03T18:03:27+00:00" } ], "packages-dev": [ { "name": "brianium/paratest", - "version": "v7.8.5", + "version": "v7.8.3", "source": { "type": "git", "url": "https://github.com/paratestphp/paratest.git", - "reference": "9b324c8fc319cf9728b581c7a90e1c8f6361c5e5" + "reference": "a585c346ddf1bec22e51e20b5387607905604a71" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/paratestphp/paratest/zipball/9b324c8fc319cf9728b581c7a90e1c8f6361c5e5", - "reference": "9b324c8fc319cf9728b581c7a90e1c8f6361c5e5", + "url": "https://api.github.com/repos/paratestphp/paratest/zipball/a585c346ddf1bec22e51e20b5387607905604a71", + "reference": "a585c346ddf1bec22e51e20b5387607905604a71", "shasum": "" }, "require": { @@ -7236,27 +6017,27 @@ "ext-pcre": "*", "ext-reflection": "*", "ext-simplexml": "*", - "fidry/cpu-core-counter": "^1.3.0", - "jean85/pretty-package-versions": "^2.1.1", - "php": "~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0", - "phpunit/php-code-coverage": "^11.0.12", - "phpunit/php-file-iterator": "^5.1.0", - "phpunit/php-timer": "^7.0.1", - "phpunit/phpunit": "^11.5.46", - "sebastian/environment": "^7.2.1", - "symfony/console": "^6.4.22 || ^7.3.4 || ^8.0.3", - "symfony/process": "^6.4.20 || ^7.3.4 || ^8.0.3" + "fidry/cpu-core-counter": "^1.2.0", + "jean85/pretty-package-versions": "^2.1.0", + "php": "~8.2.0 || ~8.3.0 || ~8.4.0", + "phpunit/php-code-coverage": "^11.0.9 || ^12.0.4", + "phpunit/php-file-iterator": "^5.1.0 || ^6", + "phpunit/php-timer": "^7.0.1 || ^8", + "phpunit/phpunit": "^11.5.11 || ^12.0.6", + "sebastian/environment": "^7.2.0 || ^8", + "symfony/console": "^6.4.17 || ^7.2.1", + "symfony/process": "^6.4.19 || ^7.2.4" }, "require-dev": { "doctrine/coding-standard": "^12.0.0", "ext-pcov": "*", "ext-posix": "*", - "phpstan/phpstan": "^2.1.33", - "phpstan/phpstan-deprecation-rules": "^2.0.3", - "phpstan/phpstan-phpunit": "^2.0.11", - "phpstan/phpstan-strict-rules": "^2.0.7", - "squizlabs/php_codesniffer": "^3.13.5", - "symfony/filesystem": "^6.4.13 || ^7.3.2 || ^8.0.1" + "phpstan/phpstan": "^2.1.6", + "phpstan/phpstan-deprecation-rules": "^2.0.1", + "phpstan/phpstan-phpunit": "^2.0.4", + "phpstan/phpstan-strict-rules": "^2.0.3", + "squizlabs/php_codesniffer": "^3.11.3", + "symfony/filesystem": "^6.4.13 || ^7.2.0" }, "bin": [ "bin/paratest", @@ -7296,7 +6077,7 @@ ], "support": { "issues": "https://github.com/paratestphp/paratest/issues", - "source": "https://github.com/paratestphp/paratest/tree/v7.8.5" + "source": "https://github.com/paratestphp/paratest/tree/v7.8.3" }, "funding": [ { @@ -7308,33 +6089,30 @@ "type": "paypal" } ], - "time": "2026-01-08T08:02:38+00:00" + "time": "2025-03-05T08:29:11+00:00" }, { "name": "doctrine/deprecations", - "version": "1.1.6", + "version": "1.1.4", "source": { "type": "git", "url": "https://github.com/doctrine/deprecations.git", - "reference": "d4fe3e6fd9bb9e72557a19674f44d8ac7db4c6ca" + "reference": "31610dbb31faa98e6b5447b62340826f54fbc4e9" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/doctrine/deprecations/zipball/d4fe3e6fd9bb9e72557a19674f44d8ac7db4c6ca", - "reference": "d4fe3e6fd9bb9e72557a19674f44d8ac7db4c6ca", + "url": "https://api.github.com/repos/doctrine/deprecations/zipball/31610dbb31faa98e6b5447b62340826f54fbc4e9", + "reference": "31610dbb31faa98e6b5447b62340826f54fbc4e9", "shasum": "" }, "require": { "php": "^7.1 || ^8.0" }, - "conflict": { - "phpunit/phpunit": "<=7.5 || >=14" - }, "require-dev": { - "doctrine/coding-standard": "^9 || ^12 || ^14", - "phpstan/phpstan": "1.4.10 || 2.1.30", + "doctrine/coding-standard": "^9 || ^12", + "phpstan/phpstan": "1.4.10 || 2.0.3", "phpstan/phpstan-phpunit": "^1.0 || ^2", - "phpunit/phpunit": "^7.5 || ^8.5 || ^9.6 || ^10.5 || ^11.5 || ^12.4 || ^13.0", + "phpunit/phpunit": "^7.5 || ^8.5 || ^9.5", "psr/log": "^1 || ^2 || ^3" }, "suggest": { @@ -7354,9 +6132,9 @@ "homepage": "https://www.doctrine-project.org/", "support": { "issues": "https://github.com/doctrine/deprecations/issues", - "source": "https://github.com/doctrine/deprecations/tree/1.1.6" + "source": "https://github.com/doctrine/deprecations/tree/1.1.4" }, - "time": "2026-02-07T07:09:04+00:00" + "time": "2024-12-07T21:18:45+00:00" }, { "name": "fakerphp/faker", @@ -7423,16 +6201,16 @@ }, { "name": "fidry/cpu-core-counter", - "version": "1.3.0", + "version": "1.2.0", "source": { "type": "git", "url": "https://github.com/theofidry/cpu-core-counter.git", - "reference": "db9508f7b1474469d9d3c53b86f817e344732678" + "reference": "8520451a140d3f46ac33042715115e290cf5785f" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/theofidry/cpu-core-counter/zipball/db9508f7b1474469d9d3c53b86f817e344732678", - "reference": "db9508f7b1474469d9d3c53b86f817e344732678", + "url": "https://api.github.com/repos/theofidry/cpu-core-counter/zipball/8520451a140d3f46ac33042715115e290cf5785f", + "reference": "8520451a140d3f46ac33042715115e290cf5785f", "shasum": "" }, "require": { @@ -7442,10 +6220,10 @@ "fidry/makefile": "^0.2.0", "fidry/php-cs-fixer-config": "^1.1.2", "phpstan/extension-installer": "^1.2.0", - "phpstan/phpstan": "^2.0", - "phpstan/phpstan-deprecation-rules": "^2.0.0", - "phpstan/phpstan-phpunit": "^2.0", - "phpstan/phpstan-strict-rules": "^2.0", + "phpstan/phpstan": "^1.9.2", + "phpstan/phpstan-deprecation-rules": "^1.0.0", + "phpstan/phpstan-phpunit": "^1.2.2", + "phpstan/phpstan-strict-rules": "^1.4.4", "phpunit/phpunit": "^8.5.31 || ^9.5.26", "webmozarts/strict-phpunit": "^7.5" }, @@ -7472,7 +6250,7 @@ ], "support": { "issues": "https://github.com/theofidry/cpu-core-counter/issues", - "source": "https://github.com/theofidry/cpu-core-counter/tree/1.3.0" + "source": "https://github.com/theofidry/cpu-core-counter/tree/1.2.0" }, "funding": [ { @@ -7480,20 +6258,20 @@ "type": "github" } ], - "time": "2025-08-14T07:29:31+00:00" + "time": "2024-08-06T10:04:20+00:00" }, { "name": "filp/whoops", - "version": "2.18.4", + "version": "2.18.0", "source": { "type": "git", "url": "https://github.com/filp/whoops.git", - "reference": "d2102955e48b9fd9ab24280a7ad12ed552752c4d" + "reference": "a7de6c3c6c3c022f5cfc337f8ede6a14460cf77e" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/filp/whoops/zipball/d2102955e48b9fd9ab24280a7ad12ed552752c4d", - "reference": "d2102955e48b9fd9ab24280a7ad12ed552752c4d", + "url": "https://api.github.com/repos/filp/whoops/zipball/a7de6c3c6c3c022f5cfc337f8ede6a14460cf77e", + "reference": "a7de6c3c6c3c022f5cfc337f8ede6a14460cf77e", "shasum": "" }, "require": { @@ -7543,7 +6321,7 @@ ], "support": { "issues": "https://github.com/filp/whoops/issues", - "source": "https://github.com/filp/whoops/tree/2.18.4" + "source": "https://github.com/filp/whoops/tree/2.18.0" }, "funding": [ { @@ -7551,24 +6329,24 @@ "type": "github" } ], - "time": "2025-08-08T12:00:00+00:00" + "time": "2025-03-15T12:00:00+00:00" }, { "name": "hamcrest/hamcrest-php", - "version": "v2.1.1", + "version": "v2.0.1", "source": { "type": "git", "url": "https://github.com/hamcrest/hamcrest-php.git", - "reference": "f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487" + "reference": "8c3d0a3f6af734494ad8f6fbbee0ba92422859f3" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/hamcrest/hamcrest-php/zipball/f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487", - "reference": "f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487", + "url": "https://api.github.com/repos/hamcrest/hamcrest-php/zipball/8c3d0a3f6af734494ad8f6fbbee0ba92422859f3", + "reference": "8c3d0a3f6af734494ad8f6fbbee0ba92422859f3", "shasum": "" }, "require": { - "php": "^7.4|^8.0" + "php": "^5.3|^7.0|^8.0" }, "replace": { "cordoval/hamcrest-php": "*", @@ -7576,8 +6354,8 @@ "kodova/hamcrest-php": "*" }, "require-dev": { - "phpunit/php-file-iterator": "^1.4 || ^2.0 || ^3.0", - "phpunit/phpunit": "^4.8.36 || ^5.7 || ^6.5 || ^7.0 || ^8.0 || ^9.0" + "phpunit/php-file-iterator": "^1.4 || ^2.0", + "phpunit/phpunit": "^4.8.36 || ^5.7 || ^6.5 || ^7.0" }, "type": "library", "extra": { @@ -7600,9 +6378,9 @@ ], "support": { "issues": "https://github.com/hamcrest/hamcrest-php/issues", - "source": "https://github.com/hamcrest/hamcrest-php/tree/v2.1.1" + "source": "https://github.com/hamcrest/hamcrest-php/tree/v2.0.1" }, - "time": "2025-04-30T06:54:44+00:00" + "time": "2020-07-09T08:09:16+00:00" }, { "name": "jean85/pretty-package-versions", @@ -7664,179 +6442,39 @@ }, "time": "2025-03-19T14:43:43+00:00" }, - { - "name": "laravel/boost", - "version": "v2.1.7", - "source": { - "type": "git", - "url": "https://github.com/laravel/boost.git", - "reference": "3f999986f9dc0f1faa9a6607739e938d551e27df" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/laravel/boost/zipball/3f999986f9dc0f1faa9a6607739e938d551e27df", - "reference": "3f999986f9dc0f1faa9a6607739e938d551e27df", - "shasum": "" - }, - "require": { - "guzzlehttp/guzzle": "^7.9", - "illuminate/console": "^11.45.3|^12.41.1", - "illuminate/contracts": "^11.45.3|^12.41.1", - "illuminate/routing": "^11.45.3|^12.41.1", - "illuminate/support": "^11.45.3|^12.41.1", - "laravel/mcp": "^0.5.1", - "laravel/prompts": "^0.3.10", - "laravel/roster": "^0.4.0", - "php": "^8.2" - }, - "require-dev": { - "laravel/pint": "^1.27.0", - "mockery/mockery": "^1.6.12", - "orchestra/testbench": "^9.15.0|^10.6", - "pestphp/pest": "^2.36.0|^3.8.4|^4.1.5", - "phpstan/phpstan": "^2.1.27", - "rector/rector": "^2.1" - }, - "type": "library", - "extra": { - "laravel": { - "providers": [ - "Laravel\\Boost\\BoostServiceProvider" - ] - }, - "branch-alias": { - "dev-master": "1.x-dev" - } - }, - "autoload": { - "psr-4": { - "Laravel\\Boost\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "description": "Laravel Boost accelerates AI-assisted development by providing the essential context and structure that AI needs to generate high-quality, Laravel-specific code.", - "homepage": "https://github.com/laravel/boost", - "keywords": [ - "ai", - "dev", - "laravel" - ], - "support": { - "issues": "https://github.com/laravel/boost/issues", - "source": "https://github.com/laravel/boost" - }, - "time": "2026-02-18T12:19:28+00:00" - }, - { - "name": "laravel/mcp", - "version": "v0.5.9", - "source": { - "type": "git", - "url": "https://github.com/laravel/mcp.git", - "reference": "39e8da60eb7bce4737c5d868d35a3fe78938c129" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/laravel/mcp/zipball/39e8da60eb7bce4737c5d868d35a3fe78938c129", - "reference": "39e8da60eb7bce4737c5d868d35a3fe78938c129", - "shasum": "" - }, - "require": { - "ext-json": "*", - "ext-mbstring": "*", - "illuminate/console": "^11.45.3|^12.41.1|^13.0", - "illuminate/container": "^11.45.3|^12.41.1|^13.0", - "illuminate/contracts": "^11.45.3|^12.41.1|^13.0", - "illuminate/http": "^11.45.3|^12.41.1|^13.0", - "illuminate/json-schema": "^12.41.1|^13.0", - "illuminate/routing": "^11.45.3|^12.41.1|^13.0", - "illuminate/support": "^11.45.3|^12.41.1|^13.0", - "illuminate/validation": "^11.45.3|^12.41.1|^13.0", - "php": "^8.2" - }, - "require-dev": { - "laravel/pint": "^1.20", - "orchestra/testbench": "^9.15|^10.8|^11.0", - "pestphp/pest": "^3.8.5|^4.3.2", - "phpstan/phpstan": "^2.1.27", - "rector/rector": "^2.2.4" - }, - "type": "library", - "extra": { - "laravel": { - "aliases": { - "Mcp": "Laravel\\Mcp\\Server\\Facades\\Mcp" - }, - "providers": [ - "Laravel\\Mcp\\Server\\McpServiceProvider" - ] - } - }, - "autoload": { - "psr-4": { - "Laravel\\Mcp\\": "src/", - "Laravel\\Mcp\\Server\\": "src/Server/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Taylor Otwell", - "email": "taylor@laravel.com" - } - ], - "description": "Rapidly build MCP servers for your Laravel applications.", - "homepage": "https://github.com/laravel/mcp", - "keywords": [ - "laravel", - "mcp" - ], - "support": { - "issues": "https://github.com/laravel/mcp/issues", - "source": "https://github.com/laravel/mcp" - }, - "time": "2026-02-17T19:05:53+00:00" - }, { "name": "laravel/pail", - "version": "v1.2.6", + "version": "v1.2.2", "source": { "type": "git", "url": "https://github.com/laravel/pail.git", - "reference": "aa71a01c309e7f66bc2ec4fb1a59291b82eb4abf" + "reference": "f31f4980f52be17c4667f3eafe034e6826787db2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/pail/zipball/aa71a01c309e7f66bc2ec4fb1a59291b82eb4abf", - "reference": "aa71a01c309e7f66bc2ec4fb1a59291b82eb4abf", + "url": "https://api.github.com/repos/laravel/pail/zipball/f31f4980f52be17c4667f3eafe034e6826787db2", + "reference": "f31f4980f52be17c4667f3eafe034e6826787db2", "shasum": "" }, "require": { "ext-mbstring": "*", - "illuminate/console": "^10.24|^11.0|^12.0|^13.0", - "illuminate/contracts": "^10.24|^11.0|^12.0|^13.0", - "illuminate/log": "^10.24|^11.0|^12.0|^13.0", - "illuminate/process": "^10.24|^11.0|^12.0|^13.0", - "illuminate/support": "^10.24|^11.0|^12.0|^13.0", + "illuminate/console": "^10.24|^11.0|^12.0", + "illuminate/contracts": "^10.24|^11.0|^12.0", + "illuminate/log": "^10.24|^11.0|^12.0", + "illuminate/process": "^10.24|^11.0|^12.0", + "illuminate/support": "^10.24|^11.0|^12.0", "nunomaduro/termwind": "^1.15|^2.0", "php": "^8.2", - "symfony/console": "^6.0|^7.0|^8.0" + "symfony/console": "^6.0|^7.0" }, "require-dev": { - "laravel/framework": "^10.24|^11.0|^12.0|^13.0", + "laravel/framework": "^10.24|^11.0|^12.0", "laravel/pint": "^1.13", - "orchestra/testbench-core": "^8.13|^9.17|^10.8|^11.0", - "pestphp/pest": "^2.20|^3.0|^4.0", - "pestphp/pest-plugin-type-coverage": "^2.3|^3.0|^4.0", - "phpstan/phpstan": "^1.12.27", - "symfony/var-dumper": "^6.3|^7.0|^8.0", - "symfony/yaml": "^6.3|^7.0|^8.0" + "orchestra/testbench-core": "^8.13|^9.0|^10.0", + "pestphp/pest": "^2.20|^3.0", + "pestphp/pest-plugin-type-coverage": "^2.3|^3.0", + "phpstan/phpstan": "^1.10", + "symfony/var-dumper": "^6.3|^7.0" }, "type": "library", "extra": { @@ -7871,7 +6509,6 @@ "description": "Easily delve into your Laravel application's log files directly from the command line.", "homepage": "https://github.com/laravel/pail", "keywords": [ - "dev", "laravel", "logs", "php", @@ -7881,20 +6518,20 @@ "issues": "https://github.com/laravel/pail/issues", "source": "https://github.com/laravel/pail" }, - "time": "2026-02-09T13:44:54+00:00" + "time": "2025-01-28T15:15:15+00:00" }, { "name": "laravel/pint", - "version": "v1.27.1", + "version": "v1.21.2", "source": { "type": "git", "url": "https://github.com/laravel/pint.git", - "reference": "54cca2de13790570c7b6f0f94f37896bee4abcb5" + "reference": "370772e7d9e9da087678a0edf2b11b6960e40558" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/pint/zipball/54cca2de13790570c7b6f0f94f37896bee4abcb5", - "reference": "54cca2de13790570c7b6f0f94f37896bee4abcb5", + "url": "https://api.github.com/repos/laravel/pint/zipball/370772e7d9e9da087678a0edf2b11b6960e40558", + "reference": "370772e7d9e9da087678a0edf2b11b6960e40558", "shasum": "" }, "require": { @@ -7905,13 +6542,13 @@ "php": "^8.2.0" }, "require-dev": { - "friendsofphp/php-cs-fixer": "^3.93.1", - "illuminate/view": "^12.51.0", - "larastan/larastan": "^3.9.2", - "laravel-zero/framework": "^12.0.5", + "friendsofphp/php-cs-fixer": "^3.72.0", + "illuminate/view": "^11.44.2", + "larastan/larastan": "^3.2.0", + "laravel-zero/framework": "^11.36.1", "mockery/mockery": "^1.6.12", - "nunomaduro/termwind": "^2.3.3", - "pestphp/pest": "^3.8.5" + "nunomaduro/termwind": "^2.3", + "pestphp/pest": "^2.36.0" }, "bin": [ "builds/pint" @@ -7937,7 +6574,6 @@ "description": "An opinionated code formatter for PHP.", "homepage": "https://laravel.com", "keywords": [ - "dev", "format", "formatter", "lint", @@ -7948,94 +6584,33 @@ "issues": "https://github.com/laravel/pint/issues", "source": "https://github.com/laravel/pint" }, - "time": "2026-02-10T20:00:20+00:00" - }, - { - "name": "laravel/roster", - "version": "v0.4.0", - "source": { - "type": "git", - "url": "https://github.com/laravel/roster.git", - "reference": "77e6c1187952d0eef50a54922db47893f5e7c986" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/laravel/roster/zipball/77e6c1187952d0eef50a54922db47893f5e7c986", - "reference": "77e6c1187952d0eef50a54922db47893f5e7c986", - "shasum": "" - }, - "require": { - "illuminate/console": "^11.0|^12.0|^13.0", - "illuminate/contracts": "^11.0|^12.0|^13.0", - "illuminate/routing": "^11.0|^12.0|^13.0", - "illuminate/support": "^11.0|^12.0|^13.0", - "php": "^8.2", - "symfony/yaml": "^7.2|^8.0" - }, - "require-dev": { - "laravel/pint": "^1.14", - "mockery/mockery": "^1.6", - "orchestra/testbench": "^9.0|^10.0|^11.0", - "pestphp/pest": "^3.0|^4.1", - "phpstan/phpstan": "^2.0" - }, - "type": "library", - "extra": { - "laravel": { - "providers": [ - "Laravel\\Roster\\RosterServiceProvider" - ] - }, - "branch-alias": { - "dev-master": "1.x-dev" - } - }, - "autoload": { - "psr-4": { - "Laravel\\Roster\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "description": "Detect packages & approaches in use within a Laravel project", - "homepage": "https://github.com/laravel/roster", - "keywords": [ - "dev", - "laravel" - ], - "support": { - "issues": "https://github.com/laravel/roster/issues", - "source": "https://github.com/laravel/roster" - }, - "time": "2026-02-11T07:24:41+00:00" + "time": "2025-03-14T22:31:42+00:00" }, { "name": "laravel/sail", - "version": "v1.53.0", + "version": "v1.41.0", "source": { "type": "git", "url": "https://github.com/laravel/sail.git", - "reference": "e340eaa2bea9b99192570c48ed837155dbf24fbb" + "reference": "fe1a4ada0abb5e4bd99eb4e4b0d87906c00cdeec" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/sail/zipball/e340eaa2bea9b99192570c48ed837155dbf24fbb", - "reference": "e340eaa2bea9b99192570c48ed837155dbf24fbb", + "url": "https://api.github.com/repos/laravel/sail/zipball/fe1a4ada0abb5e4bd99eb4e4b0d87906c00cdeec", + "reference": "fe1a4ada0abb5e4bd99eb4e4b0d87906c00cdeec", "shasum": "" }, "require": { - "illuminate/console": "^9.52.16|^10.0|^11.0|^12.0|^13.0", - "illuminate/contracts": "^9.52.16|^10.0|^11.0|^12.0|^13.0", - "illuminate/support": "^9.52.16|^10.0|^11.0|^12.0|^13.0", + "illuminate/console": "^9.52.16|^10.0|^11.0|^12.0", + "illuminate/contracts": "^9.52.16|^10.0|^11.0|^12.0", + "illuminate/support": "^9.52.16|^10.0|^11.0|^12.0", "php": "^8.0", - "symfony/console": "^6.0|^7.0|^8.0", - "symfony/yaml": "^6.0|^7.0|^8.0" + "symfony/console": "^6.0|^7.0", + "symfony/yaml": "^6.0|^7.0" }, "require-dev": { - "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0|^11.0", - "phpstan/phpstan": "^2.0" + "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0", + "phpstan/phpstan": "^1.10" }, "bin": [ "bin/sail" @@ -8072,7 +6647,7 @@ "issues": "https://github.com/laravel/sail/issues", "source": "https://github.com/laravel/sail" }, - "time": "2026-02-06T12:16:02+00:00" + "time": "2025-01-24T15:45:36+00:00" }, { "name": "mockery/mockery", @@ -8159,16 +6734,16 @@ }, { "name": "myclabs/deep-copy", - "version": "1.13.4", + "version": "1.13.0", "source": { "type": "git", "url": "https://github.com/myclabs/DeepCopy.git", - "reference": "07d290f0c47959fd5eed98c95ee5602db07e0b6a" + "reference": "024473a478be9df5fdaca2c793f2232fe788e414" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/myclabs/DeepCopy/zipball/07d290f0c47959fd5eed98c95ee5602db07e0b6a", - "reference": "07d290f0c47959fd5eed98c95ee5602db07e0b6a", + "url": "https://api.github.com/repos/myclabs/DeepCopy/zipball/024473a478be9df5fdaca2c793f2232fe788e414", + "reference": "024473a478be9df5fdaca2c793f2232fe788e414", "shasum": "" }, "require": { @@ -8207,7 +6782,7 @@ ], "support": { "issues": "https://github.com/myclabs/DeepCopy/issues", - "source": "https://github.com/myclabs/DeepCopy/tree/1.13.4" + "source": "https://github.com/myclabs/DeepCopy/tree/1.13.0" }, "funding": [ { @@ -8215,40 +6790,42 @@ "type": "tidelift" } ], - "time": "2025-08-01T08:46:24+00:00" + "time": "2025-02-12T12:17:51+00:00" }, { "name": "nunomaduro/collision", - "version": "v8.9.1", + "version": "v8.7.0", "source": { "type": "git", "url": "https://github.com/nunomaduro/collision.git", - "reference": "a1ed3fa530fd60bc515f9303e8520fcb7d4bd935" + "reference": "586cb8181a257a2152b6a855ca8d9598878a1a26" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nunomaduro/collision/zipball/a1ed3fa530fd60bc515f9303e8520fcb7d4bd935", - "reference": "a1ed3fa530fd60bc515f9303e8520fcb7d4bd935", + "url": "https://api.github.com/repos/nunomaduro/collision/zipball/586cb8181a257a2152b6a855ca8d9598878a1a26", + "reference": "586cb8181a257a2152b6a855ca8d9598878a1a26", "shasum": "" }, "require": { - "filp/whoops": "^2.18.4", - "nunomaduro/termwind": "^2.4.0", + "filp/whoops": "^2.17.0", + "nunomaduro/termwind": "^2.3.0", "php": "^8.2.0", - "symfony/console": "^7.4.4 || ^8.0.4" + "symfony/console": "^7.2.1" }, "conflict": { - "laravel/framework": "<11.48.0 || >=14.0.0", - "phpunit/phpunit": "<11.5.50 || >=14.0.0" + "laravel/framework": "<11.39.1 || >=13.0.0", + "phpunit/phpunit": "<11.5.3 || >=12.0.0" }, "require-dev": { - "brianium/paratest": "^7.8.5", - "larastan/larastan": "^3.9.2", - "laravel/framework": "^11.48.0 || ^12.52.0", - "laravel/pint": "^1.27.1", - "orchestra/testbench-core": "^9.12.0 || ^10.9.0", - "pestphp/pest": "^3.8.5 || ^4.4.1 || ^5.0.0", - "sebastian/environment": "^7.2.1 || ^8.0.3 || ^9.0.0" + "larastan/larastan": "^2.10.0", + "laravel/framework": "^11.44.2", + "laravel/pint": "^1.21.2", + "laravel/sail": "^1.41.0", + "laravel/sanctum": "^4.0.8", + "laravel/tinker": "^2.10.1", + "orchestra/testbench-core": "^9.12.0", + "pestphp/pest": "^3.7.4", + "sebastian/environment": "^6.1.0 || ^7.2.0" }, "type": "library", "extra": { @@ -8311,42 +6888,42 @@ "type": "patreon" } ], - "time": "2026-02-17T17:33:08+00:00" + "time": "2025-03-14T22:37:40+00:00" }, { "name": "pestphp/pest", - "version": "v3.8.5", + "version": "v3.8.0", "source": { "type": "git", "url": "https://github.com/pestphp/pest.git", - "reference": "7796630eafcfd1c02660cecdde3bc6984fbf01f4" + "reference": "42e1b9f17fc2b2036701f4b968158264bde542d4" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/pestphp/pest/zipball/7796630eafcfd1c02660cecdde3bc6984fbf01f4", - "reference": "7796630eafcfd1c02660cecdde3bc6984fbf01f4", + "url": "https://api.github.com/repos/pestphp/pest/zipball/42e1b9f17fc2b2036701f4b968158264bde542d4", + "reference": "42e1b9f17fc2b2036701f4b968158264bde542d4", "shasum": "" }, "require": { - "brianium/paratest": "^7.8.5", - "nunomaduro/collision": "^8.8.3", - "nunomaduro/termwind": "^2.3.3", + "brianium/paratest": "^7.8.3", + "nunomaduro/collision": "^8.7.0", + "nunomaduro/termwind": "^2.3.0", "pestphp/pest-plugin": "^3.0.0", - "pestphp/pest-plugin-arch": "^3.1.1", + "pestphp/pest-plugin-arch": "^3.1.0", "pestphp/pest-plugin-mutate": "^3.0.5", "php": "^8.2.0", - "phpunit/phpunit": "^11.5.50" + "phpunit/phpunit": "^11.5.15" }, "conflict": { "filp/whoops": "<2.16.0", - "phpunit/phpunit": ">11.5.50", + "phpunit/phpunit": ">11.5.15", "sebastian/exporter": "<6.0.0", "webmozart/assert": "<1.11.0" }, "require-dev": { "pestphp/pest-dev-tools": "^3.4.0", - "pestphp/pest-plugin-type-coverage": "^3.6.1", - "symfony/process": "^7.4.4" + "pestphp/pest-plugin-type-coverage": "^3.5.0", + "symfony/process": "^7.2.5" }, "bin": [ "bin/pest" @@ -8411,7 +6988,7 @@ ], "support": { "issues": "https://github.com/pestphp/pest/issues", - "source": "https://github.com/pestphp/pest/tree/v3.8.5" + "source": "https://github.com/pestphp/pest/tree/v3.8.0" }, "funding": [ { @@ -8423,7 +7000,7 @@ "type": "github" } ], - "time": "2026-01-28T01:33:45+00:00" + "time": "2025-03-30T17:49:10+00:00" }, { "name": "pestphp/pest-plugin", @@ -8497,16 +7074,16 @@ }, { "name": "pestphp/pest-plugin-arch", - "version": "v3.1.1", + "version": "v3.1.0", "source": { "type": "git", "url": "https://github.com/pestphp/pest-plugin-arch.git", - "reference": "db7bd9cb1612b223e16618d85475c6f63b9c8daa" + "reference": "ebec636b97ee73936ee8485e15a59c3f5a4c21b2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/pestphp/pest-plugin-arch/zipball/db7bd9cb1612b223e16618d85475c6f63b9c8daa", - "reference": "db7bd9cb1612b223e16618d85475c6f63b9c8daa", + "url": "https://api.github.com/repos/pestphp/pest-plugin-arch/zipball/ebec636b97ee73936ee8485e15a59c3f5a4c21b2", + "reference": "ebec636b97ee73936ee8485e15a59c3f5a4c21b2", "shasum": "" }, "require": { @@ -8515,7 +7092,7 @@ "ta-tikoma/phpunit-architecture-test": "^0.8.4" }, "require-dev": { - "pestphp/pest": "^3.8.1", + "pestphp/pest": "^3.7.5", "pestphp/pest-dev-tools": "^3.4.0" }, "type": "library", @@ -8551,7 +7128,7 @@ "unit" ], "support": { - "source": "https://github.com/pestphp/pest-plugin-arch/tree/v3.1.1" + "source": "https://github.com/pestphp/pest-plugin-arch/tree/v3.1.0" }, "funding": [ { @@ -8563,31 +7140,31 @@ "type": "github" } ], - "time": "2025-04-16T22:59:48+00:00" + "time": "2025-03-30T17:28:50+00:00" }, { "name": "pestphp/pest-plugin-laravel", - "version": "v3.2.0", + "version": "v3.1.0", "source": { "type": "git", "url": "https://github.com/pestphp/pest-plugin-laravel.git", - "reference": "6801be82fd92b96e82dd72e563e5674b1ce365fc" + "reference": "1c4e994476375c72aa7aebaaa97aa98f5d5378cd" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/pestphp/pest-plugin-laravel/zipball/6801be82fd92b96e82dd72e563e5674b1ce365fc", - "reference": "6801be82fd92b96e82dd72e563e5674b1ce365fc", + "url": "https://api.github.com/repos/pestphp/pest-plugin-laravel/zipball/1c4e994476375c72aa7aebaaa97aa98f5d5378cd", + "reference": "1c4e994476375c72aa7aebaaa97aa98f5d5378cd", "shasum": "" }, "require": { - "laravel/framework": "^11.39.1|^12.9.2", - "pestphp/pest": "^3.8.2", + "laravel/framework": "^11.39.1|^12.0.0", + "pestphp/pest": "^3.7.4", "php": "^8.2.0" }, "require-dev": { "laravel/dusk": "^8.2.13|dev-develop", - "orchestra/testbench": "^9.9.0|^10.2.1", - "pestphp/pest-dev-tools": "^3.4.0" + "orchestra/testbench": "^9.9.0|^10.0.0", + "pestphp/pest-dev-tools": "^3.3.0" }, "type": "library", "extra": { @@ -8625,7 +7202,7 @@ "unit" ], "support": { - "source": "https://github.com/pestphp/pest-plugin-laravel/tree/v3.2.0" + "source": "https://github.com/pestphp/pest-plugin-laravel/tree/v3.1.0" }, "funding": [ { @@ -8637,7 +7214,7 @@ "type": "github" } ], - "time": "2025-04-21T07:40:53+00:00" + "time": "2025-01-24T13:22:39+00:00" }, { "name": "pestphp/pest-plugin-mutate", @@ -8884,16 +7461,16 @@ }, { "name": "phpdocumentor/reflection-docblock", - "version": "5.6.6", + "version": "5.6.1", "source": { "type": "git", "url": "https://github.com/phpDocumentor/ReflectionDocBlock.git", - "reference": "5cee1d3dfc2d2aa6599834520911d246f656bcb8" + "reference": "e5e784149a09bd69d9a5e3b01c5cbd2e2bd653d8" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/phpDocumentor/ReflectionDocBlock/zipball/5cee1d3dfc2d2aa6599834520911d246f656bcb8", - "reference": "5cee1d3dfc2d2aa6599834520911d246f656bcb8", + "url": "https://api.github.com/repos/phpDocumentor/ReflectionDocBlock/zipball/e5e784149a09bd69d9a5e3b01c5cbd2e2bd653d8", + "reference": "e5e784149a09bd69d9a5e3b01c5cbd2e2bd653d8", "shasum": "" }, "require": { @@ -8903,7 +7480,7 @@ "phpdocumentor/reflection-common": "^2.2", "phpdocumentor/type-resolver": "^1.7", "phpstan/phpdoc-parser": "^1.7|^2.0", - "webmozart/assert": "^1.9.1 || ^2" + "webmozart/assert": "^1.9.1" }, "require-dev": { "mockery/mockery": "~1.3.5 || ~1.6.0", @@ -8942,22 +7519,22 @@ "description": "With this component, a library can provide support for annotations via DocBlocks or otherwise retrieve information that is embedded in a DocBlock.", "support": { "issues": "https://github.com/phpDocumentor/ReflectionDocBlock/issues", - "source": "https://github.com/phpDocumentor/ReflectionDocBlock/tree/5.6.6" + "source": "https://github.com/phpDocumentor/ReflectionDocBlock/tree/5.6.1" }, - "time": "2025-12-22T21:13:58+00:00" + "time": "2024-12-07T09:39:29+00:00" }, { "name": "phpdocumentor/type-resolver", - "version": "1.12.0", + "version": "1.10.0", "source": { "type": "git", "url": "https://github.com/phpDocumentor/TypeResolver.git", - "reference": "92a98ada2b93d9b201a613cb5a33584dde25f195" + "reference": "679e3ce485b99e84c775d28e2e96fade9a7fb50a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/phpDocumentor/TypeResolver/zipball/92a98ada2b93d9b201a613cb5a33584dde25f195", - "reference": "92a98ada2b93d9b201a613cb5a33584dde25f195", + "url": "https://api.github.com/repos/phpDocumentor/TypeResolver/zipball/679e3ce485b99e84c775d28e2e96fade9a7fb50a", + "reference": "679e3ce485b99e84c775d28e2e96fade9a7fb50a", "shasum": "" }, "require": { @@ -9000,22 +7577,22 @@ "description": "A PSR-5 based resolver of Class names, Types and Structural Element Names", "support": { "issues": "https://github.com/phpDocumentor/TypeResolver/issues", - "source": "https://github.com/phpDocumentor/TypeResolver/tree/1.12.0" + "source": "https://github.com/phpDocumentor/TypeResolver/tree/1.10.0" }, - "time": "2025-11-21T15:09:14+00:00" + "time": "2024-11-09T15:12:26+00:00" }, { "name": "phpstan/phpdoc-parser", - "version": "2.3.2", + "version": "2.1.0", "source": { "type": "git", "url": "https://github.com/phpstan/phpdoc-parser.git", - "reference": "a004701b11273a26cd7955a61d67a7f1e525a45a" + "reference": "9b30d6fd026b2c132b3985ce6b23bec09ab3aa68" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/a004701b11273a26cd7955a61d67a7f1e525a45a", - "reference": "a004701b11273a26cd7955a61d67a7f1e525a45a", + "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/9b30d6fd026b2c132b3985ce6b23bec09ab3aa68", + "reference": "9b30d6fd026b2c132b3985ce6b23bec09ab3aa68", "shasum": "" }, "require": { @@ -9047,41 +7624,41 @@ "description": "PHPDoc parser with support for nullable, intersection and generic types", "support": { "issues": "https://github.com/phpstan/phpdoc-parser/issues", - "source": "https://github.com/phpstan/phpdoc-parser/tree/2.3.2" + "source": "https://github.com/phpstan/phpdoc-parser/tree/2.1.0" }, - "time": "2026-01-25T14:56:51+00:00" + "time": "2025-02-19T13:28:12+00:00" }, { "name": "phpunit/php-code-coverage", - "version": "11.0.12", + "version": "11.0.9", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/php-code-coverage.git", - "reference": "2c1ed04922802c15e1de5d7447b4856de949cf56" + "reference": "14d63fbcca18457e49c6f8bebaa91a87e8e188d7" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/2c1ed04922802c15e1de5d7447b4856de949cf56", - "reference": "2c1ed04922802c15e1de5d7447b4856de949cf56", + "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/14d63fbcca18457e49c6f8bebaa91a87e8e188d7", + "reference": "14d63fbcca18457e49c6f8bebaa91a87e8e188d7", "shasum": "" }, "require": { "ext-dom": "*", "ext-libxml": "*", "ext-xmlwriter": "*", - "nikic/php-parser": "^5.7.0", + "nikic/php-parser": "^5.4.0", "php": ">=8.2", "phpunit/php-file-iterator": "^5.1.0", "phpunit/php-text-template": "^4.0.1", "sebastian/code-unit-reverse-lookup": "^4.0.1", "sebastian/complexity": "^4.0.1", - "sebastian/environment": "^7.2.1", + "sebastian/environment": "^7.2.0", "sebastian/lines-of-code": "^3.0.1", "sebastian/version": "^5.0.2", - "theseer/tokenizer": "^1.3.1" + "theseer/tokenizer": "^1.2.3" }, "require-dev": { - "phpunit/phpunit": "^11.5.46" + "phpunit/phpunit": "^11.5.2" }, "suggest": { "ext-pcov": "PHP extension that provides line coverage", @@ -9119,52 +7696,40 @@ "support": { "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues", "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy", - "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/11.0.12" + "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/11.0.9" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/phpunit/php-code-coverage", - "type": "tidelift" } ], - "time": "2025-12-24T07:01:01+00:00" + "time": "2025-02-25T13:26:39+00:00" }, { "name": "phpunit/php-file-iterator", - "version": "5.1.1", + "version": "5.1.0", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/php-file-iterator.git", - "reference": "2f3a64888c814fc235386b7387dd5b5ed92ad903" + "reference": "118cfaaa8bc5aef3287bf315b6060b1174754af6" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/php-file-iterator/zipball/2f3a64888c814fc235386b7387dd5b5ed92ad903", - "reference": "2f3a64888c814fc235386b7387dd5b5ed92ad903", + "url": "https://api.github.com/repos/sebastianbergmann/php-file-iterator/zipball/118cfaaa8bc5aef3287bf315b6060b1174754af6", + "reference": "118cfaaa8bc5aef3287bf315b6060b1174754af6", "shasum": "" }, "require": { "php": ">=8.2" }, "require-dev": { - "phpunit/phpunit": "^11.3" + "phpunit/phpunit": "^11.0" }, "type": "library", "extra": { "branch-alias": { - "dev-main": "5.1-dev" + "dev-main": "5.0-dev" } }, "autoload": { @@ -9192,27 +7757,15 @@ "support": { "issues": "https://github.com/sebastianbergmann/php-file-iterator/issues", "security": "https://github.com/sebastianbergmann/php-file-iterator/security/policy", - "source": "https://github.com/sebastianbergmann/php-file-iterator/tree/5.1.1" + "source": "https://github.com/sebastianbergmann/php-file-iterator/tree/5.1.0" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/phpunit/php-file-iterator", - "type": "tidelift" } ], - "time": "2026-02-02T13:52:54+00:00" + "time": "2024-08-27T05:02:59+00:00" }, { "name": "phpunit/php-invoker", @@ -9400,16 +7953,16 @@ }, { "name": "phpunit/phpunit", - "version": "11.5.50", + "version": "11.5.15", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/phpunit.git", - "reference": "fdfc727f0fcacfeb8fcb30c7e5da173125b58be3" + "reference": "4b6a4ee654e5e0c5e1f17e2f83c0f4c91dee1f9c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/fdfc727f0fcacfeb8fcb30c7e5da173125b58be3", - "reference": "fdfc727f0fcacfeb8fcb30c7e5da173125b58be3", + "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/4b6a4ee654e5e0c5e1f17e2f83c0f4c91dee1f9c", + "reference": "4b6a4ee654e5e0c5e1f17e2f83c0f4c91dee1f9c", "shasum": "" }, "require": { @@ -9419,24 +7972,24 @@ "ext-mbstring": "*", "ext-xml": "*", "ext-xmlwriter": "*", - "myclabs/deep-copy": "^1.13.4", + "myclabs/deep-copy": "^1.13.0", "phar-io/manifest": "^2.0.4", "phar-io/version": "^3.2.1", "php": ">=8.2", - "phpunit/php-code-coverage": "^11.0.12", + "phpunit/php-code-coverage": "^11.0.9", "phpunit/php-file-iterator": "^5.1.0", "phpunit/php-invoker": "^5.0.1", "phpunit/php-text-template": "^4.0.1", "phpunit/php-timer": "^7.0.1", "sebastian/cli-parser": "^3.0.2", "sebastian/code-unit": "^3.0.3", - "sebastian/comparator": "^6.3.3", + "sebastian/comparator": "^6.3.1", "sebastian/diff": "^6.0.2", - "sebastian/environment": "^7.2.1", - "sebastian/exporter": "^6.3.2", + "sebastian/environment": "^7.2.0", + "sebastian/exporter": "^6.3.0", "sebastian/global-state": "^7.0.2", "sebastian/object-enumerator": "^6.0.1", - "sebastian/type": "^5.1.3", + "sebastian/type": "^5.1.2", "sebastian/version": "^5.0.2", "staabm/side-effects-detector": "^1.0.5" }, @@ -9481,7 +8034,7 @@ "support": { "issues": "https://github.com/sebastianbergmann/phpunit/issues", "security": "https://github.com/sebastianbergmann/phpunit/security/policy", - "source": "https://github.com/sebastianbergmann/phpunit/tree/11.5.50" + "source": "https://github.com/sebastianbergmann/phpunit/tree/11.5.15" }, "funding": [ { @@ -9492,20 +8045,12 @@ "url": "https://github.com/sebastianbergmann", "type": "github" }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, { "url": "https://tidelift.com/funding/github/packagist/phpunit/phpunit", "type": "tidelift" } ], - "time": "2026-01-27T05:59:18+00:00" + "time": "2025-03-23T16:02:11+00:00" }, { "name": "sebastian/cli-parser", @@ -9679,16 +8224,16 @@ }, { "name": "sebastian/comparator", - "version": "6.3.3", + "version": "6.3.1", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/comparator.git", - "reference": "2c95e1e86cb8dd41beb8d502057d1081ccc8eca9" + "reference": "24b8fbc2c8e201bb1308e7b05148d6ab393b6959" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/2c95e1e86cb8dd41beb8d502057d1081ccc8eca9", - "reference": "2c95e1e86cb8dd41beb8d502057d1081ccc8eca9", + "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/24b8fbc2c8e201bb1308e7b05148d6ab393b6959", + "reference": "24b8fbc2c8e201bb1308e7b05148d6ab393b6959", "shasum": "" }, "require": { @@ -9747,27 +8292,15 @@ "support": { "issues": "https://github.com/sebastianbergmann/comparator/issues", "security": "https://github.com/sebastianbergmann/comparator/security/policy", - "source": "https://github.com/sebastianbergmann/comparator/tree/6.3.3" + "source": "https://github.com/sebastianbergmann/comparator/tree/6.3.1" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/sebastian/comparator", - "type": "tidelift" } ], - "time": "2026-01-24T09:26:40+00:00" + "time": "2025-03-07T06:57:01+00:00" }, { "name": "sebastian/complexity", @@ -9896,23 +8429,23 @@ }, { "name": "sebastian/environment", - "version": "7.2.1", + "version": "7.2.0", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/environment.git", - "reference": "a5c75038693ad2e8d4b6c15ba2403532647830c4" + "reference": "855f3ae0ab316bbafe1ba4e16e9f3c078d24a0c5" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/environment/zipball/a5c75038693ad2e8d4b6c15ba2403532647830c4", - "reference": "a5c75038693ad2e8d4b6c15ba2403532647830c4", + "url": "https://api.github.com/repos/sebastianbergmann/environment/zipball/855f3ae0ab316bbafe1ba4e16e9f3c078d24a0c5", + "reference": "855f3ae0ab316bbafe1ba4e16e9f3c078d24a0c5", "shasum": "" }, "require": { "php": ">=8.2" }, "require-dev": { - "phpunit/phpunit": "^11.3" + "phpunit/phpunit": "^11.0" }, "suggest": { "ext-posix": "*" @@ -9948,40 +8481,28 @@ "support": { "issues": "https://github.com/sebastianbergmann/environment/issues", "security": "https://github.com/sebastianbergmann/environment/security/policy", - "source": "https://github.com/sebastianbergmann/environment/tree/7.2.1" + "source": "https://github.com/sebastianbergmann/environment/tree/7.2.0" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/sebastian/environment", - "type": "tidelift" } ], - "time": "2025-05-21T11:55:47+00:00" + "time": "2024-07-03T04:54:44+00:00" }, { "name": "sebastian/exporter", - "version": "6.3.2", + "version": "6.3.0", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/exporter.git", - "reference": "70a298763b40b213ec087c51c739efcaa90bcd74" + "reference": "3473f61172093b2da7de1fb5782e1f24cc036dc3" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/exporter/zipball/70a298763b40b213ec087c51c739efcaa90bcd74", - "reference": "70a298763b40b213ec087c51c739efcaa90bcd74", + "url": "https://api.github.com/repos/sebastianbergmann/exporter/zipball/3473f61172093b2da7de1fb5782e1f24cc036dc3", + "reference": "3473f61172093b2da7de1fb5782e1f24cc036dc3", "shasum": "" }, "require": { @@ -9995,7 +8516,7 @@ "type": "library", "extra": { "branch-alias": { - "dev-main": "6.3-dev" + "dev-main": "6.1-dev" } }, "autoload": { @@ -10038,27 +8559,15 @@ "support": { "issues": "https://github.com/sebastianbergmann/exporter/issues", "security": "https://github.com/sebastianbergmann/exporter/security/policy", - "source": "https://github.com/sebastianbergmann/exporter/tree/6.3.2" + "source": "https://github.com/sebastianbergmann/exporter/tree/6.3.0" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/sebastian/exporter", - "type": "tidelift" } ], - "time": "2025-09-24T06:12:51+00:00" + "time": "2024-12-05T09:17:50+00:00" }, { "name": "sebastian/global-state", @@ -10296,23 +8805,23 @@ }, { "name": "sebastian/recursion-context", - "version": "6.0.3", + "version": "6.0.2", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/recursion-context.git", - "reference": "f6458abbf32a6c8174f8f26261475dc133b3d9dc" + "reference": "694d156164372abbd149a4b85ccda2e4670c0e16" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/recursion-context/zipball/f6458abbf32a6c8174f8f26261475dc133b3d9dc", - "reference": "f6458abbf32a6c8174f8f26261475dc133b3d9dc", + "url": "https://api.github.com/repos/sebastianbergmann/recursion-context/zipball/694d156164372abbd149a4b85ccda2e4670c0e16", + "reference": "694d156164372abbd149a4b85ccda2e4670c0e16", "shasum": "" }, "require": { "php": ">=8.2" }, "require-dev": { - "phpunit/phpunit": "^11.3" + "phpunit/phpunit": "^11.0" }, "type": "library", "extra": { @@ -10348,40 +8857,28 @@ "support": { "issues": "https://github.com/sebastianbergmann/recursion-context/issues", "security": "https://github.com/sebastianbergmann/recursion-context/security/policy", - "source": "https://github.com/sebastianbergmann/recursion-context/tree/6.0.3" + "source": "https://github.com/sebastianbergmann/recursion-context/tree/6.0.2" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/sebastian/recursion-context", - "type": "tidelift" } ], - "time": "2025-08-13T04:42:22+00:00" + "time": "2024-07-03T05:10:34+00:00" }, { "name": "sebastian/type", - "version": "5.1.3", + "version": "5.1.2", "source": { "type": "git", "url": "https://github.com/sebastianbergmann/type.git", - "reference": "f77d2d4e78738c98d9a68d2596fe5e8fa380f449" + "reference": "a8a7e30534b0eb0c77cd9d07e82de1a114389f5e" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/sebastianbergmann/type/zipball/f77d2d4e78738c98d9a68d2596fe5e8fa380f449", - "reference": "f77d2d4e78738c98d9a68d2596fe5e8fa380f449", + "url": "https://api.github.com/repos/sebastianbergmann/type/zipball/a8a7e30534b0eb0c77cd9d07e82de1a114389f5e", + "reference": "a8a7e30534b0eb0c77cd9d07e82de1a114389f5e", "shasum": "" }, "require": { @@ -10417,27 +8914,15 @@ "support": { "issues": "https://github.com/sebastianbergmann/type/issues", "security": "https://github.com/sebastianbergmann/type/security/policy", - "source": "https://github.com/sebastianbergmann/type/tree/5.1.3" + "source": "https://github.com/sebastianbergmann/type/tree/5.1.2" }, "funding": [ { "url": "https://github.com/sebastianbergmann", "type": "github" - }, - { - "url": "https://liberapay.com/sebastianbergmann", - "type": "liberapay" - }, - { - "url": "https://thanks.dev/u/gh/sebastianbergmann", - "type": "thanks_dev" - }, - { - "url": "https://tidelift.com/funding/github/packagist/sebastian/type", - "type": "tidelift" } ], - "time": "2025-08-09T06:55:48+00:00" + "time": "2025-03-18T13:35:50+00:00" }, { "name": "sebastian/version", @@ -10547,27 +9032,28 @@ }, { "name": "symfony/yaml", - "version": "v8.0.1", + "version": "v7.2.5", "source": { "type": "git", "url": "https://github.com/symfony/yaml.git", - "reference": "7a1a90ba1df6e821a6b53c4cabdc32a56cabfb14" + "reference": "4c4b6f4cfcd7e52053f0c8bfad0f7f30fb924912" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/yaml/zipball/7a1a90ba1df6e821a6b53c4cabdc32a56cabfb14", - "reference": "7a1a90ba1df6e821a6b53c4cabdc32a56cabfb14", + "url": "https://api.github.com/repos/symfony/yaml/zipball/4c4b6f4cfcd7e52053f0c8bfad0f7f30fb924912", + "reference": "4c4b6f4cfcd7e52053f0c8bfad0f7f30fb924912", "shasum": "" }, "require": { - "php": ">=8.4", + "php": ">=8.2", + "symfony/deprecation-contracts": "^2.5|^3.0", "symfony/polyfill-ctype": "^1.8" }, "conflict": { - "symfony/console": "<7.4" + "symfony/console": "<6.4" }, "require-dev": { - "symfony/console": "^7.4|^8.0" + "symfony/console": "^6.4|^7.0" }, "bin": [ "Resources/bin/yaml-lint" @@ -10598,7 +9084,7 @@ "description": "Loads and dumps YAML files", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/yaml/tree/v8.0.1" + "source": "https://github.com/symfony/yaml/tree/v7.2.5" }, "funding": [ { @@ -10609,37 +9095,33 @@ "url": "https://github.com/fabpot", "type": "github" }, - { - "url": "https://github.com/nicolas-grekas", - "type": "github" - }, { "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", "type": "tidelift" } ], - "time": "2025-12-04T18:17:06+00:00" + "time": "2025-03-03T07:12:39+00:00" }, { "name": "ta-tikoma/phpunit-architecture-test", - "version": "0.8.7", + "version": "0.8.4", "source": { "type": "git", "url": "https://github.com/ta-tikoma/phpunit-architecture-test.git", - "reference": "1248f3f506ca9641d4f68cebcd538fa489754db8" + "reference": "89f0dea1cb0f0d5744d3ec1764a286af5e006636" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/ta-tikoma/phpunit-architecture-test/zipball/1248f3f506ca9641d4f68cebcd538fa489754db8", - "reference": "1248f3f506ca9641d4f68cebcd538fa489754db8", + "url": "https://api.github.com/repos/ta-tikoma/phpunit-architecture-test/zipball/89f0dea1cb0f0d5744d3ec1764a286af5e006636", + "reference": "89f0dea1cb0f0d5744d3ec1764a286af5e006636", "shasum": "" }, "require": { "nikic/php-parser": "^4.18.0 || ^5.0.0", "php": "^8.1.0", - "phpdocumentor/reflection-docblock": "^5.3.0 || ^6.0.0", - "phpunit/phpunit": "^10.5.5 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "symfony/finder": "^6.4.0 || ^7.0.0 || ^8.0.0" + "phpdocumentor/reflection-docblock": "^5.3.0", + "phpunit/phpunit": "^10.5.5 || ^11.0.0", + "symfony/finder": "^6.4.0 || ^7.0.0" }, "require-dev": { "laravel/pint": "^1.13.7", @@ -10675,22 +9157,22 @@ ], "support": { "issues": "https://github.com/ta-tikoma/phpunit-architecture-test/issues", - "source": "https://github.com/ta-tikoma/phpunit-architecture-test/tree/0.8.7" + "source": "https://github.com/ta-tikoma/phpunit-architecture-test/tree/0.8.4" }, - "time": "2026-02-17T17:25:14+00:00" + "time": "2024-01-05T14:10:56+00:00" }, { "name": "theseer/tokenizer", - "version": "1.3.1", + "version": "1.2.3", "source": { "type": "git", "url": "https://github.com/theseer/tokenizer.git", - "reference": "b7489ce515e168639d17feec34b8847c326b0b3c" + "reference": "737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/theseer/tokenizer/zipball/b7489ce515e168639d17feec34b8847c326b0b3c", - "reference": "b7489ce515e168639d17feec34b8847c326b0b3c", + "url": "https://api.github.com/repos/theseer/tokenizer/zipball/737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2", + "reference": "737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2", "shasum": "" }, "require": { @@ -10719,7 +9201,7 @@ "description": "A small library for converting tokenized PHP source code into XML and potentially other formats", "support": { "issues": "https://github.com/theseer/tokenizer/issues", - "source": "https://github.com/theseer/tokenizer/tree/1.3.1" + "source": "https://github.com/theseer/tokenizer/tree/1.2.3" }, "funding": [ { @@ -10727,79 +9209,17 @@ "type": "github" } ], - "time": "2025-11-17T20:03:58+00:00" - }, - { - "name": "webmozart/assert", - "version": "2.1.5", - "source": { - "type": "git", - "url": "https://github.com/webmozarts/assert.git", - "reference": "79155f94852fa27e2f73b459f6503f5e87e2c188" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/webmozarts/assert/zipball/79155f94852fa27e2f73b459f6503f5e87e2c188", - "reference": "79155f94852fa27e2f73b459f6503f5e87e2c188", - "shasum": "" - }, - "require": { - "ext-ctype": "*", - "ext-date": "*", - "ext-filter": "*", - "php": "^8.2" - }, - "suggest": { - "ext-intl": "", - "ext-simplexml": "", - "ext-spl": "" - }, - "type": "library", - "extra": { - "branch-alias": { - "dev-feature/2-0": "2.0-dev" - } - }, - "autoload": { - "psr-4": { - "Webmozart\\Assert\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Bernhard Schussek", - "email": "bschussek@gmail.com" - }, - { - "name": "Woody Gilk", - "email": "woody.gilk@gmail.com" - } - ], - "description": "Assertions to validate method input/output with nice error messages.", - "keywords": [ - "assert", - "check", - "validate" - ], - "support": { - "issues": "https://github.com/webmozarts/assert/issues", - "source": "https://github.com/webmozarts/assert/tree/2.1.5" - }, - "time": "2026-02-18T14:09:36+00:00" + "time": "2024-03-03T12:36:25+00:00" } ], "aliases": [], "minimum-stability": "stable", - "stability-flags": {}, + "stability-flags": [], "prefer-stable": true, "prefer-lowest": false, "platform": { "php": "^8.2" }, - "platform-dev": {}, - "plugin-api-version": "2.9.0" + "platform-dev": [], + "plugin-api-version": "2.3.0" } diff --git a/backend/config/auth.php b/backend/config/auth.php index d3c3651..0ba5d5d 100644 --- a/backend/config/auth.php +++ b/backend/config/auth.php @@ -40,10 +40,6 @@ return [ 'driver' => 'session', 'provider' => 'users', ], - 'api' => [ - 'driver' => 'passport', - 'provider' => 'users', - ], ], /* diff --git a/backend/config/passport.php b/backend/config/passport.php deleted file mode 100644 index aed4358..0000000 --- a/backend/config/passport.php +++ /dev/null @@ -1,48 +0,0 @@ - 'web', - - 'middleware' => [], - - /* - |-------------------------------------------------------------------------- - | Encryption Keys - |-------------------------------------------------------------------------- - | - | Passport uses encryption keys while generating secure access tokens for - | your application. By default, the keys are stored as local files but - | can be set via environment variables when that is more convenient. - | - */ - - 'private_key' => env('PASSPORT_PRIVATE_KEY'), - - 'public_key' => env('PASSPORT_PUBLIC_KEY'), - - /* - |-------------------------------------------------------------------------- - | Passport Database Connection - |-------------------------------------------------------------------------- - | - | By default, Passport's models will utilize your application's default - | database connection. If you wish to use a different connection you - | may specify the configured name of the database connection here. - | - */ - - 'connection' => env('PASSPORT_CONNECTION'), - -]; diff --git a/backend/database/factories/EventFactory.php b/backend/database/factories/EventFactory.php deleted file mode 100644 index 6997173..0000000 --- a/backend/database/factories/EventFactory.php +++ /dev/null @@ -1,28 +0,0 @@ - - */ -class EventFactory extends Factory -{ - public function definition(): array - { - return [ - 'client_id' => Str::uuid()->toString(), - 'user_id' => User::factory(), - 'title' => fake()->sentence(3), - 'date' => fake()->date(), - 'emotion' => fake()->randomFloat(3, -1, 1), - 'custom_color' => null, - 'gradient_preset' => fake()->optional(0.3)->numberBetween(0, 9), - 'image' => null, - 'note' => fake()->optional(0.5)->sentence(), - ]; - } -} diff --git a/backend/database/migrations/2026_02_24_161650_create_oauth_auth_codes_table.php b/backend/database/migrations/2026_02_24_161650_create_oauth_auth_codes_table.php deleted file mode 100644 index c700b50..0000000 --- a/backend/database/migrations/2026_02_24_161650_create_oauth_auth_codes_table.php +++ /dev/null @@ -1,39 +0,0 @@ -char('id', 80)->primary(); - $table->foreignId('user_id')->index(); - $table->foreignUuid('client_id'); - $table->text('scopes')->nullable(); - $table->boolean('revoked'); - $table->dateTime('expires_at')->nullable(); - }); - } - - /** - * Reverse the migrations. - */ - public function down(): void - { - Schema::dropIfExists('oauth_auth_codes'); - } - - /** - * Get the migration connection name. - */ - public function getConnection(): ?string - { - return $this->connection ?? config('passport.connection'); - } -}; diff --git a/backend/database/migrations/2026_02_24_161651_create_oauth_access_tokens_table.php b/backend/database/migrations/2026_02_24_161651_create_oauth_access_tokens_table.php deleted file mode 100644 index 3e50f7f..0000000 --- a/backend/database/migrations/2026_02_24_161651_create_oauth_access_tokens_table.php +++ /dev/null @@ -1,41 +0,0 @@ -char('id', 80)->primary(); - $table->foreignId('user_id')->nullable()->index(); - $table->foreignUuid('client_id'); - $table->string('name')->nullable(); - $table->text('scopes')->nullable(); - $table->boolean('revoked'); - $table->timestamps(); - $table->dateTime('expires_at')->nullable(); - }); - } - - /** - * Reverse the migrations. - */ - public function down(): void - { - Schema::dropIfExists('oauth_access_tokens'); - } - - /** - * Get the migration connection name. - */ - public function getConnection(): ?string - { - return $this->connection ?? config('passport.connection'); - } -}; diff --git a/backend/database/migrations/2026_02_24_161652_create_oauth_refresh_tokens_table.php b/backend/database/migrations/2026_02_24_161652_create_oauth_refresh_tokens_table.php deleted file mode 100644 index afb3c55..0000000 --- a/backend/database/migrations/2026_02_24_161652_create_oauth_refresh_tokens_table.php +++ /dev/null @@ -1,37 +0,0 @@ -char('id', 80)->primary(); - $table->char('access_token_id', 80)->index(); - $table->boolean('revoked'); - $table->dateTime('expires_at')->nullable(); - }); - } - - /** - * Reverse the migrations. - */ - public function down(): void - { - Schema::dropIfExists('oauth_refresh_tokens'); - } - - /** - * Get the migration connection name. - */ - public function getConnection(): ?string - { - return $this->connection ?? config('passport.connection'); - } -}; diff --git a/backend/database/migrations/2026_02_24_161653_create_oauth_clients_table.php b/backend/database/migrations/2026_02_24_161653_create_oauth_clients_table.php deleted file mode 100644 index 9794dc8..0000000 --- a/backend/database/migrations/2026_02_24_161653_create_oauth_clients_table.php +++ /dev/null @@ -1,42 +0,0 @@ -uuid('id')->primary(); - $table->nullableMorphs('owner'); - $table->string('name'); - $table->string('secret')->nullable(); - $table->string('provider')->nullable(); - $table->text('redirect_uris'); - $table->text('grant_types'); - $table->boolean('revoked'); - $table->timestamps(); - }); - } - - /** - * Reverse the migrations. - */ - public function down(): void - { - Schema::dropIfExists('oauth_clients'); - } - - /** - * Get the migration connection name. - */ - public function getConnection(): ?string - { - return $this->connection ?? config('passport.connection'); - } -}; diff --git a/backend/database/migrations/2026_02_24_161654_create_oauth_device_codes_table.php b/backend/database/migrations/2026_02_24_161654_create_oauth_device_codes_table.php deleted file mode 100644 index ea07831..0000000 --- a/backend/database/migrations/2026_02_24_161654_create_oauth_device_codes_table.php +++ /dev/null @@ -1,42 +0,0 @@ -char('id', 80)->primary(); - $table->foreignId('user_id')->nullable()->index(); - $table->foreignUuid('client_id')->index(); - $table->char('user_code', 8)->unique(); - $table->text('scopes'); - $table->boolean('revoked'); - $table->dateTime('user_approved_at')->nullable(); - $table->dateTime('last_polled_at')->nullable(); - $table->dateTime('expires_at')->nullable(); - }); - } - - /** - * Reverse the migrations. - */ - public function down(): void - { - Schema::dropIfExists('oauth_device_codes'); - } - - /** - * Get the migration connection name. - */ - public function getConnection(): ?string - { - return $this->connection ?? config('passport.connection'); - } -}; diff --git a/backend/database/migrations/2026_02_24_161710_create_events_table.php b/backend/database/migrations/2026_02_24_161710_create_events_table.php deleted file mode 100644 index e021372..0000000 --- a/backend/database/migrations/2026_02_24_161710_create_events_table.php +++ /dev/null @@ -1,33 +0,0 @@ -id(); - $table->uuid('client_id')->unique(); - $table->foreignId('user_id')->constrained()->cascadeOnDelete(); - $table->string('title'); - $table->date('date'); - $table->decimal('emotion', 4, 3)->default(0); - $table->string('custom_color')->nullable(); - $table->unsignedTinyInteger('gradient_preset')->nullable(); - $table->string('image')->nullable(); - $table->text('note')->nullable(); - $table->timestamps(); - - $table->index(['user_id', 'date']); - $table->index(['user_id', 'updated_at']); - }); - } - - public function down(): void - { - Schema::dropIfExists('events'); - } -}; diff --git a/backend/package-lock.json b/backend/package-lock.json index 29e5849..d2371c6 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -1,10 +1,9 @@ { - "name": "html", + "name": "backend", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "html", "dependencies": { "@tailwindcss/vite": "^4.0.7", "autoprefixer": "^10.4.20", @@ -421,9 +420,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz", + "integrity": "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==", "cpu": [ "arm" ], @@ -434,9 +433,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.8.tgz", + "integrity": "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==", "cpu": [ "arm64" ], @@ -447,9 +446,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.8.tgz", + "integrity": "sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==", "cpu": [ "arm64" ], @@ -460,9 +459,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.8.tgz", + "integrity": "sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==", "cpu": [ "x64" ], @@ -473,9 +472,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.8.tgz", + "integrity": "sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==", "cpu": [ "arm64" ], @@ -486,9 +485,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.8.tgz", + "integrity": "sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==", "cpu": [ "x64" ], @@ -499,9 +498,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.8.tgz", + "integrity": "sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==", "cpu": [ "arm" ], @@ -512,9 +511,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.8.tgz", + "integrity": "sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==", "cpu": [ "arm" ], @@ -525,9 +524,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.8.tgz", + "integrity": "sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==", "cpu": [ "arm64" ], @@ -538,9 +537,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.8.tgz", + "integrity": "sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==", "cpu": [ "arm64" ], @@ -550,10 +549,10 @@ "linux" ] }, - "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.8.tgz", + "integrity": "sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==", "cpu": [ "loong64" ], @@ -563,10 +562,10 @@ "linux" ] }, - "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.8.tgz", + "integrity": "sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==", "cpu": [ "ppc64" ], @@ -577,22 +576,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", - "cpu": [ - "riscv64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz", + "integrity": "sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==", "cpu": [ "riscv64" ], @@ -603,9 +589,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz", + "integrity": "sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==", "cpu": [ "s390x" ], @@ -629,9 +615,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.8.tgz", + "integrity": "sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==", "cpu": [ "x64" ], @@ -641,23 +627,10 @@ "linux" ] }, - "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "openharmony" - ] - }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.8.tgz", + "integrity": "sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==", "cpu": [ "arm64" ], @@ -668,9 +641,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.8.tgz", + "integrity": "sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==", "cpu": [ "ia32" ], @@ -680,23 +653,10 @@ "win32" ] }, - "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.8.tgz", + "integrity": "sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==", "cpu": [ "x64" ], @@ -931,9 +891,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "license": "MIT" }, "node_modules/ansi-regex": { @@ -1004,13 +964,13 @@ } }, "node_modules/axios": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz", - "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==", + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", - "form-data": "^4.0.4", + "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } }, @@ -1033,7 +993,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -1352,15 +1311,14 @@ } }, "node_modules/form-data": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", - "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", + "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", - "hasown": "^2.0.2", "mime-types": "^2.1.12" }, "engines": { @@ -1886,7 +1844,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -1918,12 +1875,12 @@ } }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz", + "integrity": "sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==", "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.6" }, "bin": { "rollup": "dist/bin/rollup" @@ -1933,35 +1890,32 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.34.8", + "@rollup/rollup-android-arm64": "4.34.8", + "@rollup/rollup-darwin-arm64": "4.34.8", + "@rollup/rollup-darwin-x64": "4.34.8", + "@rollup/rollup-freebsd-arm64": "4.34.8", + "@rollup/rollup-freebsd-x64": "4.34.8", + "@rollup/rollup-linux-arm-gnueabihf": "4.34.8", + "@rollup/rollup-linux-arm-musleabihf": "4.34.8", + "@rollup/rollup-linux-arm64-gnu": "4.34.8", + "@rollup/rollup-linux-arm64-musl": "4.34.8", + "@rollup/rollup-linux-loongarch64-gnu": "4.34.8", + "@rollup/rollup-linux-powerpc64le-gnu": "4.34.8", + "@rollup/rollup-linux-riscv64-gnu": "4.34.8", + "@rollup/rollup-linux-s390x-gnu": "4.34.8", + "@rollup/rollup-linux-x64-gnu": "4.34.8", + "@rollup/rollup-linux-x64-musl": "4.34.8", + "@rollup/rollup-win32-arm64-msvc": "4.34.8", + "@rollup/rollup-win32-ia32-msvc": "4.34.8", + "@rollup/rollup-win32-x64-msvc": "4.34.8", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.8.tgz", + "integrity": "sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==", "cpu": [ "x64" ], @@ -2057,52 +2011,6 @@ "node": ">=6" } }, - "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", - "license": "MIT", - "dependencies": { - "fdir": "^6.5.0", - "picomatch": "^4.0.3" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/SuperchupuDev" - } - }, - "node_modules/tinyglobby/node_modules/fdir": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", - "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "license": "MIT", - "engines": { - "node": ">=12.0.0" - }, - "peerDependencies": { - "picomatch": "^3 || ^4" - }, - "peerDependenciesMeta": { - "picomatch": { - "optional": true - } - } - }, - "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", @@ -2149,18 +2057,14 @@ } }, "node_modules/vite": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.0.tgz", - "integrity": "sha512-oLnWs9Hak/LOlKjeSpOwD6JMks8BeICEdYMJBf6P4Lac/pO9tKiv/XhXnAM7nNfSkZahjlCZu9sS50zL8fSnsw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz", + "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", - "fdir": "^6.4.4", - "picomatch": "^4.0.2", "postcss": "^8.5.3", - "rollup": "^4.34.9", - "tinyglobby": "^0.2.13" + "rollup": "^4.30.1" }, "bin": { "vite": "bin/vite.js" @@ -2233,36 +2137,6 @@ "picomatch": "^2.3.1" } }, - "node_modules/vite/node_modules/fdir": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", - "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "license": "MIT", - "engines": { - "node": ">=12.0.0" - }, - "peerDependencies": { - "picomatch": "^3 || ^4" - }, - "peerDependenciesMeta": { - "picomatch": { - "optional": true - } - } - }, - "node_modules/vite/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", diff --git a/backend/phpunit.xml b/backend/phpunit.xml index 5e29d9f..61c031c 100644 --- a/backend/phpunit.xml +++ b/backend/phpunit.xml @@ -22,10 +22,8 @@ - - - - + + diff --git a/backend/routes/api.php b/backend/routes/api.php deleted file mode 100644 index 110e93f..0000000 --- a/backend/routes/api.php +++ /dev/null @@ -1,14 +0,0 @@ -group(function () { - Route::get('/user', fn (Request $request) => $request->user()); - - Route::apiResource('events', EventController::class)->parameters([ - 'events' => 'clientId', - ]); - Route::post('/events/sync', [EventController::class, 'sync']); -}); diff --git a/backend/tests/Feature/Api/EventTest.php b/backend/tests/Feature/Api/EventTest.php deleted file mode 100644 index 6f25c78..0000000 --- a/backend/tests/Feature/Api/EventTest.php +++ /dev/null @@ -1,186 +0,0 @@ -user = User::factory()->create(); - Passport::actingAs($this->user); -}); - -test('can list events', function () { - Event::factory()->count(3)->create(['user_id' => $this->user->id]); - - $response = $this->getJson('/api/events'); - - $response->assertOk() - ->assertJsonCount(3, 'data'); -}); - -test('list only returns own events', function () { - Event::factory()->count(2)->create(['user_id' => $this->user->id]); - Event::factory()->count(3)->create(); // other user - - $response = $this->getJson('/api/events'); - - $response->assertOk() - ->assertJsonCount(2, 'data'); -}); - -test('can filter events by since parameter', function () { - Event::factory()->create([ - 'user_id' => $this->user->id, - 'updated_at' => now()->subDays(5), - ]); - Event::factory()->create([ - 'user_id' => $this->user->id, - 'updated_at' => now()->subHour(), - ]); - - $response = $this->getJson('/api/events?since=' . now()->subDay()->toISOString()); - - $response->assertOk() - ->assertJsonCount(1, 'data'); -}); - -test('can create an event', function () { - $clientId = Str::uuid()->toString(); - - $response = $this->postJson('/api/events', [ - 'id' => $clientId, - 'title' => 'Mein Event', - 'date' => '2024-06-15', - 'emotion' => 0.75, - 'customColor' => null, - 'gradientPreset' => 2, - 'image' => null, - 'note' => 'Eine Notiz', - ]); - - $response->assertCreated() - ->assertJsonPath('data.id', $clientId) - ->assertJsonPath('data.title', 'Mein Event') - ->assertJsonPath('data.syncStatus', 'synced'); - - $this->assertDatabaseHas('events', [ - 'client_id' => $clientId, - 'user_id' => $this->user->id, - ]); -}); - -test('create validates required fields', function () { - $response = $this->postJson('/api/events', []); - - $response->assertUnprocessable() - ->assertJsonValidationErrors(['id', 'title', 'date', 'emotion']); -}); - -test('can show a single event', function () { - $event = Event::factory()->create(['user_id' => $this->user->id]); - - $response = $this->getJson("/api/events/{$event->client_id}"); - - $response->assertOk() - ->assertJsonPath('data.id', $event->client_id) - ->assertJsonPath('data.title', $event->title); -}); - -test('cannot show another users event', function () { - $event = Event::factory()->create(); - - $response = $this->getJson("/api/events/{$event->client_id}"); - - $response->assertNotFound(); -}); - -test('can update an event', function () { - $event = Event::factory()->create(['user_id' => $this->user->id]); - - $response = $this->putJson("/api/events/{$event->client_id}", [ - 'title' => 'Updated Title', - 'emotion' => -0.5, - ]); - - $response->assertOk() - ->assertJsonPath('data.title', 'Updated Title'); -}); - -test('can delete an event', function () { - $event = Event::factory()->create(['user_id' => $this->user->id]); - - $response = $this->deleteJson("/api/events/{$event->client_id}"); - - $response->assertNoContent(); - $this->assertDatabaseMissing('events', ['id' => $event->id]); -}); - -test('cannot delete another users event', function () { - $event = Event::factory()->create(); - - $response = $this->deleteJson("/api/events/{$event->client_id}"); - - $response->assertNotFound(); -}); - -test('batch sync creates updates and deletes', function () { - $existingEvent = Event::factory()->create(['user_id' => $this->user->id]); - $newId = Str::uuid()->toString(); - $deleteEvent = Event::factory()->create(['user_id' => $this->user->id]); - - $response = $this->postJson('/api/events/sync', [ - 'mutations' => [ - [ - 'action' => 'create', - 'eventId' => $newId, - 'payload' => [ - 'title' => 'New via sync', - 'date' => '2025-01-01', - 'emotion' => 0.3, - ], - ], - [ - 'action' => 'update', - 'eventId' => $existingEvent->client_id, - 'payload' => [ - 'title' => 'Updated via sync', - ], - ], - [ - 'action' => 'delete', - 'eventId' => $deleteEvent->client_id, - 'payload' => null, - ], - ], - ]); - - $response->assertOk() - ->assertJsonCount(3, 'results'); - - $this->assertDatabaseHas('events', ['client_id' => $newId, 'title' => 'New via sync']); - $this->assertDatabaseHas('events', ['client_id' => $existingEvent->client_id, 'title' => 'Updated via sync']); - $this->assertDatabaseMissing('events', ['client_id' => $deleteEvent->client_id]); -}); - -test('sync is idempotent for creates', function () { - $clientId = Str::uuid()->toString(); - - $this->postJson('/api/events/sync', [ - 'mutations' => [[ - 'action' => 'create', - 'eventId' => $clientId, - 'payload' => ['title' => 'First', 'date' => '2025-01-01', 'emotion' => 0], - ]], - ])->assertOk(); - - $this->postJson('/api/events/sync', [ - 'mutations' => [[ - 'action' => 'create', - 'eventId' => $clientId, - 'payload' => ['title' => 'Duplicate', 'date' => '2025-01-01', 'emotion' => 0], - ]], - ])->assertOk(); - - expect(Event::where('client_id', $clientId)->count())->toBe(1); -}); diff --git a/backend/vite.config.js b/backend/vite.config.js index dc94106..8299591 100644 --- a/backend/vite.config.js +++ b/backend/vite.config.js @@ -1,24 +1,15 @@ -/** - * Vite-Konfiguration für Backend (Thats-Me) - * - Domain: thats-me.test - * - Port: 5173 - * - Verwendet FluxUI - * - Build-Verzeichnis: public/build/thats-me - * - * Starten mit: npm run dev - */ +// npm run dev # dev server +// npm run build # build for production +// npm run preview # preview production build + import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import tailwindcss from "@tailwindcss/vite"; +import fs from "fs"; -const httpsConfig = - process.env.NODE_ENV === "production" - ? { - // In Produktion: echte Zertifikate verwenden - key: process.env.SSL_KEY_PATH, - cert: process.env.SSL_CERT_PATH, - } - : true; // Self-signed für Entwicklung +// Pfade zu deinen MAMP-Zertifikaten +// const certPath = "/Applications/MAMP/Library/OpenSSL/certs/thats-me.test.crt"; +// const keyPath = "/Applications/MAMP/Library/OpenSSL/certs/thats-me.test.key"; export default defineConfig({ plugins: [ @@ -29,34 +20,17 @@ export default defineConfig({ tailwindcss(), ], server: { - https: false, // Traefik übernimmt SSL - cors: { - origin: ["https://thats-me.test", "https://assets.thats-me.test"], - credentials: true, - }, - host: "0.0.0.0", + // https: { + // key: fs.readFileSync(keyPath), + // cert: fs.readFileSync(certPath), + // }, + cors: true, // Ergänze diese Zeile + host: "192.168.1.8", port: 5173, - strictPort: true, - allowedHosts: [ - "assets.thats-me.test", - "thats-me.test", - "localhost", - "0.0.0.0", - ], hmr: { - host: "assets.thats-me.test", - protocol: "wss", - }, - origin: "https://assets.thats-me.test", // Ohne Port! - }, - build: { - outDir: "public/build/thats-me", - assetsDir: "", - manifest: "manifest.json", - rollupOptions: { - output: { - manualChunks: undefined, - }, + host: "192.168.1.8", + protocol: "https", }, + origin: "https://192.168.1.8:5173", }, }); diff --git a/deploy.sh b/deploy.sh deleted file mode 100755 index 6f9d58b..0000000 --- a/deploy.sh +++ /dev/null @@ -1,538 +0,0 @@ -#!/bin/bash -# filepath: /Users/tbehrend/Repositories/thatsme/deploy.sh - -echo "🚀 Creating deployment packages for 'That's Me' deployment structure..." - -# Clean up previous deployment -rm -rf deployment -mkdir -p deployment/{frontend,backend} - -echo "📦 Building frontend..." -cd frontend -npm install -quasar build -cd .. - -echo "🔧 Preparing backend..." -cd backend -composer install --optimize-autoloader --no-dev --no-interaction - -if [ -f "package.json" ]; then - npm install - NODE_ENV=production npm run build -fi -cd .. - -echo "📂 Creating FRONTEND deployment structure..." - -# Frontend deployment - complete Quasar SPA -cp -r frontend/dist/spa/* deployment/frontend/ -cp -r frontend/public/images deployment/frontend/ -cp -r frontend/public/videos deployment/frontend/ -if [ -d "frontend/public/audio" ]; then - cp -r frontend/public/audio deployment/frontend/ -fi - -# Create frontend config for deployment -cat > deployment/frontend/config.js << 'EOF' -// Frontend configuration for deployment -window.APP_CONFIG = { - API_BASE_URL: '/api', - APP_URL: window.location.origin, - environment: 'production', - database: false -}; -EOF - -# Update frontend index.html to include config -sed -i.bak 's|| \n |' deployment/frontend/index.html - -# Create frontend .htaccess for SPA routing -cat > deployment/frontend/.htaccess << 'EOF' - - - Options -MultiViews -Indexes - - - RewriteEngine On - - # Handle client-side routing for Vue SPA - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteRule . /index.html [L] - - -# Cache static assets - - ExpiresActive on - ExpiresByType text/css "access plus 1 year" - ExpiresByType application/javascript "access plus 1 year" - ExpiresByType image/png "access plus 1 year" - ExpiresByType image/jpg "access plus 1 year" - ExpiresByType image/jpeg "access plus 1 year" - ExpiresByType image/gif "access plus 1 year" - ExpiresByType image/webp "access plus 1 year" - ExpiresByType video/mp4 "access plus 1 month" - - -# Security headers - - Header always set X-Content-Type-Options nosniff - Header always set X-Frame-Options SAMEORIGIN - Header always set X-XSS-Protection "1; mode=block" - -EOF - -echo "📂 Creating BACKEND deployment structure..." - -# Backend deployment - Laravel application -mkdir -p deployment/backend/{app,bootstrap,config,database,resources,routes,storage,vendor,public} - -# Copy Laravel core files -cp -r backend/app deployment/backend/ -cp -r backend/bootstrap deployment/backend/ -cp -r backend/config deployment/backend/ -cp -r backend/database deployment/backend/ -cp -r backend/resources deployment/backend/ -cp -r backend/routes deployment/backend/ -cp -r backend/storage deployment/backend/ -cp -r backend/vendor deployment/backend/ - -# Copy backend root files -cp backend/artisan deployment/backend/ -cp backend/composer.json deployment/backend/ -cp backend/composer.lock deployment/backend/ -if [ -f "backend/vite.config.js" ]; then - cp backend/vite.config.js deployment/backend/ -fi - -# Copy built assets to public -if [ -d "backend/public/build" ]; then - cp -r backend/public/build deployment/backend/public/ -fi - -# Copy other public assets -if [ -d "backend/public" ]; then - rsync -av --exclude='build' backend/public/ deployment/backend/public/ -fi - -# Create backend index.php for deployment structure -cat > deployment/backend/public/index.php << 'EOF' -make(Kernel::class); - -$response = $kernel->handle( - $request = Request::capture() -); - -$response->send(); - -$kernel->terminate($request, $response); -EOF - -# Create backend .htaccess -cat > deployment/backend/public/.htaccess << 'EOF' - - - Options -MultiViews -Indexes - - - RewriteEngine On - - # Handle Authorization Header - RewriteCond %{HTTP:Authorization} . - RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] - - # Redirect Trailing Slashes If Not A Folder - RewriteCond %{REQUEST_FILENAME} !-d - RewriteCond %{REQUEST_URI} (.+)/$ - RewriteRule ^ %1 [L,R=301] - - # Send Requests To Front Controller - RewriteCond %{REQUEST_FILENAME} !-d - RewriteCond %{REQUEST_FILENAME} !-f - RewriteRule ^ index.php [L] - - -# Security headers - - Header always set X-Content-Type-Options nosniff - Header always set X-Frame-Options DENY - Header always set X-XSS-Protection "1; mode=block" - - # CORS for deployment - Header always set Access-Control-Allow-Origin "*" - Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" - Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With" - -EOF - -# Create API routes for backend (database-free) -cat > deployment/backend/routes/web.php << 'EOF' -group(function () { - Route::middleware(['web'])->group(function () { - - Route::get('/health', function () { - return response()->json([ - 'status' => 'ok', - 'app' => 'That\'s Me Backend API', - 'version' => '1.0.0', - 'mode' => 'deployment-no-database', - 'timestamp' => now()->toISOString() - ]); - }); - - // Mock LifeWave data for anime.js visualizations - Route::get('/life-events', function () { - return response()->json([ - 'events' => [ - [ - 'id' => 1, - 'title' => 'Schulanfang', - 'value' => 0.8, - 'x' => 0.1, - 'imageUrl' => '/images/thumbs/aaron-huber-RLs8LZcONCA-unsplash.jpg', - 'date' => '2010-09-01', - 'description' => 'Mein erster Schultag war aufregend und voller neuer Erfahrungen.', - 'animationDelay' => 100 - ], - [ - 'id' => 2, - 'title' => 'Erster Job', - 'value' => 0.9, - 'x' => 0.3, - 'imageUrl' => '/images/thumbs/andrew-bui-z7rzbFHXym0-unsplash.jpg', - 'date' => '2020-03-15', - 'description' => 'Der Beginn meiner beruflichen Laufbahn in einem tollen Team.', - 'animationDelay' => 200 - ], - [ - 'id' => 3, - 'title' => 'Umzug nach München', - 'value' => 0.6, - 'x' => 0.5, - 'imageUrl' => '/images/thumbs/becca-tapert--A_Sx8GrRWg-unsplash.jpg', - 'date' => '2022-06-20', - 'description' => 'Ein großer Schritt in eine neue Stadt und neue Möglichkeiten.', - 'animationDelay' => 300 - ], - [ - 'id' => 4, - 'title' => 'Hochzeit', - 'value' => 1.0, - 'x' => 0.7, - 'imageUrl' => '/images/thumbs/fuu-j-r2nJPbEYuSQ-unsplash.jpg', - 'date' => '2023-08-12', - 'description' => 'Der schönste Tag meines Lebens mit der Person, die ich liebe.', - 'isFavorite' => true, - 'animationDelay' => 400 - ], - [ - 'id' => 5, - 'title' => 'Neues Projekt', - 'value' => 0.85, - 'x' => 0.9, - 'imageUrl' => '/images/thumbs/ian-dooley-hpTH5b6mo2s-unsplash.jpg', - 'date' => '2024-01-10', - 'description' => 'Start eines spannenden neuen Projekts mit großem Potenzial.', - 'isFavorite' => true, - 'animationDelay' => 500 - ] - ], - 'waveConfig' => [ - 'amplitude' => 0.3, - 'frequency' => 2, - 'animationDuration' => 2000, - 'easingFunction' => 'easeInOutQuad' - ] - ]); - }); - - // Mock entry detail for LifeWave interaction - Route::get('/entries/{id}', function ($id) { - $events = [ - 1 => [ - 'id' => 1, - 'title' => 'Schulanfang', - 'subtitle' => 'Ein wichtiger Meilenstein', - 'date' => '2010-09-01', - 'time' => '08:00', - 'location' => 'Grundschule am Park', - 'level' => 2, - 'keyImage' => '/images/thumbs/aaron-huber-RLs8LZcONCA-unsplash.jpg', - 'description' => 'Mein erster Schultag war aufregend und voller neuer Erfahrungen. Die Schultüte war schwer und ich war gleichzeitig nervös und neugierig.', - 'additionalImages' => [ - ['url' => '/images/thumbs/andrew-bui-z7rzbFHXym0-unsplash.jpg', 'caption' => 'Vorbereitung am Morgen'], - ['url' => '/images/thumbs/becca-tapert--A_Sx8GrRWg-unsplash.jpg', 'caption' => 'Mit der Familie'] - ], - 'audioRecordings' => [ - ['name' => 'Erinnerungen', 'url' => '/audio/sample.mp3'] - ], - 'videoRecordings' => [ - ['name' => 'Einschulungsfeier', 'url' => '/videos/3191901-uhd_3840_2160_25fps.mp4'] - ], - 'relatedPersons' => [ - ['id' => 1, 'name' => 'Mama', 'relation' => 'Mutter', 'avatar' => null], - ['id' => 2, 'name' => 'Papa', 'relation' => 'Vater', 'avatar' => null] - ], - 'categories' => [ - ['id' => 1, 'name' => 'Bildung', 'icon' => 'school'], - ['id' => 2, 'name' => 'Familie', 'icon' => 'family_restroom'] - ], - 'tags' => [ - ['id' => 1, 'name' => 'Aufregend', 'icon' => 'emoji_emotions'], - ['id' => 2, 'name' => 'Neuanfang', 'icon' => 'new_releases'] - ] - ] - ]; - - $event = $events[$id] ?? [ - 'id' => (int)$id, - 'title' => 'Sample Entry ' . $id, - 'subtitle' => 'Ein wichtiger Meilenstein', - 'date' => '2023-08-12', - 'time' => '14:30', - 'location' => 'München, Deutschland', - 'level' => 2, - 'keyImage' => '/images/familie2.png', - 'description' => 'Eine detaillierte Beschreibung dieses wichtigen Lebensereignisses.' - ]; - - return response()->json($event); - }); - }); -}); - -// Simple API info page -Route::get('/', function () { - return response()->json([ - 'app' => 'That\'s Me Backend API (Deployment)', - 'frontend_path' => '../frontend/', - 'api_endpoints' => [ - 'health' => '/api/health', - 'life_events' => '/api/life-events', - 'entry_detail' => '/api/entries/{id}' - ], - 'note' => 'Database-free deployment mode with mock LifeWave data' - ]); -}); -EOF - -# Create backend environment file for deployment -cat > deployment/backend/.env.production << 'EOF' -APP_NAME="That's Me Backend (Deployment)" -APP_ENV=production -APP_KEY= -APP_DEBUG=false -APP_URL=http://localhost - -LOG_CHANNEL=single -LOG_DEPRECATIONS_CHANNEL=null -LOG_LEVEL=error - -# NO DATABASE CONFIGURATION -# Database is disabled for this deployment - -# Cache Configuration (file-based, no database) -BROADCAST_DRIVER=log -CACHE_DRIVER=file -FILESYSTEM_DISK=local -QUEUE_CONNECTION=sync -SESSION_DRIVER=file -SESSION_LIFETIME=120 - -# Mail Configuration (optional) -MAIL_MAILER=log -EOF - -# Create root .htaccess for combined deployment -cat > deployment/.htaccess << 'EOF' - - - Options -MultiViews -Indexes - - - RewriteEngine On - - # API routes to backend - RewriteCond %{REQUEST_URI} ^/api/ - RewriteRule ^api/(.*)$ /backend/public/index.php [L,QSA] - - # Backend admin routes - RewriteCond %{REQUEST_URI} ^/admin/ - RewriteRule ^admin/(.*)$ /backend/public/index.php [L,QSA] - - # Frontend SPA (default) - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteCond %{REQUEST_URI} !^/backend/ - RewriteRule ^(.*)$ /frontend/index.html [L] - - -# Security headers - - Header always set X-Content-Type-Options nosniff - Header always set X-Frame-Options SAMEORIGIN - Header always set X-XSS-Protection "1; mode=block" - - -# Cache static assets - - ExpiresActive on - ExpiresByType text/css "access plus 1 year" - ExpiresByType application/javascript "access plus 1 year" - ExpiresByType image/png "access plus 1 year" - ExpiresByType image/jpg "access plus 1 year" - ExpiresByType image/jpeg "access plus 1 year" - ExpiresByType image/gif "access plus 1 year" - ExpiresByType image/webp "access plus 1 year" - ExpiresByType video/mp4 "access plus 1 month" - -EOF - -# Create combined deployment instructions -cat > deployment/README.md << 'EOF' -# That's Me - Production Deployment - -## Structure -``` -deployment/ -├── frontend/ # Quasar SPA build -│ ├── index.html -│ ├── js/ -│ ├── css/ -│ ├── images/ -│ ├── videos/ -│ └── .htaccess -├── backend/ # Laravel API -│ ├── app/ -│ ├── public/ -│ │ └── index.php -│ ├── routes/ -│ ├── .env.production -│ └── ... -├── .htaccess # Root routing -└── README.md -``` - -## Deployment Instructions - -### Option 1: Combined Deployment (Single Domain) -1. Upload entire `deployment/` folder contents to web root -2. Configure backend: - - Rename `backend/.env.production` to `backend/.env` - - Generate APP_KEY (see below) - - Set permissions: 755 for `backend/storage/` and `backend/bootstrap/cache/` - -### Option 2: Separate Subdomains -- Frontend: Upload `frontend/` contents to frontend subdomain -- Backend: Upload `backend/` contents to backend subdomain - -## Generate Laravel APP_KEY -Create temporary file in web root: -```php - -``` - -## URL Structure (Combined) -- **Frontend**: `yourdomain.com/` (Quasar LifeWave SPA) -- **API**: `yourdomain.com/api/health`, `/api/life-events`, `/api/entries/{id}` -- **Backend Admin**: `yourdomain.com/admin/` (if Livewire/Volt components added) - -## Features -- ✅ LifeWave visualization with anime.js -- ✅ Mock life events data for deployment -- ✅ Database-free operation -- ✅ CORS configured for cross-origin requests -- ✅ File-based sessions and cache -- ✅ SPA routing for Vue Router - -## Testing -- Health check: `/api/health` -- Life events: `/api/life-events` (returns events with animation config) -- Entry detail: `/api/entries/1` - -Perfect for production and demo environments! -EOF - -# Create individual deployment instructions -cat > deployment/frontend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF' -# Frontend Deployment - -## Standalone Frontend Deployment -Upload contents of this folder to web root for frontend-only deployment. - -## What's Included -- Complete Quasar SPA build with LifeWave visualization -- Images, videos, and audio assets -- SPA routing via .htaccess -- Production configuration - -## Dependencies -- Backend API for data (configure API_BASE_URL in config.js) -- anime.js for wave animations (included in build) -EOF - -cat > deployment/backend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF' -# Backend Deployment - -## Laravel API Deployment -Upload contents of this folder to web root for backend-only deployment. - -## Setup Steps -1. Rename `.env.production` to `.env` -2. Generate APP_KEY using provided instructions -3. Set file permissions: 755 for storage/ and bootstrap/cache/ -4. Test API endpoints - -## API Endpoints -- Health: `/api/health` -- Life Events: `/api/life-events` (LifeWave data with animation config) -- Entry Details: `/api/entries/{id}` - -## Features -- Database-free operation with mock data -- CORS configured for frontend integration -- Optimized for anime.js LifeWave visualizations -EOF - -echo "✅ Deployment structure created successfully!" -echo "" -echo "📁 Created deployment structure:" -echo " - deployment/frontend/ (Quasar SPA)" -echo " - deployment/backend/ (Laravel API)" -echo " - deployment/.htaccess (Combined routing)" -echo "" -echo "🎯 Deployment Options:" -echo " 1. Combined: Upload entire deployment/ folder" -echo " 2. Separate: Upload frontend/ and backend/ to different domains" -echo "" -echo "🌊 Features:" -echo " - LifeWave visualization ready" -echo " - Mock data with animation config" -echo " - Database-free operation" -echo " - anime.js integration support" -echo "" -echo "📋 Next: Follow README.md in deployment/ folder" \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index 0d74f9a..0000000 --- a/docker-compose.yml +++ /dev/null @@ -1,95 +0,0 @@ -services: - # Laravel Backend Service - laravel.test: - build: - context: './backend/vendor/laravel/sail/runtimes/8.4' - dockerfile: Dockerfile - args: - WWWGROUP: '${WWWGROUP:-20}' - WWWUSER: '${WWWUSER:-501}' - image: 'sail-8.4/app' - extra_hosts: - - 'host.docker.internal:host-gateway' - ports: - - '${VITE_PORT:-5180}:5173' - environment: - WWWUSER: '${WWWUSER:-501}' - WWWGROUP: '${WWWGROUP:-20}' - LARAVEL_SAIL: 1 - XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}' - XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}' - IGNITION_LOCAL_SITES_PATH: '${PWD}' - - # --- Anbindung an das Mutterschiff --- - DB_CONNECTION: mysql - DB_HOST: global-mysql - DB_PORT: 3306 - DB_DATABASE: thats-me - DB_USERNAME: root - DB_PASSWORD: password - MAIL_HOST: global-mailpit - MAIL_PORT: 1025 - REDIS_HOST: global-redis - volumes: - - './backend:/var/www/html' - - '.:/workspace:cached' - networks: - - sail - - proxy - labels: - - "traefik.enable=true" - - "traefik.http.routers.thatsme-main.rule=Host(`thats-me.test`)" - - "traefik.http.routers.thatsme-main.entrypoints=websecure" - - "traefik.http.routers.thatsme-main.tls=true" - - "traefik.http.routers.thatsme-main.service=thatsme-service" - - "traefik.http.routers.thatsme-portal.rule=Host(`portal.thats-me.test`)" - - "traefik.http.routers.thatsme-portal.entrypoints=websecure" - - "traefik.http.routers.thatsme-portal.tls=true" - - "traefik.http.routers.thatsme-portal.service=thatsme-service" - - "traefik.http.routers.thatsme-api.rule=Host(`api.thats-me.test`)" - - "traefik.http.routers.thatsme-api.entrypoints=websecure" - - "traefik.http.routers.thatsme-api.tls=true" - - "traefik.http.routers.thatsme-api.service=thatsme-service" - - "traefik.http.routers.thatsme-assets.rule=Host(`assets.thats-me.test`)" - - "traefik.http.routers.thatsme-assets.entrypoints=websecure" - - "traefik.http.routers.thatsme-assets.tls=true" - - "traefik.http.routers.thatsme-assets.service=thatsme-assets-service" - - "traefik.http.services.thatsme-service.loadbalancer.server.port=80" - - "traefik.http.services.thatsme-assets-service.loadbalancer.server.port=5173" - - "traefik.http.services.thatsme-assets-service.loadbalancer.server.scheme=http" - - "traefik.docker.network=proxy" - - # Quasar Frontend Service - quasar.app: - image: 'node:20-alpine' - working_dir: /app - command: sh -c "npm install && npm run dev" - ports: - - '${QUASAR_PORT:-9000}:9000' - environment: - NODE_ENV: development - volumes: - - './frontend:/app' - - 'quasar-node-modules:/app/node_modules' - networks: - - sail - - proxy - labels: - - "traefik.enable=true" - - "traefik.http.routers.thatsme-app.rule=Host(`app.thats-me.test`)" - - "traefik.http.routers.thatsme-app.entrypoints=websecure" - - "traefik.http.routers.thatsme-app.tls=true" - - "traefik.http.routers.thatsme-app.service=thatsme-app-service" - - "traefik.http.services.thatsme-app-service.loadbalancer.server.port=9000" - - "traefik.http.services.thatsme-app-service.loadbalancer.server.scheme=http" - - "traefik.docker.network=proxy" - -networks: - sail: - driver: bridge - proxy: - external: true - -volumes: - quasar-node-modules: - driver: local \ No newline at end of file diff --git a/documentation/layout/entry-edit-step-1.html b/documentation/layout/entry-edit-step-1.html deleted file mode 100644 index 2046337..0000000 --- a/documentation/layout/entry-edit-step-1.html +++ /dev/null @@ -1,121 +0,0 @@ - - - - - - - VΛYV App - Entry Edit Step 1 - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/documentation/layout/entry-edit-step-2.html b/documentation/layout/entry-edit-step-2.html deleted file mode 100644 index 02e2818..0000000 --- a/documentation/layout/entry-edit-step-2.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - - - - VΛYV App - Entry Edit Step 2 - - - - - - - - - - - -
-
- 9:43 -
-
-
-
-
-
-
- -
- Next -
-
- - -
-
Good
-
- - - - - - - - -
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - \ No newline at end of file diff --git a/documentation/layout/entry-edit-step-3.html b/documentation/layout/entry-edit-step-3.html deleted file mode 100644 index 4848fbe..0000000 --- a/documentation/layout/entry-edit-step-3.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - - VΛYV App - Entry Edit Step 3 - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/documentation/layout/entry-edit-step-4.html b/documentation/layout/entry-edit-step-4.html deleted file mode 100644 index 9eebb5a..0000000 --- a/documentation/layout/entry-edit-step-4.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - - - VΛYV App - Entry Edit Step 4 - - - - - - - - - - - -
-
- 9:45 -
-
-
-
-
-
-
- - - -
Media
- Next -
- -
- - -
-
- - View All -
-
-
- -
- Tap to select videos -
- -
-
- - -
-
- Holiday_clip.mp4 - 00:15 • 12MB -
- -
-
- - -
- - -
-
- -
-
- - -
- - -
-
- -
-
- Voice Note 01 - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0:14 -
-
-
-
- - - - - \ No newline at end of file diff --git a/documentation/layout/entry-edit-step-5.html b/documentation/layout/entry-edit-step-5.html deleted file mode 100644 index 0ec8356..0000000 --- a/documentation/layout/entry-edit-step-5.html +++ /dev/null @@ -1,173 +0,0 @@ - - - - - - - VΛYV App - Entry Edit Step 5 - - - - - - - - - - - -
-
- 9:46 -
-
-
-
-
-
-
- - - -
Details
-
-
- -
- - -
- -
-
- -
-
-
-
- - -
-
- - 2 selected -
-
- -
- -
-
-
- JD -
-
-
-
- - -
- - - -
-
- -
- -
- - - - -
-
- - -
- -
-
- -
-
- #happy - #summer -
-
- -
- - -
- - Publish - - -
-
- - - - - \ No newline at end of file diff --git a/documentation/layout/entry.html b/documentation/layout/entry.html deleted file mode 100644 index c49f4a7..0000000 --- a/documentation/layout/entry.html +++ /dev/null @@ -1,194 +0,0 @@ - - - -VΛYV App Interface Variations - - - - - - - - - - - - -
- -
- - -
- -
- - -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
- - -
- -
-
- Summer Wedding -
-
- Positivity +2 -
-
-

A day to remember forever

-
-
28 Jul, 14:30
-
Central Park, NY
-
-
- - -
- -
-
-
-
- - -
-

- The sun was shining perfectly through the trees as we arrived. It was one of those rare moments where everything feels exactly right. The laughter, the music, and the company made it unforgettable. I want to keep this memory close. -

-
- - -
- -
-
- -
-
-
- -
-
-
-
- - -
-
- - View All -
-
-
-
-
-
+5
-
-
- - -
- -
- -
- -
-
- -
-
- -
-
- -
- -
-
- Speech.m4a - 0:12 / 0:45 -
-
-
-
-
-
-
- - -
-
- -
- -
JD
-
-
- -
- -
- Celebration - #summer - #memories -
-
-
-
-
- - -
- - -
-
- - - - - \ No newline at end of file diff --git a/documentation/layout/index.html b/documentation/layout/index.html deleted file mode 100644 index ada9110..0000000 --- a/documentation/layout/index.html +++ /dev/null @@ -1,428 +0,0 @@ - - - - - - - VΛYV App - Wave Flow Duplicate - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- 9:41 -
- - - - - - - - - - - - - -
-
-
-
-
- - -
- Logo -
- - - - - - - - -
-
- - -
- -
- - - - - - - - - - - - - -
-
-
-
-
- 21 - Jun -
-
- -
-
-
-
-
- Concert -
- 25 Jun -
-
-
- - - -
-
-
-
- Wedding -
- 28 Jul -
-
- - -
-
-
-
-
- Dinner -
- 12 Aug -
-
-
- -
-
-
- 18 Aug -
- -
- -
-
- May - Jun - Jul - Aug - Sep -
-
-
2023
-
-
- - -
- - - - - - - -
- - - - -
- - - - - - - - - - -
-
- - - - - - - - - \ No newline at end of file diff --git a/documentation/layout/login.html b/documentation/layout/login.html deleted file mode 100644 index bf86648..0000000 --- a/documentation/layout/login.html +++ /dev/null @@ -1,296 +0,0 @@ - - - - - - - VΛYV App Interface Variations - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- 9:41 -
- - - - - - - - - - - -
-
-
-
-
- -
- -
-
-
-
- -
- - VΛYV Logo - -

Welcome back. Enter your credentials to access your VΛYV account.

-
- -
-
- -
-
- - -
- -
-
- -
-
- - Forgot - Password? -
-
-
- - -
- -
-
- - - Log In - - - - -
- -
-
- Or continue with -
-
- -
- - -
- -
-

Don't have an account? Sign up

-
-
-
- - - - - - - - \ No newline at end of file diff --git a/documentation/layout/profile.html b/documentation/layout/profile.html deleted file mode 100644 index 27366da..0000000 --- a/documentation/layout/profile.html +++ /dev/null @@ -1,338 +0,0 @@ - - - - - - - VΛYV App Interface Variations - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- 9:44 -
-
-
-
-
-
- -
- - - Edit Profile - -
- -
- - -
-
- - -
- Change Photo -
- -
- -
-

Personal Information

- -
-
-
- - -
-
- - -
-
- -
- -
- @ - -
-
- -
-
- - -
-
- - -
-
-
-
- -
- - -
-

About

- -
- - -
- -
- - -
-
- -
- - -
-

Contact & Links

- -
- -
- - -
-
- -
- -
- - -
-
-
-
- -
- - -
-

App Settings

-
- - Settings - - - - Theme - - -
-
-
-
- - - - - - - \ No newline at end of file diff --git a/documentation/layout/settings.html b/documentation/layout/settings.html deleted file mode 100644 index 305bd57..0000000 --- a/documentation/layout/settings.html +++ /dev/null @@ -1,339 +0,0 @@ - - - - - - - VΛYV App - Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- 9:45 -
-
-
-
-
-
- -
- - - Settings -
-
- -
- - -
- - -
- - -
-

Account

-
- -
- -
- -
-
- - -
-

Billing & Plan

-
- -
- -
-
- - -
-

Preferences

-
-
-
-
-
- Notifications -
-
- - -
-
-
-
-
-
-
- Dark Mode -
-
- - -
-
-
-
- - - - -

Version 2.4.0 (Build 302)

-
-
- - - - - - \ No newline at end of file diff --git a/documentation/layout/signup.html b/documentation/layout/signup.html deleted file mode 100644 index 20d4656..0000000 --- a/documentation/layout/signup.html +++ /dev/null @@ -1,196 +0,0 @@ - - - - - - - VΛYV App - Sign Up - - - - - - - - - - - - - -
- -
- 9:42 -
- - - - - - - - - - - -
-
-
-
-
- -
- - - - -
- -
-
- - VΛYV Logo -

Create Account

-

Join VΛYV to start capturing your journey.

-
- -
- -
-
- - -
-
- - -
-
- - -
- -
-
@
- -
-
- - -
-
- -
- -
- -
-
-
-
- - -
-
- - -
- -
-
- - -
- -
-
- - -
- -
-
- - -
- -
-
- - -
- -
-

By creating an account, you agree to our Terms of Service and Privacy - Policy.

-
- -
-

Already have an account? Log in

-
-
-
- - - - - - \ No newline at end of file diff --git a/documentation/layout/theme.html b/documentation/layout/theme.html deleted file mode 100644 index a813fba..0000000 --- a/documentation/layout/theme.html +++ /dev/null @@ -1,399 +0,0 @@ - - - - - - - VΛYV App - Theme Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- 9:46 -
-
-
-
-
-
- -
- - - Theme - -
- -
- - -
-
-
- - - - - - - - - - - - - - - - -
Preview -
- - -
- -
-
- - -
-
-

Background Color

- 10 presets -
- -
- - - - - - - - - - -
-
- - -
-
-

Wave & Appearance

- -
- -
- - -
- -
- - - - - - - - - - -
-
- -
- - -
-
- - 50% -
-
- -
- -
-
- -
-
- -
- - -
-
- - 75% -
-
- -
- -
-
- -
-
- - -
-
- - 3 -
-
- 1 -
- -
-
- 10 -
-
-
- - -
-
-
- Show Grid Lines -
-
- - -
-
- -
-
-
- - - - - \ No newline at end of file diff --git a/dot-line-system/.gitignore b/dot-line-system/.gitignore deleted file mode 100644 index a547bf3..0000000 --- a/dot-line-system/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/dot-line-system/.history/index_20250515080205.html b/dot-line-system/.history/index_20250515080205.html deleted file mode 100644 index a991726..0000000 --- a/dot-line-system/.history/index_20250515080205.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - -
- - -
-
-
-
- -
- - - diff --git a/dot-line-system/.history/index_20250515093839.html b/dot-line-system/.history/index_20250515093839.html deleted file mode 100644 index 8020d80..0000000 --- a/dot-line-system/.history/index_20250515093839.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
- - - - - diff --git a/dot-line-system/.history/index_20250522083017.html b/dot-line-system/.history/index_20250522083017.html deleted file mode 100644 index 1e0cd44..0000000 --- a/dot-line-system/.history/index_20250522083017.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
- - - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522083042.html b/dot-line-system/.history/index_20250522083042.html deleted file mode 100644 index 31c10e6..0000000 --- a/dot-line-system/.history/index_20250522083042.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522083155.html b/dot-line-system/.history/index_20250522083155.html deleted file mode 100644 index a4f6d5a..0000000 --- a/dot-line-system/.history/index_20250522083155.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522085953.html b/dot-line-system/.history/index_20250522085953.html deleted file mode 100644 index bc2c92b..0000000 --- a/dot-line-system/.history/index_20250522085953.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090004.html b/dot-line-system/.history/index_20250522090004.html deleted file mode 100644 index fa0ba23..0000000 --- a/dot-line-system/.history/index_20250522090004.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090012.html b/dot-line-system/.history/index_20250522090012.html deleted file mode 100644 index f556919..0000000 --- a/dot-line-system/.history/index_20250522090012.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090611.html b/dot-line-system/.history/index_20250522090611.html deleted file mode 100644 index 014c674..0000000 --- a/dot-line-system/.history/index_20250522090611.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090656.html b/dot-line-system/.history/index_20250522090656.html deleted file mode 100644 index 014c674..0000000 --- a/dot-line-system/.history/index_20250522090656.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090717.html b/dot-line-system/.history/index_20250522090717.html deleted file mode 100644 index bc7028c..0000000 --- a/dot-line-system/.history/index_20250522090717.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522090730.html b/dot-line-system/.history/index_20250522090730.html deleted file mode 100644 index 014c674..0000000 --- a/dot-line-system/.history/index_20250522090730.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522095109.html b/dot-line-system/.history/index_20250522095109.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522095109.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522114322.html b/dot-line-system/.history/index_20250522114322.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522114322.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522114359.html b/dot-line-system/.history/index_20250522114359.html deleted file mode 100644 index 4112aaf..0000000 --- a/dot-line-system/.history/index_20250522114359.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
- -
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522114425.html b/dot-line-system/.history/index_20250522114425.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522114425.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522114819.html b/dot-line-system/.history/index_20250522114819.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522114819.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130240.html b/dot-line-system/.history/index_20250522130240.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522130240.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130258.html b/dot-line-system/.history/index_20250522130258.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522130258.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130455.html b/dot-line-system/.history/index_20250522130455.html deleted file mode 100644 index d03862f..0000000 --- a/dot-line-system/.history/index_20250522130455.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - - - -
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130505.html b/dot-line-system/.history/index_20250522130505.html deleted file mode 100644 index 6adfe7f..0000000 --- a/dot-line-system/.history/index_20250522130505.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130518.html b/dot-line-system/.history/index_20250522130518.html deleted file mode 100644 index 9309940..0000000 --- a/dot-line-system/.history/index_20250522130518.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130539.html b/dot-line-system/.history/index_20250522130539.html deleted file mode 100644 index 9309940..0000000 --- a/dot-line-system/.history/index_20250522130539.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522130613.html b/dot-line-system/.history/index_20250522130613.html deleted file mode 100644 index 9309940..0000000 --- a/dot-line-system/.history/index_20250522130613.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522132851.html b/dot-line-system/.history/index_20250522132851.html deleted file mode 100644 index 77ca0c9..0000000 --- a/dot-line-system/.history/index_20250522132851.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522133036.html b/dot-line-system/.history/index_20250522133036.html deleted file mode 100644 index 77ca0c9..0000000 --- a/dot-line-system/.history/index_20250522133036.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522222202.html b/dot-line-system/.history/index_20250522222202.html deleted file mode 100644 index 77ca0c9..0000000 --- a/dot-line-system/.history/index_20250522222202.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Connected Dots Visualization - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/index_20250522222233.html b/dot-line-system/.history/index_20250522222233.html deleted file mode 100644 index 415baa6..0000000 --- a/dot-line-system/.history/index_20250522222233.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Life Line - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/.history/package_20250515093313.json b/dot-line-system/.history/package_20250515093313.json deleted file mode 100644 index 6d93786..0000000 --- a/dot-line-system/.history/package_20250515093313.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "dot-line-system", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.3.5" - } -} diff --git a/dot-line-system/.history/package_20250515093412.json b/dot-line-system/.history/package_20250515093412.json deleted file mode 100644 index 9c7aefd..0000000 --- a/dot-line-system/.history/package_20250515093412.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "dot-line-system", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.3.5" - }, - "scripts": { - "build": "vite build", - "start": "vite", - "tsc": "tsc" -} -} diff --git a/dot-line-system/.history/package_20250515093415.json b/dot-line-system/.history/package_20250515093415.json deleted file mode 100644 index 882780f..0000000 --- a/dot-line-system/.history/package_20250515093415.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "dot-line-system", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.3.5" - }, - "scripts": { - "build": "vite build", - "start": "vite", - "tsc": "tsc" - } -} diff --git a/dot-line-system/.history/readme_20250521221324.md b/dot-line-system/.history/readme_20250521221324.md deleted file mode 100644 index e69de29..0000000 diff --git a/dot-line-system/.history/readme_20250521221329.md b/dot-line-system/.history/readme_20250521221329.md deleted file mode 100644 index b896a08..0000000 --- a/dot-line-system/.history/readme_20250521221329.md +++ /dev/null @@ -1 +0,0 @@ -npm run dev \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250521221343.md b/dot-line-system/.history/readme_20250521221343.md deleted file mode 100644 index c2d989b..0000000 --- a/dot-line-system/.history/readme_20250521221343.md +++ /dev/null @@ -1,2 +0,0 @@ -*Start the project* -npm run dev \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250521221558.md b/dot-line-system/.history/readme_20250521221558.md deleted file mode 100644 index 509d6b0..0000000 --- a/dot-line-system/.history/readme_20250521221558.md +++ /dev/null @@ -1,3 +0,0 @@ -**Start the project** - -npm run dev \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250521221603.md b/dot-line-system/.history/readme_20250521221603.md deleted file mode 100644 index ca40a30..0000000 --- a/dot-line-system/.history/readme_20250521221603.md +++ /dev/null @@ -1,2 +0,0 @@ -**Start the project** -npm run dev \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250521221932.md b/dot-line-system/.history/readme_20250521221932.md deleted file mode 100644 index 46e160d..0000000 --- a/dot-line-system/.history/readme_20250521221932.md +++ /dev/null @@ -1,4 +0,0 @@ -**Start the project** -npm install - -npm run \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250522081835.md b/dot-line-system/.history/readme_20250522081835.md deleted file mode 100644 index 16dac6d..0000000 --- a/dot-line-system/.history/readme_20250522081835.md +++ /dev/null @@ -1,7 +0,0 @@ -**Prepare the project** -npm install - -**Start the project** -npm start - -http://localhost:5173/ \ No newline at end of file diff --git a/dot-line-system/.history/readme_20250522081843.md b/dot-line-system/.history/readme_20250522081843.md deleted file mode 100644 index 2d357b2..0000000 --- a/dot-line-system/.history/readme_20250522081843.md +++ /dev/null @@ -1,8 +0,0 @@ -**Prepare the project** -npm install - -**Start the project** -npm start - -**Aufrufen** -http://localhost:5173/ \ No newline at end of file diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515080205.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515080205.ts deleted file mode 100644 index 67a6b1d..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515080205.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094002.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094002.ts deleted file mode 100644 index 55596ee..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094002.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 200; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094010.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094010.ts deleted file mode 100644 index 430cc96..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094010.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 160; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094030.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094030.ts deleted file mode 100644 index c9bbcbb..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094030.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 160; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 10) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094033.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094033.ts deleted file mode 100644 index 430cc96..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094033.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 160; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094036.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094036.ts deleted file mode 100644 index 67a6b1d..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094036.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 200, - tooltipHeight: 150, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094059.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094059.ts deleted file mode 100644 index 4a059d8..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094059.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 150; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094215.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094215.ts deleted file mode 100644 index 2af0be1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094215.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 250; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094221.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094221.ts deleted file mode 100644 index 04e0114..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094221.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 300; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094419.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094419.ts deleted file mode 100644 index 6b48da2..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250515094419.ts +++ /dev/null @@ -1,545 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - imgContainer.setAttribute('width', (tooltipWidth - 20).toString()); - imgContainer.setAttribute('height', (tooltipHeight / 2).toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091556.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091556.ts deleted file mode 100644 index 5374d09..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091556.ts +++ /dev/null @@ -1,553 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - // Image (if provided) -if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); -} - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091605.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091605.ts deleted file mode 100644 index 96417a8..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091605.ts +++ /dev/null @@ -1,553 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091611.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091611.ts deleted file mode 100644 index 92dfc80..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091611.ts +++ /dev/null @@ -1,551 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - bg.setAttribute('width', tooltipWidth.toString()); - bg.setAttribute('height', tooltipHeight.toString()); - bg.setAttribute('rx', '5'); - bg.setAttribute('ry', '5'); - bg.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091723.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091723.ts deleted file mode 100644 index cc5d6e1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091723.ts +++ /dev/null @@ -1,561 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a square background for the tooltip - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Make the width and height equal for a square shape - const squareSize = Math.min(tooltipWidth, tooltipHeight); - bg.setAttribute('width', squareSize.toString()); - bg.setAttribute('height', squareSize.toString()); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can change this value for rounder corners - bg.setAttribute('ry', '5'); - - // Set the fill color to white - bg.setAttribute('fill', 'white'); - - tooltip.appendChild(bg); - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091732.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091732.ts deleted file mode 100644 index 1f2397f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091732.ts +++ /dev/null @@ -1,561 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a square background for the tooltip - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Make the width and height equal for a square shape - const squareSize = Math.min(tooltipWidth, tooltipHeight); - bg.setAttribute('width', squareSize.toString()); - bg.setAttribute('height', squareSize.toString()); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '2'); // You can change this value for rounder corners - bg.setAttribute('ry', '2'); - - // Set the fill color to white - bg.setAttribute('fill', 'white'); - - tooltip.appendChild(bg); - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091747.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091747.ts deleted file mode 100644 index fe1a619..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091747.ts +++ /dev/null @@ -1,561 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a square background for the tooltip - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Make the width and height equal for a square shape - const squareSize = Math.min(tooltipWidth, tooltipHeight); - bg.setAttribute('width', squareSize.toString()); - bg.setAttribute('height', squareSize.toString()); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '10'); // You can change this value for rounder corners - bg.setAttribute('ry', '10'); - - // Set the fill color to white - bg.setAttribute('fill', 'white'); - - tooltip.appendChild(bg); - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091858.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091858.ts deleted file mode 100644 index 3dde4dc..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091858.ts +++ /dev/null @@ -1,565 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute('width', width.toString()); - bg.setAttribute('height', height.toString()); - - // Remove any background fill - bg.setAttribute('fill', 'none'); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can set this to 0 for sharp corners - bg.setAttribute('ry', '5'); - - tooltip.appendChild(bg); - - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091957.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091957.ts deleted file mode 100644 index 8ab4815..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522091957.ts +++ /dev/null @@ -1,570 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute('width', width.toString()); - bg.setAttribute('height', height.toString()); - - // Remove any background fill - bg.setAttribute('fill', 'none'); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can set this to 0 for sharp corners - bg.setAttribute('ry', '5'); - - tooltip.appendChild(bg); - - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = '50%'; // Makes the image round - img.style.border = '1px solid white'; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092004.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092004.ts deleted file mode 100644 index c8fde55..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092004.ts +++ /dev/null @@ -1,570 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute('width', width.toString()); - bg.setAttribute('height', height.toString()); - - // Remove any background fill - bg.setAttribute('fill', 'none'); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can set this to 0 for sharp corners - bg.setAttribute('ry', '5'); - - tooltip.appendChild(bg); - - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = '100%'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = '50%'; // Makes the image round - img.style.border = '2px solid white'; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092036.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092036.ts deleted file mode 100644 index 72817cb..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092036.ts +++ /dev/null @@ -1,570 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute('width', width.toString()); - bg.setAttribute('height', height.toString()); - - // Remove any background fill - bg.setAttribute('fill', 'none'); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can set this to 0 for sharp corners - bg.setAttribute('ry', '5'); - - tooltip.appendChild(bg); - - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = '100%'; - img.style.height = 'calc(100% - 4px)'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = '50%'; // Makes the image round - img.style.border = '2px solid white'; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092041.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092041.ts deleted file mode 100644 index 11e1464..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092041.ts +++ /dev/null @@ -1,570 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor(containerId: string, dots: DotConfig[], config?: Partial) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - this.gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.curvePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - this.tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter(dot => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map(dot => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = {current: 0, total: imageUrls.length}; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log('All images preloaded successfully'); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - }; - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = 'connected-dots-styles'; - - if (!document.getElementById(styleId)) { - const style = document.createElement('style'); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute('width', `${this.config.totalWidth}`); - this.svg.setAttribute('height', `${this.config.height}`); - this.svg.style.overflow = 'visible'; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add('grid'); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute('fill', 'none'); - this.curvePath.setAttribute('stroke', 'white'); - this.curvePath.setAttribute('stroke-width', '2'); - this.curvePath.setAttribute('stroke-linecap', 'round'); - this.curvePath.classList.add('curve-path'); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add('tooltips'); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * (this.config.height / 2 * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints(dots: DotConfig[], index: number): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ''; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY(this.dots[0].value)}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints(this.dots, i); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', '0'); - line.setAttribute('y1', this.getDotY(value).toString()); - line.setAttribute('x2', this.config.totalWidth.toString()); - line.setAttribute('y2', this.getDotY(value).toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', '10'); - text.setAttribute('y', (this.getDotY(value) + 4).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil(this.config.totalWidth / this.config.xUnitSize); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line.setAttribute('x1', x.toString()); - line.setAttribute('y1', '0'); - line.setAttribute('x2', x.toString()); - line.setAttribute('y2', this.config.height.toString()); - line.setAttribute('stroke', 'rgba(219, 39, 119, 0.4)'); - line.setAttribute('stroke-width', '1'); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (this.config.height / 2 + 20).toString()); - text.setAttribute('fill', 'rgba(219, 39, 119, 0.8)'); - text.setAttribute('font-size', '12'); - text.setAttribute('text-anchor', 'middle'); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - tooltip.classList.add('dot-tooltip'); - tooltip.setAttribute('data-dot-id', dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('x', tooltipX.toString()); - bg.setAttribute('y', tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute('width', width.toString()); - bg.setAttribute('height', height.toString()); - - // Remove any background fill - bg.setAttribute('fill', 'none'); - - // Optional: Adjust corner rounding if needed - bg.setAttribute('rx', '5'); // You can set this to 0 for sharp corners - bg.setAttribute('ry', '5'); - - tooltip.appendChild(bg); - - - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - arrow.setAttribute('d', `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${tooltipY + tooltipHeight - 10} L ${x + 10} ${tooltipY + tooltipHeight - 10} Z`); - arrow.setAttribute('fill', 'rgba(0, 0, 0, 0.8)'); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - imgContainer.setAttribute('x', (tooltipX + 10).toString()); - imgContainer.setAttribute('y', (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min((tooltipWidth - 20), (tooltipHeight / 2)); - imgContainer.setAttribute('width', imageSize.toString()); - imgContainer.setAttribute('height', imageSize.toString()); - - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.className = 'tooltip-img'; - img.style.width = 'calc(100% - 4px)'; - img.style.height = 'calc(100% - 4px)'; - img.style.objectFit = 'cover'; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = '50%'; // Makes the image round - img.style.border = '2px solid white'; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - title.setAttribute('x', (tooltipX + 10).toString()); - title.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString()); - title.setAttribute('fill', 'white'); - title.setAttribute('font-size', '14'); - title.setAttribute('font-weight', 'bold'); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - descriptionFO.setAttribute('x', (tooltipX + 10).toString()); - descriptionFO.setAttribute('y', dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString()); - descriptionFO.setAttribute('width', (tooltipWidth - 20).toString()); - descriptionFO.setAttribute('height', (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement('div'); - descriptionDiv.style.color = 'white'; - descriptionDiv.style.fontSize = '12px'; - descriptionDiv.style.overflow = 'hidden'; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute('d', pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', this.config.dotRadius.toString()); - circle.setAttribute('fill', 'white'); - circle.setAttribute('data-dot-id', dot.id.toString()); - circle.classList.add('dot'); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener('click', () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error('Dot has no link'); - throw new Error('Dot has no link'); - } - }); - } - - this.dotsGroup.appendChild(circle); - }; - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute('width', `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map(dot => dot.x)); - const maxX = Math.max(...this.dots.map(dot => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute('height', `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092303.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092303.ts deleted file mode 100644 index 17e85ce..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092303.ts +++ /dev/null @@ -1,631 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092543.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092543.ts deleted file mode 100644 index e5b8d73..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092543.ts +++ /dev/null @@ -1,632 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092725.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092725.ts deleted file mode 100644 index 7030e16..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092725.ts +++ /dev/null @@ -1,641 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - - // Create a div with flexbox for centering content -const div = document.createElement('div'); -div.style.display = 'flex'; -div.style.justifyContent = 'center'; // Center horizontally -div.style.alignItems = 'center'; // Center vertically -div.style.width = '100%'; -div.style.height = '100%'; - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092810.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092810.ts deleted file mode 100644 index 9fdf164..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092810.ts +++ /dev/null @@ -1,647 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - -// Create a foreignObject for centering content -const container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); -container.setAttribute('width', width.toString()); -container.setAttribute('height', height.toString()); -container.setAttribute('x', tooltipX.toString()); -container.setAttribute('y', tooltipY.toString()); - -// Create a div with flexbox for centering content -const div = document.createElement('div'); -div.style.display = 'flex'; -div.style.justifyContent = 'center'; // Center horizontally -div.style.alignItems = 'center'; // Center vertically -div.style.width = '100%'; -div.style.height = '100%';'; - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092817.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092817.ts deleted file mode 100644 index 6022b32..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092817.ts +++ /dev/null @@ -1,648 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - - // Create a foreignObject for centering content -const container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); -container.setAttribute('width', width.toString()); -container.setAttribute('height', height.toString()); -container.setAttribute('x', tooltipX.toString()); -container.setAttribute('y', tooltipY.toString()); - -// Create a div with flexbox for centering content -const div = document.createElement('div'); -div.style.display = 'flex'; -div.style.justifyContent = 'center'; // Center horizontally -div.style.alignItems = 'center'; // Center vertically -div.style.width = '100%'; -div.style.height = '100%'; - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092936.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092936.ts deleted file mode 100644 index 6022b32..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522092936.ts +++ /dev/null @@ -1,648 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - - // Create a foreignObject for centering content -const container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); -container.setAttribute('width', width.toString()); -container.setAttribute('height', height.toString()); -container.setAttribute('x', tooltipX.toString()); -container.setAttribute('y', tooltipY.toString()); - -// Create a div with flexbox for centering content -const div = document.createElement('div'); -div.style.display = 'flex'; -div.style.justifyContent = 'center'; // Center horizontally -div.style.alignItems = 'center'; // Center vertically -div.style.width = '100%'; -div.style.height = '100%'; - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093038.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093038.ts deleted file mode 100644 index 9759151..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093038.ts +++ /dev/null @@ -1,650 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - - // Calculate tooltip Y position, ensuring it stays within the container - let tooltipY = y - tooltipHeight - 20; // Position above the dot with some spacing - - // Ensure tooltip doesn't go above the container - tooltipY = Math.max(tooltipY, 10); // Keep at least 10px from the top - - // Background rectangle - // Create a rectangle for the tooltip with a 9:16 aspect ratio - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - // Remove any background fill - bg.setAttribute("fill", "none"); - - // Optional: Adjust corner rounding if needed - bg.setAttribute("rx", "5"); // You can set this to 0 for sharp corners - bg.setAttribute("ry", "5"); - - tooltip.appendChild(bg); - - // Create a foreignObject for centering content - const container = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - container.setAttribute("width", width.toString()); - container.setAttribute("height", height.toString()); - container.setAttribute("x", tooltipX.toString()); - container.setAttribute("y", tooltipY.toString()); - - // Create a div with flexbox for centering content - const div = document.createElement("div"); - div.style.display = "flex"; - div.style.justifyContent = "center"; // Center horizontally - div.style.alignItems = "center"; // Center vertically - div.style.width = "100%"; - div.style.height = "100%"; - - // Tooltip arrow (pointing to the dot) - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - // Image (if provided) - if (dot.imageUrl) { - const imgContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - imgContainer.setAttribute("x", (tooltipX + 10).toString()); - imgContainer.setAttribute("y", (tooltipY + 10).toString()); - - // Set width and height to the same value for a square aspect ratio - const imageSize = Math.min(tooltipWidth - 20, tooltipHeight / 2); - imgContainer.setAttribute("width", imageSize.toString()); - imgContainer.setAttribute("height", imageSize.toString()); - - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.className = "tooltip-img"; - img.style.width = "calc(100% - 4px)"; - img.style.height = "calc(100% - 4px)"; - img.style.objectFit = "cover"; // Ensure the image covers the space while maintaining aspect ratio - - // Make the image circular and add a white border - img.style.borderRadius = "50%"; // Makes the image round - img.style.border = "2px solid white"; // Adds a 1px white border around the image - - imgContainer.appendChild(img); - tooltip.appendChild(imgContainer); - } - - // Title (if provided) - if (dot.title) { - const title = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - title.setAttribute("x", (tooltipX + 10).toString()); - title.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 26).toString() - : (tooltipY + 25).toString() - ); - title.setAttribute("class", "title"); - title.setAttribute("fill", "white"); - title.setAttribute("font-size", "14"); - title.setAttribute("font-weight", "bold"); - title.textContent = dot.title; - tooltip.appendChild(title); - } - - // Description (if provided) - if (dot.description) { - const descriptionFO = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - descriptionFO.setAttribute("x", (tooltipX + 10).toString()); - descriptionFO.setAttribute( - "y", - dot.imageUrl - ? (tooltipY + tooltipHeight / 2 + 32).toString() - : dot.title - ? (tooltipY + 35).toString() - : (tooltipY + 15).toString() - ); - descriptionFO.setAttribute("width", (tooltipWidth - 20).toString()); - descriptionFO.setAttribute("height", (tooltipHeight / 2 - 10).toString()); - - const descriptionDiv = document.createElement("div"); - descriptionDiv.style.color = "white"; - descriptionDiv.style.fontSize = "12px"; - descriptionDiv.style.overflow = "hidden"; - descriptionDiv.textContent = dot.description; - - descriptionFO.appendChild(descriptionDiv); - tooltip.appendChild(descriptionFO); - } - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093141.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093141.ts deleted file mode 100644 index 45ddb43..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093141.ts +++ /dev/null @@ -1,583 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div with flexbox for centering content - const div = document.createElement('div'); - div.style.display = 'flex'; - div.style.flexDirection = 'column'; - div.style.justifyContent = 'center'; // Center vertically - div.style.alignItems = 'center'; // Center horizontally - div.style.width = '100%'; - div.style.height = '100%'; - div.style.color = 'white'; // Set text color to white - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.style.width = '50px'; - img.style.height = '50px'; - img.style.borderRadius = '50%'; // Circular image - img.style.border = '2px solid white'; - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.style.fontSize = '14px'; - title.style.fontWeight = 'bold'; - title.textContent = dot.title; - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.style.fontSize = '12px'; - desc.textContent = dot.description; - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - return tooltip; - } - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093202.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093202.ts deleted file mode 100644 index 45ddb43..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093202.ts +++ /dev/null @@ -1,583 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} - -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} - -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} - -interface TooltipEdges { - leftmost: number; - rightmost: number; -} - -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - - private preloadedImages: Map = new Map(); - - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - - // Active tooltip - private activeTooltip: SVGElement | null = null; - - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - - // Set src to start loading - img.src = url; - - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - - // Configure dots group - this.svg.appendChild(this.dotsGroup); - - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - - return { x1, y1, x2, y2 }; - } - - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - - return path; - } - - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - - if (!this.config.showGrid) return; - - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div with flexbox for centering content - const div = document.createElement('div'); - div.style.display = 'flex'; - div.style.flexDirection = 'column'; - div.style.justifyContent = 'center'; // Center vertically - div.style.alignItems = 'center'; // Center horizontally - div.style.width = '100%'; - div.style.height = '100%'; - div.style.color = 'white'; // Set text color to white - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.style.width = '50px'; - img.style.height = '50px'; - img.style.borderRadius = '50%'; // Circular image - img.style.border = '2px solid white'; - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.style.fontSize = '14px'; - title.style.fontWeight = 'bold'; - title.textContent = dot.title; - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.style.fontSize = '12px'; - desc.textContent = dot.description; - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - - return tooltip; - } - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - - return { leftmost, rightmost }; - } - - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - - this.dotsGroup.appendChild(circle); - } - } - - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - - // Update grid width - this.drawGrid(); - } - } - - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093316.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093316.ts deleted file mode 100644 index 06180d3..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093316.ts +++ /dev/null @@ -1,500 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - // Create a div with flexbox for centering content - const div = document.createElement("div"); - div.style.display = "flex"; - div.style.flexDirection = "column"; - div.style.justifyContent = "center"; // Center vertically - div.style.alignItems = "center"; // Center horizontally - div.style.width = "100%"; - div.style.height = "100%"; - div.style.color = "white"; // Set text color to white - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.style.width = "50px"; - img.style.height = "50px"; - img.style.borderRadius = "50%"; // Circular image - img.style.border = "2px solid white"; - div.appendChild(img); - } - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "bold"; - title.textContent = dot.title; - div.appendChild(title); - } - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.style.fontSize = "12px"; - desc.textContent = dot.description; - div.appendChild(desc); - } - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - return tooltip; - } - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093434.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093434.ts deleted file mode 100644 index b1ea08f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093434.ts +++ /dev/null @@ -1,507 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - // Create a div with flexbox for centering content - const div = document.createElement("div"); - div.style.display = "flex"; - div.style.flexDirection = "column"; - div.style.justifyContent = "center"; // Center vertically - div.style.alignItems = "center"; // Center horizontally - div.style.width = "100%"; - div.style.height = "100%"; - div.style.color = "white"; // Set text color to white - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.style.width = "50px"; - img.style.height = "50px"; - img.style.borderRadius = "50%"; // Circular image - img.style.border = "2px solid white"; - div.appendChild(img); - } - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "bold"; - title.textContent = dot.title; - div.appendChild(title); - } - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.style.fontSize = "12px"; - desc.textContent = dot.description; - div.appendChild(desc); - } - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - return tooltip; - } - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093501.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093501.ts deleted file mode 100644 index f31146f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093501.ts +++ /dev/null @@ -1,504 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - // Create a foreignObject for centering content -const container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); -container.setAttribute('width', width.toString()); -container.setAttribute('height', height.toString()); -container.setAttribute('x', tooltipX.toString()); -container.setAttribute('y', tooltipY.toString()); - // Create a div with flexbox for centering content - const div = document.createElement("div"); - div.style.display = "flex"; - div.style.flexDirection = "column"; - div.style.justifyContent = "center"; // Center vertically - div.style.alignItems = "center"; // Center horizontally - div.style.width = "100%"; - div.style.height = "100%"; - div.style.color = "white"; // Set text color to white - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.style.width = "50px"; - img.style.height = "50px"; - img.style.borderRadius = "50%"; // Circular image - img.style.border = "2px solid white"; - div.appendChild(img); - } - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "bold"; - title.textContent = dot.title; - div.appendChild(title); - } - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.style.fontSize = "12px"; - desc.textContent = dot.description; - div.appendChild(desc); - } - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - return tooltip; - } - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093509.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093509.ts deleted file mode 100644 index 753c922..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093509.ts +++ /dev/null @@ -1,509 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - - // Calculate width and height based on ratio - const height = tooltipHeight; - const width = (9 / 16) * height; - - // Set the width and height for a 9:16 aspect ratio - bg.setAttribute("width", width.toString()); - bg.setAttribute("height", height.toString()); - - bg.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - bg.setAttribute("rx", "5"); // Rounded corners - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div with flexbox for centering content - const div = document.createElement("div"); - div.style.display = "flex"; - div.style.flexDirection = "column"; - div.style.justifyContent = "center"; // Center vertically - div.style.alignItems = "center"; // Center horizontally - div.style.width = "100%"; - div.style.height = "100%"; - div.style.color = "white"; // Set text color to white - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.style.width = "50px"; - img.style.height = "50px"; - img.style.borderRadius = "50%"; // Circular image - img.style.border = "2px solid white"; - div.appendChild(img); - } - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "bold"; - title.textContent = dot.title; - div.appendChild(title); - } - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.style.fontSize = "12px"; - desc.textContent = dot.description; - div.appendChild(desc); - } - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.setAttribute("fill", "rgba(0, 0, 0, 0.8)"); - tooltip.appendChild(arrow); - return tooltip; - } - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093827.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093827.ts deleted file mode 100644 index bf2b1db..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522093827.ts +++ /dev/null @@ -1,498 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094341.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094341.ts deleted file mode 100644 index 32ca3df..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094341.ts +++ /dev/null @@ -1,502 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - -// const tooltipWidth = 200; // or any other desired width -// const tooltipHeight = (16 / 9) * tooltipWidth; - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094352.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094352.ts deleted file mode 100644 index 2b23558..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094352.ts +++ /dev/null @@ -1,502 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - -// const tooltipWidth = 200; // or any other desired width -const tooltipHeight = (16 / 9) * tooltipWidth; - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; -// const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094405.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094405.ts deleted file mode 100644 index 4cd7fcf..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094405.ts +++ /dev/null @@ -1,502 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - -// const tooltipWidth = 200; // or any other desired width -const tooltipHeight = (16 / 9) * tooltipWidth; - - // Calculate tooltip dimensions and position -// const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094427.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094427.ts deleted file mode 100644 index 32ca3df..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094427.ts +++ /dev/null @@ -1,502 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - -// const tooltipWidth = 200; // or any other desired width -// const tooltipHeight = (16 / 9) * tooltipWidth; - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094438.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094438.ts deleted file mode 100644 index 3c582aa..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094438.ts +++ /dev/null @@ -1,499 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 4; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094441.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094441.ts deleted file mode 100644 index c5265a2..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094441.ts +++ /dev/null @@ -1,499 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - -private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - contentContainer.setAttribute('x', tooltipX.toString()); - contentContainer.setAttribute('y', tooltipY.toString()); - contentContainer.setAttribute('width', tooltipWidth.toString()); - contentContainer.setAttribute('height', tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement('div'); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement('img'); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement('div'); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement('div'); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; -} - - - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094711.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094711.ts deleted file mode 100644 index 30e1c6f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094711.ts +++ /dev/null @@ -1,503 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 80, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094716.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094716.ts deleted file mode 100644 index e47ca10..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094716.ts +++ /dev/null @@ -1,503 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 256, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094721.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094721.ts deleted file mode 100644 index 2af5013..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094721.ts +++ /dev/null @@ -1,503 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - const tooltipHeight = this.config.tooltipHeight; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094758.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094758.ts deleted file mode 100644 index 8617fec..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094758.ts +++ /dev/null @@ -1,504 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - // const tooltipHeight = this.config.tooltipHeight; - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094923.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094923.ts deleted file mode 100644 index 32f7715..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094923.ts +++ /dev/null @@ -1,504 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 2000, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - // const tooltipHeight = this.config.tooltipHeight; - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094927.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094927.ts deleted file mode 100644 index 8617fec..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094927.ts +++ /dev/null @@ -1,504 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = this.config.tooltipWidth; - // const tooltipHeight = this.config.tooltipHeight; - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094944.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094944.ts deleted file mode 100644 index b59444b..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522094944.ts +++ /dev/null @@ -1,505 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - // const tooltipWidth = this.config.tooltipWidth; - const tooltipWidth = 128; // Base width for your tooltip - // const tooltipHeight = this.config.tooltipHeight; - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095334.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095334.ts deleted file mode 100644 index 39b6cfa..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095334.ts +++ /dev/null @@ -1,503 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095400.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095400.ts deleted file mode 100644 index 909803b..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095400.ts +++ /dev/null @@ -1,505 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (16 / 9) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095543.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095543.ts deleted file mode 100644 index 17a9f48..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522095543.ts +++ /dev/null @@ -1,505 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (3 / 2) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - - // Add image if available - if (dot.imageUrl) { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - div.appendChild(img); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522101227.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522101227.ts deleted file mode 100644 index c6917bc..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522101227.ts +++ /dev/null @@ -1,516 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (3 / 2) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - -// Add image if available -if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); -} - - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102503.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102503.ts deleted file mode 100644 index b7cb7fa..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102503.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (2 / 1) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102521.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102521.ts deleted file mode 100644 index 4da8300..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102521.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102742.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102742.ts deleted file mode 100644 index aa55f93..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522102742.ts +++ /dev/null @@ -1,515 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522103253.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522103253.ts deleted file mode 100644 index 50be4e1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522103253.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104846.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104846.ts deleted file mode 100644 index 49a13c9..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104846.ts +++ /dev/null @@ -1,514 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 10 - }` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104938.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104938.ts deleted file mode 100644 index 50be4e1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522104938.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - tooltipY + tooltipHeight - 10 - } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105020.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105020.ts deleted file mode 100644 index 1d00c27..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105020.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 10 - }` -); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105023.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105023.ts deleted file mode 100644 index 7e730c0..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105023.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 100 - }` -); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105055.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105055.ts deleted file mode 100644 index afceca6..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105055.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 100 - }` -); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "black"); // Set the color of the line -arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105115.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105115.ts deleted file mode 100644 index 86a13eb..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105115.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 10 - }` - ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "black"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105129.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105129.ts deleted file mode 100644 index 39a5153..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105129.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 10 - }` - ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105224.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105224.ts deleted file mode 100644 index 39a5153..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105224.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 10 - }` - ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105229.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105229.ts deleted file mode 100644 index 1222aed..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105229.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 20 - }` - ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105242.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105242.ts deleted file mode 100644 index 17ac986..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105242.ts +++ /dev/null @@ -1,522 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x - 10} ${ - // tooltipY + tooltipHeight - 10 - // } L ${x + 10} ${tooltipY + tooltipHeight - 10} Z` - // ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105702.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105702.ts deleted file mode 100644 index 8ac83b7..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105702.ts +++ /dev/null @@ -1,518 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - -// Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105928.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105928.ts deleted file mode 100644 index 86baa3a..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522105928.ts +++ /dev/null @@ -1,518 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - contentContainer.appendChild(div); - - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110035.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110035.ts deleted file mode 100644 index 6937c4e..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110035.ts +++ /dev/null @@ -1,518 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110335.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110335.ts deleted file mode 100644 index 438af12..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110335.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110431.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110431.ts deleted file mode 100644 index 438af12..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110431.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110437.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110437.ts deleted file mode 100644 index 438af12..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110437.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110859.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110859.ts deleted file mode 100644 index 68cb2dd..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110859.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110953.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110953.ts deleted file mode 100644 index 91bc4d5..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522110953.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - // const arrowContainer = document.createElement("div"); - // const arrow = document.createElementNS( - // "http://www.w3.org/2000/svg", - // "path" - // ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - // tooltipY + tooltipHeight - 16 - // }` - // ); - - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - // contentContainer.appendChild(div); - // tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111000.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111000.ts deleted file mode 100644 index 8c121c1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111000.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - // const arrowContainer = document.createElement("div"); - // const arrow = document.createElementNS( - // "http://www.w3.org/2000/svg", - // "path" - // ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - // tooltipY + tooltipHeight - 16 - // }` - // ); - - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - // tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111003.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111003.ts deleted file mode 100644 index e9552ed..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111003.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - // const arrowContainer = document.createElement("div"); - // const arrow = document.createElementNS( - // "http://www.w3.org/2000/svg", - // "path" - // ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - // tooltipY + tooltipHeight - 16 - // }` - // ); - - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111016.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111016.ts deleted file mode 100644 index 5da3526..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111016.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - // const arrow = document.createElementNS( - // "http://www.w3.org/2000/svg", - // "path" - // ); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - // tooltipY + tooltipHeight - 16 - // }` - // ); - - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111039.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111039.ts deleted file mode 100644 index d55288c..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111039.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111311.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111311.ts deleted file mode 100644 index dd913cb..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111311.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - // arrow.classList.add("tooltip-arrow"); - // tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111404.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111404.ts deleted file mode 100644 index e292a55..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111404.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - tooltip.appendChild(arrow); - - // arrowContainer.classList.add("arrow-container"); - // div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111448.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111448.ts deleted file mode 100644 index 9fc82a8..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111448.ts +++ /dev/null @@ -1,521 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - // tooltip.appendChild(arrow); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111457.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111457.ts deleted file mode 100644 index 3774628..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111457.ts +++ /dev/null @@ -1,521 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Add arrow path if needed - const arrowContainer = document.createElement("div"); - const arrow = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${ - tooltipY + tooltipHeight - 16 - }` - ); - - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - tooltip.appendChild(arrow); - - arrowContainer.classList.add("arrow-container"); - div.appendChild(arrowContainer); - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111743.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111743.ts deleted file mode 100644 index 7d44994..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111743.ts +++ /dev/null @@ -1,510 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - ); - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111904.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111904.ts deleted file mode 100644 index 50d9cb1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111904.ts +++ /dev/null @@ -1,510 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - ); - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - // div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111911.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111911.ts deleted file mode 100644 index fe01e2e..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111911.ts +++ /dev/null @@ -1,510 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - ); - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - // contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111915.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111915.ts deleted file mode 100644 index 50d9cb1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111915.ts +++ /dev/null @@ -1,510 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - ); - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - // div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111956.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111956.ts deleted file mode 100644 index 7d44994..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522111956.ts +++ /dev/null @@ -1,510 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - arrow.setAttribute( - "d", - `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - ); - arrow.setAttribute("stroke", "white"); // Set the color of the line - arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112131.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112131.ts deleted file mode 100644 index a91b304..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112131.ts +++ /dev/null @@ -1,514 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create an empty div for the arrow - const arrowDiv = document.createElement('div'); - - // Optionally set styles directly or via CSS class - arrowDiv.style.width = '0'; - arrowDiv.style.height = '0'; - - // Apply styling through a CSS class if needed - arrowDiv.classList.add('tooltip-arrow'); - - // Append this div to the tooltip content - tooltip.appendChild(arrowDiv); - - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112202.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112202.ts deleted file mode 100644 index 4b18c27..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112202.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - const arrowDiv = document.createElement('div'); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112233.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112233.ts deleted file mode 100644 index 3d40c1a..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112233.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "5"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement('div'); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112657.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112657.ts deleted file mode 100644 index d6f1677..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112657.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 20; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement('div'); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112705.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112705.ts deleted file mode 100644 index 2f0cc48..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522112705.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement('div'); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113133.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113133.ts deleted file mode 100644 index 2414b46..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113133.ts +++ /dev/null @@ -1,534 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - if (dot.imageUrl) { - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Create the image element - const img = document.createElement("img"); - - // Check if link is available for the image - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - img = link; // Use the link as the image container - } else { - img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - } - - - // img.src = dot.imageUrl; - // img.classList.add("tooltip-image"); - - // Append image to the container - imageContainer.appendChild(img); - - // Append the image container to the main div - div.appendChild(imageContainer); - } - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement('div'); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; -} - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113224.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113224.ts deleted file mode 100644 index 7c23506..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113224.ts +++ /dev/null @@ -1,529 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113610.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113610.ts deleted file mode 100644 index 9675052..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113610.ts +++ /dev/null @@ -1,556 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - -// Create a container div -const imageContainer = document.createElement("div"); -imageContainer.classList.add("image_container"); // Add image_container class - -// Define a variable for handling case with or without link -let imgWrapper: HTMLElement; - -if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - -} else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper -} - -// Append imgWrapper to the container -imageContainer.appendChild(imgWrapper); - -// Append the image container to the main div -div.appendChild(imageContainer); - - - - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113613.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113613.ts deleted file mode 100644 index 47cb999..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113613.ts +++ /dev/null @@ -1,531 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113628.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113628.ts deleted file mode 100644 index c369897..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113628.ts +++ /dev/null @@ -1,540 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - -} else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper -} - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113832.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113832.ts deleted file mode 100644 index 711322c..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113832.ts +++ /dev/null @@ -1,538 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - // Create arrow path and add it inside tooltip-content - // const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // arrow.setAttribute( - // "d", - // `M ${x} ${tooltipY + tooltipHeight} L ${x} ${tooltipY + tooltipHeight - 16}` - // ); - // arrow.setAttribute("stroke", "white"); // Set the color of the line - // arrow.setAttribute("stroke-width", "1"); // Set the line width to 1px - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113857.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113857.ts deleted file mode 100644 index 349001c..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522113857.ts +++ /dev/null @@ -1,529 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_blank"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522130644.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522130644.ts deleted file mode 100644 index cd217f8..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522130644.ts +++ /dev/null @@ -1,529 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - style.textContent = ` - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } - `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131005.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131005.ts deleted file mode 100644 index 53911b5..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131005.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 120; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131150.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131150.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131150.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131159.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131159.ts deleted file mode 100644 index 9a81055..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131159.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 4 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131202.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131202.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131202.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131206.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131206.ts deleted file mode 100644 index 444b740..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131206.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 8, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131208.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131208.ts deleted file mode 100644 index 2424805..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131208.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 2, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131212.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131212.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131212.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131413.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131413.ts deleted file mode 100644 index c0407b0..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131413.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 4) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131415.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131415.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131415.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131457.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131457.ts deleted file mode 100644 index 77047be..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131457.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "1"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131501.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131501.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131501.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131509.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131509.ts deleted file mode 100644 index fc75b2e..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131509.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.6); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131516.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131516.ts deleted file mode 100644 index 83711f3..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131516.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 1); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131534.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131534.ts deleted file mode 100644 index 8b15f8f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131534.ts +++ /dev/null @@ -1,512 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131713.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131713.ts deleted file mode 100644 index e1f37a9..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131713.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 260; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131724.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131724.ts deleted file mode 100644 index 7103267..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131724.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 160; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131749.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131749.ts deleted file mode 100644 index 2ed8e19..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131749.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 130; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131803.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131803.ts deleted file mode 100644 index 006961b..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131803.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131811.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131811.ts deleted file mode 100644 index eed179f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131811.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.8); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131917.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131917.ts deleted file mode 100644 index 0ddd0fd..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131917.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.6); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131950.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131950.ts deleted file mode 100644 index 4b71306..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131950.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131954.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131954.ts deleted file mode 100644 index cb6ec9c..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131954.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.4); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131959.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131959.ts deleted file mode 100644 index 5fd0bec..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522131959.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.3); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132013.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132013.ts deleted file mode 100644 index 4b71306..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132013.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132035.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132035.ts deleted file mode 100644 index 112735f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132035.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 2.5; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132039.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132039.ts deleted file mode 100644 index 8a01ad6..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132039.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.5; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132042.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132042.ts deleted file mode 100644 index 8f12e05..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132042.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.75; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132047.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132047.ts deleted file mode 100644 index 8a01ad6..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132047.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.5; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132050.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132050.ts deleted file mode 100644 index 226ae2e..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132050.ts +++ /dev/null @@ -1,513 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in a new tab - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132342.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132342.ts deleted file mode 100644 index d0bc631..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132342.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - } else { - console.error("Dot has no image URL"); - throw new Error("Dot has no image URL"); - } - - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132517.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132517.ts deleted file mode 100644 index 4b624e8..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132517.ts +++ /dev/null @@ -1,520 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - } else { - console.error("Dot has no image URL"); - throw new Error("Dot has no image URL"); - } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - if (dot.imageUrl) { - // Append the image container to the main div - div.appendChild(imageContainer); - } - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132606.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132606.ts deleted file mode 100644 index b7ad570..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522132606.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.5); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133122.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133122.ts deleted file mode 100644 index 44396a6..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133122.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.75); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133129.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133129.ts deleted file mode 100644 index f8653dd..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522133129.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 140; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151345.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151345.ts deleted file mode 100644 index 2a466f5..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151345.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 100; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151350.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151350.ts deleted file mode 100644 index dd0a30f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151350.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 200; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151359.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151359.ts deleted file mode 100644 index 490f84c..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151359.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 300; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151406.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151406.ts deleted file mode 100644 index 2a466f5..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151406.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 100; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151421.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151421.ts deleted file mode 100644 index dd0a30f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151421.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 200; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151436.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151436.ts deleted file mode 100644 index 0a4e875..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151436.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * -200; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151449.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151449.ts deleted file mode 100644 index 1f21eae..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151449.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 1; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151453.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151453.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151453.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151603.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151603.ts deleted file mode 100644 index 1f21eae..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151603.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 1; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151629.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151629.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522151629.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153324.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153324.ts deleted file mode 100644 index 3347189..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153324.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 5) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153329.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153329.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153329.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153337.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153337.ts deleted file mode 100644 index 169ec98..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153337.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 1) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153342.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153342.ts deleted file mode 100644 index 74fdb33..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153342.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 3) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153345.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153345.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153345.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153407.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153407.ts deleted file mode 100644 index 23b08b1..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153407.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 1000; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153429.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153429.ts deleted file mode 100644 index 5c09ff4..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153429.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 2000; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153437.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153437.ts deleted file mode 100644 index 50cacbb..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153437.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 600; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153447.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153447.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153447.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153457.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153457.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153457.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153502.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153502.ts deleted file mode 100644 index e04360f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153502.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 400; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153506.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153506.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522153506.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222207.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222207.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222207.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222913.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222913.ts deleted file mode 100644 index efab24d..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222913.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 250; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222945.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222945.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222945.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222952.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222952.ts deleted file mode 100644 index e04360f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522222952.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 400; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522231943.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522231943.ts deleted file mode 100644 index dd0a30f..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522231943.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 200; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522232002.ts b/dot-line-system/.history/src/ConnectedDotsVisualization_20250522232002.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/.history/src/ConnectedDotsVisualization_20250522232002.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/.history/src/main_20250515080205.ts b/dot-line-system/.history/src/main_20250515080205.ts deleted file mode 100644 index 8a942d7..0000000 --- a/dot-line-system/.history/src/main_20250515080205.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - value: -0.5, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093647.ts b/dot-line-system/.history/src/main_20250515093647.ts deleted file mode 100644 index 5e9fbe2..0000000 --- a/dot-line-system/.history/src/main_20250515093647.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.5, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - value: -0.5, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093655.ts b/dot-line-system/.history/src/main_20250515093655.ts deleted file mode 100644 index 676a346..0000000 --- a/dot-line-system/.history/src/main_20250515093655.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.0, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - value: -0.5, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093704.ts b/dot-line-system/.history/src/main_20250515093704.ts deleted file mode 100644 index 8a942d7..0000000 --- a/dot-line-system/.history/src/main_20250515093704.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - value: -0.5, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093739.ts b/dot-line-system/.history/src/main_20250515093739.ts deleted file mode 100644 index a19b572..0000000 --- a/dot-line-system/.history/src/main_20250515093739.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: 1, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093749.ts b/dot-line-system/.history/src/main_20250515093749.ts deleted file mode 100644 index bf12248..0000000 --- a/dot-line-system/.history/src/main_20250515093749.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: 0.25, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093755.ts b/dot-line-system/.history/src/main_20250515093755.ts deleted file mode 100644 index 65a2ee2..0000000 --- a/dot-line-system/.history/src/main_20250515093755.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: -2, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093801.ts b/dot-line-system/.history/src/main_20250515093801.ts deleted file mode 100644 index ef4c9df..0000000 --- a/dot-line-system/.history/src/main_20250515093801.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: -1, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250515093807.ts b/dot-line-system/.history/src/main_20250515093807.ts deleted file mode 100644 index 3723c3a..0000000 --- a/dot-line-system/.history/src/main_20250515093807.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: 0, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250522082517.ts b/dot-line-system/.history/src/main_20250522082517.ts deleted file mode 100644 index 0282657..0000000 --- a/dot-line-system/.history/src/main_20250522082517.ts +++ /dev/null @@ -1,198 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: 0, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - },{ - id: 1, - value: -1.8, - x: -6, - imageUrl: 'https://picsum.photos/200/150?random=1', - title: 'First Point', - description: 'This is the starting point of our journey.', - link: '/page1' - }, - { - id: 2, - value: 1.2, - x: -4, - imageUrl: 'https://picsum.photos/200/150?random=2', - title: 'Rising Up', - description: 'We begin to see an upward trend here.' - }, - { - id: 3, - value: -0.6, - x: -2, - imageUrl: 'https://picsum.photos/200/150?random=3', - title: 'Minor Dip', - description: 'A small setback before the major growth.', - link: '/page3' - }, - { - id: 4, - value: 2.7, - x: 0, - imageUrl: 'https://picsum.photos/200/150?random=4', - title: 'Peak Performance', - description: 'This is our highest point so far!', - link: '/page4' - }, - { - id: 5, - value: 0.8, - x: 2, - imageUrl: 'https://picsum.photos/200/150?random=5', - title: 'Normalization', - description: 'Returning to more sustainable levels.' - }, - { - id: 6, - value: -2.9, - x: 4, - imageUrl: 'https://picsum.photos/200/150?random=6', - title: 'Major Decline', - description: 'A significant drop in our metrics.', - link: '/page6' - }, - { - id: 7, - value: 1.5, - x: 6, - imageUrl: 'https://picsum.photos/200/150?random=7', - title: 'Recovery', - description: 'Bouncing back strongly from the previous low.' - }, - { - id: 8, - //value: -0.5, - value: 0, - x: 8, - imageUrl: 'https://picsum.photos/200/150?random=8', - title: 'Slight Dip', - description: 'A minor correction in our upward trend.', - link: '/page8' - }, - { - id: 9, - value: 2.1, - x: 10, - imageUrl: 'https://picsum.photos/200/150?random=9', - title: 'Second Peak', - description: 'Another high point in our journey.' - } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250522082653.ts b/dot-line-system/.history/src/main_20250522082653.ts deleted file mode 100644 index 2f08cdd..0000000 --- a/dot-line-system/.history/src/main_20250522082653.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - const data = [ - { id: 1, value: -1.8, x: -6, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point', description: 'This is the starting point of our journey.', link: '/page1' }, - { id: 2, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up', description: 'We begin to see an upward trend here.' }, - { id: 3, value: -0.6, x: -2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip', description: 'A small setback before the major growth.', link: '/page3' }, - { id: 4, value: 2.7, x: 0, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance', description: 'This is our highest point so far!', link: '/page4' }, - { id: 5, value: 0.8, x: 2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization', description: 'Returning to more sustainable levels.' }, - { id: 6, value: -2.9, x: 4, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline', description: 'A significant drop in our metrics.', link: '/page6' }, - { id: 7, value: 1.5, x: 6, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery', description: 'Bouncing back strongly from the previous low.' }, - { id: 8, value: 0, x: 8, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip', description: 'A minor correction in our upward trend.', link: '/page8' }, - { id: 9, value: 2.1, x: 10, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak', description: 'Another high point in our journey.' }, - { id: 10, value: -1.8, x: -6, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point Duplicate', description: 'This is a duplicate entry of our starting point.', link: '/page1' }, - { id: 11, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up Duplicate', description: 'Duplicate entry of the upward trend.' }, - { id: 12, value: -0.6, x: -2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip Duplicate', description: 'Duplicate entry of the minor dip.', link: '/page3' }, - { id: 13, value: 2.7, x: 0, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance Duplicate', description: 'Duplicate entry of our highest point.', link: '/page4' }, - { id: 14, value: 0.8, x: 2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization Duplicate', description: 'Duplicate entry of the normalization stage.' }, - { id: 15, value: -2.9, x: 4, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline Duplicate', description: 'Duplicate entry of the major decline.', link: '/page6' }, - { id: 16, value: 1.5, x: 6, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery Duplicate', description: 'Duplicate entry of the recovery phase.' }, - { id: 17, value: 0, x: 8, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip Duplicate', description: 'Duplicate entry of the slight dip.', link: '/page8' }, - { id: 18, value: 2.1, x: 10, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak Duplicate', description: 'Duplicate entry of the second peak.' } - ]; - - console.log(data); - -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250522082725.ts b/dot-line-system/.history/src/main_20250522082725.ts deleted file mode 100644 index 5b875d4..0000000 --- a/dot-line-system/.history/src/main_20250522082725.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -6, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point', description: 'This is the starting point of our journey.', link: '/page1' }, - { id: 2, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up', description: 'We begin to see an upward trend here.' }, - { id: 3, value: -0.6, x: -2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip', description: 'A small setback before the major growth.', link: '/page3' }, - { id: 4, value: 2.7, x: 0, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance', description: 'This is our highest point so far!', link: '/page4' }, - { id: 5, value: 0.8, x: 2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization', description: 'Returning to more sustainable levels.' }, - { id: 6, value: -2.9, x: 4, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline', description: 'A significant drop in our metrics.', link: '/page6' }, - { id: 7, value: 1.5, x: 6, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery', description: 'Bouncing back strongly from the previous low.' }, - { id: 8, value: 0, x: 8, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip', description: 'A minor correction in our upward trend.', link: '/page8' }, - { id: 9, value: 2.1, x: 10, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak', description: 'Another high point in our journey.' }, - { id: 10, value: -1.8, x: -6, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point Duplicate', description: 'This is a duplicate entry of our starting point.', link: '/page1' }, - { id: 11, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up Duplicate', description: 'Duplicate entry of the upward trend.' }, - { id: 12, value: -0.6, x: -2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip Duplicate', description: 'Duplicate entry of the minor dip.', link: '/page3' }, - { id: 13, value: 2.7, x: 0, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance Duplicate', description: 'Duplicate entry of our highest point.', link: '/page4' }, - { id: 14, value: 0.8, x: 2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization Duplicate', description: 'Duplicate entry of the normalization stage.' }, - { id: 15, value: -2.9, x: 4, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline Duplicate', description: 'Duplicate entry of the major decline.', link: '/page6' }, - { id: 16, value: 1.5, x: 6, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery Duplicate', description: 'Duplicate entry of the recovery phase.' }, - { id: 17, value: 0, x: 8, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip Duplicate', description: 'Duplicate entry of the slight dip.', link: '/page8' }, - { id: 18, value: 2.1, x: 10, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak Duplicate', description: 'Duplicate entry of the second peak.' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250522082823.ts b/dot-line-system/.history/src/main_20250522082823.ts deleted file mode 100644 index 4d51cfd..0000000 --- a/dot-line-system/.history/src/main_20250522082823.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point', description: 'This is the starting point of our journey.', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up', description: 'We begin to see an upward trend here.' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip', description: 'A small setback before the major growth.', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance', description: 'This is our highest point so far!', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization', description: 'Returning to more sustainable levels.' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline', description: 'A significant drop in our metrics.', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery', description: 'Bouncing back strongly from the previous low.' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip', description: 'A minor correction in our upward trend.', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak', description: 'Another high point in our journey.' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point Duplicate', description: 'This is a duplicate entry of our starting point.', link: '/page1' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up Duplicate', description: 'Duplicate entry of the upward trend.' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip Duplicate', description: 'Duplicate entry of the minor dip.', link: '/page3' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance Duplicate', description: 'Duplicate entry of our highest point.', link: '/page4' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization Duplicate', description: 'Duplicate entry of the normalization stage.' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline Duplicate', description: 'Duplicate entry of the major decline.', link: '/page6' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery Duplicate', description: 'Duplicate entry of the recovery phase.' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip Duplicate', description: 'Duplicate entry of the slight dip.', link: '/page8' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak Duplicate', description: 'Duplicate entry of the second peak.' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ -}); diff --git a/dot-line-system/.history/src/main_20250522083059.ts b/dot-line-system/.history/src/main_20250522083059.ts deleted file mode 100644 index 5dc1e7e..0000000 --- a/dot-line-system/.history/src/main_20250522083059.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point', description: 'This is the starting point of our journey.', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up', description: 'We begin to see an upward trend here.' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip', description: 'A small setback before the major growth.', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance', description: 'This is our highest point so far!', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization', description: 'Returning to more sustainable levels.' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline', description: 'A significant drop in our metrics.', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery', description: 'Bouncing back strongly from the previous low.' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip', description: 'A minor correction in our upward trend.', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak', description: 'Another high point in our journey.' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'First Point Duplicate', description: 'This is a duplicate entry of our starting point.', link: '/page1' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Rising Up Duplicate', description: 'Duplicate entry of the upward trend.' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Minor Dip Duplicate', description: 'Duplicate entry of the minor dip.', link: '/page3' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Peak Performance Duplicate', description: 'Duplicate entry of our highest point.', link: '/page4' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Normalization Duplicate', description: 'Duplicate entry of the normalization stage.' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Major Decline Duplicate', description: 'Duplicate entry of the major decline.', link: '/page6' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Recovery Duplicate', description: 'Duplicate entry of the recovery phase.' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Slight Dip Duplicate', description: 'Duplicate entry of the slight dip.', link: '/page8' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Second Peak Duplicate', description: 'Duplicate entry of the second peak.' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522084926.ts b/dot-line-system/.history/src/main_20250522084926.ts deleted file mode 100644 index f4c63cb..0000000 --- a/dot-line-system/.history/src/main_20250522084926.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des Abenteuers', description: '01.10.2024', link: '/page1' }, -{ id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Neuanfang', description: '02.10.2024' }, -{ id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Kleiner Rückschlag', description: '03.10.2024', link: '/page3' }, -{ id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Höhepunkt', description: '04.10.2024', link: '/page4' }, -{ id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Rückkehr zur Normalität', description: '05.10.2024' }, -{ id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Großer Rückgang', description: '06.10.2024', link: '/page6' }, -{ id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholung', description: '07.10.2024' }, -{ id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Leichter Rückgang', description: '08.10.2024', link: '/page8' }, -{ id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Zweiter Höhepunkt', description: '09.10.2024' }, -{ id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des Abenteuers (Wiederholung)', description: '10.10.2024', link: '/page1' }, -{ id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Neuanfang (Wiederholung)', description: '11.10.2024' }, -{ id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Kleiner Rückschlag (Wiederholung)', description: '12.10.2024', link: '/page3' }, -{ id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Höhepunkt (Wiederholung)', description: '13.10.2024', link: '/page4' }, -{ id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Rückkehr zur Normalität (Wiederholung)', description: '14.10.2024' }, -{ id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Großer Rückgang (Wiederholung)', description: '15.10.2024', link: '/page6' }, -{ id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholung (Wiederholung)', description: '16.10.2024' }, -{ id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Leichter Rückgang (Wiederholung)', description: '17.10.2024', link: '/page8' }, -{ id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Zweiter Höhepunkt (Wiederholung)', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085045.ts b/dot-line-system/.history/src/main_20250522085045.ts deleted file mode 100644 index 094e55e..0000000 --- a/dot-line-system/.history/src/main_20250522085045.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, -{ id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024' }, -{ id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, -{ id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, -{ id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024' }, -{ id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, -{ id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024' }, -{ id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, -{ id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024' }, -{ id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page1' }, -{ id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024' }, -{ id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page3' }, -{ id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page4' }, -{ id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung bei einem Buch', description: '14.10.2024' }, -{ id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page6' }, -{ id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024' }, -{ id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang im Park', description: '17.10.2024', link: '/page8' }, -{ id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085108.ts b/dot-line-system/.history/src/main_20250522085108.ts deleted file mode 100644 index 967f927..0000000 --- a/dot-line-system/.history/src/main_20250522085108.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, -{ id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024' }, -{ id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, -{ id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, -{ id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024' }, -{ id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, -{ id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024' }, -{ id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, -{ id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024' }, -{ id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page1' }, -{ id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024' }, -{ id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page3' }, -{ id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page4' }, -{ id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024' }, -{ id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page6' }, -{ id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024' }, -{ id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang im Park', description: '17.10.2024', link: '/page8' }, -{ id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085117.ts b/dot-line-system/.history/src/main_20250522085117.ts deleted file mode 100644 index cb2f5c9..0000000 --- a/dot-line-system/.history/src/main_20250522085117.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, -{ id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024' }, -{ id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, -{ id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, -{ id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024' }, -{ id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, -{ id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024' }, -{ id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, -{ id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024' }, -{ id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page1' }, -{ id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024' }, -{ id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page3' }, -{ id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page4' }, -{ id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024' }, -{ id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page6' }, -{ id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024' }, -{ id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page8' }, -{ id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085138.ts b/dot-line-system/.history/src/main_20250522085138.ts deleted file mode 100644 index 1c17c30..0000000 --- a/dot-line-system/.history/src/main_20250522085138.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page1' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page3' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page4' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page6' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page8' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085307.ts b/dot-line-system/.history/src/main_20250522085307.ts deleted file mode 100644 index 4703cc4..0000000 --- a/dot-line-system/.history/src/main_20250522085307.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page1' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page3' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page4' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page6' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page8' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085525.ts b/dot-line-system/.history/src/main_20250522085525.ts deleted file mode 100644 index 9598b8a..0000000 --- a/dot-line-system/.history/src/main_20250522085525.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -10, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085554.ts b/dot-line-system/.history/src/main_20250522085554.ts deleted file mode 100644 index 2e857a9..0000000 --- a/dot-line-system/.history/src/main_20250522085554.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -12, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085614.ts b/dot-line-system/.history/src/main_20250522085614.ts deleted file mode 100644 index 2be28dd..0000000 --- a/dot-line-system/.history/src/main_20250522085614.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -12, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -1, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085624.ts b/dot-line-system/.history/src/main_20250522085624.ts deleted file mode 100644 index e97e1e5..0000000 --- a/dot-line-system/.history/src/main_20250522085624.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -5, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -3, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -2, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -1, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085712.ts b/dot-line-system/.history/src/main_20250522085712.ts deleted file mode 100644 index c0d2d99..0000000 --- a/dot-line-system/.history/src/main_20250522085712.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: 0, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -3, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -2, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -1, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085720.ts b/dot-line-system/.history/src/main_20250522085720.ts deleted file mode 100644 index e3838d3..0000000 --- a/dot-line-system/.history/src/main_20250522085720.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: -4, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: -3, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: -2, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: -1, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085742.ts b/dot-line-system/.history/src/main_20250522085742.ts deleted file mode 100644 index 687ac9f..0000000 --- a/dot-line-system/.history/src/main_20250522085742.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085804.ts b/dot-line-system/.history/src/main_20250522085804.ts deleted file mode 100644 index 54555de..0000000 --- a/dot-line-system/.history/src/main_20250522085804.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085818.ts b/dot-line-system/.history/src/main_20250522085818.ts deleted file mode 100644 index a535060..0000000 --- a/dot-line-system/.history/src/main_20250522085818.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085841.ts b/dot-line-system/.history/src/main_20250522085841.ts deleted file mode 100644 index 64a3999..0000000 --- a/dot-line-system/.history/src/main_20250522085841.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -4, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085845.ts b/dot-line-system/.history/src/main_20250522085845.ts deleted file mode 100644 index 68f1fd8..0000000 --- a/dot-line-system/.history/src/main_20250522085845.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -3, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085849.ts b/dot-line-system/.history/src/main_20250522085849.ts deleted file mode 100644 index 6dc5b28..0000000 --- a/dot-line-system/.history/src/main_20250522085849.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: 0, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522085852.ts b/dot-line-system/.history/src/main_20250522085852.ts deleted file mode 100644 index a535060..0000000 --- a/dot-line-system/.history/src/main_20250522085852.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522090305.ts b/dot-line-system/.history/src/main_20250522090305.ts deleted file mode 100644 index b1e2bbf..0000000 --- a/dot-line-system/.history/src/main_20250522090305.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522090350.ts b/dot-line-system/.history/src/main_20250522090350.ts deleted file mode 100644 index 7f9f988..0000000 --- a/dot-line-system/.history/src/main_20250522090350.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522090417.ts b/dot-line-system/.history/src/main_20250522090417.ts deleted file mode 100644 index f0504a8..0000000 --- a/dot-line-system/.history/src/main_20250522090417.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 2.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522090431.ts b/dot-line-system/.history/src/main_20250522090431.ts deleted file mode 100644 index 66d2197..0000000 --- a/dot-line-system/.history/src/main_20250522090431.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.7, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522090436.ts b/dot-line-system/.history/src/main_20250522090436.ts deleted file mode 100644 index a2aeb04..0000000 --- a/dot-line-system/.history/src/main_20250522090436.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091026.ts b/dot-line-system/.history/src/main_20250522091026.ts deleted file mode 100644 index b8c5d3d..0000000 --- a/dot-line-system/.history/src/main_20250522091026.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091044.ts b/dot-line-system/.history/src/main_20250522091044.ts deleted file mode 100644 index c171fec..0000000 --- a/dot-line-system/.history/src/main_20250522091044.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091103.ts b/dot-line-system/.history/src/main_20250522091103.ts deleted file mode 100644 index 6272538..0000000 --- a/dot-line-system/.history/src/main_20250522091103.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091117.ts b/dot-line-system/.history/src/main_20250522091117.ts deleted file mode 100644 index 5d700d5..0000000 --- a/dot-line-system/.history/src/main_20250522091117.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091134.ts b/dot-line-system/.history/src/main_20250522091134.ts deleted file mode 100644 index 89a05ac..0000000 --- a/dot-line-system/.history/src/main_20250522091134.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091203.ts b/dot-line-system/.history/src/main_20250522091203.ts deleted file mode 100644 index 40e6325..0000000 --- a/dot-line-system/.history/src/main_20250522091203.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522091258.ts b/dot-line-system/.history/src/main_20250522091258.ts deleted file mode 100644 index eb5aeca..0000000 --- a/dot-line-system/.history/src/main_20250522091258.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522102605.ts b/dot-line-system/.history/src/main_20250522102605.ts deleted file mode 100644 index 327b59b..0000000 --- a/dot-line-system/.history/src/main_20250522102605.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessensdfdsfs', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522102612.ts b/dot-line-system/.history/src/main_20250522102612.ts deleted file mode 100644 index eb5aeca..0000000 --- a/dot-line-system/.history/src/main_20250522102612.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522102630.ts b/dot-line-system/.history/src/main_20250522102630.ts deleted file mode 100644 index 14be066..0000000 --- a/dot-line-system/.history/src/main_20250522102630.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessensdfdfs', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522102634.ts b/dot-line-system/.history/src/main_20250522102634.ts deleted file mode 100644 index eb5aeca..0000000 --- a/dot-line-system/.history/src/main_20250522102634.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522102637.ts b/dot-line-system/.history/src/main_20250522102637.ts deleted file mode 100644 index eb5aeca..0000000 --- a/dot-line-system/.history/src/main_20250522102637.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522103603.ts b/dot-line-system/.history/src/main_20250522103603.ts deleted file mode 100644 index e38932a..0000000 --- a/dot-line-system/.history/src/main_20250522103603.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522103730.ts b/dot-line-system/.history/src/main_20250522103730.ts deleted file mode 100644 index 6e527f7..0000000 --- a/dot-line-system/.history/src/main_20250522103730.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522103753.ts b/dot-line-system/.history/src/main_20250522103753.ts deleted file mode 100644 index 427c257..0000000 --- a/dot-line-system/.history/src/main_20250522103753.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522104008.ts b/dot-line-system/.history/src/main_20250522104008.ts deleted file mode 100644 index 622dfcc..0000000 --- a/dot-line-system/.history/src/main_20250522104008.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522104033.ts b/dot-line-system/.history/src/main_20250522104033.ts deleted file mode 100644 index f924c87..0000000 --- a/dot-line-system/.history/src/main_20250522104033.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522104601.ts b/dot-line-system/.history/src/main_20250522104601.ts deleted file mode 100644 index 2803a2d..0000000 --- a/dot-line-system/.history/src/main_20250522104601.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - -}); diff --git a/dot-line-system/.history/src/main_20250522130745.ts b/dot-line-system/.history/src/main_20250522130745.ts deleted file mode 100644 index 3197851..0000000 --- a/dot-line-system/.history/src/main_20250522130745.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' }, - { id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' }, - { id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' }, - { id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' }, - { id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' }, - { id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' }, - { id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' }, - { id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' }, - { id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' }, - { id: 10, value: -1.8, x: 16, imageUrl: 'https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' }, - { id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' }, - { id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' }, - { id: 13, value: 2.7, x: 22, imageUrl: 'https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' }, - { id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' }, - { id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' }, - { id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' }, - { id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' }, - { id: 18, value: 2.1, x: 32, imageUrl: 'https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' } -]; - -// Wait for DOM to be fully loaded -document.addEventListener('DOMContentLoaded', () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150 - }); - - // Handle window resize - window.addEventListener('resize', () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector('.scroll-container'); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener('mousedown', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('mouseleave', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mouseup', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('mousemove', (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener('touchstart', (e) => { - isDown = true; - scrollContainer.classList.add('active'); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener('touchend', () => { - isDown = false; - scrollContainer.classList.remove('active'); - }); - - scrollContainer.addEventListener('touchmove', (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - -}); diff --git a/dot-line-system/.history/src/main_20250522131101.ts b/dot-line-system/.history/src/main_20250522131101.ts deleted file mode 100644 index 270f968..0000000 --- a/dot-line-system/.history/src/main_20250522131101.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 2.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 200, - tooltipHeight: 150, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131108.ts b/dot-line-system/.history/src/main_20250522131108.ts deleted file mode 100644 index f078f8f..0000000 --- a/dot-line-system/.history/src/main_20250522131108.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 2.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 150, - tooltipHeight: 150, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131112.ts b/dot-line-system/.history/src/main_20250522131112.ts deleted file mode 100644 index 61965c2..0000000 --- a/dot-line-system/.history/src/main_20250522131112.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 2.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 100, - tooltipHeight: 150, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131119.ts b/dot-line-system/.history/src/main_20250522131119.ts deleted file mode 100644 index e27abb7..0000000 --- a/dot-line-system/.history/src/main_20250522131119.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 2.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - tooltipWidth: 100, - tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131131.ts b/dot-line-system/.history/src/main_20250522131131.ts deleted file mode 100644 index aeadf5e..0000000 --- a/dot-line-system/.history/src/main_20250522131131.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 2.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131843.ts b/dot-line-system/.history/src/main_20250522131843.ts deleted file mode 100644 index f90a07a..0000000 --- a/dot-line-system/.history/src/main_20250522131843.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 3.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131848.ts b/dot-line-system/.history/src/main_20250522131848.ts deleted file mode 100644 index 63a29af..0000000 --- a/dot-line-system/.history/src/main_20250522131848.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 1.0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131851.ts b/dot-line-system/.history/src/main_20250522131851.ts deleted file mode 100644 index 0298937..0000000 --- a/dot-line-system/.history/src/main_20250522131851.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 1.5, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -2.9, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131901.ts b/dot-line-system/.history/src/main_20250522131901.ts deleted file mode 100644 index 871a5d2..0000000 --- a/dot-line-system/.history/src/main_20250522131901.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value: 1.5, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131929.ts b/dot-line-system/.history/src/main_20250522131929.ts deleted file mode 100644 index 4af2f9a..0000000 --- a/dot-line-system/.history/src/main_20250522131929.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131937.ts b/dot-line-system/.history/src/main_20250522131937.ts deleted file mode 100644 index 4ae58e1..0000000 --- a/dot-line-system/.history/src/main_20250522131937.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:2.5, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522131944.ts b/dot-line-system/.history/src/main_20250522131944.ts deleted file mode 100644 index 4af2f9a..0000000 --- a/dot-line-system/.history/src/main_20250522131944.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 0.8, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132110.ts b/dot-line-system/.history/src/main_20250522132110.ts deleted file mode 100644 index dfe864b..0000000 --- a/dot-line-system/.history/src/main_20250522132110.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 3, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132123.ts b/dot-line-system/.history/src/main_20250522132123.ts deleted file mode 100644 index 6f68913..0000000 --- a/dot-line-system/.history/src/main_20250522132123.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:0, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 3, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132137.ts b/dot-line-system/.history/src/main_20250522132137.ts deleted file mode 100644 index d85f61d..0000000 --- a/dot-line-system/.history/src/main_20250522132137.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132218.ts b/dot-line-system/.history/src/main_20250522132218.ts deleted file mode 100644 index 1bde57f..0000000 --- a/dot-line-system/.history/src/main_20250522132218.ts +++ /dev/null @@ -1,283 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132225.ts b/dot-line-system/.history/src/main_20250522132225.ts deleted file mode 100644 index d85f61d..0000000 --- a/dot-line-system/.history/src/main_20250522132225.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132350.ts b/dot-line-system/.history/src/main_20250522132350.ts deleted file mode 100644 index 9b3867a..0000000 --- a/dot-line-system/.history/src/main_20250522132350.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - // imageUrl: - // "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132401.ts b/dot-line-system/.history/src/main_20250522132401.ts deleted file mode 100644 index d85f61d..0000000 --- a/dot-line-system/.history/src/main_20250522132401.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132525.ts b/dot-line-system/.history/src/main_20250522132525.ts deleted file mode 100644 index 9b3867a..0000000 --- a/dot-line-system/.history/src/main_20250522132525.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - // imageUrl: - // "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522132532.ts b/dot-line-system/.history/src/main_20250522132532.ts deleted file mode 100644 index d85f61d..0000000 --- a/dot-line-system/.history/src/main_20250522132532.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: -1.8, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: 1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522133155.ts b/dot-line-system/.history/src/main_20250522133155.ts deleted file mode 100644 index 3d3060e..0000000 --- a/dot-line-system/.history/src/main_20250522133155.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.8, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522133219.ts b/dot-line-system/.history/src/main_20250522133219.ts deleted file mode 100644 index 7f3b729..0000000 --- a/dot-line-system/.history/src/main_20250522133219.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0.5, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522133230.ts b/dot-line-system/.history/src/main_20250522133230.ts deleted file mode 100644 index 62d08a6..0000000 --- a/dot-line-system/.history/src/main_20250522133230.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3.1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522150734.ts b/dot-line-system/.history/src/main_20250522150734.ts deleted file mode 100644 index b5569bc..0000000 --- a/dot-line-system/.history/src/main_20250522150734.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 2, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522150803.ts b/dot-line-system/.history/src/main_20250522150803.ts deleted file mode 100644 index 79e4936..0000000 --- a/dot-line-system/.history/src/main_20250522150803.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 1, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522150809.ts b/dot-line-system/.history/src/main_20250522150809.ts deleted file mode 100644 index 9cb0d02..0000000 --- a/dot-line-system/.history/src/main_20250522150809.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522222205.ts b/dot-line-system/.history/src/main_20250522222205.ts deleted file mode 100644 index 9cb0d02..0000000 --- a/dot-line-system/.history/src/main_20250522222205.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522222757.ts b/dot-line-system/.history/src/main_20250522222757.ts deleted file mode 100644 index 116a6f9..0000000 --- a/dot-line-system/.history/src/main_20250522222757.ts +++ /dev/null @@ -1,286 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522223705.ts b/dot-line-system/.history/src/main_20250522223705.ts deleted file mode 100644 index e89cece..0000000 --- a/dot-line-system/.history/src/main_20250522223705.ts +++ /dev/null @@ -1,286 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "src/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "src/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224138.ts b/dot-line-system/.history/src/main_20250522224138.ts deleted file mode 100644 index 7c16f57..0000000 --- a/dot-line-system/.history/src/main_20250522224138.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224154.ts b/dot-line-system/.history/src/main_20250522224154.ts deleted file mode 100644 index 7c16f57..0000000 --- a/dot-line-system/.history/src/main_20250522224154.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224417.ts b/dot-line-system/.history/src/main_20250522224417.ts deleted file mode 100644 index 50bdd2f..0000000 --- a/dot-line-system/.history/src/main_20250522224417.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/discopferd.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224419.ts b/dot-line-system/.history/src/main_20250522224419.ts deleted file mode 100644 index 25f33ad..0000000 --- a/dot-line-system/.history/src/main_20250522224419.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224450.ts b/dot-line-system/.history/src/main_20250522224450.ts deleted file mode 100644 index 9606a8e..0000000 --- a/dot-line-system/.history/src/main_20250522224450.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224516.ts b/dot-line-system/.history/src/main_20250522224516.ts deleted file mode 100644 index 34b0304..0000000 --- a/dot-line-system/.history/src/main_20250522224516.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224540.ts b/dot-line-system/.history/src/main_20250522224540.ts deleted file mode 100644 index 6ef77a8..0000000 --- a/dot-line-system/.history/src/main_20250522224540.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224607.ts b/dot-line-system/.history/src/main_20250522224607.ts deleted file mode 100644 index 7b03f12..0000000 --- a/dot-line-system/.history/src/main_20250522224607.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224641.ts b/dot-line-system/.history/src/main_20250522224641.ts deleted file mode 100644 index e20d6b5..0000000 --- a/dot-line-system/.history/src/main_20250522224641.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224710.ts b/dot-line-system/.history/src/main_20250522224710.ts deleted file mode 100644 index 2b7c777..0000000 --- a/dot-line-system/.history/src/main_20250522224710.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224733.ts b/dot-line-system/.history/src/main_20250522224733.ts deleted file mode 100644 index aca3d92..0000000 --- a/dot-line-system/.history/src/main_20250522224733.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224743.ts b/dot-line-system/.history/src/main_20250522224743.ts deleted file mode 100644 index e45726a..0000000 --- a/dot-line-system/.history/src/main_20250522224743.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224813.ts b/dot-line-system/.history/src/main_20250522224813.ts deleted file mode 100644 index 59b3222..0000000 --- a/dot-line-system/.history/src/main_20250522224813.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224826.ts b/dot-line-system/.history/src/main_20250522224826.ts deleted file mode 100644 index 971d1d4..0000000 --- a/dot-line-system/.history/src/main_20250522224826.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522224845.ts b/dot-line-system/.history/src/main_20250522224845.ts deleted file mode 100644 index b548ebd..0000000 --- a/dot-line-system/.history/src/main_20250522224845.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522225100.ts b/dot-line-system/.history/src/main_20250522225100.ts deleted file mode 100644 index 7f42ebe..0000000 --- a/dot-line-system/.history/src/main_20250522225100.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522225110.ts b/dot-line-system/.history/src/main_20250522225110.ts deleted file mode 100644 index 7f42ebe..0000000 --- a/dot-line-system/.history/src/main_20250522225110.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "https://picsum.photos/200/150?random=6", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522225139.ts b/dot-line-system/.history/src/main_20250522225139.ts deleted file mode 100644 index 43c9e6d..0000000 --- a/dot-line-system/.history/src/main_20250522225139.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250522231822.ts b/dot-line-system/.history/src/main_20250522231822.ts deleted file mode 100644 index 43c9e6d..0000000 --- a/dot-line-system/.history/src/main_20250522231822.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - let scrollLeft; - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250523080429.ts b/dot-line-system/.history/src/main_20250523080429.ts deleted file mode 100644 index bcc5dfe..0000000 --- a/dot-line-system/.history/src/main_20250523080429.ts +++ /dev/null @@ -1,305 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX; - // let scrollLeft; - let scrollLeft: number = scrollContainer.scrollLeft; // Initialize and type scrollLeft - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250523080510.ts b/dot-line-system/.history/src/main_20250523080510.ts deleted file mode 100644 index 8fc9dd2..0000000 --- a/dot-line-system/.history/src/main_20250523080510.ts +++ /dev/null @@ -1,321 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - -// Add a null check to ensure scrollContainer is not null -if (scrollContainer) { - // Cast scrollContainer as HTMLElement if necessary - const container = scrollContainer as HTMLElement; - - // Your event listener logic here - container.addEventListener('mousemove', (e: MouseEvent) => { - // It's safe to use offsetLeft and scrollLeft because we've checked for null - const x = e.pageX - container.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - container.scrollLeft -= walk; - }); -} else { - console.error("Scroll container not found. Please check the element ID."); -} - - let isDown = false; - let startX; - // let scrollLeft; - let scrollLeft: number = scrollContainer.scrollLeft; // Initialize and type scrollLeft - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250523080542.ts b/dot-line-system/.history/src/main_20250523080542.ts deleted file mode 100644 index 8dd1ba0..0000000 --- a/dot-line-system/.history/src/main_20250523080542.ts +++ /dev/null @@ -1,321 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - -// Add a null check to ensure scrollContainer is not null -if (scrollContainer) { - // Cast scrollContainer as HTMLElement if necessary - const container = scrollContainer as HTMLElement; - - // Your event listener logic here - container.addEventListener('mousemove', (e: MouseEvent) => { - // It's safe to use offsetLeft and scrollLeft because we've checked for null - const x = e.pageX - container.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - container.scrollLeft -= walk; - }); -} else { - console.error("Scroll container not found. Please check the element ID."); -} - - let isDown = false; - let startX: number; - // let scrollLeft; - let scrollLeft: number = scrollContainer.scrollLeft; // Initialize and type scrollLeft - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250523080609.ts b/dot-line-system/.history/src/main_20250523080609.ts deleted file mode 100644 index f018b74..0000000 --- a/dot-line-system/.history/src/main_20250523080609.ts +++ /dev/null @@ -1,305 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container"); - - let isDown = false; - let startX: number; - // let scrollLeft; - let scrollLeft: number = scrollContainer.scrollLeft; // Initialize and type scrollLeft - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("mouseleave", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mouseup", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - // Use the first touch point for calculations - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - }); - - scrollContainer.addEventListener("touchend", () => { - isDown = false; - scrollContainer.classList.remove("active"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - // Use the first touch point for calculations - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/main_20250523080934.ts b/dot-line-system/.history/src/main_20250523080934.ts deleted file mode 100644 index cac6f1b..0000000 --- a/dot-line-system/.history/src/main_20250523080934.ts +++ /dev/null @@ -1,320 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container") as HTMLElement; - - let isDown = false; - let startX: number; - let scrollLeft: number; - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - - // Remove smooth scrolling while dragging - scrollContainer.classList.remove("smooth-scroll"); - }); - - scrollContainer.addEventListener("mouseleave", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("mouseup", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - - // Remove smooth scrolling while dragging - scrollContainer.classList.remove("smooth-scroll"); - }); - - scrollContainer.addEventListener("touchend", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/.history/src/style_20250515080205.css b/dot-line-system/.history/src/style_20250515080205.css deleted file mode 100644 index e69de29..0000000 diff --git a/dot-line-system/.history/src/style_20250522085955.css b/dot-line-system/.history/src/style_20250522085955.css deleted file mode 100644 index 4da039c..0000000 --- a/dot-line-system/.history/src/style_20250522085955.css +++ /dev/null @@ -1,67 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090021.css b/dot-line-system/.history/src/style_20250522090021.css deleted file mode 100644 index 2e644ca..0000000 --- a/dot-line-system/.history/src/style_20250522090021.css +++ /dev/null @@ -1,68 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090641.css b/dot-line-system/.history/src/style_20250522090641.css deleted file mode 100644 index a4c667e..0000000 --- a/dot-line-system/.history/src/style_20250522090641.css +++ /dev/null @@ -1,74 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - height: 1px; - width: 100%; - background-color: #fff; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090651.css b/dot-line-system/.history/src/style_20250522090651.css deleted file mode 100644 index 1d47c53..0000000 --- a/dot-line-system/.history/src/style_20250522090651.css +++ /dev/null @@ -1,74 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - height: 1px; - width: 100%; - background-color: red; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090747.css b/dot-line-system/.history/src/style_20250522090747.css deleted file mode 100644 index b3d6fd3..0000000 --- a/dot-line-system/.history/src/style_20250522090747.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - display: flex; -justify-items: center; - - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - height: 1px; - width: 100%; - background-color: red; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090807.css b/dot-line-system/.history/src/style_20250522090807.css deleted file mode 100644 index d12bb43..0000000 --- a/dot-line-system/.history/src/style_20250522090807.css +++ /dev/null @@ -1,74 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - height: 1px; - width: 100%; - background-color: red; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090836.css b/dot-line-system/.history/src/style_20250522090836.css deleted file mode 100644 index 1274256..0000000 --- a/dot-line-system/.history/src/style_20250522090836.css +++ /dev/null @@ -1,76 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - height: 1px; - width: 100%; - background-color: red; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090841.css b/dot-line-system/.history/src/style_20250522090841.css deleted file mode 100644 index 31dd748..0000000 --- a/dot-line-system/.history/src/style_20250522090841.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - background-color: red; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090850.css b/dot-line-system/.history/src/style_20250522090850.css deleted file mode 100644 index b987a9b..0000000 --- a/dot-line-system/.history/src/style_20250522090850.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - background-color: white; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090854.css b/dot-line-system/.history/src/style_20250522090854.css deleted file mode 100644 index 29255e3..0000000 --- a/dot-line-system/.history/src/style_20250522090854.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 2px; - width: 100%; - background-color: white; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090906.css b/dot-line-system/.history/src/style_20250522090906.css deleted file mode 100644 index b987a9b..0000000 --- a/dot-line-system/.history/src/style_20250522090906.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - background-color: white; -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090923.css b/dot-line-system/.history/src/style_20250522090923.css deleted file mode 100644 index f070a59..0000000 --- a/dot-line-system/.history/src/style_20250522090923.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - background-color: rgba(255, 255, 255, 0.5); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090926.css b/dot-line-system/.history/src/style_20250522090926.css deleted file mode 100644 index c53bbb9..0000000 --- a/dot-line-system/.history/src/style_20250522090926.css +++ /dev/null @@ -1,77 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - background-color: rgba(255, 255, 255, 0.2); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090936.css b/dot-line-system/.history/src/style_20250522090936.css deleted file mode 100644 index e5b0ed4..0000000 --- a/dot-line-system/.history/src/style_20250522090936.css +++ /dev/null @@ -1,78 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.2); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522090943.css b/dot-line-system/.history/src/style_20250522090943.css deleted file mode 100644 index e051081..0000000 --- a/dot-line-system/.history/src/style_20250522090943.css +++ /dev/null @@ -1,78 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522093837.css b/dot-line-system/.history/src/style_20250522093837.css deleted file mode 100644 index 2b1739d..0000000 --- a/dot-line-system/.history/src/style_20250522093837.css +++ /dev/null @@ -1,112 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 50px; - height: 50px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: bold; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522093851.css b/dot-line-system/.history/src/style_20250522093851.css deleted file mode 100644 index 2ca9fff..0000000 --- a/dot-line-system/.history/src/style_20250522093851.css +++ /dev/null @@ -1,112 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: bold; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522093915.css b/dot-line-system/.history/src/style_20250522093915.css deleted file mode 100644 index 53d6c1c..0000000 --- a/dot-line-system/.history/src/style_20250522093915.css +++ /dev/null @@ -1,113 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: bold; - margin-top: 4px; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522093919.css b/dot-line-system/.history/src/style_20250522093919.css deleted file mode 100644 index eb5587f..0000000 --- a/dot-line-system/.history/src/style_20250522093919.css +++ /dev/null @@ -1,113 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: bold; - margin-top: 8px; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522093925.css b/dot-line-system/.history/src/style_20250522093925.css deleted file mode 100644 index 65db527..0000000 --- a/dot-line-system/.history/src/style_20250522093925.css +++ /dev/null @@ -1,113 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: bold; - margin-top: 8px; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095000.css b/dot-line-system/.history/src/style_20250522095000.css deleted file mode 100644 index f67af40..0000000 --- a/dot-line-system/.history/src/style_20250522095000.css +++ /dev/null @@ -1,114 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: bold; - margin-top: 8px; - text-align: center; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095014.css b/dot-line-system/.history/src/style_20250522095014.css deleted file mode 100644 index 34ee22a..0000000 --- a/dot-line-system/.history/src/style_20250522095014.css +++ /dev/null @@ -1,115 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: bold; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095017.css b/dot-line-system/.history/src/style_20250522095017.css deleted file mode 100644 index 34ee22a..0000000 --- a/dot-line-system/.history/src/style_20250522095017.css +++ /dev/null @@ -1,115 +0,0 @@ - body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: bold; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095208.css b/dot-line-system/.history/src/style_20250522095208.css deleted file mode 100644 index 08ba4b8..0000000 --- a/dot-line-system/.history/src/style_20250522095208.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: bold; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095223.css b/dot-line-system/.history/src/style_20250522095223.css deleted file mode 100644 index dbdb377..0000000 --- a/dot-line-system/.history/src/style_20250522095223.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095304.css b/dot-line-system/.history/src/style_20250522095304.css deleted file mode 100644 index 64a4e78..0000000 --- a/dot-line-system/.history/src/style_20250522095304.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 10px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095307.css b/dot-line-system/.history/src/style_20250522095307.css deleted file mode 100644 index dbdb377..0000000 --- a/dot-line-system/.history/src/style_20250522095307.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095311.css b/dot-line-system/.history/src/style_20250522095311.css deleted file mode 100644 index 5a007d4..0000000 --- a/dot-line-system/.history/src/style_20250522095311.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095317.css b/dot-line-system/.history/src/style_20250522095317.css deleted file mode 100644 index 77640c3..0000000 --- a/dot-line-system/.history/src/style_20250522095317.css +++ /dev/null @@ -1,119 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 14px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095407.css b/dot-line-system/.history/src/style_20250522095407.css deleted file mode 100644 index f18c8fe..0000000 --- a/dot-line-system/.history/src/style_20250522095407.css +++ /dev/null @@ -1,120 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 14px; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095421.css b/dot-line-system/.history/src/style_20250522095421.css deleted file mode 100644 index 3b30efd..0000000 --- a/dot-line-system/.history/src/style_20250522095421.css +++ /dev/null @@ -1,121 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 14px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095426.css b/dot-line-system/.history/src/style_20250522095426.css deleted file mode 100644 index f40981b..0000000 --- a/dot-line-system/.history/src/style_20250522095426.css +++ /dev/null @@ -1,121 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095430.css b/dot-line-system/.history/src/style_20250522095430.css deleted file mode 100644 index 5326195..0000000 --- a/dot-line-system/.history/src/style_20250522095430.css +++ /dev/null @@ -1,121 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 16px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095436.css b/dot-line-system/.history/src/style_20250522095436.css deleted file mode 100644 index 1d8faee..0000000 --- a/dot-line-system/.history/src/style_20250522095436.css +++ /dev/null @@ -1,121 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095552.css b/dot-line-system/.history/src/style_20250522095552.css deleted file mode 100644 index 145fa00..0000000 --- a/dot-line-system/.history/src/style_20250522095552.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095554.css b/dot-line-system/.history/src/style_20250522095554.css deleted file mode 100644 index 145fa00..0000000 --- a/dot-line-system/.history/src/style_20250522095554.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095604.css b/dot-line-system/.history/src/style_20250522095604.css deleted file mode 100644 index 529c2d9..0000000 --- a/dot-line-system/.history/src/style_20250522095604.css +++ /dev/null @@ -1,123 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; - white-space: wrap; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522095617.css b/dot-line-system/.history/src/style_20250522095617.css deleted file mode 100644 index 145fa00..0000000 --- a/dot-line-system/.history/src/style_20250522095617.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522100913.css b/dot-line-system/.history/src/style_20250522100913.css deleted file mode 100644 index 318d2c7..0000000 --- a/dot-line-system/.history/src/style_20250522100913.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: light; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: thin; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522100924.css b/dot-line-system/.history/src/style_20250522100924.css deleted file mode 100644 index d86863d..0000000 --- a/dot-line-system/.history/src/style_20250522100924.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522100934.css b/dot-line-system/.history/src/style_20250522100934.css deleted file mode 100644 index 7358538..0000000 --- a/dot-line-system/.history/src/style_20250522100934.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balanced; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522100943.css b/dot-line-system/.history/src/style_20250522100943.css deleted file mode 100644 index 7ee9f9f..0000000 --- a/dot-line-system/.history/src/style_20250522100943.css +++ /dev/null @@ -1,122 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522101311.css b/dot-line-system/.history/src/style_20250522101311.css deleted file mode 100644 index ebeb77c..0000000 --- a/dot-line-system/.history/src/style_20250522101311.css +++ /dev/null @@ -1,127 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: 80px; - height: 80px; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; -} -.dot-tooltip .image_container{ - width: 80px; - height: 80px; - overflow: hidden; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522101328.css b/dot-line-system/.history/src/style_20250522101328.css deleted file mode 100644 index 6cb0457..0000000 --- a/dot-line-system/.history/src/style_20250522101328.css +++ /dev/null @@ -1,127 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: auto; - height: 100%; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; -} -.dot-tooltip .image_container{ - width: 80px; - height: 80px; - overflow: hidden; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522101336.css b/dot-line-system/.history/src/style_20250522101336.css deleted file mode 100644 index 15eae64..0000000 --- a/dot-line-system/.history/src/style_20250522101336.css +++ /dev/null @@ -1,128 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); -} - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - -.median{ - position: fixed; - top:50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); -} - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); -} - -.dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; /* Center vertically */ - align-items: center; /* Center horizontally */ - width: 100%; - height: 100%; - color: white; /* Text color */ -} - -.dot-tooltip .tooltip-image { - width: auto; - height: 100%; - -} - -.dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; -} - -.dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; -} -.dot-tooltip .image_container{ - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; /* Circular image */ - border: 2px solid white; -} - -.dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); -} diff --git a/dot-line-system/.history/src/style_20250522101350.css b/dot-line-system/.history/src/style_20250522101350.css deleted file mode 100644 index 3195d8e..0000000 --- a/dot-line-system/.history/src/style_20250522101350.css +++ /dev/null @@ -1,132 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522102626.css b/dot-line-system/.history/src/style_20250522102626.css deleted file mode 100644 index f78cbe0..0000000 --- a/dot-line-system/.history/src/style_20250522102626.css +++ /dev/null @@ -1,133 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; - max-width: 100%; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522102642.css b/dot-line-system/.history/src/style_20250522102642.css deleted file mode 100644 index 3195d8e..0000000 --- a/dot-line-system/.history/src/style_20250522102642.css +++ /dev/null @@ -1,132 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103246.css b/dot-line-system/.history/src/style_20250522103246.css deleted file mode 100644 index 6800536..0000000 --- a/dot-line-system/.history/src/style_20250522103246.css +++ /dev/null @@ -1,133 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - margin-top: 4px; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103250.css b/dot-line-system/.history/src/style_20250522103250.css deleted file mode 100644 index 6800536..0000000 --- a/dot-line-system/.history/src/style_20250522103250.css +++ /dev/null @@ -1,133 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - margin-top: 4px; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-top: 8px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - margin-bottom: 4px; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103312.css b/dot-line-system/.history/src/style_20250522103312.css deleted file mode 100644 index 2738b91..0000000 --- a/dot-line-system/.history/src/style_20250522103312.css +++ /dev/null @@ -1,132 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - margin-top: 4px; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 4px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103342.css b/dot-line-system/.history/src/style_20250522103342.css deleted file mode 100644 index 36da931..0000000 --- a/dot-line-system/.history/src/style_20250522103342.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - - - .dot-tooltip .image_container { - margin-top: 8px; - - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 4px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103350.css b/dot-line-system/.history/src/style_20250522103350.css deleted file mode 100644 index 22f9087..0000000 --- a/dot-line-system/.history/src/style_20250522103350.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - - - .dot-tooltip .image_container { - margin-top: 8px; - - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - /* Circular image */ - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103407.css b/dot-line-system/.history/src/style_20250522103407.css deleted file mode 100644 index 7291bd9..0000000 --- a/dot-line-system/.history/src/style_20250522103407.css +++ /dev/null @@ -1,134 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(0, 0, 0, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103422.css b/dot-line-system/.history/src/style_20250522103422.css deleted file mode 100644 index 282e4b1..0000000 --- a/dot-line-system/.history/src/style_20250522103422.css +++ /dev/null @@ -1,135 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(0, 0, 0, 0.8); */ - fill: rgba(255, 255, 255, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103426.css b/dot-line-system/.history/src/style_20250522103426.css deleted file mode 100644 index 8e2cc8c..0000000 --- a/dot-line-system/.history/src/style_20250522103426.css +++ /dev/null @@ -1,134 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.8); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(255, 255, 255, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103431.css b/dot-line-system/.history/src/style_20250522103431.css deleted file mode 100644 index f8f50b2..0000000 --- a/dot-line-system/.history/src/style_20250522103431.css +++ /dev/null @@ -1,134 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - /* fill: rgba(0, 0, 0, 0.8); */ - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(255, 255, 255, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522103440.css b/dot-line-system/.history/src/style_20250522103440.css deleted file mode 100644 index c6ad579..0000000 --- a/dot-line-system/.history/src/style_20250522103440.css +++ /dev/null @@ -1,135 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(255, 255, 255, 0.8); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522104922.css b/dot-line-system/.history/src/style_20250522104922.css deleted file mode 100644 index ff58dd6..0000000 --- a/dot-line-system/.history/src/style_20250522104922.css +++ /dev/null @@ -1,147 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - fill: rgba(255, 255, 255, 1); - } - - .arrow { - width: 100px; /* Adjust the length of the arrow as needed */ - height: 1px; - background: linear-gradient(to right, transparent, black, transparent); - position: relative; /* Allows positioning if needed */ -} - -/* Optional: To rotate or position the arrow */ -.arrow-vertical { - transform: rotate(90deg); /* Rotates the arrow to vertical */ -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522105207.css b/dot-line-system/.history/src/style_20250522105207.css deleted file mode 100644 index f5a302f..0000000 --- a/dot-line-system/.history/src/style_20250522105207.css +++ /dev/null @@ -1,148 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - fill: linear-gradient(to right, transparent, black, transparent);; - } - - .arrow { - width: 100px; /* Adjust the length of the arrow as needed */ - height: 1px; - background: linear-gradient(to right, transparent, black, transparent); - position: relative; /* Allows positioning if needed */ -} - -/* Optional: To rotate or position the arrow */ -.arrow-vertical { - transform: rotate(90deg); /* Rotates the arrow to vertical */ -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522105209.css b/dot-line-system/.history/src/style_20250522105209.css deleted file mode 100644 index 8b92c3a..0000000 --- a/dot-line-system/.history/src/style_20250522105209.css +++ /dev/null @@ -1,148 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - fill: linear-gradient(to right, transparent, black, transparent); - } - - .arrow { - width: 100px; /* Adjust the length of the arrow as needed */ - height: 1px; - background: linear-gradient(to right, transparent, black, transparent); - position: relative; /* Allows positioning if needed */ -} - -/* Optional: To rotate or position the arrow */ -.arrow-vertical { - transform: rotate(90deg); /* Rotates the arrow to vertical */ -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522105222.css b/dot-line-system/.history/src/style_20250522105222.css deleted file mode 100644 index 05e6203..0000000 --- a/dot-line-system/.history/src/style_20250522105222.css +++ /dev/null @@ -1,136 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - fill: linear-gradient(to right, transparent, black, transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522110436.css b/dot-line-system/.history/src/style_20250522110436.css deleted file mode 100644 index 05e6203..0000000 --- a/dot-line-system/.history/src/style_20250522110436.css +++ /dev/null @@ -1,136 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - fill: linear-gradient(to right, transparent, black, transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112314.css b/dot-line-system/.history/src/style_20250522112314.css deleted file mode 100644 index 8f3be83..0000000 --- a/dot-line-system/.history/src/style_20250522112314.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 20px; - background: linear-gradient(to right, transparent, black, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112321.css b/dot-line-system/.history/src/style_20250522112321.css deleted file mode 100644 index 681916f..0000000 --- a/dot-line-system/.history/src/style_20250522112321.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 2px; - height: 20px; - background: linear-gradient(to right, transparent, black, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112533.css b/dot-line-system/.history/src/style_20250522112533.css deleted file mode 100644 index 231076b..0000000 --- a/dot-line-system/.history/src/style_20250522112533.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 2px; - height: 20px; - background: linear-gradient(to right, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112544.css b/dot-line-system/.history/src/style_20250522112544.css deleted file mode 100644 index 2acccb8..0000000 --- a/dot-line-system/.history/src/style_20250522112544.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 2px; - height: 20px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112548.css b/dot-line-system/.history/src/style_20250522112548.css deleted file mode 100644 index f3de22d..0000000 --- a/dot-line-system/.history/src/style_20250522112548.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 2px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112553.css b/dot-line-system/.history/src/style_20250522112553.css deleted file mode 100644 index ed5e837..0000000 --- a/dot-line-system/.history/src/style_20250522112553.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112559.css b/dot-line-system/.history/src/style_20250522112559.css deleted file mode 100644 index ba447d1..0000000 --- a/dot-line-system/.history/src/style_20250522112559.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 40px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112603.css b/dot-line-system/.history/src/style_20250522112603.css deleted file mode 100644 index ed5e837..0000000 --- a/dot-line-system/.history/src/style_20250522112603.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112612.css b/dot-line-system/.history/src/style_20250522112612.css deleted file mode 100644 index 74ae135..0000000 --- a/dot-line-system/.history/src/style_20250522112612.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 20px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112618.css b/dot-line-system/.history/src/style_20250522112618.css deleted file mode 100644 index ed5e837..0000000 --- a/dot-line-system/.history/src/style_20250522112618.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - /* fill: rgba(255, 255, 255, 1); */ - /* fill: linear-gradient(to right, transparent, black, transparent); */ - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112638.css b/dot-line-system/.history/src/style_20250522112638.css deleted file mode 100644 index c2edfc1..0000000 --- a/dot-line-system/.history/src/style_20250522112638.css +++ /dev/null @@ -1,138 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112644.css b/dot-line-system/.history/src/style_20250522112644.css deleted file mode 100644 index 3eae7bd..0000000 --- a/dot-line-system/.history/src/style_20250522112644.css +++ /dev/null @@ -1,138 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.5); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112711.css b/dot-line-system/.history/src/style_20250522112711.css deleted file mode 100644 index c2edfc1..0000000 --- a/dot-line-system/.history/src/style_20250522112711.css +++ /dev/null @@ -1,138 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, white, transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522112732.css b/dot-line-system/.history/src/style_20250522112732.css deleted file mode 100644 index 0ee5c86..0000000 --- a/dot-line-system/.history/src/style_20250522112732.css +++ /dev/null @@ -1,138 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522113350.css b/dot-line-system/.history/src/style_20250522113350.css deleted file mode 100644 index 8ff1312..0000000 --- a/dot-line-system/.history/src/style_20250522113350.css +++ /dev/null @@ -1,140 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522113403.css b/dot-line-system/.history/src/style_20250522113403.css deleted file mode 100644 index 64594ca..0000000 --- a/dot-line-system/.history/src/style_20250522113403.css +++ /dev/null @@ -1,141 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522113810.css b/dot-line-system/.history/src/style_20250522113810.css deleted file mode 100644 index 3ce3551..0000000 --- a/dot-line-system/.history/src/style_20250522113810.css +++ /dev/null @@ -1,142 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114215.css b/dot-line-system/.history/src/style_20250522114215.css deleted file mode 100644 index 95101fc..0000000 --- a/dot-line-system/.history/src/style_20250522114215.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - -.dynamic-gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114227.css b/dot-line-system/.history/src/style_20250522114227.css deleted file mode 100644 index 649bee8..0000000 --- a/dot-line-system/.history/src/style_20250522114227.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - -.gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114320.css b/dot-line-system/.history/src/style_20250522114320.css deleted file mode 100644 index 649bee8..0000000 --- a/dot-line-system/.history/src/style_20250522114320.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - -.gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114407.css b/dot-line-system/.history/src/style_20250522114407.css deleted file mode 100644 index 95101fc..0000000 --- a/dot-line-system/.history/src/style_20250522114407.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - -.dynamic-gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114517.css b/dot-line-system/.history/src/style_20250522114517.css deleted file mode 100644 index 340da50..0000000 --- a/dot-line-system/.history/src/style_20250522114517.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - -.dynamic-gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } -/* - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); - z-index: -1; - } */ - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114533.css b/dot-line-system/.history/src/style_20250522114533.css deleted file mode 100644 index 257a13b..0000000 --- a/dot-line-system/.history/src/style_20250522114533.css +++ /dev/null @@ -1,171 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - z-index: -1; - } - - .dynamic-gradient-bg { - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114538.css b/dot-line-system/.history/src/style_20250522114538.css deleted file mode 100644 index fe18e47..0000000 --- a/dot-line-system/.history/src/style_20250522114538.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - z-index: -1; - - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98); - background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114616.css b/dot-line-system/.history/src/style_20250522114616.css deleted file mode 100644 index 20c0bb6..0000000 --- a/dot-line-system/.history/src/style_20250522114616.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - - -@keyframes gradientAnimation { - 0% { - background-position: 0% 0%; /* Start Links Mitte */ - } - 25% { - background-position: 100% 0%; /* Oben Rechts */ - } - 50% { - background-position: 100% 100%; /* Unten Rechts */ - } - 75% { - background-position: 0% 100%; /* Unten Links */ - } - 100% { - background-position: 0% 0%; /* Zurück zum Start Links Mitte */ - } -} - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /*background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; -} - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent); - -} \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114639.css b/dot-line-system/.history/src/style_20250522114639.css deleted file mode 100644 index 3381220..0000000 --- a/dot-line-system/.history/src/style_20250522114639.css +++ /dev/null @@ -1,173 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /*background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - /* Start Links Mitte */ - } - - 25% { - background-position: 100% 0%; - /* Oben Rechts */ - } - - 50% { - background-position: 100% 100%; - /* Unten Rechts */ - } - - 75% { - background-position: 0% 100%; - /* Unten Links */ - } - - 100% { - background-position: 0% 0%; - /* Zurück zum Start Links Mitte */ - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114649.css b/dot-line-system/.history/src/style_20250522114649.css deleted file mode 100644 index 8701e91..0000000 --- a/dot-line-system/.history/src/style_20250522114649.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /*background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114653.css b/dot-line-system/.history/src/style_20250522114653.css deleted file mode 100644 index 5a22146..0000000 --- a/dot-line-system/.history/src/style_20250522114653.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114816.css b/dot-line-system/.history/src/style_20250522114816.css deleted file mode 100644 index 4c97910..0000000 --- a/dot-line-system/.history/src/style_20250522114816.css +++ /dev/null @@ -1,171 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - overflow-x: hidden; - overflow-y: auto; /* Allows vertical scrolling if needed */ - - - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114848.css b/dot-line-system/.history/src/style_20250522114848.css deleted file mode 100644 index 484b475..0000000 --- a/dot-line-system/.history/src/style_20250522114848.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114856.css b/dot-line-system/.history/src/style_20250522114856.css deleted file mode 100644 index f9fcf4d..0000000 --- a/dot-line-system/.history/src/style_20250522114856.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: auto; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114917.css b/dot-line-system/.history/src/style_20250522114917.css deleted file mode 100644 index 484b475..0000000 --- a/dot-line-system/.history/src/style_20250522114917.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114920.css b/dot-line-system/.history/src/style_20250522114920.css deleted file mode 100644 index b870002..0000000 --- a/dot-line-system/.history/src/style_20250522114920.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114934.css b/dot-line-system/.history/src/style_20250522114934.css deleted file mode 100644 index 401e1a9..0000000 --- a/dot-line-system/.history/src/style_20250522114934.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522114947.css b/dot-line-system/.history/src/style_20250522114947.css deleted file mode 100644 index 2ebc79e..0000000 --- a/dot-line-system/.history/src/style_20250522114947.css +++ /dev/null @@ -1,167 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115024.css b/dot-line-system/.history/src/style_20250522115024.css deleted file mode 100644 index 86784e8..0000000 --- a/dot-line-system/.history/src/style_20250522115024.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115045.css b/dot-line-system/.history/src/style_20250522115045.css deleted file mode 100644 index 48ee122..0000000 --- a/dot-line-system/.history/src/style_20250522115045.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115052.css b/dot-line-system/.history/src/style_20250522115052.css deleted file mode 100644 index a975cf0..0000000 --- a/dot-line-system/.history/src/style_20250522115052.css +++ /dev/null @@ -1,168 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1); - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115107.css b/dot-line-system/.history/src/style_20250522115107.css deleted file mode 100644 index 0649aeb..0000000 --- a/dot-line-system/.history/src/style_20250522115107.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115113.css b/dot-line-system/.history/src/style_20250522115113.css deleted file mode 100644 index ada98ed..0000000 --- a/dot-line-system/.history/src/style_20250522115113.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 1); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115119.css b/dot-line-system/.history/src/style_20250522115119.css deleted file mode 100644 index a124083..0000000 --- a/dot-line-system/.history/src/style_20250522115119.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115124.css b/dot-line-system/.history/src/style_20250522115124.css deleted file mode 100644 index cdf2715..0000000 --- a/dot-line-system/.history/src/style_20250522115124.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115129.css b/dot-line-system/.history/src/style_20250522115129.css deleted file mode 100644 index bf180ab..0000000 --- a/dot-line-system/.history/src/style_20250522115129.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 300; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115145.css b/dot-line-system/.history/src/style_20250522115145.css deleted file mode 100644 index 2270003..0000000 --- a/dot-line-system/.history/src/style_20250522115145.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 200; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115153.css b/dot-line-system/.history/src/style_20250522115153.css deleted file mode 100644 index 8361746..0000000 --- a/dot-line-system/.history/src/style_20250522115153.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115156.css b/dot-line-system/.history/src/style_20250522115156.css deleted file mode 100644 index 6000a74..0000000 --- a/dot-line-system/.history/src/style_20250522115156.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 11px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115158.css b/dot-line-system/.history/src/style_20250522115158.css deleted file mode 100644 index af235c3..0000000 --- a/dot-line-system/.history/src/style_20250522115158.css +++ /dev/null @@ -1,169 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115353.css b/dot-line-system/.history/src/style_20250522115353.css deleted file mode 100644 index 2f680bc..0000000 --- a/dot-line-system/.history/src/style_20250522115353.css +++ /dev/null @@ -1,177 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - transition: box-shadow 0.5s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.5s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115410.css b/dot-line-system/.history/src/style_20250522115410.css deleted file mode 100644 index d044926..0000000 --- a/dot-line-system/.history/src/style_20250522115410.css +++ /dev/null @@ -1,177 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.5); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115441.css b/dot-line-system/.history/src/style_20250522115441.css deleted file mode 100644 index b84fe27..0000000 --- a/dot-line-system/.history/src/style_20250522115441.css +++ /dev/null @@ -1,178 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - /* box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.5);*/ - box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115453.css b/dot-line-system/.history/src/style_20250522115453.css deleted file mode 100644 index f78929c..0000000 --- a/dot-line-system/.history/src/style_20250522115453.css +++ /dev/null @@ -1,178 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.5); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115508.css b/dot-line-system/.history/src/style_20250522115508.css deleted file mode 100644 index e0bec63..0000000 --- a/dot-line-system/.history/src/style_20250522115508.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.5); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115517.css b/dot-line-system/.history/src/style_20250522115517.css deleted file mode 100644 index 68ef695..0000000 --- a/dot-line-system/.history/src/style_20250522115517.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115552.css b/dot-line-system/.history/src/style_20250522115552.css deleted file mode 100644 index 317ea64..0000000 --- a/dot-line-system/.history/src/style_20250522115552.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 2px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115602.css b/dot-line-system/.history/src/style_20250522115602.css deleted file mode 100644 index 68ef695..0000000 --- a/dot-line-system/.history/src/style_20250522115602.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115619.css b/dot-line-system/.history/src/style_20250522115619.css deleted file mode 100644 index 30f1a14..0000000 --- a/dot-line-system/.history/src/style_20250522115619.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115746.css b/dot-line-system/.history/src/style_20250522115746.css deleted file mode 100644 index b4696d1..0000000 --- a/dot-line-system/.history/src/style_20250522115746.css +++ /dev/null @@ -1,181 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522115820.css b/dot-line-system/.history/src/style_20250522115820.css deleted file mode 100644 index b4696d1..0000000 --- a/dot-line-system/.history/src/style_20250522115820.css +++ /dev/null @@ -1,181 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130235.css b/dot-line-system/.history/src/style_20250522130235.css deleted file mode 100644 index b4696d1..0000000 --- a/dot-line-system/.history/src/style_20250522130235.css +++ /dev/null @@ -1,181 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 30s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130252.css b/dot-line-system/.history/src/style_20250522130252.css deleted file mode 100644 index efe0cbd..0000000 --- a/dot-line-system/.history/src/style_20250522130252.css +++ /dev/null @@ -1,181 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 10s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130310.css b/dot-line-system/.history/src/style_20250522130310.css deleted file mode 100644 index efe0cbd..0000000 --- a/dot-line-system/.history/src/style_20250522130310.css +++ /dev/null @@ -1,181 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - /* overflow-x: hidden; - overflow-y: hidden; */ - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 10s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130323.css b/dot-line-system/.history/src/style_20250522130323.css deleted file mode 100644 index b32fb0a..0000000 --- a/dot-line-system/.history/src/style_20250522130323.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - animation: gradientAnimation 10s ease infinite; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130438.css b/dot-line-system/.history/src/style_20250522130438.css deleted file mode 100644 index fc1b096..0000000 --- a/dot-line-system/.history/src/style_20250522130438.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130450.css b/dot-line-system/.history/src/style_20250522130450.css deleted file mode 100644 index a2f8aa9..0000000 --- a/dot-line-system/.history/src/style_20250522130450.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 1s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130457.css b/dot-line-system/.history/src/style_20250522130457.css deleted file mode 100644 index a2f8aa9..0000000 --- a/dot-line-system/.history/src/style_20250522130457.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 1s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130520.css b/dot-line-system/.history/src/style_20250522130520.css deleted file mode 100644 index a2f8aa9..0000000 --- a/dot-line-system/.history/src/style_20250522130520.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 1s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130537.css b/dot-line-system/.history/src/style_20250522130537.css deleted file mode 100644 index f621b52..0000000 --- a/dot-line-system/.history/src/style_20250522130537.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 1s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130552.css b/dot-line-system/.history/src/style_20250522130552.css deleted file mode 100644 index cc9d34e..0000000 --- a/dot-line-system/.history/src/style_20250522130552.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130614.css b/dot-line-system/.history/src/style_20250522130614.css deleted file mode 100644 index cc9d34e..0000000 --- a/dot-line-system/.history/src/style_20250522130614.css +++ /dev/null @@ -1,179 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522130959.css b/dot-line-system/.history/src/style_20250522130959.css deleted file mode 100644 index 0b7920b..0000000 --- a/dot-line-system/.history/src/style_20250522130959.css +++ /dev/null @@ -1,198 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - .dot-tooltip { - pointer-events: none; - opacity: 1; /* Always visible */ - } - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522131003.css b/dot-line-system/.history/src/style_20250522131003.css deleted file mode 100644 index 85730c0..0000000 --- a/dot-line-system/.history/src/style_20250522131003.css +++ /dev/null @@ -1,204 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - padding-top: 2rem; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - /* Apply transition to box-shadow */ - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - /* Apply transition to box-shadow */ - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522131623.css b/dot-line-system/.history/src/style_20250522131623.css deleted file mode 100644 index cbf179e..0000000 --- a/dot-line-system/.history/src/style_20250522131623.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.05); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132147.css b/dot-line-system/.history/src/style_20250522132147.css deleted file mode 100644 index f0c6d1c..0000000 --- a/dot-line-system/.history/src/style_20250522132147.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132926.css b/dot-line-system/.history/src/style_20250522132926.css deleted file mode 100644 index bf3fcc3..0000000 --- a/dot-line-system/.history/src/style_20250522132926.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132930.css b/dot-line-system/.history/src/style_20250522132930.css deleted file mode 100644 index 4adefe1..0000000 --- a/dot-line-system/.history/src/style_20250522132930.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 12px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132942.css b/dot-line-system/.history/src/style_20250522132942.css deleted file mode 100644 index 4ed56f0..0000000 --- a/dot-line-system/.history/src/style_20250522132942.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 16px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 10px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132949.css b/dot-line-system/.history/src/style_20250522132949.css deleted file mode 100644 index d21ff7f..0000000 --- a/dot-line-system/.history/src/style_20250522132949.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 16px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522132956.css b/dot-line-system/.history/src/style_20250522132956.css deleted file mode 100644 index 8fe6d99..0000000 --- a/dot-line-system/.history/src/style_20250522132956.css +++ /dev/null @@ -1,202 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133003.css b/dot-line-system/.history/src/style_20250522133003.css deleted file mode 100644 index 63c3fbf..0000000 --- a/dot-line-system/.history/src/style_20250522133003.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.2; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133006.css b/dot-line-system/.history/src/style_20250522133006.css deleted file mode 100644 index 82e19a5..0000000 --- a/dot-line-system/.history/src/style_20250522133006.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133030.css b/dot-line-system/.history/src/style_20250522133030.css deleted file mode 100644 index a1d2e8f..0000000 --- a/dot-line-system/.history/src/style_20250522133030.css +++ /dev/null @@ -1,204 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - /* text-wrap: balance; */ - text-align: justify; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133046.css b/dot-line-system/.history/src/style_20250522133046.css deleted file mode 100644 index 82e19a5..0000000 --- a/dot-line-system/.history/src/style_20250522133046.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 50%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133236.css b/dot-line-system/.history/src/style_20250522133236.css deleted file mode 100644 index 90f3454..0000000 --- a/dot-line-system/.history/src/style_20250522133236.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 60%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133241.css b/dot-line-system/.history/src/style_20250522133241.css deleted file mode 100644 index 427dfa5..0000000 --- a/dot-line-system/.history/src/style_20250522133241.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 62.5%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133243.css b/dot-line-system/.history/src/style_20250522133243.css deleted file mode 100644 index 4af0f56..0000000 --- a/dot-line-system/.history/src/style_20250522133243.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 62%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133246.css b/dot-line-system/.history/src/style_20250522133246.css deleted file mode 100644 index fc23a61..0000000 --- a/dot-line-system/.history/src/style_20250522133246.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133248.css b/dot-line-system/.history/src/style_20250522133248.css deleted file mode 100644 index 1ebdd19..0000000 --- a/dot-line-system/.history/src/style_20250522133248.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133254.css b/dot-line-system/.history/src/style_20250522133254.css deleted file mode 100644 index e002d7f..0000000 --- a/dot-line-system/.history/src/style_20250522133254.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133352.css b/dot-line-system/.history/src/style_20250522133352.css deleted file mode 100644 index e002d7f..0000000 --- a/dot-line-system/.history/src/style_20250522133352.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - /* background: linear-gradient(to bottom, #4f46e5, #60a5fa, #4ade80); */ - /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);*/ - /* background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */ - /* background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/ - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133401.css b/dot-line-system/.history/src/style_20250522133401.css deleted file mode 100644 index 52edf24..0000000 --- a/dot-line-system/.history/src/style_20250522133401.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 200% 200%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133408.css b/dot-line-system/.history/src/style_20250522133408.css deleted file mode 100644 index e41bb61..0000000 --- a/dot-line-system/.history/src/style_20250522133408.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 300% 300%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522133412.css b/dot-line-system/.history/src/style_20250522133412.css deleted file mode 100644 index 4919966..0000000 --- a/dot-line-system/.history/src/style_20250522133412.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153124.css b/dot-line-system/.history/src/style_20250522153124.css deleted file mode 100644 index a11c985..0000000 --- a/dot-line-system/.history/src/style_20250522153124.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 2px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.1); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153129.css b/dot-line-system/.history/src/style_20250522153129.css deleted file mode 100644 index e8970db..0000000 --- a/dot-line-system/.history/src/style_20250522153129.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 2px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.8); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153134.css b/dot-line-system/.history/src/style_20250522153134.css deleted file mode 100644 index 2119044..0000000 --- a/dot-line-system/.history/src/style_20250522153134.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.75%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.8); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153141.css b/dot-line-system/.history/src/style_20250522153141.css deleted file mode 100644 index 30f0809..0000000 --- a/dot-line-system/.history/src/style_20250522153141.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.8); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153151.css b/dot-line-system/.history/src/style_20250522153151.css deleted file mode 100644 index 173b4d9..0000000 --- a/dot-line-system/.history/src/style_20250522153151.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 0, 0, 0.8); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153532.css b/dot-line-system/.history/src/style_20250522153532.css deleted file mode 100644 index 2f057f0..0000000 --- a/dot-line-system/.history/src/style_20250522153532.css +++ /dev/null @@ -1,199 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.2); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153557.css b/dot-line-system/.history/src/style_20250522153557.css deleted file mode 100644 index 02476a1..0000000 --- a/dot-line-system/.history/src/style_20250522153557.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed white; - width: 100%; - z-index: -1; - background-color: rgba(255, 255, 255, 0.2); - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522153600.css b/dot-line-system/.history/src/style_20250522153600.css deleted file mode 100644 index c1a966d..0000000 --- a/dot-line-system/.history/src/style_20250522153600.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed white; - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522223323.css b/dot-line-system/.history/src/style_20250522223323.css deleted file mode 100644 index a8e5ad4..0000000 --- a/dot-line-system/.history/src/style_20250522223323.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: auto; - height: 100%; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522230441.css b/dot-line-system/.history/src/style_20250522230441.css deleted file mode 100644 index 545d443..0000000 --- a/dot-line-system/.history/src/style_20250522230441.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: -1; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232137.css b/dot-line-system/.history/src/style_20250522232137.css deleted file mode 100644 index 93e075d..0000000 --- a/dot-line-system/.history/src/style_20250522232137.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232205.css b/dot-line-system/.history/src/style_20250522232205.css deleted file mode 100644 index 93e075d..0000000 --- a/dot-line-system/.history/src/style_20250522232205.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232242.css b/dot-line-system/.history/src/style_20250522232242.css deleted file mode 100644 index c35fa4f..0000000 --- a/dot-line-system/.history/src/style_20250522232242.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - .gradient-bg { - border: 2px solid red; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232300.css b/dot-line-system/.history/src/style_20250522232300.css deleted file mode 100644 index 201161d..0000000 --- a/dot-line-system/.history/src/style_20250522232300.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - .gradient-bg { - border: 2px solid red; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232311.css b/dot-line-system/.history/src/style_20250522232311.css deleted file mode 100644 index 0c0b176..0000000 --- a/dot-line-system/.history/src/style_20250522232311.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - .gradient-bg { - border: 2px solid green; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232332.css b/dot-line-system/.history/src/style_20250522232332.css deleted file mode 100644 index 487866f..0000000 --- a/dot-line-system/.history/src/style_20250522232332.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background-size: 200% 200%; - background-color: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - animation: gradientAnimation 10s ease infinite; - } - - .gradient-bg { - border: 2px solid green; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232342.css b/dot-line-system/.history/src/style_20250522232342.css deleted file mode 100644 index eedaebd..0000000 --- a/dot-line-system/.history/src/style_20250522232342.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 10s ease infinite; - } - - .gradient-bg { - border: 2px solid green; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232352.css b/dot-line-system/.history/src/style_20250522232352.css deleted file mode 100644 index 27bc2e2..0000000 --- a/dot-line-system/.history/src/style_20250522232352.css +++ /dev/null @@ -1,205 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 30s ease infinite; - } - - .gradient-bg { - border: 2px solid green; /* Temporary for debugging */ -} - - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232356.css b/dot-line-system/.history/src/style_20250522232356.css deleted file mode 100644 index 30c2087..0000000 --- a/dot-line-system/.history/src/style_20250522232356.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 30s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232403.css b/dot-line-system/.history/src/style_20250522232403.css deleted file mode 100644 index 45fc6a6..0000000 --- a/dot-line-system/.history/src/style_20250522232403.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232543.css b/dot-line-system/.history/src/style_20250522232543.css deleted file mode 100644 index 9e6d4c1..0000000 --- a/dot-line-system/.history/src/style_20250522232543.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: 0; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232557.css b/dot-line-system/.history/src/style_20250522232557.css deleted file mode 100644 index b7c9577..0000000 --- a/dot-line-system/.history/src/style_20250522232557.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: 1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232605.css b/dot-line-system/.history/src/style_20250522232605.css deleted file mode 100644 index 9e6d4c1..0000000 --- a/dot-line-system/.history/src/style_20250522232605.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: 0; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: 0; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232609.css b/dot-line-system/.history/src/style_20250522232609.css deleted file mode 100644 index 73b62df..0000000 --- a/dot-line-system/.history/src/style_20250522232609.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: 0; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250522232619.css b/dot-line-system/.history/src/style_20250522232619.css deleted file mode 100644 index dcc3e88..0000000 --- a/dot-line-system/.history/src/style_20250522232619.css +++ /dev/null @@ -1,200 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - /* padding-top: 2rem; */ - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250523080846.css b/dot-line-system/.history/src/style_20250523080846.css deleted file mode 100644 index 266c32c..0000000 --- a/dot-line-system/.history/src/style_20250523080846.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .smooth-scroll { - transition: scroll-left 0.3s ease-out; /* Add easing on scroll-left */ -} - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250523080941.css b/dot-line-system/.history/src/style_20250523080941.css deleted file mode 100644 index 266c32c..0000000 --- a/dot-line-system/.history/src/style_20250523080941.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .smooth-scroll { - transition: scroll-left 0.3s ease-out; /* Add easing on scroll-left */ -} - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250523081026.css b/dot-line-system/.history/src/style_20250523081026.css deleted file mode 100644 index 2b05fcd..0000000 --- a/dot-line-system/.history/src/style_20250523081026.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .smooth-scroll { - transition: scroll-left 1s ease-out; /* Add easing on scroll-left */ -} - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/.history/src/style_20250523081040.css b/dot-line-system/.history/src/style_20250523081040.css deleted file mode 100644 index 9d13415..0000000 --- a/dot-line-system/.history/src/style_20250523081040.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .smooth-scroll { - transition: scroll-left 0.5s ease-out; /* Add easing on scroll-left */ -} - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/bun.lock b/dot-line-system/bun.lock deleted file mode 100644 index c575191..0000000 --- a/dot-line-system/bun.lock +++ /dev/null @@ -1,128 +0,0 @@ -{ - "lockfileVersion": 1, - "workspaces": { - "": { - "name": "dot-line-system", - "dependencies": { - "gsap": "./gsap-bonus.tgz", - }, - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.2.0", - }, - }, - }, - "packages": { - "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag=="], - - "@esbuild/android-arm": ["@esbuild/android-arm@0.25.2", "", { "os": "android", "cpu": "arm" }, "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA=="], - - "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.2", "", { "os": "android", "cpu": "arm64" }, "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w=="], - - "@esbuild/android-x64": ["@esbuild/android-x64@0.25.2", "", { "os": "android", "cpu": "x64" }, "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg=="], - - "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA=="], - - "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA=="], - - "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w=="], - - "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ=="], - - "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.2", "", { "os": "linux", "cpu": "arm" }, "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g=="], - - "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g=="], - - "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ=="], - - "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w=="], - - "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q=="], - - "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g=="], - - "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw=="], - - "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q=="], - - "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.2", "", { "os": "linux", "cpu": "x64" }, "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg=="], - - "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.2", "", { "os": "none", "cpu": "arm64" }, "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw=="], - - "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.2", "", { "os": "none", "cpu": "x64" }, "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg=="], - - "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg=="], - - "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw=="], - - "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA=="], - - "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q=="], - - "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg=="], - - "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.2", "", { "os": "win32", "cpu": "x64" }, "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA=="], - - "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.39.0", "", { "os": "android", "cpu": "arm" }, "sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA=="], - - "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.39.0", "", { "os": "android", "cpu": "arm64" }, "sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ=="], - - "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.39.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q=="], - - "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.39.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ=="], - - "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.39.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ=="], - - "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.39.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q=="], - - "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.39.0", "", { "os": "linux", "cpu": "arm" }, "sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g=="], - - "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.39.0", "", { "os": "linux", "cpu": "arm" }, "sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw=="], - - "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.39.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ=="], - - "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.39.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA=="], - - "@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw=="], - - "@rollup/rollup-linux-powerpc64le-gnu": ["@rollup/rollup-linux-powerpc64le-gnu@4.39.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ=="], - - "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ=="], - - "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA=="], - - "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.39.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA=="], - - "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.39.0", "", { "os": "linux", "cpu": "x64" }, "sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA=="], - - "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.39.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg=="], - - "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.39.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ=="], - - "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.39.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ=="], - - "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.39.0", "", { "os": "win32", "cpu": "x64" }, "sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug=="], - - "@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="], - - "esbuild": ["esbuild@0.25.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.2", "@esbuild/android-arm": "0.25.2", "@esbuild/android-arm64": "0.25.2", "@esbuild/android-x64": "0.25.2", "@esbuild/darwin-arm64": "0.25.2", "@esbuild/darwin-x64": "0.25.2", "@esbuild/freebsd-arm64": "0.25.2", "@esbuild/freebsd-x64": "0.25.2", "@esbuild/linux-arm": "0.25.2", "@esbuild/linux-arm64": "0.25.2", "@esbuild/linux-ia32": "0.25.2", "@esbuild/linux-loong64": "0.25.2", "@esbuild/linux-mips64el": "0.25.2", "@esbuild/linux-ppc64": "0.25.2", "@esbuild/linux-riscv64": "0.25.2", "@esbuild/linux-s390x": "0.25.2", "@esbuild/linux-x64": "0.25.2", "@esbuild/netbsd-arm64": "0.25.2", "@esbuild/netbsd-x64": "0.25.2", "@esbuild/openbsd-arm64": "0.25.2", "@esbuild/openbsd-x64": "0.25.2", "@esbuild/sunos-x64": "0.25.2", "@esbuild/win32-arm64": "0.25.2", "@esbuild/win32-ia32": "0.25.2", "@esbuild/win32-x64": "0.25.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ=="], - - "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="], - - "gsap": ["gsap@./gsap-bonus.tgz", {}], - - "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], - - "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], - - "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="], - - "rollup": ["rollup@4.39.0", "", { "dependencies": { "@types/estree": "1.0.7" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.39.0", "@rollup/rollup-android-arm64": "4.39.0", "@rollup/rollup-darwin-arm64": "4.39.0", "@rollup/rollup-darwin-x64": "4.39.0", "@rollup/rollup-freebsd-arm64": "4.39.0", "@rollup/rollup-freebsd-x64": "4.39.0", "@rollup/rollup-linux-arm-gnueabihf": "4.39.0", "@rollup/rollup-linux-arm-musleabihf": "4.39.0", "@rollup/rollup-linux-arm64-gnu": "4.39.0", "@rollup/rollup-linux-arm64-musl": "4.39.0", "@rollup/rollup-linux-loongarch64-gnu": "4.39.0", "@rollup/rollup-linux-powerpc64le-gnu": "4.39.0", "@rollup/rollup-linux-riscv64-gnu": "4.39.0", "@rollup/rollup-linux-riscv64-musl": "4.39.0", "@rollup/rollup-linux-s390x-gnu": "4.39.0", "@rollup/rollup-linux-x64-gnu": "4.39.0", "@rollup/rollup-linux-x64-musl": "4.39.0", "@rollup/rollup-win32-arm64-msvc": "4.39.0", "@rollup/rollup-win32-ia32-msvc": "4.39.0", "@rollup/rollup-win32-x64-msvc": "4.39.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g=="], - - "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], - - "typescript": ["typescript@5.7.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="], - - "vite": ["vite@6.2.5", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA=="], - } -} diff --git a/dot-line-system/index.html b/dot-line-system/index.html deleted file mode 100644 index 415baa6..0000000 --- a/dot-line-system/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Life Line - - - - - - - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/dot-line-system/package-lock.json b/dot-line-system/package-lock.json deleted file mode 100644 index 139d2ca..0000000 --- a/dot-line-system/package-lock.json +++ /dev/null @@ -1,1006 +0,0 @@ -{ - "name": "dot-line-system", - "version": "0.0.0", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "name": "dot-line-system", - "version": "0.0.0", - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.3.5" - } - }, - "node_modules/@esbuild/aix-ppc64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz", - "integrity": "sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.4.tgz", - "integrity": "sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.4.tgz", - "integrity": "sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.4.tgz", - "integrity": "sha512-TVhdVtQIFuVpIIR282btcGC2oGQoSfZfmBdTip2anCaVYcqWlZXGcdcKIUklfX2wj0JklNYgz39OBqh2cqXvcQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.4.tgz", - "integrity": "sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.4.tgz", - "integrity": "sha512-CJsry8ZGM5VFVeyUYB3cdKpd/H69PYez4eJh1W/t38vzutdjEjtP7hB6eLKBoOdxcAlCtEYHzQ/PJ/oU9I4u0A==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.4.tgz", - "integrity": "sha512-0FgvOJ6UUMflsHSPLzdfDnnBBVoCDtBTVyn/MrWloUNvq/5SFmh13l3dvgRPkDihRxb77Y17MbqbCAa2strMQQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.4.tgz", - "integrity": "sha512-kro4c0P85GMfFYqW4TWOpvmF8rFShbWGnrLqlzp4X1TNWjRY3JMYUfDCtOxPKOIY8B0WC8HN51hGP4I4hz4AaQ==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.4.tgz", - "integrity": "sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.4.tgz", - "integrity": "sha512-yTEjoapy8UP3rv8dB0ip3AfMpRbyhSN3+hY8mo/i4QXFeDxmiYbEKp3ZRjBKcOP862Ua4b1PDfwlvbuwY7hIGQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.4.tgz", - "integrity": "sha512-NeqqYkrcGzFwi6CGRGNMOjWGGSYOpqwCjS9fvaUlX5s3zwOtn1qwg1s2iE2svBe4Q/YOG1q6875lcAoQK/F4VA==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.4.tgz", - "integrity": "sha512-IcvTlF9dtLrfL/M8WgNI/qJYBENP3ekgsHbYUIzEzq5XJzzVEV/fXY9WFPfEEXmu3ck2qJP8LG/p3Q8f7Zc2Xg==", - "cpu": [ - "mips64el" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.4.tgz", - "integrity": "sha512-HOy0aLTJTVtoTeGZh4HSXaO6M95qu4k5lJcH4gxv56iaycfz1S8GO/5Jh6X4Y1YiI0h7cRyLi+HixMR+88swag==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.4.tgz", - "integrity": "sha512-i8JUDAufpz9jOzo4yIShCTcXzS07vEgWzyX3NH2G7LEFVgrLEhjwL3ajFE4fZI3I4ZgiM7JH3GQ7ReObROvSUA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.4.tgz", - "integrity": "sha512-jFnu+6UbLlzIjPQpWCNh5QtrcNfMLjgIavnwPQAfoGx4q17ocOU9MsQ2QVvFxwQoWpZT8DvTLooTvmOQXkO51g==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.4.tgz", - "integrity": "sha512-6e0cvXwzOnVWJHq+mskP8DNSrKBr1bULBvnFLpc1KY+d+irZSgZ02TGse5FsafKS5jg2e4pbvK6TPXaF/A6+CA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/netbsd-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.4.tgz", - "integrity": "sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.4.tgz", - "integrity": "sha512-XAg8pIQn5CzhOB8odIcAm42QsOfa98SBeKUdo4xa8OvX8LbMZqEtgeWE9P/Wxt7MlG2QqvjGths+nq48TrUiKw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/openbsd-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.4.tgz", - "integrity": "sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.4.tgz", - "integrity": "sha512-xAGGhyOQ9Otm1Xu8NT1ifGLnA6M3sJxZ6ixylb+vIUVzvvd6GOALpwQrYrtlPouMqd/vSbgehz6HaVk4+7Afhw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.4.tgz", - "integrity": "sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.4.tgz", - "integrity": "sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.4.tgz", - "integrity": "sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.4.tgz", - "integrity": "sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz", - "integrity": "sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-android-arm64": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.2.tgz", - "integrity": "sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.2.tgz", - "integrity": "sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.2.tgz", - "integrity": "sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.2.tgz", - "integrity": "sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.2.tgz", - "integrity": "sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.2.tgz", - "integrity": "sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.2.tgz", - "integrity": "sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.2.tgz", - "integrity": "sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.2.tgz", - "integrity": "sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-loongarch64-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.2.tgz", - "integrity": "sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.2.tgz", - "integrity": "sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.2.tgz", - "integrity": "sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.2.tgz", - "integrity": "sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.2.tgz", - "integrity": "sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.2.tgz", - "integrity": "sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.2.tgz", - "integrity": "sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.2.tgz", - "integrity": "sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.2.tgz", - "integrity": "sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.2.tgz", - "integrity": "sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@types/estree": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", - "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", - "dev": true, - "license": "MIT" - }, - "node_modules/esbuild": { - "version": "0.25.4", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz", - "integrity": "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=18" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.25.4", - "@esbuild/android-arm": "0.25.4", - "@esbuild/android-arm64": "0.25.4", - "@esbuild/android-x64": "0.25.4", - "@esbuild/darwin-arm64": "0.25.4", - "@esbuild/darwin-x64": "0.25.4", - "@esbuild/freebsd-arm64": "0.25.4", - "@esbuild/freebsd-x64": "0.25.4", - "@esbuild/linux-arm": "0.25.4", - "@esbuild/linux-arm64": "0.25.4", - "@esbuild/linux-ia32": "0.25.4", - "@esbuild/linux-loong64": "0.25.4", - "@esbuild/linux-mips64el": "0.25.4", - "@esbuild/linux-ppc64": "0.25.4", - "@esbuild/linux-riscv64": "0.25.4", - "@esbuild/linux-s390x": "0.25.4", - "@esbuild/linux-x64": "0.25.4", - "@esbuild/netbsd-arm64": "0.25.4", - "@esbuild/netbsd-x64": "0.25.4", - "@esbuild/openbsd-arm64": "0.25.4", - "@esbuild/openbsd-x64": "0.25.4", - "@esbuild/sunos-x64": "0.25.4", - "@esbuild/win32-arm64": "0.25.4", - "@esbuild/win32-ia32": "0.25.4", - "@esbuild/win32-x64": "0.25.4" - } - }, - "node_modules/fdir": { - "version": "6.4.4", - "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", - "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==", - "dev": true, - "license": "MIT", - "peerDependencies": { - "picomatch": "^3 || ^4" - }, - "peerDependenciesMeta": { - "picomatch": { - "optional": true - } - } - }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/picocolors": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", - "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, - "license": "ISC" - }, - "node_modules/picomatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", - "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/postcss": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", - "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.8", - "picocolors": "^1.1.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/rollup": { - "version": "4.40.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz", - "integrity": "sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/estree": "1.0.7" - }, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=18.0.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.40.2", - "@rollup/rollup-android-arm64": "4.40.2", - "@rollup/rollup-darwin-arm64": "4.40.2", - "@rollup/rollup-darwin-x64": "4.40.2", - "@rollup/rollup-freebsd-arm64": "4.40.2", - "@rollup/rollup-freebsd-x64": "4.40.2", - "@rollup/rollup-linux-arm-gnueabihf": "4.40.2", - "@rollup/rollup-linux-arm-musleabihf": "4.40.2", - "@rollup/rollup-linux-arm64-gnu": "4.40.2", - "@rollup/rollup-linux-arm64-musl": "4.40.2", - "@rollup/rollup-linux-loongarch64-gnu": "4.40.2", - "@rollup/rollup-linux-powerpc64le-gnu": "4.40.2", - "@rollup/rollup-linux-riscv64-gnu": "4.40.2", - "@rollup/rollup-linux-riscv64-musl": "4.40.2", - "@rollup/rollup-linux-s390x-gnu": "4.40.2", - "@rollup/rollup-linux-x64-gnu": "4.40.2", - "@rollup/rollup-linux-x64-musl": "4.40.2", - "@rollup/rollup-win32-arm64-msvc": "4.40.2", - "@rollup/rollup-win32-ia32-msvc": "4.40.2", - "@rollup/rollup-win32-x64-msvc": "4.40.2", - "fsevents": "~2.3.2" - } - }, - "node_modules/source-map-js": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", - "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/tinyglobby": { - "version": "0.2.13", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz", - "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==", - "dev": true, - "license": "MIT", - "dependencies": { - "fdir": "^6.4.4", - "picomatch": "^4.0.2" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/SuperchupuDev" - } - }, - "node_modules/typescript": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", - "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", - "dev": true, - "license": "Apache-2.0", - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, - "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "esbuild": "^0.25.0", - "fdir": "^6.4.4", - "picomatch": "^4.0.2", - "postcss": "^8.5.3", - "rollup": "^4.34.9", - "tinyglobby": "^0.2.13" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^18.0.0 || ^20.0.0 || >=22.0.0" - }, - "funding": { - "url": "https://github.com/vitejs/vite?sponsor=1" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" - }, - "peerDependencies": { - "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", - "jiti": ">=1.21.0", - "less": "*", - "lightningcss": "^1.21.0", - "sass": "*", - "sass-embedded": "*", - "stylus": "*", - "sugarss": "*", - "terser": "^5.16.0", - "tsx": "^4.8.1", - "yaml": "^2.4.2" - }, - "peerDependenciesMeta": { - "@types/node": { - "optional": true - }, - "jiti": { - "optional": true - }, - "less": { - "optional": true - }, - "lightningcss": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - }, - "tsx": { - "optional": true - }, - "yaml": { - "optional": true - } - } - } - } -} diff --git a/dot-line-system/package.json b/dot-line-system/package.json deleted file mode 100644 index 882780f..0000000 --- a/dot-line-system/package.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "dot-line-system", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "typescript": "~5.7.2", - "vite": "^6.3.5" - }, - "scripts": { - "build": "vite build", - "start": "vite", - "tsc": "tsc" - } -} diff --git a/dot-line-system/public/ScrollTrigger.min.js b/dot-line-system/public/ScrollTrigger.min.js deleted file mode 100644 index 01c8533..0000000 --- a/dot-line-system/public/ScrollTrigger.min.js +++ /dev/null @@ -1,11 +0,0 @@ -/*! - * ScrollTrigger 3.12.7 - * https://gsap.com - * - * @license Copyright 2025, GreenSock. All rights reserved. - * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership. - * @author: Jack Doyle, jack@greensock.com - */ - -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r=Math.abs(r)?t:r}function O(){(Ae=Te.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,qe),n.push.apply(n,Ie),qe=t,Ie=n,o=function _bridge(e,t){return r[e](t)}}()}function P(e){return Te=e||r(),!Ce&&Te&&"undefined"!=typeof document&&document.body&&(Se=window,Ee=(ke=document).documentElement,Pe=ke.body,t=[Se,ke,Ee,Pe],Te.utils.clamp,Re=Te.core.context||function(){},Oe="onpointerenter"in Pe?"pointer":"mouse",Me=k.isTouch=Se.matchMedia&&Se.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Se||0=i,n=Math.abs(t)>=i;S&&(r||n)&&S(se,e,t,me,ye),r&&(m&&0Math.abs(t)?"x":"y",oe=!0),"y"!==ae&&(me[2]+=e,se._vx.update(e,!0)),"x"!==ae&&(ye[2]+=t,se._vy.update(t,!0)),n?ee=ee||requestAnimationFrame(ff):ff()}function jf(e){if(!df(e,1)){var t=(e=M(e,s)).clientX,r=e.clientY,n=t-se.x,i=r-se.y,o=se.isDragging;se.x=t,se.y=r,(o||(n||i)&&(Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a))&&(re=o?2:1,o||(se.isDragging=!0),hf(n,i))}}function mf(e){return e.touches&&1=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=o(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in H?H[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Db(e,t,r,n,i,o,a,s){var l=i.startColor,c=i.endColor,u=i.fontSize,f=i.indent,d=i.fontWeight,p=Xe.createElement("div"),g=La(r)||"fixed"===z(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?Je:r,b=-1!==e.indexOf("start"),m=b?l:c,y="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return y+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(y+=(n===ze?q:I)+":"+(o+parseFloat(f))+"px;"),a&&(y+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=y,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],X(p,0,n,b),p}function Ib(){return 34Je.clientWidth)||(qe.cache++,v?D=D||requestAnimationFrame(Z):Z(),st||U("scrollStart"),st=at())}function Kb(){y=Ne.innerWidth,m=Ne.innerHeight}function Lb(e){qe.cache++,!0!==e&&(Ke||h||Xe.fullscreenElement||Xe.webkitFullscreenElement||b&&y===Ne.innerWidth&&!(Math.abs(Ne.innerHeight-m)>.25*Ne.innerHeight))||c.restart(!0)}function Ob(){return xb(ne,"scrollEnd",Ob)||Et(!0)}function Rb(e){for(var t=0;tt,n=e._startClamp&&e.start>=t;(r||n)&&e.setPositions(n?t-1:e.start,r?Math.max(n?t:e.start+1,t):e.end,!0)}),Zb(!1),et=0,r.forEach(function(e){return e&&e.render&&e.render(-1)}),qe.forEach(function(e){Ta(e)&&(e.smooth&&requestAnimationFrame(function(){return e.target.style.scrollBehavior="smooth"}),e.rec&&e(e.rec))}),Tb(w,1),c.pause(),kt++,Z(rt=2),Ct.forEach(function(e){return Ta(e.vars.onRefresh)&&e.vars.onRefresh(e)}),rt=ne.isRefreshing=!1,U("refresh")}else wb(ne,"scrollEnd",Ob)},Q=0,Pt=1,Z=function _updateAll(e){if(2===e||!rt&&!S){ne.isUpdating=!0,it&&it.update(0);var t=Ct.length,r=at(),n=50<=r-R,i=t&&Ct[0].scroll();if(Pt=i=Qa(be,he)){if(oe&&Ae()&&!de)for(o=oe.parentNode;o&&o!==Je;)o._pinOffset&&(R-=o._pinOffset,L-=o._pinOffset),o=o.parentNode}else i=mb(ae),s=he===ze,a=Ae(),j=parseFloat(G(he.a))+_,!y&&1=L})},Ce.update=function(e,t,r){if(!de||r||e){var n,i,o,a,s,l,c,u=!0===rt?re:Ce.scroll(),f=e?0:(u-R)/N,d=f<0?0:1u+(u-B)/(at()-Ge)*P&&(d=.9999)),d!==p&&Ce.enabled){if(a=(s=(n=Ce.isActive=!!d&&d<1)!=(!!p&&p<1))||!!d!=!!p,Ce.direction=p=Qa(be,he),fe)if(e||!n&&!l)oc(ae,U);else{var g=wt(ae,!0),h=u-R;oc(ae,Je,g.top+(he===ze?h:0)+xt,g.left+(he===ze?0:h)+xt)}Mt(n||l?W:V),$&&d<1&&n||b(j+(1!==d||l?0:Q))}}else b(Ia(j+Q*d));!ue||A.tween||Ke||ot||te.restart(!0),S&&(s||ce&&d&&(d<1||!tt))&&Ve(S.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](S.className)}),!C||ve||e||C(Ce),a&&!Ke?(ve&&(c&&("complete"===o?O.pause().totalProgress(1):"reset"===o?O.restart(!0).pause():"restart"===o?O.restart(!0):O[o]()),C&&C(Ce)),!s&&tt||(k&&s&&Xa(Ce,k),xe[i]&&Xa(Ce,xe[i]),ce&&(1===d?Ce.kill(!1,1):xe[i]=0),s||xe[i=1===d?1:3]&&Xa(Ce,xe[i])),pe&&!n&&Math.abs(Ce.getVelocity())>(Ua(pe)?pe:2500)&&(Wa(Ce.callbackAnimation),ee?ee.progress(1):Wa(O,"reverse"===o?1:!d,1))):ve&&C&&!Ke&&C(Ce)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(Y._isFlipped?1:0)),x(v)}T&&T(-u/de.duration()*(de._caScrollDist||0))}},Ce.enable=function(e,t){Ce.enabled||(Ce.enabled=!0,wb(be,"resize",Lb),me||wb(be,"scroll",Jb),Se&&wb(ScrollTrigger,"refreshInit",Se),!1!==e&&(Ce.progress=Oe=0,D=B=Pe=Ae()),!1!==t&&Ce.refresh())},Ce.getTween=function(e){return e&&A?A.tween:ee},Ce.setPositions=function(e,t,r,n){if(de){var i=de.scrollTrigger,o=de.duration(),a=i.end-i.start;e=i.start+a*e/o,t=i.start+a*t/o}Ce.refresh(!1,!1,{start:Da(e,r&&!!Ce._startClamp),end:Da(t,r&&!!Ce._endClamp)},n),Ce.update()},Ce.adjustPinSpacing=function(e){if(Z&&e){var t=Z.indexOf(he.d)+1;Z[t]=parseFloat(Z[t])+e+xt,Z[1]=parseFloat(Z[1])+e+xt,Mt(Z)}},Ce.disable=function(e,t){if(Ce.enabled&&(!1!==e&&Ce.revert(!0,!0),Ce.enabled=Ce.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Se&&xb(ScrollTrigger,"refreshInit",Se),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=Ct.length;r--;)if(Ct[r].scroller===be&&Ct[r]!==Ce)return;xb(be,"resize",Lb),me||xb(be,"scroll",Jb)}},Ce.kill=function(e,t){Ce.disable(e,t),ee&&!t&&ee.kill(),a&&delete St[a];var r=Ct.indexOf(Ce);0<=r&&Ct.splice(r,1),r===Qe&&0o&&(b()>o?a.progress(1)&&b(o):a.resetTo("scrollY",o))}Va(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,o,l,i,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||We,g=He.core.globals().ScrollSmoother,h=g&&g.get(),v=E&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=K(p,ze),m=K(p,Fe),y=1,x=(k.isTouch&&Ne.visualViewport?Ne.visualViewport.scale*Ne.visualViewport.width:Ne.outerWidth)/Ne.innerWidth,w=0,_=Ta(t)?function(){return t(n)}:function(){return t||2.8},T=xc(p,e.type,!0,r),C=Ha,S=Ha;return v&&He.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return E&&"touchmove"===e.type&&function ignoreDrag(){if(i){requestAnimationFrame(Bq);var e=Ia(n.deltaY/2),t=S(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ia((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=qe.cache,Z()}return!0}b.offset&&Fq(),i=!0}()||1.05=o||o-1<=r)&&He.to({},{onUpdate:Lq,duration:i})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3 gsap || (typeof(window) !== \"undefined\" && (gsap = window.gsap) && gsap.registerPlugin && gsap),\n\t_startup = 1,\n\t_observers = [],\n\t_scrollers = [],\n\t_proxies = [],\n\t_getTime = Date.now,\n\t_bridge = (name, value) => value,\n\t_integrate = () => {\n\t\tlet core = ScrollTrigger.core,\n\t\t\tdata = core.bridge || {},\n\t\t\tscrollers = core._scrollers,\n\t\t\tproxies = core._proxies;\n\t\tscrollers.push(..._scrollers);\n\t\tproxies.push(..._proxies);\n\t\t_scrollers = scrollers;\n\t\t_proxies = proxies;\n\t\t_bridge = (name, value) => data[name](value);\n\t},\n\t_getProxyProp = (element, property) => ~_proxies.indexOf(element) && _proxies[_proxies.indexOf(element) + 1][property],\n\t_isViewport = el => !!~_root.indexOf(el),\n\t_addListener = (element, type, func, passive, capture) => element.addEventListener(type, func, {passive: passive !== false, capture: !!capture}),\n\t_removeListener = (element, type, func, capture) => element.removeEventListener(type, func, !!capture),\n\t_scrollLeft = \"scrollLeft\",\n\t_scrollTop = \"scrollTop\",\n\t_onScroll = () => (_normalizer && _normalizer.isPressed) || _scrollers.cache++,\n\t_scrollCacheFunc = (f, doNotCache) => {\n\t\tlet cachingFunc = value => { // since reading the scrollTop/scrollLeft/pageOffsetY/pageOffsetX can trigger a layout, this function allows us to cache the value so it only gets read fresh after a \"scroll\" event fires (or while we're refreshing because that can lengthen the page and alter the scroll position). when \"soft\" is true, that means don't actually set the scroll, but cache the new value instead (useful in ScrollSmoother)\n\t\t\tif (value || value === 0) {\n\t\t\t\t_startup && (_win.history.scrollRestoration = \"manual\"); // otherwise the new position will get overwritten by the browser onload.\n\t\t\t\tlet isNormalizing = _normalizer && _normalizer.isPressed;\n\t\t\t\tvalue = cachingFunc.v = Math.round(value) || (_normalizer && _normalizer.iOS ? 1 : 0); //TODO: iOS Bug: if you allow it to go to 0, Safari can start to report super strange (wildly inaccurate) touch positions!\n\t\t\t\tf(value);\n\t\t\t\tcachingFunc.cacheID = _scrollers.cache;\n\t\t\t\tisNormalizing && _bridge(\"ss\", value); // set scroll (notify ScrollTrigger so it can dispatch a \"scrollStart\" event if necessary\n\t\t\t} else if (doNotCache || _scrollers.cache !== cachingFunc.cacheID || _bridge(\"ref\")) {\n\t\t\t\tcachingFunc.cacheID = _scrollers.cache;\n\t\t\t\tcachingFunc.v = f();\n\t\t\t}\n\t\t\treturn cachingFunc.v + cachingFunc.offset;\n\t\t};\n\t\tcachingFunc.offset = 0;\n\t\treturn f && cachingFunc;\n\t},\n\t_horizontal = {s: _scrollLeft, p: \"left\", p2: \"Left\", os: \"right\", os2: \"Right\", d: \"width\", d2: \"Width\", a: \"x\", sc: _scrollCacheFunc(function(value) { return arguments.length ? _win.scrollTo(value, _vertical.sc()) : _win.pageXOffset || _doc[_scrollLeft] || _docEl[_scrollLeft] || _body[_scrollLeft] || 0})},\n\t_vertical = {s: _scrollTop, p: \"top\", p2: \"Top\", os: \"bottom\", os2: \"Bottom\", d: \"height\", d2: \"Height\", a: \"y\", op: _horizontal, sc: _scrollCacheFunc(function(value) { return arguments.length ? _win.scrollTo(_horizontal.sc(), value) : _win.pageYOffset || _doc[_scrollTop] || _docEl[_scrollTop] || _body[_scrollTop] || 0})},\n\t_getTarget = (t, self) => ((self && self._ctx && self._ctx.selector) || gsap.utils.toArray)(t)[0] || (typeof(t) === \"string\" && gsap.config().nullTargetWarn !== false ? console.warn(\"Element not found:\", t) : null),\n\n\t_getScrollFunc = (element, {s, sc}) => { // we store the scroller functions in an alternating sequenced Array like [element, verticalScrollFunc, horizontalScrollFunc, ...] so that we can minimize memory, maximize performance, and we also record the last position as a \".rec\" property in order to revert to that after refreshing to ensure things don't shift around.\n\t\t_isViewport(element) && (element = _doc.scrollingElement || _docEl);\n\t\tlet i = _scrollers.indexOf(element),\n\t\t\toffset = sc === _vertical.sc ? 1 : 2;\n\t\t!~i && (i = _scrollers.push(element) - 1);\n\t\t_scrollers[i + offset] || _addListener(element, \"scroll\", _onScroll); // clear the cache when a scroll occurs\n\t\tlet prev = _scrollers[i + offset],\n\t\t\tfunc = prev || (_scrollers[i + offset] = _scrollCacheFunc(_getProxyProp(element, s), true) || (_isViewport(element) ? sc : _scrollCacheFunc(function(value) { return arguments.length ? (element[s] = value) : element[s]; })));\n\t\tfunc.target = element;\n\t\tprev || (func.smooth = gsap.getProperty(element, \"scrollBehavior\") === \"smooth\"); // only set it the first time (don't reset every time a scrollFunc is requested because perhaps it happens during a refresh() when it's disabled in ScrollTrigger.\n\t\treturn func;\n\t},\n\t_getVelocityProp = (value, minTimeRefresh, useDelta) => {\n\t\tlet v1 = value,\n\t\t\tv2 = value,\n\t\t\tt1 = _getTime(),\n\t\t\tt2 = t1,\n\t\t\tmin = minTimeRefresh || 50,\n\t\t\tdropToZeroTime = Math.max(500, min * 3),\n\t\t\tupdate = (value, force) => {\n\t\t\t\tlet t = _getTime();\n\t\t\t\tif (force || t - t1 > min) {\n\t\t\t\t\tv2 = v1;\n\t\t\t\t\tv1 = value;\n\t\t\t\t\tt2 = t1;\n\t\t\t\t\tt1 = t;\n\t\t\t\t} else if (useDelta) {\n\t\t\t\t\tv1 += value;\n\t\t\t\t} else { // not totally necessary, but makes it a bit more accurate by adjusting the v1 value according to the new slope. This way we're not just ignoring the incoming data. Removing for now because it doesn't seem to make much practical difference and it's probably not worth the kb.\n\t\t\t\t\tv1 = v2 + (value - v2) / (t - t2) * (t1 - t2);\n\t\t\t\t}\n\t\t\t},\n\t\t\treset = () => { v2 = v1 = useDelta ? 0 : v1; t2 = t1 = 0; },\n\t\t\tgetVelocity = latestValue => {\n\t\t\t\tlet tOld = t2,\n\t\t\t\t\tvOld = v2,\n\t\t\t\t\tt = _getTime();\n\t\t\t\t(latestValue || latestValue === 0) && latestValue !== v1 && update(latestValue);\n\t\t\t\treturn (t1 === t2 || t - t2 > dropToZeroTime) ? 0 : (v1 + (useDelta ? vOld : -vOld)) / ((useDelta ? t : t1) - tOld) * 1000;\n\t\t\t};\n\t\treturn {update, reset, getVelocity};\n\t},\n\t_getEvent = (e, preventDefault) => {\n\t\tpreventDefault && !e._gsapAllow && e.preventDefault();\n\t\treturn e.changedTouches ? e.changedTouches[0] : e;\n\t},\n\t_getAbsoluteMax = a => {\n\t\tlet max = Math.max(...a),\n\t\t\tmin = Math.min(...a);\n\t\treturn Math.abs(max) >= Math.abs(min) ? max : min;\n\t},\n\t_setScrollTrigger = () => {\n\t\tScrollTrigger = gsap.core.globals().ScrollTrigger;\n\t\tScrollTrigger && ScrollTrigger.core && _integrate();\n\t},\n\t_initCore = core => {\n\t\tgsap = core || _getGSAP();\n\t\tif (!_coreInitted && gsap && typeof(document) !== \"undefined\" && document.body) {\n\t\t\t_win = window;\n\t\t\t_doc = document;\n\t\t\t_docEl = _doc.documentElement;\n\t\t\t_body = _doc.body;\n\t\t\t_root = [_win, _doc, _docEl, _body];\n\t\t\t_clamp = gsap.utils.clamp;\n\t\t\t_context = gsap.core.context || function() {};\n\t\t\t_pointerType = \"onpointerenter\" in _body ? \"pointer\" : \"mouse\";\n\t\t\t// isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.\n\t\t\t_isTouch = Observer.isTouch = _win.matchMedia && _win.matchMedia(\"(hover: none), (pointer: coarse)\").matches ? 1 : (\"ontouchstart\" in _win || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) ? 2 : 0;\n\t\t\t_eventTypes = Observer.eventTypes = (\"ontouchstart\" in _docEl ? \"touchstart,touchmove,touchcancel,touchend\" : !(\"onpointerdown\" in _docEl) ? \"mousedown,mousemove,mouseup,mouseup\" : \"pointerdown,pointermove,pointercancel,pointerup\").split(\",\");\n\t\t\tsetTimeout(() => _startup = 0, 500);\n\t\t\t_setScrollTrigger();\n\t\t\t_coreInitted = 1;\n\t\t}\n\t\treturn _coreInitted;\n\t};\n\n_horizontal.op = _vertical;\n_scrollers.cache = 0;\n\nexport class Observer {\n\tconstructor(vars) {\n\t\tthis.init(vars);\n\t}\n\n\tinit(vars) {\n\t\t_coreInitted || _initCore(gsap) || console.warn(\"Please gsap.registerPlugin(Observer)\");\n\t\tScrollTrigger || _setScrollTrigger();\n\t\tlet {tolerance, dragMinimum, type, target, lineHeight, debounce, preventDefault, onStop, onStopDelay, ignore, wheelSpeed, event, onDragStart, onDragEnd, onDrag, onPress, onRelease, onRight, onLeft, onUp, onDown, onChangeX, onChangeY, onChange, onToggleX, onToggleY, onHover, onHoverEnd, onMove, ignoreCheck, isNormalizer, onGestureStart, onGestureEnd, onWheel, onEnable, onDisable, onClick, scrollSpeed, capture, allowClicks, lockAxis, onLockAxis} = vars;\n\t\tthis.target = target = _getTarget(target) || _docEl;\n\t\tthis.vars = vars;\n\t\tignore && (ignore = gsap.utils.toArray(ignore));\n\t\ttolerance = tolerance || 1e-9;\n\t\tdragMinimum = dragMinimum || 0;\n\t\twheelSpeed = wheelSpeed || 1;\n\t\tscrollSpeed = scrollSpeed || 1;\n\t\ttype = type || \"wheel,touch,pointer\";\n\t\tdebounce = debounce !== false;\n\t\tlineHeight || (lineHeight = parseFloat(_win.getComputedStyle(_body).lineHeight) || 22); // note: browser may report \"normal\", so default to 22.\n\t\tlet id, onStopDelayedCall, dragged, moved, wheeled, locked, axis,\n\t\t\tself = this,\n\t\t\tprevDeltaX = 0,\n\t\t\tprevDeltaY = 0,\n\t\t\tpassive = vars.passive || (!preventDefault && vars.passive !== false),\n\t\t\tscrollFuncX = _getScrollFunc(target, _horizontal),\n\t\t\tscrollFuncY = _getScrollFunc(target, _vertical),\n\t\t\tscrollX = scrollFuncX(),\n\t\t\tscrollY = scrollFuncY(),\n\t\t\tlimitToTouch = ~type.indexOf(\"touch\") && !~type.indexOf(\"pointer\") && _eventTypes[0] === \"pointerdown\", // for devices that accommodate mouse events and touch events, we need to distinguish.\n\t\t\tisViewport = _isViewport(target),\n\t\t\townerDoc = target.ownerDocument || _doc,\n\t\t\tdeltaX = [0, 0, 0], // wheel, scroll, pointer/touch\n\t\t\tdeltaY = [0, 0, 0],\n\t\t\tonClickTime = 0,\n\t\t\tclickCapture = () => onClickTime = _getTime(),\n\t\t\t_ignoreCheck = (e, isPointerOrTouch) => (self.event = e) && (ignore && ~ignore.indexOf(e.target)) || (isPointerOrTouch && limitToTouch && e.pointerType !== \"touch\") || (ignoreCheck && ignoreCheck(e, isPointerOrTouch)),\n\t\t\tonStopFunc = () => {\n\t\t\t\tself._vx.reset();\n\t\t\t\tself._vy.reset();\n\t\t\t\tonStopDelayedCall.pause();\n\t\t\t\tonStop && onStop(self);\n\t\t\t},\n\t\t\tupdate = () => {\n\t\t\t\tlet dx = self.deltaX = _getAbsoluteMax(deltaX),\n\t\t\t\t\tdy = self.deltaY = _getAbsoluteMax(deltaY),\n\t\t\t\t\tchangedX = Math.abs(dx) >= tolerance,\n\t\t\t\t\tchangedY = Math.abs(dy) >= tolerance;\n\t\t\t\tonChange && (changedX || changedY) && onChange(self, dx, dy, deltaX, deltaY); // in ScrollTrigger.normalizeScroll(), we need to know if it was touch/pointer so we need access to the deltaX/deltaY Arrays before we clear them out.\n\t\t\t\tif (changedX) {\n\t\t\t\t\tonRight && self.deltaX > 0 && onRight(self);\n\t\t\t\t\tonLeft && self.deltaX < 0 && onLeft(self);\n\t\t\t\t\tonChangeX && onChangeX(self);\n\t\t\t\t\tonToggleX && ((self.deltaX < 0) !== (prevDeltaX < 0)) && onToggleX(self);\n\t\t\t\t\tprevDeltaX = self.deltaX;\n\t\t\t\t\tdeltaX[0] = deltaX[1] = deltaX[2] = 0\n\t\t\t\t}\n\t\t\t\tif (changedY) {\n\t\t\t\t\tonDown && self.deltaY > 0 && onDown(self);\n\t\t\t\t\tonUp && self.deltaY < 0 && onUp(self);\n\t\t\t\t\tonChangeY && onChangeY(self);\n\t\t\t\t\tonToggleY && ((self.deltaY < 0) !== (prevDeltaY < 0)) && onToggleY(self);\n\t\t\t\t\tprevDeltaY = self.deltaY;\n\t\t\t\t\tdeltaY[0] = deltaY[1] = deltaY[2] = 0\n\t\t\t\t}\n\t\t\t\tif (moved || dragged) {\n\t\t\t\t\tonMove && onMove(self);\n\t\t\t\t\tif (dragged) {\n\t\t\t\t\t\tonDragStart && dragged === 1 && onDragStart(self);\n\t\t\t\t\t\tonDrag && onDrag(self);\n\t\t\t\t\t\tdragged = 0;\n\t\t\t\t\t}\n\t\t\t\t\tmoved = false;\n\t\t\t\t}\n\t\t\t\tlocked && !(locked = false) && onLockAxis && onLockAxis(self);\n\t\t\t\tif (wheeled) {\n\t\t\t\t\tonWheel(self);\n\t\t\t\t\twheeled = false;\n\t\t\t\t}\n\t\t\t\tid = 0;\n\t\t\t},\n\t\t\tonDelta = (x, y, index) => {\n\t\t\t\tdeltaX[index] += x;\n\t\t\t\tdeltaY[index] += y;\n\t\t\t\tself._vx.update(x);\n\t\t\t\tself._vy.update(y);\n\t\t\t\tdebounce ? id || (id = requestAnimationFrame(update)) : update();\n\t\t\t},\n\t\t\tonTouchOrPointerDelta = (x, y) => {\n\t\t\t\tif (lockAxis && !axis) {\n\t\t\t\t\tself.axis = axis = Math.abs(x) > Math.abs(y) ? \"x\" : \"y\";\n\t\t\t\t\tlocked = true;\n\t\t\t\t}\n\t\t\t\tif (axis !== \"y\") {\n\t\t\t\t\tdeltaX[2] += x;\n\t\t\t\t\tself._vx.update(x, true); // update the velocity as frequently as possible instead of in the debounced function so that very quick touch-scrolls (flicks) feel natural. If it's the mouse/touch/pointer, force it so that we get snappy/accurate momentum scroll.\n\t\t\t\t}\n\t\t\t\tif (axis !== \"x\") {\n\t\t\t\t\tdeltaY[2] += y;\n\t\t\t\t\tself._vy.update(y, true);\n\t\t\t\t}\n\t\t\t\tdebounce ? id || (id = requestAnimationFrame(update)) : update();\n\t\t\t},\n\t\t\t_onDrag = e => {\n\t\t\t\tif (_ignoreCheck(e, 1)) {return;}\n\t\t\t\te = _getEvent(e, preventDefault);\n\t\t\t\tlet x = e.clientX,\n\t\t\t\t\ty = e.clientY,\n\t\t\t\t\tdx = x - self.x,\n\t\t\t\t\tdy = y - self.y,\n\t\t\t\t\tisDragging = self.isDragging;\n\t\t\t\tself.x = x;\n\t\t\t\tself.y = y;\n\t\t\t\tif (isDragging || ((dx || dy) && (Math.abs(self.startX - x) >= dragMinimum || Math.abs(self.startY - y) >= dragMinimum))) {\n\t\t\t\t\tdragged = isDragging ? 2 : 1; // dragged: 0 = not dragging, 1 = first drag, 2 = normal drag\n\t\t\t\t\tisDragging || (self.isDragging = true);\n\t\t\t\t\tonTouchOrPointerDelta(dx, dy);\n\t\t\t\t}\n\t\t\t},\n\t\t\t_onPress = self.onPress = e => {\n\t\t\t\tif (_ignoreCheck(e, 1) || (e && e.button)) {return;}\n\t\t\t\tself.axis = axis = null;\n\t\t\t\tonStopDelayedCall.pause();\n\t\t\t\tself.isPressed = true;\n\t\t\t\te = _getEvent(e); // note: may need to preventDefault(?) Won't side-scroll on iOS Safari if we do, though.\n\t\t\t\tprevDeltaX = prevDeltaY = 0;\n\t\t\t\tself.startX = self.x = e.clientX;\n\t\t\t\tself.startY = self.y = e.clientY;\n\t\t\t\tself._vx.reset(); // otherwise the t2 may be stale if the user touches and flicks super fast and releases in less than 2 requestAnimationFrame ticks, causing velocity to be 0.\n\t\t\t\tself._vy.reset();\n\t\t\t\t_addListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, passive, true);\n\t\t\t\tself.deltaX = self.deltaY = 0;\n\t\t\t\tonPress && onPress(self);\n\t\t\t},\n\t\t\t_onRelease = self.onRelease = e => {\n\t\t\t\tif (_ignoreCheck(e, 1)) {return;}\n\t\t\t\t_removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true);\n\t\t\t\tlet isTrackingDrag = !isNaN(self.y - self.startY),\n\t\t\t\t\twasDragging = self.isDragging,\n\t\t\t\t\tisDragNotClick = wasDragging && (Math.abs(self.x - self.startX) > 3 || Math.abs(self.y - self.startY) > 3), // some touch devices need some wiggle room in terms of sensing clicks - the finger may move a few pixels.\n\t\t\t\t\teventData = _getEvent(e);\n\t\t\t\tif (!isDragNotClick && isTrackingDrag) {\n\t\t\t\t\tself._vx.reset();\n\t\t\t\t\tself._vy.reset();\n\t\t\t\t\t//if (preventDefault && allowClicks && self.isPressed) { // check isPressed because in a rare edge case, the inputObserver in ScrollTrigger may stopPropagation() on the press/drag, so the onRelease may get fired without the onPress/onDrag ever getting called, thus it could trigger a click to occur on a link after scroll-dragging it.\n\t\t\t\t\tif (preventDefault && allowClicks) {\n\t\t\t\t\t\tgsap.delayedCall(0.08, () => { // some browsers (like Firefox) won't trust script-generated clicks, so if the user tries to click on a video to play it, for example, it simply won't work. Since a regular \"click\" event will most likely be generated anyway (one that has its isTrusted flag set to true), we must slightly delay our script-generated click so that the \"real\"/trusted one is prioritized. Remember, when there are duplicate events in quick succession, we suppress all but the first one. Some browsers don't even trigger the \"real\" one at all, so our synthetic one is a safety valve that ensures that no matter what, a click event does get dispatched.\n\t\t\t\t\t\t\tif (_getTime() - onClickTime > 300 && !e.defaultPrevented) {\n\t\t\t\t\t\t\t\tif (e.target.click) { //some browsers (like mobile Safari) don't properly trigger the click event\n\t\t\t\t\t\t\t\t\te.target.click();\n\t\t\t\t\t\t\t\t} else if (ownerDoc.createEvent) {\n\t\t\t\t\t\t\t\t\tlet syntheticEvent = ownerDoc.createEvent(\"MouseEvents\");\n\t\t\t\t\t\t\t\t\tsyntheticEvent.initMouseEvent(\"click\", true, true, _win, 1, eventData.screenX, eventData.screenY, eventData.clientX, eventData.clientY, false, false, false, false, 0, null);\n\t\t\t\t\t\t\t\t\te.target.dispatchEvent(syntheticEvent);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tself.isDragging = self.isGesturing = self.isPressed = false;\n\t\t\t\tonStop && wasDragging && !isNormalizer && onStopDelayedCall.restart(true);\n\t\t\t\tdragged && update(); // in case debouncing, we don't want onDrag to fire AFTER onDragEnd().\n\t\t\t\tonDragEnd && wasDragging && onDragEnd(self);\n\t\t\t\tonRelease && onRelease(self, isDragNotClick);\n\t\t\t},\n\t\t\t_onGestureStart = e => e.touches && e.touches.length > 1 && (self.isGesturing = true) && onGestureStart(e, self.isDragging),\n\t\t\t_onGestureEnd = () => (self.isGesturing = false) || onGestureEnd(self),\n\t\t\tonScroll = e => {\n\t\t\t\tif (_ignoreCheck(e)) {return;}\n\t\t\t\tlet x = scrollFuncX(),\n\t\t\t\t\ty = scrollFuncY();\n\t\t\t\tonDelta((x - scrollX) * scrollSpeed, (y - scrollY) * scrollSpeed, 1);\n\t\t\t\tscrollX = x;\n\t\t\t\tscrollY = y;\n\t\t\t\tonStop && onStopDelayedCall.restart(true);\n\t\t\t},\n\t\t\t_onWheel = e => {\n\t\t\t\tif (_ignoreCheck(e)) {return;}\n\t\t\t\te = _getEvent(e, preventDefault);\n\t\t\t\tonWheel && (wheeled = true);\n\t\t\t\tlet multiplier = (e.deltaMode === 1 ? lineHeight : e.deltaMode === 2 ? _win.innerHeight : 1) * wheelSpeed;\n\t\t\t\tonDelta(e.deltaX * multiplier, e.deltaY * multiplier, 0);\n\t\t\t\tonStop && !isNormalizer && onStopDelayedCall.restart(true);\n\t\t\t},\n\t\t\t_onMove = e => {\n\t\t\t\tif (_ignoreCheck(e)) {return;}\n\t\t\t\tlet x = e.clientX,\n\t\t\t\t\ty = e.clientY,\n\t\t\t\t\tdx = x - self.x,\n\t\t\t\t\tdy = y - self.y;\n\t\t\t\tself.x = x;\n\t\t\t\tself.y = y;\n\t\t\t\tmoved = true;\n\t\t\t\tonStop && onStopDelayedCall.restart(true);\n\t\t\t\t(dx || dy) && onTouchOrPointerDelta(dx, dy);\n\t\t\t},\n\t\t\t_onHover = e => {self.event = e; onHover(self);},\n\t\t\t_onHoverEnd = e => {self.event = e; onHoverEnd(self);},\n\t\t\t_onClick = e => _ignoreCheck(e) || (_getEvent(e, preventDefault) && onClick(self));\n\n\t\tonStopDelayedCall = self._dc = gsap.delayedCall(onStopDelay || 0.25, onStopFunc).pause();\n\n\t\tself.deltaX = self.deltaY = 0;\n\t\tself._vx = _getVelocityProp(0, 50, true);\n\t\tself._vy = _getVelocityProp(0, 50, true);\n\t\tself.scrollX = scrollFuncX;\n\t\tself.scrollY = scrollFuncY;\n\t\tself.isDragging = self.isGesturing = self.isPressed = false;\n\t\t_context(this);\n\t\tself.enable = e => {\n\t\t\tif (!self.isEnabled) {\n\t\t\t\t_addListener(isViewport ? ownerDoc : target, \"scroll\", _onScroll);\n\t\t\t\ttype.indexOf(\"scroll\") >= 0 && _addListener(isViewport ? ownerDoc : target, \"scroll\", onScroll, passive, capture);\n\t\t\t\ttype.indexOf(\"wheel\") >= 0 && _addListener(target, \"wheel\", _onWheel, passive, capture);\n\t\t\t\tif ((type.indexOf(\"touch\") >= 0 && _isTouch) || type.indexOf(\"pointer\") >= 0) {\n\t\t\t\t\t_addListener(target, _eventTypes[0], _onPress, passive, capture);\n\t\t\t\t\t_addListener(ownerDoc, _eventTypes[2], _onRelease);\n\t\t\t\t\t_addListener(ownerDoc, _eventTypes[3], _onRelease);\n\t\t\t\t\tallowClicks && _addListener(target, \"click\", clickCapture, true, true);\n\t\t\t\t\tonClick && _addListener(target, \"click\", _onClick);\n\t\t\t\t\tonGestureStart && _addListener(ownerDoc, \"gesturestart\", _onGestureStart);\n\t\t\t\t\tonGestureEnd && _addListener(ownerDoc, \"gestureend\", _onGestureEnd);\n\t\t\t\t\tonHover && _addListener(target, _pointerType + \"enter\", _onHover);\n\t\t\t\t\tonHoverEnd && _addListener(target, _pointerType + \"leave\", _onHoverEnd);\n\t\t\t\t\tonMove && _addListener(target, _pointerType + \"move\", _onMove);\n\t\t\t\t}\n\t\t\t\tself.isEnabled = true;\n\t\t\t\tself.isDragging = self.isGesturing = self.isPressed = moved = dragged = false;\n\t\t\t\tself._vx.reset();\n\t\t\t\tself._vy.reset();\n\t\t\t\tscrollX = scrollFuncX();\n\t\t\t\tscrollY = scrollFuncY();\n\t\t\t\te && e.type && _onPress(e);\n\t\t\t\tonEnable && onEnable(self);\n\t\t\t}\n\t\t\treturn self;\n\t\t};\n\t\tself.disable = () => {\n\t\t\tif (self.isEnabled) {\n\t\t\t\t// only remove the _onScroll listener if there aren't any others that rely on the functionality.\n\t\t\t\t_observers.filter(o => o !== self && _isViewport(o.target)).length || _removeListener(isViewport ? ownerDoc : target, \"scroll\", _onScroll);\n\t\t\t\tif (self.isPressed) {\n\t\t\t\t\tself._vx.reset();\n\t\t\t\t\tself._vy.reset();\n\t\t\t\t\t_removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true);\n\t\t\t\t}\n\t\t\t\t_removeListener(isViewport ? ownerDoc : target, \"scroll\", onScroll, capture);\n\t\t\t\t_removeListener(target, \"wheel\", _onWheel, capture);\n\t\t\t\t_removeListener(target, _eventTypes[0], _onPress, capture);\n\t\t\t\t_removeListener(ownerDoc, _eventTypes[2], _onRelease);\n\t\t\t\t_removeListener(ownerDoc, _eventTypes[3], _onRelease);\n\t\t\t\t_removeListener(target, \"click\", clickCapture, true);\n\t\t\t\t_removeListener(target, \"click\", _onClick);\n\t\t\t\t_removeListener(ownerDoc, \"gesturestart\", _onGestureStart);\n\t\t\t\t_removeListener(ownerDoc, \"gestureend\", _onGestureEnd);\n\t\t\t\t_removeListener(target, _pointerType + \"enter\", _onHover);\n\t\t\t\t_removeListener(target, _pointerType + \"leave\", _onHoverEnd);\n\t\t\t\t_removeListener(target, _pointerType + \"move\", _onMove);\n\t\t\t\tself.isEnabled = self.isPressed = self.isDragging = false;\n\t\t\t\tonDisable && onDisable(self);\n\t\t\t}\n\t\t};\n\n\t\tself.kill = self.revert = () => {\n\t\t\tself.disable();\n\t\t\tlet i = _observers.indexOf(self);\n\t\t\ti >= 0 && _observers.splice(i, 1);\n\t\t\t_normalizer === self && (_normalizer = 0);\n\t\t}\n\n\t\t_observers.push(self);\n\t\tisNormalizer && _isViewport(target) && (_normalizer = self);\n\n\t\tself.enable(event);\n\t}\n\n\tget velocityX() {\n\t\treturn this._vx.getVelocity();\n\t}\n\tget velocityY() {\n\t\treturn this._vy.getVelocity();\n\t}\n\n}\n\nObserver.version = \"3.12.7\";\nObserver.create = vars => new Observer(vars);\nObserver.register = _initCore;\nObserver.getAll = () => _observers.slice();\nObserver.getById = id => _observers.filter(o => o.vars.id === id)[0];\n\n_getGSAP() && gsap.registerPlugin(Observer);\n\nexport { Observer as default, _isViewport, _scrollers, _getScrollFunc, _getProxyProp, _proxies, _getVelocityProp, _vertical, _horizontal, _getTarget };","/*!\n * ScrollTrigger 3.12.7\n * https://gsap.com\n *\n * @license Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\n\nimport { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from \"./Observer.js\";\n\nlet gsap, _coreInitted, _win, _doc, _docEl, _body, _root, _resizeDelay, _toArray, _clamp, _time2, _syncInterval, _refreshing, _pointerIsDown, _transformProp, _i, _prevWidth, _prevHeight, _autoRefresh, _sort, _suppressOverwrites, _ignoreResize, _normalizer, _ignoreMobileResize, _baseScreenHeight, _baseScreenWidth, _fixIOSBug, _context, _scrollRestoration, _div100vh, _100vh, _isReverted, _clampingMax,\n\t_limitCallbacks, // if true, we'll only trigger callbacks if the active state toggles, so if you scroll immediately past both the start and end positions of a ScrollTrigger (thus inactive to inactive), neither its onEnter nor onLeave will be called. This is useful during startup.\n\t_startup = 1,\n\t_getTime = Date.now,\n\t_time1 = _getTime(),\n\t_lastScrollTime = 0,\n\t_enabled = 0,\n\t_parseClamp = (value, type, self) => {\n\t\tlet clamp = (_isString(value) && (value.substr(0, 6) === \"clamp(\" || value.indexOf(\"max\") > -1));\n\t\tself[\"_\" + type + \"Clamp\"] = clamp;\n\t\treturn clamp ? value.substr(6, value.length - 7) : value;\n\t},\n\t_keepClamp = (value, clamp) => clamp && (!_isString(value) || value.substr(0, 6) !== \"clamp(\") ? \"clamp(\" + value + \")\" : value,\n\t_rafBugFix = () => _enabled && requestAnimationFrame(_rafBugFix), // in some browsers (like Firefox), screen repaints weren't consistent unless we had SOMETHING queued up in requestAnimationFrame()! So this just creates a super simple loop to keep it alive and smooth out repaints.\n\t_pointerDownHandler = () => _pointerIsDown = 1,\n\t_pointerUpHandler = () => _pointerIsDown = 0,\n\t_passThrough = v => v,\n\t_round = value => Math.round(value * 100000) / 100000 || 0,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap),\n\t_isViewport = e => !!~_root.indexOf(e),\n\t_getViewportDimension = dimensionProperty => (dimensionProperty === \"Height\" ? _100vh : _win[\"inner\" + dimensionProperty]) || _docEl[\"client\" + dimensionProperty] || _body[\"client\" + dimensionProperty],\n\t_getBoundsFunc = element => _getProxyProp(element, \"getBoundingClientRect\") || (_isViewport(element) ? () => {_winOffsets.width = _win.innerWidth; _winOffsets.height = _100vh; return _winOffsets;} : () => _getBounds(element)),\n\t_getSizeFunc = (scroller, isViewport, {d, d2, a}) => (a = _getProxyProp(scroller, \"getBoundingClientRect\")) ? () => a()[d] : () => (isViewport ? _getViewportDimension(d2) : scroller[\"client\" + d2]) || 0,\n\t_getOffsetsFunc = (element, isViewport) => !isViewport || ~_proxies.indexOf(element) ? _getBoundsFunc(element) : () => _winOffsets,\n\t_maxScroll = (element, {s, d2, d, a}) => Math.max(0, (s = \"scroll\" + d2) && (a = _getProxyProp(element, s)) ? a() - _getBoundsFunc(element)()[d] : _isViewport(element) ? (_docEl[s] || _body[s]) - _getViewportDimension(d2) : element[s] - element[\"offset\" + d2]),\n\t_iterateAutoRefresh = (func, events) => {\n\t\tfor (let i = 0; i < _autoRefresh.length; i += 3) {\n\t\t\t(!events || ~events.indexOf(_autoRefresh[i+1])) && func(_autoRefresh[i], _autoRefresh[i+1], _autoRefresh[i+2]);\n\t\t}\n\t},\n\t_isString = value => typeof(value) === \"string\",\n\t_isFunction = value => typeof(value) === \"function\",\n\t_isNumber = value => typeof(value) === \"number\",\n\t_isObject = value => typeof(value) === \"object\",\n\t_endAnimation = (animation, reversed, pause) => animation && animation.progress(reversed ? 0 : 1) && pause && animation.pause(),\n\t_callback = (self, func) => {\n\t\tif (self.enabled) {\n\t\t\tlet result = self._ctx ? self._ctx.add(() => func(self)) : func(self);\n\t\t\tresult && result.totalTime && (self.callbackAnimation = result);\n\t\t}\n\t},\n\t_abs = Math.abs,\n\t_left = \"left\",\n\t_top = \"top\",\n\t_right = \"right\",\n\t_bottom = \"bottom\",\n\t_width = \"width\",\n\t_height = \"height\",\n\t_Right = \"Right\",\n\t_Left = \"Left\",\n\t_Top = \"Top\",\n\t_Bottom = \"Bottom\",\n\t_padding = \"padding\",\n\t_margin = \"margin\",\n\t_Width = \"Width\",\n\t_Height = \"Height\",\n\t_px = \"px\",\n\t_getComputedStyle = element => _win.getComputedStyle(element),\n\t_makePositionable = element => { // if the element already has position: absolute or fixed, leave that, otherwise make it position: relative\n\t\tlet position = _getComputedStyle(element).position;\n\t\telement.style.position = (position === \"absolute\" || position === \"fixed\") ? position : \"relative\";\n\t},\n\t_setDefaults = (obj, defaults) => {\n\t\tfor (let p in defaults) {\n\t\t\t(p in obj) || (obj[p] = defaults[p]);\n\t\t}\n\t\treturn obj;\n\t},\n\t_getBounds = (element, withoutTransforms) => {\n\t\tlet tween = withoutTransforms && _getComputedStyle(element)[_transformProp] !== \"matrix(1, 0, 0, 1, 0, 0)\" && gsap.to(element, {x: 0, y: 0, xPercent: 0, yPercent: 0, rotation: 0, rotationX: 0, rotationY: 0, scale: 1, skewX: 0, skewY: 0}).progress(1),\n\t\t\tbounds = element.getBoundingClientRect();\n\t\ttween && tween.progress(0).kill();\n\t\treturn bounds;\n\t},\n\t_getSize = (element, {d2}) => element[\"offset\" + d2] || element[\"client\" + d2] || 0,\n\t_getLabelRatioArray = timeline => {\n\t\tlet a = [],\n\t\t\tlabels = timeline.labels,\n\t\t\tduration = timeline.duration(),\n\t\t\tp;\n\t\tfor (p in labels) {\n\t\t\ta.push(labels[p] / duration);\n\t\t}\n\t\treturn a;\n\t},\n\t_getClosestLabel = animation => value => gsap.utils.snap(_getLabelRatioArray(animation), value),\n\t_snapDirectional = snapIncrementOrArray => {\n\t\tlet snap = gsap.utils.snap(snapIncrementOrArray),\n\t\t\ta = Array.isArray(snapIncrementOrArray) && snapIncrementOrArray.slice(0).sort((a, b) => a - b);\n\t\treturn a ? (value, direction, threshold= 1e-3) => {\n\t\t\tlet i;\n\t\t\tif (!direction) {\n\t\t\t\treturn snap(value);\n\t\t\t}\n\t\t\tif (direction > 0) {\n\t\t\t\tvalue -= threshold; // to avoid rounding errors. If we're too strict, it might snap forward, then immediately again, and again.\n\t\t\t\tfor (i = 0; i < a.length; i++) {\n\t\t\t\t\tif (a[i] >= value) {\n\t\t\t\t\t\treturn a[i];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn a[i-1];\n\t\t\t} else {\n\t\t\t\ti = a.length;\n\t\t\t\tvalue += threshold;\n\t\t\t\twhile (i--) {\n\t\t\t\t\tif (a[i] <= value) {\n\t\t\t\t\t\treturn a[i];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn a[0];\n\t\t} : (value, direction, threshold= 1e-3) => {\n\t\t\tlet snapped = snap(value);\n\t\t\treturn !direction || Math.abs(snapped - value) < threshold || ((snapped - value < 0) === direction < 0) ? snapped : snap(direction < 0 ? value - snapIncrementOrArray : value + snapIncrementOrArray);\n\t\t};\n\t},\n\t_getLabelAtDirection = timeline => (value, st) => _snapDirectional(_getLabelRatioArray(timeline))(value, st.direction),\n\t_multiListener = (func, element, types, callback) => types.split(\",\").forEach(type => func(element, type, callback)),\n\t_addListener = (element, type, func, nonPassive, capture) => element.addEventListener(type, func, {passive: !nonPassive, capture: !!capture}),\n\t_removeListener = (element, type, func, capture) => element.removeEventListener(type, func, !!capture),\n\t_wheelListener = (func, el, scrollFunc) => {\n\t\tscrollFunc = scrollFunc && scrollFunc.wheelHandler\n\t\tif (scrollFunc) {\n\t\t\tfunc(el, \"wheel\", scrollFunc);\n\t\t\tfunc(el, \"touchmove\", scrollFunc);\n\t\t}\n\t},\n\t_markerDefaults = {startColor: \"green\", endColor: \"red\", indent: 0, fontSize: \"16px\", fontWeight:\"normal\"},\n\t_defaults = {toggleActions: \"play\", anticipatePin: 0},\n\t_keywords = {top: 0, left: 0, center: 0.5, bottom: 1, right: 1},\n\t_offsetToPx = (value, size) => {\n\t\tif (_isString(value)) {\n\t\t\tlet eqIndex = value.indexOf(\"=\"),\n\t\t\t\trelative = ~eqIndex ? +(value.charAt(eqIndex-1) + 1) * parseFloat(value.substr(eqIndex + 1)) : 0;\n\t\t\tif (~eqIndex) {\n\t\t\t\t(value.indexOf(\"%\") > eqIndex) && (relative *= size / 100);\n\t\t\t\tvalue = value.substr(0, eqIndex-1);\n\t\t\t}\n\t\t\tvalue = relative + ((value in _keywords) ? _keywords[value] * size : ~value.indexOf(\"%\") ? parseFloat(value) * size / 100 : parseFloat(value) || 0);\n\t\t}\n\t\treturn value;\n\t},\n\t_createMarker = (type, name, container, direction, {startColor, endColor, fontSize, indent, fontWeight}, offset, matchWidthEl, containerAnimation) => {\n\t\tlet e = _doc.createElement(\"div\"),\n\t\t\tuseFixedPosition = _isViewport(container) || _getProxyProp(container, \"pinType\") === \"fixed\",\n\t\t\tisScroller = type.indexOf(\"scroller\") !== -1,\n\t\t\tparent = useFixedPosition ? _body : container,\n\t\t\tisStart = type.indexOf(\"start\") !== -1,\n\t\t\tcolor = isStart ? startColor : endColor,\n\t\t\tcss = \"border-color:\" + color + \";font-size:\" + fontSize + \";color:\" + color + \";font-weight:\" + fontWeight + \";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;\";\n\t\tcss += \"position:\" + ((isScroller || containerAnimation) && useFixedPosition ? \"fixed;\" : \"absolute;\");\n\t\t(isScroller || containerAnimation || !useFixedPosition) && (css += (direction === _vertical ? _right : _bottom) + \":\" + (offset + parseFloat(indent)) + \"px;\");\n\t\tmatchWidthEl && (css += \"box-sizing:border-box;text-align:left;width:\" + matchWidthEl.offsetWidth + \"px;\");\n\t\te._isStart = isStart;\n\t\te.setAttribute(\"class\", \"gsap-marker-\" + type + (name ? \" marker-\" + name : \"\"));\n\t\te.style.cssText = css;\n\t\te.innerText = name || name === 0 ? type + \"-\" + name : type;\n\t\tparent.children[0] ? parent.insertBefore(e, parent.children[0]) : parent.appendChild(e);\n\t\te._offset = e[\"offset\" + direction.op.d2];\n\t\t_positionMarker(e, 0, direction, isStart);\n\t\treturn e;\n\t},\n\t_positionMarker = (marker, start, direction, flipped) => {\n\t\tlet vars = {display: \"block\"},\n\t\t\tside = direction[flipped ? \"os2\" : \"p2\"],\n\t\t\toppositeSide = direction[flipped ? \"p2\" : \"os2\"];\n\t\tmarker._isFlipped = flipped;\n\t\tvars[direction.a + \"Percent\"] = flipped ? -100 : 0;\n\t\tvars[direction.a] = flipped ? \"1px\" : 0;\n\t\tvars[\"border\" + side + _Width] = 1;\n\t\tvars[\"border\" + oppositeSide + _Width] = 0;\n\t\tvars[direction.p] = start + \"px\";\n\t\tgsap.set(marker, vars);\n\t},\n\t_triggers = [],\n\t_ids = {},\n\t_rafID,\n\t_sync = () => _getTime() - _lastScrollTime > 34 && (_rafID || (_rafID = requestAnimationFrame(_updateAll))),\n\t_onScroll = () => { // previously, we tried to optimize performance by batching/deferring to the next requestAnimationFrame(), but discovered that Safari has a few bugs that make this unworkable (especially on iOS). See https://codepen.io/GreenSock/pen/16c435b12ef09c38125204818e7b45fc?editors=0010 and https://codepen.io/GreenSock/pen/JjOxYpQ/3dd65ccec5a60f1d862c355d84d14562?editors=0010 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503?editors=0010\n\t\tif (!_normalizer || !_normalizer.isPressed || _normalizer.startX > _body.clientWidth) { // if the user is dragging the scrollbar, allow it.\n\t\t\t_scrollers.cache++;\n\t\t\tif (_normalizer) {\n\t\t\t\t_rafID || (_rafID = requestAnimationFrame(_updateAll));\n\t\t\t} else {\n\t\t\t\t_updateAll(); // Safari in particular (on desktop) NEEDS the immediate update rather than waiting for a requestAnimationFrame() whereas iOS seems to benefit from waiting for the requestAnimationFrame() tick, at least when normalizing. See https://codepen.io/GreenSock/pen/qBYozqO?editors=0110\n\t\t\t}\n\t\t\t_lastScrollTime || _dispatch(\"scrollStart\");\n\t\t\t_lastScrollTime = _getTime();\n\t\t}\n\t},\n\t_setBaseDimensions = () => {\n\t\t_baseScreenWidth = _win.innerWidth;\n\t\t_baseScreenHeight = _win.innerHeight;\n\t},\n\t_onResize = (force) => {\n\t\t_scrollers.cache++;\n\t\t(force === true || (!_refreshing && !_ignoreResize && !_doc.fullscreenElement && !_doc.webkitFullscreenElement && (!_ignoreMobileResize || _baseScreenWidth !== _win.innerWidth || Math.abs(_win.innerHeight - _baseScreenHeight) > _win.innerHeight * 0.25))) && _resizeDelay.restart(true);\n\t}, // ignore resizes triggered by refresh()\n\t_listeners = {},\n\t_emptyArray = [],\n\t_softRefresh = () => _removeListener(ScrollTrigger, \"scrollEnd\", _softRefresh) || _refreshAll(true),\n\t_dispatch = type => (_listeners[type] && _listeners[type].map(f => f())) || _emptyArray,\n\t_savedStyles = [], // when ScrollTrigger.saveStyles() is called, the inline styles are recorded in this Array in a sequential format like [element, cssText, gsCache, media]. This keeps it very memory-efficient and fast to iterate through.\n\t_revertRecorded = media => {\n\t\tfor (let i = 0; i < _savedStyles.length; i+=5) {\n\t\t\tif (!media || _savedStyles[i+4] && _savedStyles[i+4].query === media) {\n\t\t\t\t_savedStyles[i].style.cssText = _savedStyles[i+1];\n\t\t\t\t_savedStyles[i].getBBox && _savedStyles[i].setAttribute(\"transform\", _savedStyles[i+2] || \"\");\n\t\t\t\t_savedStyles[i+3].uncache = 1;\n\t\t\t}\n\t\t}\n\t},\n\t_revertAll = (kill, media) => {\n\t\tlet trigger;\n\t\tfor (_i = 0; _i < _triggers.length; _i++) {\n\t\t\ttrigger = _triggers[_i];\n\t\t\tif (trigger && (!media || trigger._ctx === media)) {\n\t\t\t\tif (kill) {\n\t\t\t\t\ttrigger.kill(1);\n\t\t\t\t} else {\n\t\t\t\t\ttrigger.revert(true, true);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t_isReverted = true;\n\t\tmedia && _revertRecorded(media);\n\t\tmedia || _dispatch(\"revert\");\n\t},\n\t_clearScrollMemory = (scrollRestoration, force) => { // zero-out all the recorded scroll positions. Don't use _triggers because if, for example, .matchMedia() is used to create some ScrollTriggers and then the user resizes and it removes ALL ScrollTriggers, and then go back to a size where there are ScrollTriggers, it would have kept the position(s) saved from the initial state.\n\t\t_scrollers.cache++;\n\t\t(force || !_refreshingAll) && _scrollers.forEach(obj => _isFunction(obj) && obj.cacheID++ && (obj.rec = 0));\n\t\t_isString(scrollRestoration) && (_win.history.scrollRestoration = _scrollRestoration = scrollRestoration);\n\t},\n\t_refreshingAll,\n\t_refreshID = 0,\n\t_queueRefreshID,\n\t_queueRefreshAll = () => { // we don't want to call _refreshAll() every time we create a new ScrollTrigger (for performance reasons) - it's better to batch them. Some frameworks dynamically load content and we can't rely on the window's \"load\" or \"DOMContentLoaded\" events to trigger it.\n\t\tif (_queueRefreshID !== _refreshID) {\n\t\t\tlet id = _queueRefreshID = _refreshID;\n\t\t\trequestAnimationFrame(() => id === _refreshID && _refreshAll(true));\n\t\t}\n\t},\n\t_refresh100vh = () => {\n\t\t_body.appendChild(_div100vh);\n\t\t_100vh = (!_normalizer && _div100vh.offsetHeight) || _win.innerHeight;\n\t\t_body.removeChild(_div100vh);\n\t},\n\t_hideAllMarkers = hide => _toArray(\".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end\").forEach(el => el.style.display = hide ? \"none\" : \"block\"),\n\t_refreshAll = (force, skipRevert) => {\n\t\t_docEl = _doc.documentElement; // some frameworks like Astro may cache the and replace it during routing, so we'll just re-record the _docEl and _body for safety (otherwise, the markers may not get added properly).\n\t\t_body = _doc.body;\n\t\t_root = [_win, _doc, _docEl, _body];\n\t\tif (_lastScrollTime && !force && !_isReverted) {\n\t\t\t_addListener(ScrollTrigger, \"scrollEnd\", _softRefresh);\n\t\t\treturn;\n\t\t}\n\t\t_refresh100vh();\n\t\t_refreshingAll = ScrollTrigger.isRefreshing = true;\n\t\t_scrollers.forEach(obj => _isFunction(obj) && ++obj.cacheID && (obj.rec = obj())); // force the clearing of the cache because some browsers take a little while to dispatch the \"scroll\" event and the user may have changed the scroll position and then called ScrollTrigger.refresh() right away\n\t\tlet refreshInits = _dispatch(\"refreshInit\");\n\t\t_sort && ScrollTrigger.sort();\n\t\tskipRevert || _revertAll();\n\t\t_scrollers.forEach(obj => {\n\t\t\tif (_isFunction(obj)) {\n\t\t\t\tobj.smooth && (obj.target.style.scrollBehavior = \"auto\"); // smooth scrolling interferes\n\t\t\t\tobj(0);\n\t\t\t}\n\t\t});\n\t\t_triggers.slice(0).forEach(t => t.refresh()) // don't loop with _i because during a refresh() someone could call ScrollTrigger.update() which would iterate through _i resulting in a skip.\n\t\t_isReverted = false;\n\t\t_triggers.forEach((t) => { // nested pins (pinnedContainer) with pinSpacing may expand the container, so we must accommodate that here.\n\t\t\tif (t._subPinOffset && t.pin) {\n\t\t\t\tlet prop = t.vars.horizontal ? \"offsetWidth\" : \"offsetHeight\",\n\t\t\t\t\toriginal = t.pin[prop];\n\t\t\t\tt.revert(true, 1);\n\t\t\t\tt.adjustPinSpacing(t.pin[prop] - original);\n\t\t\t\tt.refresh();\n\t\t\t}\n\t\t});\n\t\t_clampingMax = 1; // pinSpacing might be propping a page open, thus when we .setPositions() to clamp a ScrollTrigger's end we should leave the pinSpacing alone. That's what this flag is for.\n\t\t_hideAllMarkers(true);\n\t\t_triggers.forEach(t => { // the scroller's max scroll position may change after all the ScrollTriggers refreshed (like pinning could push it down), so we need to loop back and correct any with end: \"max\". Same for anything with a clamped end\n\t\t\tlet max = _maxScroll(t.scroller, t._dir),\n\t\t\t\tendClamp = t.vars.end === \"max\" || (t._endClamp && t.end > max),\n\t\t\t\tstartClamp = t._startClamp && t.start >= max;\n\t\t\t(endClamp || startClamp) && t.setPositions(startClamp ? max - 1 : t.start, endClamp ? Math.max(startClamp ? max : t.start + 1, max) : t.end, true);\n\t\t});\n\t\t_hideAllMarkers(false);\n\t\t_clampingMax = 0;\n\t\trefreshInits.forEach(result => result && result.render && result.render(-1)); // if the onRefreshInit() returns an animation (typically a gsap.set()), revert it. This makes it easy to put things in a certain spot before refreshing for measurement purposes, and then put things back.\n\t\t_scrollers.forEach(obj => {\n\t\t\tif (_isFunction(obj)) {\n\t\t\t\tobj.smooth && requestAnimationFrame(() => obj.target.style.scrollBehavior = \"smooth\");\n\t\t\t\tobj.rec && obj(obj.rec);\n\t\t\t}\n\t\t});\n\t\t_clearScrollMemory(_scrollRestoration, 1);\n\t\t_resizeDelay.pause();\n\t\t_refreshID++;\n\t\t_refreshingAll = 2;\n\t\t_updateAll(2);\n\t\t_triggers.forEach(t => _isFunction(t.vars.onRefresh) && t.vars.onRefresh(t));\n\t\t_refreshingAll = ScrollTrigger.isRefreshing = false;\n\t\t_dispatch(\"refresh\");\n\t},\n\t_lastScroll = 0,\n\t_direction = 1,\n\t_primary,\n\t_updateAll = (force) => {\n\t\tif (force === 2 || (!_refreshingAll && !_isReverted)) { // _isReverted could be true if, for example, a matchMedia() is in the process of executing. We don't want to update during the time everything is reverted.\n\t\t\tScrollTrigger.isUpdating = true;\n\t\t\t_primary && _primary.update(0); // ScrollSmoother uses refreshPriority -9999 to become the primary that gets updated before all others because it affects the scroll position.\n\t\t\tlet l = _triggers.length,\n\t\t\t\ttime = _getTime(),\n\t\t\t\trecordVelocity = time - _time1 >= 50,\n\t\t\t\tscroll = l && _triggers[0].scroll();\n\t\t\t_direction = _lastScroll > scroll ? -1 : 1;\n\t\t\t_refreshingAll || (_lastScroll = scroll);\n\t\t\tif (recordVelocity) {\n\t\t\t\tif (_lastScrollTime && !_pointerIsDown && time - _lastScrollTime > 200) {\n\t\t\t\t\t_lastScrollTime = 0;\n\t\t\t\t\t_dispatch(\"scrollEnd\");\n\t\t\t\t}\n\t\t\t\t_time2 = _time1;\n\t\t\t\t_time1 = time;\n\t\t\t}\n\t\t\tif (_direction < 0) {\n\t\t\t\t_i = l;\n\t\t\t\twhile (_i-- > 0) {\n\t\t\t\t\t_triggers[_i] && _triggers[_i].update(0, recordVelocity);\n\t\t\t\t}\n\t\t\t\t_direction = 1;\n\t\t\t} else {\n\t\t\t\tfor (_i = 0; _i < l; _i++) {\n\t\t\t\t\t_triggers[_i] && _triggers[_i].update(0, recordVelocity);\n\t\t\t\t}\n\t\t\t}\n\t\t\tScrollTrigger.isUpdating = false;\n\t\t}\n\t\t_rafID = 0;\n\t},\n\t_propNamesToCopy = [_left, _top, _bottom, _right, _margin + _Bottom, _margin + _Right, _margin + _Top, _margin + _Left, \"display\", \"flexShrink\", \"float\", \"zIndex\", \"gridColumnStart\", \"gridColumnEnd\", \"gridRowStart\", \"gridRowEnd\", \"gridArea\", \"justifySelf\", \"alignSelf\", \"placeSelf\", \"order\"],\n\t_stateProps = _propNamesToCopy.concat([_width, _height, \"boxSizing\", \"max\" + _Width, \"max\" + _Height, \"position\", _margin, _padding, _padding + _Top, _padding + _Right, _padding + _Bottom, _padding + _Left]),\n\t_swapPinOut = (pin, spacer, state) => {\n\t\t_setState(state);\n\t\tlet cache = pin._gsap;\n\t\tif (cache.spacerIsNative) {\n\t\t\t_setState(cache.spacerState);\n\t\t} else if (pin._gsap.swappedIn) {\n\t\t\tlet parent = spacer.parentNode;\n\t\t\tif (parent) {\n\t\t\t\tparent.insertBefore(pin, spacer);\n\t\t\t\tparent.removeChild(spacer);\n\t\t\t}\n\t\t}\n\t\tpin._gsap.swappedIn = false;\n\t},\n\t_swapPinIn = (pin, spacer, cs, spacerState) => {\n\t\tif (!pin._gsap.swappedIn) {\n\t\t\tlet i = _propNamesToCopy.length,\n\t\t\t\tspacerStyle = spacer.style,\n\t\t\t\tpinStyle = pin.style,\n\t\t\t\tp;\n\t\t\twhile (i--) {\n\t\t\t\tp = _propNamesToCopy[i];\n\t\t\t\tspacerStyle[p] = cs[p];\n\t\t\t}\n\t\t\tspacerStyle.position = cs.position === \"absolute\" ? \"absolute\" : \"relative\";\n\t\t\t(cs.display === \"inline\") && (spacerStyle.display = \"inline-block\");\n\t\t\tpinStyle[_bottom] = pinStyle[_right] = \"auto\";\n\t\t\tspacerStyle.flexBasis = cs.flexBasis || \"auto\";\n\t\t\tspacerStyle.overflow = \"visible\";\n\t\t\tspacerStyle.boxSizing = \"border-box\";\n\t\t\tspacerStyle[_width] = _getSize(pin, _horizontal) + _px;\n\t\t\tspacerStyle[_height] = _getSize(pin, _vertical) + _px;\n\t\t\tspacerStyle[_padding] = pinStyle[_margin] = pinStyle[_top] = pinStyle[_left] = \"0\";\n\t\t\t_setState(spacerState);\n\t\t\tpinStyle[_width] = pinStyle[\"max\" + _Width] = cs[_width];\n\t\t\tpinStyle[_height] = pinStyle[\"max\" + _Height] = cs[_height];\n\t\t\tpinStyle[_padding] = cs[_padding];\n\t\t\tif (pin.parentNode !== spacer) {\n\t\t\t\tpin.parentNode.insertBefore(spacer, pin);\n\t\t\t\tspacer.appendChild(pin);\n\t\t\t}\n\t\t\tpin._gsap.swappedIn = true;\n\t\t}\n\t},\n\t_capsExp = /([A-Z])/g,\n\t_setState = state => {\n\t\tif (state) {\n\t\t\tlet style = state.t.style,\n\t\t\t\tl = state.length,\n\t\t\t\ti = 0,\n\t\t\t\tp, value;\n\t\t\t(state.t._gsap || gsap.core.getCache(state.t)).uncache = 1; // otherwise transforms may be off\n\t\t\tfor (; i < l; i +=2) {\n\t\t\t\tvalue = state[i+1];\n\t\t\t\tp = state[i];\n\t\t\t\tif (value) {\n\t\t\t\t\tstyle[p] = value;\n\t\t\t\t} else if (style[p]) {\n\t\t\t\t\tstyle.removeProperty(p.replace(_capsExp, \"-$1\").toLowerCase());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\t_getState = element => { // returns an Array with alternating values like [property, value, property, value] and a \"t\" property pointing to the target (element). Makes it fast and cheap.\n\t\tlet l = _stateProps.length,\n\t\t\tstyle = element.style,\n\t\t\tstate = [],\n\t\t\ti = 0;\n\t\tfor (; i < l; i++) {\n\t\t\tstate.push(_stateProps[i], style[_stateProps[i]]);\n\t\t}\n\t\tstate.t = element;\n\t\treturn state;\n\t},\n\t_copyState = (state, override, omitOffsets) => {\n\t\tlet result = [],\n\t\t\tl = state.length,\n\t\t\ti = omitOffsets ? 8 : 0, // skip top, left, right, bottom if omitOffsets is true\n\t\t\tp;\n\t\tfor (; i < l; i += 2) {\n\t\t\tp = state[i];\n\t\t\tresult.push(p, (p in override) ? override[p] : state[i+1]);\n\t\t}\n\t\tresult.t = state.t;\n\t\treturn result;\n\t},\n\t_winOffsets = {left:0, top:0},\n\t// // potential future feature (?) Allow users to calculate where a trigger hits (scroll position) like getScrollPosition(\"#id\", \"top bottom\")\n\t// _getScrollPosition = (trigger, position, {scroller, containerAnimation, horizontal}) => {\n\t// \tscroller = _getTarget(scroller || _win);\n\t// \tlet direction = horizontal ? _horizontal : _vertical,\n\t// \t\tisViewport = _isViewport(scroller);\n\t// \t_getSizeFunc(scroller, isViewport, direction);\n\t// \treturn _parsePosition(position, _getTarget(trigger), _getSizeFunc(scroller, isViewport, direction)(), direction, _getScrollFunc(scroller, direction)(), 0, 0, 0, _getOffsetsFunc(scroller, isViewport)(), isViewport ? 0 : parseFloat(_getComputedStyle(scroller)[\"border\" + direction.p2 + _Width]) || 0, 0, containerAnimation ? containerAnimation.duration() : _maxScroll(scroller), containerAnimation);\n\t// },\n\t_parsePosition = (value, trigger, scrollerSize, direction, scroll, marker, markerScroller, self, scrollerBounds, borderWidth, useFixedPosition, scrollerMax, containerAnimation, clampZeroProp) => {\n\t\t_isFunction(value) && (value = value(self));\n\t\tif (_isString(value) && value.substr(0,3) === \"max\") {\n\t\t\tvalue = scrollerMax + (value.charAt(4) === \"=\" ? _offsetToPx(\"0\" + value.substr(3), scrollerSize) : 0);\n\t\t}\n\t\tlet time = containerAnimation ? containerAnimation.time() : 0,\n\t\t\tp1, p2, element;\n\t\tcontainerAnimation && containerAnimation.seek(0);\n\t\tisNaN(value) || (value = +value); // convert a string number like \"45\" to an actual number\n\t\tif (!_isNumber(value)) {\n\t\t\t_isFunction(trigger) && (trigger = trigger(self));\n\t\t\tlet offsets = (value || \"0\").split(\" \"),\n\t\t\t\tbounds, localOffset, globalOffset, display;\n\t\t\telement = _getTarget(trigger, self) || _body;\n\t\t\tbounds = _getBounds(element) || {};\n\t\t\tif ((!bounds || (!bounds.left && !bounds.top)) && _getComputedStyle(element).display === \"none\") { // if display is \"none\", it won't report getBoundingClientRect() properly\n\t\t\t\tdisplay = element.style.display;\n\t\t\t\telement.style.display = \"block\";\n\t\t\t\tbounds = _getBounds(element);\n\t\t\t\tdisplay ? (element.style.display = display) : element.style.removeProperty(\"display\");\n\t\t\t}\n\t\t\tlocalOffset = _offsetToPx(offsets[0], bounds[direction.d]);\n\t\t\tglobalOffset = _offsetToPx(offsets[1] || \"0\", scrollerSize);\n\t\t\tvalue = bounds[direction.p] - scrollerBounds[direction.p] - borderWidth + localOffset + scroll - globalOffset;\n\t\t\tmarkerScroller && _positionMarker(markerScroller, globalOffset, direction, (scrollerSize - globalOffset < 20 || (markerScroller._isStart && globalOffset > 20)));\n\t\t\tscrollerSize -= scrollerSize - globalOffset; // adjust for the marker\n\t\t} else {\n\t\t\tcontainerAnimation && (value = gsap.utils.mapRange(containerAnimation.scrollTrigger.start, containerAnimation.scrollTrigger.end, 0, scrollerMax, value));\n\t\t\tmarkerScroller && _positionMarker(markerScroller, scrollerSize, direction, true);\n\t\t}\n\t\tif (clampZeroProp) {\n\t\t\tself[clampZeroProp] = value || -0.001;\n\t\t\tvalue < 0 && (value = 0);\n\t\t}\n\t\tif (marker) {\n\t\t\tlet position = value + scrollerSize,\n\t\t\t\tisStart = marker._isStart;\n\t\t\tp1 = \"scroll\" + direction.d2;\n\t\t\t_positionMarker(marker, position, direction, (isStart && position > 20) || (!isStart && (useFixedPosition ? Math.max(_body[p1], _docEl[p1]) : marker.parentNode[p1]) <= position + 1));\n\t\t\tif (useFixedPosition) {\n\t\t\t\tscrollerBounds = _getBounds(markerScroller);\n\t\t\t\tuseFixedPosition && (marker.style[direction.op.p] = (scrollerBounds[direction.op.p] - direction.op.m - marker._offset) + _px);\n\t\t\t}\n\t\t}\n\t\tif (containerAnimation && element) {\n\t\t\tp1 = _getBounds(element);\n\t\t\tcontainerAnimation.seek(scrollerMax);\n\t\t\tp2 = _getBounds(element);\n\t\t\tcontainerAnimation._caScrollDist = p1[direction.p] - p2[direction.p];\n\t\t\tvalue = value / (containerAnimation._caScrollDist) * scrollerMax;\n\t\t}\n\t\tcontainerAnimation && containerAnimation.seek(time);\n\t\treturn containerAnimation ? value : Math.round(value);\n\t},\n\t_prefixExp = /(webkit|moz|length|cssText|inset)/i,\n\t_reparent = (element, parent, top, left) => {\n\t\tif (element.parentNode !== parent) {\n\t\t\tlet style = element.style,\n\t\t\t\tp, cs;\n\t\t\tif (parent === _body) {\n\t\t\t\telement._stOrig = style.cssText; // record original inline styles so we can revert them later\n\t\t\t\tcs = _getComputedStyle(element);\n\t\t\t\tfor (p in cs) { // must copy all relevant styles to ensure that nothing changes visually when we reparent to the . Skip the vendor prefixed ones.\n\t\t\t\t\tif (!+p && !_prefixExp.test(p) && cs[p] && typeof style[p] === \"string\" && p !== \"0\") {\n\t\t\t\t\t\tstyle[p] = cs[p];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tstyle.top = top;\n\t\t\t\tstyle.left = left;\n\t\t\t} else {\n\t\t\t\tstyle.cssText = element._stOrig;\n\t\t\t}\n\t\t\tgsap.core.getCache(element).uncache = 1;\n\t\t\tparent.appendChild(element);\n\t\t}\n\t},\n\t_interruptionTracker = (getValueFunc, initialValue, onInterrupt) => {\n\t\tlet last1 = initialValue,\n\t\t\tlast2 = last1;\n\t\treturn value => {\n\t\t\tlet current = Math.round(getValueFunc()); // round because in some [very uncommon] Windows environments, scroll can get reported with decimals even though it was set without.\n\t\t\tif (current !== last1 && current !== last2 && Math.abs(current - last1) > 3 && Math.abs(current - last2) > 3) { // if the user scrolls, kill the tween. iOS Safari intermittently misreports the scroll position, it may be the most recently-set one or the one before that! When Safari is zoomed (CMD-+), it often misreports as 1 pixel off too! So if we set the scroll position to 125, for example, it'll actually report it as 124.\n\t\t\t\tvalue = current;\n\t\t\t\tonInterrupt && onInterrupt();\n\t\t\t}\n\t\t\tlast2 = last1;\n\t\t\tlast1 = Math.round(value);\n\t\t\treturn last1;\n\t\t};\n\t},\n\t_shiftMarker = (marker, direction, value) => {\n\t\tlet vars = {};\n\t\tvars[direction.p] = \"+=\" + value;\n\t\tgsap.set(marker, vars);\n\t},\n\t// _mergeAnimations = animations => {\n\t// \tlet tl = gsap.timeline({smoothChildTiming: true}).startTime(Math.min(...animations.map(a => a.globalTime(0))));\n\t// \tanimations.forEach(a => {let time = a.totalTime(); tl.add(a); a.totalTime(time); });\n\t// \ttl.smoothChildTiming = false;\n\t// \treturn tl;\n\t// },\n\n\t// returns a function that can be used to tween the scroll position in the direction provided, and when doing so it'll add a .tween property to the FUNCTION itself, and remove it when the tween completes or gets killed. This gives us a way to have multiple ScrollTriggers use a central function for any given scroller and see if there's a scroll tween running (which would affect if/how things get updated)\n\t_getTweenCreator = (scroller, direction) => {\n\t\tlet getScroll = _getScrollFunc(scroller, direction),\n\t\t\tprop = \"_scroll\" + direction.p2, // add a tweenable property to the scroller that's a getter/setter function, like _scrollTop or _scrollLeft. This way, if someone does gsap.killTweensOf(scroller) it'll kill the scroll tween.\n\t\t\tgetTween = (scrollTo, vars, initialValue, change1, change2) => {\n\t\t\t\tlet tween = getTween.tween,\n\t\t\t\t\tonComplete = vars.onComplete,\n\t\t\t\t\tmodifiers = {};\n\t\t\t\tinitialValue = initialValue || getScroll();\n\t\t\t\tlet checkForInterruption = _interruptionTracker(getScroll, initialValue, () => {\n\t\t\t\t\ttween.kill();\n\t\t\t\t\tgetTween.tween = 0;\n\t\t\t\t});\n\t\t\t\tchange2 = (change1 && change2) || 0; // if change1 is 0, we set that to the difference and ignore change2. Otherwise, there would be a compound effect.\n\t\t\t\tchange1 = change1 || (scrollTo - initialValue);\n\t\t\t\ttween && tween.kill();\n\t\t\t\tvars[prop] = scrollTo;\n\t\t\t\tvars.inherit = false;\n\t\t\t\tvars.modifiers = modifiers;\n\t\t\t\tmodifiers[prop] = () => checkForInterruption(initialValue + change1 * tween.ratio + change2 * tween.ratio * tween.ratio);\n\t\t\t\tvars.onUpdate = () => {\n\t\t\t\t\t_scrollers.cache++;\n\t\t\t\t\tgetTween.tween && _updateAll(); // if it was interrupted/killed, like in a context.revert(), don't force an updateAll()\n\t\t\t\t};\n\t\t\t\tvars.onComplete = () => {\n\t\t\t\t\tgetTween.tween = 0;\n\t\t\t\t\tonComplete && onComplete.call(tween);\n\t\t\t\t};\n\t\t\t\ttween = getTween.tween = gsap.to(scroller, vars);\n\t\t\t\treturn tween;\n\t\t\t};\n\t\tscroller[prop] = getScroll;\n\t\tgetScroll.wheelHandler = () => getTween.tween && getTween.tween.kill() && (getTween.tween = 0);\n\t\t_addListener(scroller, \"wheel\", getScroll.wheelHandler); // Windows machines handle mousewheel scrolling in chunks (like \"3 lines per scroll\") meaning the typical strategy for cancelling the scroll isn't as sensitive. It's much more likely to match one of the previous 2 scroll event positions. So we kill any snapping as soon as there's a wheel event.\n\t\tScrollTrigger.isTouch && _addListener(scroller, \"touchmove\", getScroll.wheelHandler);\n\t\treturn getTween;\n\t};\n\n\n\n\nexport class ScrollTrigger {\n\n\tconstructor(vars, animation) {\n\t\t_coreInitted || ScrollTrigger.register(gsap) || console.warn(\"Please gsap.registerPlugin(ScrollTrigger)\");\n\t\t_context(this);\n\t\tthis.init(vars, animation);\n\t}\n\n\tinit(vars, animation) {\n\t\tthis.progress = this.start = 0;\n\t\tthis.vars && this.kill(true, true); // in case it's being initted again\n\t\tif (!_enabled) {\n\t\t\tthis.update = this.refresh = this.kill = _passThrough;\n\t\t\treturn;\n\t\t}\n\t\tvars = _setDefaults((_isString(vars) || _isNumber(vars) || vars.nodeType) ? {trigger: vars} : vars, _defaults);\n\t\tlet {onUpdate, toggleClass, id, onToggle, onRefresh, scrub, trigger, pin, pinSpacing, invalidateOnRefresh, anticipatePin, onScrubComplete, onSnapComplete, once, snap, pinReparent, pinSpacer, containerAnimation, fastScrollEnd, preventOverlaps} = vars,\n\t\t\tdirection = vars.horizontal || (vars.containerAnimation && vars.horizontal !== false) ? _horizontal : _vertical,\n\t\t\tisToggle = !scrub && scrub !== 0,\n\t\t\tscroller = _getTarget(vars.scroller || _win),\n\t\t\tscrollerCache = gsap.core.getCache(scroller),\n\t\t\tisViewport = _isViewport(scroller),\n\t\t\tuseFixedPosition = (\"pinType\" in vars ? vars.pinType : _getProxyProp(scroller, \"pinType\") || (isViewport && \"fixed\")) === \"fixed\",\n\t\t\tcallbacks = [vars.onEnter, vars.onLeave, vars.onEnterBack, vars.onLeaveBack],\n\t\t\ttoggleActions = isToggle && vars.toggleActions.split(\" \"),\n\t\t\tmarkers = \"markers\" in vars ? vars.markers : _defaults.markers,\n\t\t\tborderWidth = isViewport ? 0 : parseFloat(_getComputedStyle(scroller)[\"border\" + direction.p2 + _Width]) || 0,\n\t\t\tself = this,\n\t\t\tonRefreshInit = vars.onRefreshInit && (() => vars.onRefreshInit(self)),\n\t\t\tgetScrollerSize = _getSizeFunc(scroller, isViewport, direction),\n\t\t\tgetScrollerOffsets = _getOffsetsFunc(scroller, isViewport),\n\t\t\tlastSnap = 0,\n\t\t\tlastRefresh = 0,\n\t\t\tprevProgress = 0,\n\t\t\tscrollFunc = _getScrollFunc(scroller, direction),\n\t\t\ttweenTo, pinCache, snapFunc, scroll1, scroll2, start, end, markerStart, markerEnd, markerStartTrigger, markerEndTrigger, markerVars, executingOnRefresh,\n\t\t\tchange, pinOriginalState, pinActiveState, pinState, spacer, offset, pinGetter, pinSetter, pinStart, pinChange, spacingStart, spacerState, markerStartSetter, pinMoves,\n\t\t\tmarkerEndSetter, cs, snap1, snap2, scrubTween, scrubSmooth, snapDurClamp, snapDelayedCall, prevScroll, prevAnimProgress, caMarkerSetter, customRevertReturn;\n\n\t\t// for the sake of efficiency, _startClamp/_endClamp serve like a truthy value indicating that clamping was enabled on the start/end, and ALSO store the actual pre-clamped numeric value. We tap into that in ScrollSmoother for speed effects. So for example, if start=\"clamp(top bottom)\" results in a start of -100 naturally, it would get clamped to 0 but -100 would be stored in _startClamp.\n\t\tself._startClamp = self._endClamp = false;\n\t\tself._dir = direction;\n\t\tanticipatePin *= 45;\n\t\tself.scroller = scroller;\n\t\tself.scroll = containerAnimation ? containerAnimation.time.bind(containerAnimation) : scrollFunc;\n\t\tscroll1 = scrollFunc();\n\t\tself.vars = vars;\n\t\tanimation = animation || vars.animation;\n\t\tif (\"refreshPriority\" in vars) {\n\t\t\t_sort = 1;\n\t\t\tvars.refreshPriority === -9999 && (_primary = self); // used by ScrollSmoother\n\t\t}\n\t\tscrollerCache.tweenScroll = scrollerCache.tweenScroll || {\n\t\t\ttop: _getTweenCreator(scroller, _vertical),\n\t\t\tleft: _getTweenCreator(scroller, _horizontal)\n\t\t};\n\t\tself.tweenTo = tweenTo = scrollerCache.tweenScroll[direction.p];\n\t\tself.scrubDuration = value => {\n\t\t\tscrubSmooth = _isNumber(value) && value;\n\t\t\tif (!scrubSmooth) {\n\t\t\t\tscrubTween && scrubTween.progress(1).kill();\n\t\t\t\tscrubTween = 0;\n\t\t\t} else {\n\t\t\t\tscrubTween ? scrubTween.duration(value) : (scrubTween = gsap.to(animation, {ease: \"expo\", totalProgress: \"+=0\", inherit: false, duration: scrubSmooth, paused: true, onComplete: () => onScrubComplete && onScrubComplete(self)}));\n\t\t\t}\n\t\t};\n\t\tif (animation) {\n\t\t\tanimation.vars.lazy = false;\n\t\t\t(animation._initted && !self.isReverted) || (animation.vars.immediateRender !== false && vars.immediateRender !== false && animation.duration() && animation.render(0, true, true)); // special case: if this ScrollTrigger gets re-initted, a from() tween with a stagger could get initted initially and then reverted on the re-init which means it'll need to get rendered again here to properly display things. Otherwise, See https://gsap.com/forums/topic/36777-scrollsmoother-splittext-nextjs/ and https://codepen.io/GreenSock/pen/eYPyPpd?editors=0010\n\t\t\tself.animation = animation.pause();\n\t\t\tanimation.scrollTrigger = self;\n\t\t\tself.scrubDuration(scrub);\n\t\t\tsnap1 = 0;\n\t\t\tid || (id = animation.vars.id);\n\t\t}\n\n\t\tif (snap) {\n\t\t\t// TODO: potential idea: use legitimate CSS scroll snapping by pushing invisible elements into the DOM that serve as snap positions, and toggle the document.scrollingElement.style.scrollSnapType onToggle. See https://codepen.io/GreenSock/pen/JjLrgWM for a quick proof of concept.\n\t\t\tif (!_isObject(snap) || snap.push) {\n\t\t\t\tsnap = {snapTo: snap};\n\t\t\t}\n\t\t\t(\"scrollBehavior\" in _body.style) && gsap.set(isViewport ? [_body, _docEl] : scroller, {scrollBehavior: \"auto\"}); // smooth scrolling doesn't work with snap.\n\t\t\t_scrollers.forEach(o => _isFunction(o) && o.target === (isViewport ? _doc.scrollingElement || _docEl : scroller) && (o.smooth = false)); // note: set smooth to false on both the vertical and horizontal scroll getters/setters\n\t\t\tsnapFunc = _isFunction(snap.snapTo) ? snap.snapTo : snap.snapTo === \"labels\" ? _getClosestLabel(animation) : snap.snapTo === \"labelsDirectional\" ? _getLabelAtDirection(animation) : snap.directional !== false ? (value, st) => _snapDirectional(snap.snapTo)(value, _getTime() - lastRefresh < 500 ? 0 : st.direction) : gsap.utils.snap(snap.snapTo);\n\t\t\tsnapDurClamp = snap.duration || {min: 0.1, max: 2};\n\t\t\tsnapDurClamp = _isObject(snapDurClamp) ? _clamp(snapDurClamp.min, snapDurClamp.max) : _clamp(snapDurClamp, snapDurClamp);\n\t\t\tsnapDelayedCall = gsap.delayedCall(snap.delay || (scrubSmooth / 2) || 0.1, () => {\n\t\t\t\tlet scroll = scrollFunc(),\n\t\t\t\t\trefreshedRecently = _getTime() - lastRefresh < 500,\n\t\t\t\t\ttween = tweenTo.tween;\n\t\t\t\tif ((refreshedRecently || Math.abs(self.getVelocity()) < 10) && !tween && !_pointerIsDown && lastSnap !== scroll) {\n\t\t\t\t\tlet progress = (scroll - start) / change, // don't use self.progress because this might run between the refresh() and when the scroll position updates and self.progress is set properly in the update() method.\n\t\t\t\t\t\ttotalProgress = animation && !isToggle ? animation.totalProgress() : progress,\n\t\t\t\t\t\tvelocity = refreshedRecently ? 0 : ((totalProgress - snap2) / (_getTime() - _time2) * 1000) || 0,\n\t\t\t\t\t\tchange1 = gsap.utils.clamp(-progress, 1 - progress, _abs(velocity / 2) * velocity / 0.185),\n\t\t\t\t\t\tnaturalEnd = progress + (snap.inertia === false ? 0 : change1),\n\t\t\t\t\t\tendValue, endScroll,\n\t\t\t\t\t\t{ onStart, onInterrupt, onComplete } = snap;\n\t\t\t\t\tendValue = snapFunc(naturalEnd, self);\n\t\t\t\t\t_isNumber(endValue) || (endValue = naturalEnd); // in case the function didn't return a number, fall back to using the naturalEnd\n\t\t\t\t\tendScroll = Math.max(0, Math.round(start + endValue * change));\n\t\t\t\t\tif (scroll <= end && scroll >= start && endScroll !== scroll) {\n\t\t\t\t\t\tif (tween && !tween._initted && tween.data <= _abs(endScroll - scroll)) { // there's an overlapping snap! So we must figure out which one is closer and let that tween live.\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (snap.inertia === false) {\n\t\t\t\t\t\t\tchange1 = endValue - progress;\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttweenTo(endScroll, {\n\t\t\t\t\t\t\tduration: snapDurClamp(_abs( (Math.max(_abs(naturalEnd - totalProgress), _abs(endValue - totalProgress)) * 0.185 / velocity / 0.05) || 0)),\n\t\t\t\t\t\t\tease: snap.ease || \"power3\",\n\t\t\t\t\t\t\tdata: _abs(endScroll - scroll), // record the distance so that if another snap tween occurs (conflict) we can prioritize the closest snap.\n\t\t\t\t\t\t\tonInterrupt: () => snapDelayedCall.restart(true) && onInterrupt && onInterrupt(self),\n\t\t\t\t\t\t\tonComplete() {\n\t\t\t\t\t\t\t\tself.update();\n\t\t\t\t\t\t\t\tlastSnap = scrollFunc();\n\t\t\t\t\t\t\t\tif (animation && !isToggle) { // the resolution of the scrollbar is limited, so we should correct the scrubbed animation's playhead at the end to match EXACTLY where it was supposed to snap\n\t\t\t\t\t\t\t\t\tscrubTween ? scrubTween.resetTo(\"totalProgress\", endValue, animation._tTime / animation._tDur) : animation.progress(endValue);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsnap1 = snap2 = animation && !isToggle ? animation.totalProgress() : self.progress;\n\t\t\t\t\t\t\t\tonSnapComplete && onSnapComplete(self);\n\t\t\t\t\t\t\t\tonComplete && onComplete(self);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, scroll, change1 * change, endScroll - scroll - change1 * change);\n\t\t\t\t\t\tonStart && onStart(self, tweenTo.tween);\n\t\t\t\t\t}\n\t\t\t\t} else if (self.isActive && lastSnap !== scroll) {\n\t\t\t\t\tsnapDelayedCall.restart(true);\n\t\t\t\t}\n\t\t\t}).pause();\n\t\t}\n\t\tid && (_ids[id] = self);\n\t\ttrigger = self.trigger = _getTarget(trigger || (pin !== true && pin));\n\n\t\t// if a trigger has some kind of scroll-related effect applied that could contaminate the \"y\" or \"x\" position (like a ScrollSmoother effect), we needed a way to temporarily revert it, so we use the stRevert property of the gsCache. It can return another function that we'll call at the end so it can return to its normal state.\n\t\tcustomRevertReturn = trigger && trigger._gsap && trigger._gsap.stRevert;\n\t\tcustomRevertReturn && (customRevertReturn = customRevertReturn(self));\n\n\t\tpin = pin === true ? trigger : _getTarget(pin);\n\t\t_isString(toggleClass) && (toggleClass = {targets: trigger, className: toggleClass});\n\t\tif (pin) {\n\t\t\t(pinSpacing === false || pinSpacing === _margin) || (pinSpacing = !pinSpacing && pin.parentNode && pin.parentNode.style && _getComputedStyle(pin.parentNode).display === \"flex\" ? false : _padding); // if the parent is display: flex, don't apply pinSpacing by default. We should check that pin.parentNode is an element (not shadow dom window)\n\t\t\tself.pin = pin;\n\t\t\tpinCache = gsap.core.getCache(pin);\n\t\t\tif (!pinCache.spacer) { // record the spacer and pinOriginalState on the cache in case someone tries pinning the same element with MULTIPLE ScrollTriggers - we don't want to have multiple spacers or record the \"original\" pin state after it has already been affected by another ScrollTrigger.\n\t\t\t\tif (pinSpacer) {\n\t\t\t\t\tpinSpacer = _getTarget(pinSpacer);\n\t\t\t\t\tpinSpacer && !pinSpacer.nodeType && (pinSpacer = pinSpacer.current || pinSpacer.nativeElement); // for React & Angular\n\t\t\t\t\tpinCache.spacerIsNative = !!pinSpacer;\n\t\t\t\t\tpinSpacer && (pinCache.spacerState = _getState(pinSpacer));\n\t\t\t\t}\n\t\t\t\tpinCache.spacer = spacer = pinSpacer || _doc.createElement(\"div\");\n\t\t\t\tspacer.classList.add(\"pin-spacer\");\n\t\t\t\tid && spacer.classList.add(\"pin-spacer-\" + id);\n\t\t\t\tpinCache.pinState = pinOriginalState = _getState(pin);\n\t\t\t} else {\n\t\t\t\tpinOriginalState = pinCache.pinState;\n\t\t\t}\n\t\t\tvars.force3D !== false && gsap.set(pin, {force3D: true});\n\t\t\tself.spacer = spacer = pinCache.spacer;\n\t\t\tcs = _getComputedStyle(pin);\n\t\t\tspacingStart = cs[pinSpacing + direction.os2];\n\t\t\tpinGetter = gsap.getProperty(pin);\n\t\t\tpinSetter = gsap.quickSetter(pin, direction.a, _px);\n\t\t\t// pin.firstChild && !_maxScroll(pin, direction) && (pin.style.overflow = \"hidden\"); // protects from collapsing margins, but can have unintended consequences as demonstrated here: https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d so it was removed in favor of just telling people to set up their CSS to avoid the collapsing margins (overflow: hidden | auto is just one option. Another is border-top: 1px solid transparent).\n\t\t\t_swapPinIn(pin, spacer, cs);\n\t\t\tpinState = _getState(pin);\n\t\t}\n\t\tif (markers) {\n\t\t\tmarkerVars = _isObject(markers) ? _setDefaults(markers, _markerDefaults) : _markerDefaults;\n\t\t\tmarkerStartTrigger = _createMarker(\"scroller-start\", id, scroller, direction, markerVars, 0);\n\t\t\tmarkerEndTrigger = _createMarker(\"scroller-end\", id, scroller, direction, markerVars, 0, markerStartTrigger);\n\t\t\toffset = markerStartTrigger[\"offset\" + direction.op.d2];\n\t\t\tlet content = _getTarget(_getProxyProp(scroller, \"content\") || scroller);\n\t\t\tmarkerStart = this.markerStart = _createMarker(\"start\", id, content, direction, markerVars, offset, 0, containerAnimation);\n\t\t\tmarkerEnd = this.markerEnd = _createMarker(\"end\", id, content, direction, markerVars, offset, 0, containerAnimation);\n\t\t\tcontainerAnimation && (caMarkerSetter = gsap.quickSetter([markerStart, markerEnd], direction.a, _px));\n\t\t\tif ((!useFixedPosition && !(_proxies.length && _getProxyProp(scroller, \"fixedMarkers\") === true))) {\n\t\t\t\t_makePositionable(isViewport ? _body : scroller);\n\t\t\t\tgsap.set([markerStartTrigger, markerEndTrigger], {force3D: true});\n\t\t\t\tmarkerStartSetter = gsap.quickSetter(markerStartTrigger, direction.a, _px);\n\t\t\t\tmarkerEndSetter = gsap.quickSetter(markerEndTrigger, direction.a, _px);\n\t\t\t}\n\t\t}\n\n\t\tif (containerAnimation) {\n\t\t\tlet oldOnUpdate = containerAnimation.vars.onUpdate,\n\t\t\t\toldParams = containerAnimation.vars.onUpdateParams;\n\t\t\tcontainerAnimation.eventCallback(\"onUpdate\", () => {\n\t\t\t\tself.update(0, 0, 1);\n\t\t\t\toldOnUpdate && oldOnUpdate.apply(containerAnimation, oldParams || []);\n\t\t\t});\n\t\t}\n\n\t\tself.previous = () => _triggers[_triggers.indexOf(self) - 1];\n\t\tself.next = () => _triggers[_triggers.indexOf(self) + 1];\n\n\t\tself.revert = (revert, temp) => {\n\t\t\tif (!temp) { return self.kill(true); } // for compatibility with gsap.context() and gsap.matchMedia() which call revert()\n\t\t\tlet r = revert !== false || !self.enabled,\n\t\t\t\tprevRefreshing = _refreshing;\n\t\t\tif (r !== self.isReverted) {\n\t\t\t\tif (r) {\n\t\t\t\t\tprevScroll = Math.max(scrollFunc(), self.scroll.rec || 0); // record the scroll so we can revert later (repositioning/pinning things can affect scroll position). In the static refresh() method, we first record all the scroll positions as a reference.\n\t\t\t\t\tprevProgress = self.progress;\n\t\t\t\t\tprevAnimProgress = animation && animation.progress();\n\t\t\t\t}\n\t\t\t\tmarkerStart && [markerStart, markerEnd, markerStartTrigger, markerEndTrigger].forEach(m => m.style.display = r ? \"none\" : \"block\");\n\t\t\t\tif (r) {\n\t\t\t\t\t_refreshing = self;\n\t\t\t\t\tself.update(r); // make sure the pin is back in its original position so that all the measurements are correct. do this BEFORE swapping the pin out\n\t\t\t\t}\n\t\t\t\tif (pin && (!pinReparent || !self.isActive)) {\n\t\t\t\t\tif (r) {\n\t\t\t\t\t\t_swapPinOut(pin, spacer, pinOriginalState);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t_swapPinIn(pin, spacer, _getComputedStyle(pin), spacerState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tr || self.update(r); // when we're restoring, the update should run AFTER swapping the pin into its pin-spacer.\n\t\t\t\t_refreshing = prevRefreshing; // restore. We set it to true during the update() so that things fire properly in there.\n\t\t\t\tself.isReverted = r;\n\t\t\t}\n\t\t}\n\n\t\tself.refresh = (soft, force, position, pinOffset) => { // position is typically only defined if it's coming from setPositions() - it's a way to skip the normal parsing. pinOffset is also only from setPositions() and is mostly related to fancy stuff we need to do in ScrollSmoother with effects\n\t\t\tif ((_refreshing || !self.enabled) && !force) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (pin && soft && _lastScrollTime) {\n\t\t\t\t_addListener(ScrollTrigger, \"scrollEnd\", _softRefresh);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t!_refreshingAll && onRefreshInit && onRefreshInit(self);\n\t\t\t_refreshing = self;\n\t\t\tif (tweenTo.tween && !position) { // we skip this if a position is passed in because typically that's from .setPositions() and it's best to allow in-progress snapping to continue.\n\t\t\t\ttweenTo.tween.kill();\n\t\t\t\ttweenTo.tween = 0;\n\t\t\t}\n\t\t\tscrubTween && scrubTween.pause();\n\t\t\tinvalidateOnRefresh && animation && animation.revert({kill: false}).invalidate();\n\t\t\tself.isReverted || self.revert(true, true);\n\t\t\tself._subPinOffset = false; // we'll set this to true in the sub-pins if we find any\n\t\t\tlet size = getScrollerSize(),\n\t\t\t\tscrollerBounds = getScrollerOffsets(),\n\t\t\t\tmax = containerAnimation ? containerAnimation.duration() : _maxScroll(scroller, direction),\n\t\t\t\tisFirstRefresh = change <= 0.01,\n\t\t\t\toffset = 0,\n\t\t\t\totherPinOffset = pinOffset || 0,\n\t\t\t\tparsedEnd = _isObject(position) ? position.end : vars.end,\n\t\t\t\tparsedEndTrigger = vars.endTrigger || trigger,\n\t\t\t\tparsedStart = _isObject(position) ? position.start : (vars.start || (vars.start === 0 || !trigger ? 0 : (pin ? \"0 0\" : \"0 100%\"))),\n\t\t\t\tpinnedContainer = self.pinnedContainer = vars.pinnedContainer && _getTarget(vars.pinnedContainer, self),\n\t\t\t\ttriggerIndex = (trigger && Math.max(0, _triggers.indexOf(self))) || 0,\n\t\t\t\ti = triggerIndex,\n\t\t\t\tcs, bounds, scroll, isVertical, override, curTrigger, curPin, oppositeScroll, initted, revertedPins, forcedOverflow, markerStartOffset, markerEndOffset;\n\t\t\tif (markers && _isObject(position)) { // if we alter the start/end positions with .setPositions(), it generally feeds in absolute NUMBERS which don't convey information about where to line up the markers, so to keep it intuitive, we record how far the trigger positions shift after applying the new numbers and then offset by that much in the opposite direction. We do the same to the associated trigger markers too of course.\n\t\t\t\tmarkerStartOffset = gsap.getProperty(markerStartTrigger, direction.p);\n\t\t\t\tmarkerEndOffset = gsap.getProperty(markerEndTrigger, direction.p);\n\t\t\t}\n\t\t\twhile (i-- > 0) { // user might try to pin the same element more than once, so we must find any prior triggers with the same pin, revert them, and determine how long they're pinning so that we can offset things appropriately. Make sure we revert from last to first so that things \"rewind\" properly.\n\t\t\t\tcurTrigger = _triggers[i];\n\t\t\t\tcurTrigger.end || curTrigger.refresh(0, 1) || (_refreshing = self); // if it's a timeline-based trigger that hasn't been fully initialized yet because it's waiting for 1 tick, just force the refresh() here, otherwise if it contains a pin that's supposed to affect other ScrollTriggers further down the page, they won't be adjusted properly.\n\t\t\t\tcurPin = curTrigger.pin;\n\t\t\t\tif (curPin && (curPin === trigger || curPin === pin || curPin === pinnedContainer) && !curTrigger.isReverted) {\n\t\t\t\t\trevertedPins || (revertedPins = []);\n\t\t\t\t\trevertedPins.unshift(curTrigger); // we'll revert from first to last to make sure things reach their end state properly\n\t\t\t\t\tcurTrigger.revert(true, true);\n\t\t\t\t}\n\t\t\t\tif (curTrigger !== _triggers[i]) { // in case it got removed.\n\t\t\t\t\ttriggerIndex--;\n\t\t\t\t\ti--;\n\t\t\t\t}\n\t\t\t}\n\t\t\t_isFunction(parsedStart) && (parsedStart = parsedStart(self));\n\t\t\tparsedStart = _parseClamp(parsedStart, \"start\", self);\n\t\t\tstart = _parsePosition(parsedStart, trigger, size, direction, scrollFunc(), markerStart, markerStartTrigger, self, scrollerBounds, borderWidth, useFixedPosition, max, containerAnimation, self._startClamp && \"_startClamp\") || (pin ? -0.001 : 0);\n\t\t\t_isFunction(parsedEnd) && (parsedEnd = parsedEnd(self));\n\t\t\tif (_isString(parsedEnd) && !parsedEnd.indexOf(\"+=\")) {\n\t\t\t\tif (~parsedEnd.indexOf(\" \")) {\n\t\t\t\t\tparsedEnd = (_isString(parsedStart) ? parsedStart.split(\" \")[0] : \"\") + parsedEnd;\n\t\t\t\t} else {\n\t\t\t\t\toffset = _offsetToPx(parsedEnd.substr(2), size);\n\t\t\t\t\tparsedEnd = _isString(parsedStart) ? parsedStart : (containerAnimation ? gsap.utils.mapRange(0, containerAnimation.duration(), containerAnimation.scrollTrigger.start, containerAnimation.scrollTrigger.end, start) : start) + offset; // _parsePosition won't factor in the offset if the start is a number, so do it here.\n\t\t\t\t\tparsedEndTrigger = trigger;\n\t\t\t\t}\n\t\t\t}\n\t\t\tparsedEnd = _parseClamp(parsedEnd, \"end\", self);\n\t\t\tend = Math.max(start, _parsePosition(parsedEnd || (parsedEndTrigger ? \"100% 0\" : max), parsedEndTrigger, size, direction, scrollFunc() + offset, markerEnd, markerEndTrigger, self, scrollerBounds, borderWidth, useFixedPosition, max, containerAnimation, self._endClamp && \"_endClamp\")) || -0.001;\n\n\t\t\toffset = 0;\n\t\t\ti = triggerIndex;\n\t\t\twhile (i--) {\n\t\t\t\tcurTrigger = _triggers[i];\n\t\t\t\tcurPin = curTrigger.pin;\n\t\t\t\tif (curPin && curTrigger.start - curTrigger._pinPush <= start && !containerAnimation && curTrigger.end > 0) {\n\t\t\t\t\tcs = curTrigger.end - (self._startClamp ? Math.max(0, curTrigger.start) : curTrigger.start);\n\t\t\t\t\tif (((curPin === trigger && curTrigger.start - curTrigger._pinPush < start) || curPin === pinnedContainer) && isNaN(parsedStart)) { // numeric start values shouldn't be offset at all - treat them as absolute\n\t\t\t\t\t\toffset += cs * (1 - curTrigger.progress);\n\t\t\t\t\t}\n\t\t\t\t\tcurPin === pin && (otherPinOffset += cs);\n\t\t\t\t}\n\t\t\t}\n\t\t\tstart += offset;\n\t\t\tend += offset;\n\t\t\tself._startClamp && (self._startClamp += offset);\n\n\t\t\tif (self._endClamp && !_refreshingAll) {\n\t\t\t\tself._endClamp = end || -0.001;\n\t\t\t\tend = Math.min(end, _maxScroll(scroller, direction));\n\t\t\t}\n\t\t\tchange = (end - start) || ((start -= 0.01) && 0.001);\n\n\t\t\tif (isFirstRefresh) { // on the very first refresh(), the prevProgress couldn't have been accurate yet because the start/end were never calculated, so we set it here. Before 3.11.5, it could lead to an inaccurate scroll position restoration with snapping.\n\t\t\t\tprevProgress = gsap.utils.clamp(0, 1, gsap.utils.normalize(start, end, prevScroll));\n\t\t\t}\n\t\t\tself._pinPush = otherPinOffset;\n\t\t\tif (markerStart && offset) { // offset the markers if necessary\n\t\t\t\tcs = {};\n\t\t\t\tcs[direction.a] = \"+=\" + offset;\n\t\t\t\tpinnedContainer && (cs[direction.p] = \"-=\" + scrollFunc());\n\t\t\t\tgsap.set([markerStart, markerEnd], cs);\n\t\t\t}\n\n\t\t\tif (pin && !(_clampingMax && self.end >= _maxScroll(scroller, direction))) {\n\t\t\t\tcs = _getComputedStyle(pin);\n\t\t\t\tisVertical = direction === _vertical;\n\t\t\t\tscroll = scrollFunc(); // recalculate because the triggers can affect the scroll\n\t\t\t\tpinStart = parseFloat(pinGetter(direction.a)) + otherPinOffset;\n\t\t\t\tif (!max && end > 1) { // makes sure the scroller has a scrollbar, otherwise if something has width: 100%, for example, it would be too big (exclude the scrollbar). See https://gsap.com/forums/topic/25182-scrolltrigger-width-of-page-increase-where-markers-are-set-to-false/\n\t\t\t\t\tforcedOverflow = (isViewport ? (_doc.scrollingElement || _docEl) : scroller).style;\n\t\t\t\t\tforcedOverflow = {style: forcedOverflow, value: forcedOverflow[\"overflow\" + direction.a.toUpperCase()]};\n\t\t\t\t\tif (isViewport && _getComputedStyle(_body)[\"overflow\" + direction.a.toUpperCase()] !== \"scroll\") { // avoid an extra scrollbar if BOTH and have overflow set to \"scroll\"\n\t\t\t\t\t\tforcedOverflow.style[\"overflow\" + direction.a.toUpperCase()] = \"scroll\";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t_swapPinIn(pin, spacer, cs);\n\t\t\t\tpinState = _getState(pin);\n\t\t\t\t// transforms will interfere with the top/left/right/bottom placement, so remove them temporarily. getBoundingClientRect() factors in transforms.\n\t\t\t\tbounds = _getBounds(pin, true);\n\t\t\t\toppositeScroll = useFixedPosition && _getScrollFunc(scroller, isVertical ? _horizontal : _vertical)();\n\t\t\t\tif (pinSpacing) {\n\t\t\t\t\tspacerState = [pinSpacing + direction.os2, change + otherPinOffset + _px];\n\t\t\t\t\tspacerState.t = spacer;\n\t\t\t\t\ti = (pinSpacing === _padding) ? _getSize(pin, direction) + change + otherPinOffset : 0;\n\t\t\t\t\tif (i) {\n\t\t\t\t\t\tspacerState.push(direction.d, i + _px); // for box-sizing: border-box (must include padding).\n\t\t\t\t\t\tspacer.style.flexBasis !== \"auto\" && (spacer.style.flexBasis = i + _px);\n\t\t\t\t\t}\n\t\t\t\t\t_setState(spacerState);\n\t\t\t\t\tif (pinnedContainer) { // in ScrollTrigger.refresh(), we need to re-evaluate the pinContainer's size because this pinSpacing may stretch it out, but we can't just add the exact distance because depending on layout, it may not push things down or it may only do so partially.\n\t\t\t\t\t\t_triggers.forEach(t => {\n\t\t\t\t\t\t\tif (t.pin === pinnedContainer && t.vars.pinSpacing !== false) {\n\t\t\t\t\t\t\t\tt._subPinOffset = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tuseFixedPosition && scrollFunc(prevScroll);\n\t\t\t\t} else {\n\t\t\t\t\ti = _getSize(pin, direction);\n\t\t\t\t\ti && spacer.style.flexBasis !== \"auto\" && (spacer.style.flexBasis = i + _px);\n\t\t\t\t}\n\t\t\t\tif (useFixedPosition) {\n\t\t\t\t\toverride = {\n\t\t\t\t\t\ttop: (bounds.top + (isVertical ? scroll - start : oppositeScroll)) + _px,\n\t\t\t\t\t\tleft: (bounds.left + (isVertical ? oppositeScroll : scroll - start)) + _px,\n\t\t\t\t\t\tboxSizing: \"border-box\",\n\t\t\t\t\t\tposition: \"fixed\"\n\t\t\t\t\t};\n\t\t\t\t\toverride[_width] = override[\"max\" + _Width] = Math.ceil(bounds.width) + _px;\n\t\t\t\t\toverride[_height] = override[\"max\" + _Height] = Math.ceil(bounds.height) + _px;\n\t\t\t\t\toverride[_margin] = override[_margin + _Top] = override[_margin + _Right] = override[_margin + _Bottom] = override[_margin + _Left] = \"0\";\n\t\t\t\t\toverride[_padding] = cs[_padding];\n\t\t\t\t\toverride[_padding + _Top] = cs[_padding + _Top];\n\t\t\t\t\toverride[_padding + _Right] = cs[_padding + _Right];\n\t\t\t\t\toverride[_padding + _Bottom] = cs[_padding + _Bottom];\n\t\t\t\t\toverride[_padding + _Left] = cs[_padding + _Left];\n\t\t\t\t\tpinActiveState = _copyState(pinOriginalState, override, pinReparent);\n\t\t\t\t\t_refreshingAll && scrollFunc(0);\n\t\t\t\t}\n\t\t\t\tif (animation) { // the animation might be affecting the transform, so we must jump to the end, check the value, and compensate accordingly. Otherwise, when it becomes unpinned, the pinSetter() will get set to a value that doesn't include whatever the animation did.\n\t\t\t\t\tinitted = animation._initted; // if not, we must invalidate() after this step, otherwise it could lock in starting values prematurely.\n\t\t\t\t\t_suppressOverwrites(1);\n\t\t\t\t\tanimation.render(animation.duration(), true, true);\n\t\t\t\t\tpinChange = pinGetter(direction.a) - pinStart + change + otherPinOffset;\n\t\t\t\t\tpinMoves = Math.abs(change - pinChange) > 1;\n\t\t\t\t\tuseFixedPosition && pinMoves && pinActiveState.splice(pinActiveState.length - 2, 2); // transform is the last property/value set in the state Array. Since the animation is controlling that, we should omit it.\n\t\t\t\t\tanimation.render(0, true, true);\n\t\t\t\t\tinitted || animation.invalidate(true);\n\t\t\t\t\tanimation.parent || animation.totalTime(animation.totalTime()); // if, for example, a toggleAction called play() and then refresh() happens and when we render(1) above, it would cause the animation to complete and get removed from its parent, so this makes sure it gets put back in.\n\t\t\t\t\t_suppressOverwrites(0);\n\t\t\t\t} else {\n\t\t\t\t\tpinChange = change\n\t\t\t\t}\n\t\t\t\tforcedOverflow && (forcedOverflow.value ? (forcedOverflow.style[\"overflow\" + direction.a.toUpperCase()] = forcedOverflow.value) : forcedOverflow.style.removeProperty(\"overflow-\" + direction.a));\n\t\t\t} else if (trigger && scrollFunc() && !containerAnimation) { // it may be INSIDE a pinned element, so walk up the tree and look for any elements with _pinOffset to compensate because anything with pinSpacing that's already scrolled would throw off the measurements in getBoundingClientRect()\n\t\t\t\tbounds = trigger.parentNode;\n\t\t\t\twhile (bounds && bounds !== _body) {\n\t\t\t\t\tif (bounds._pinOffset) {\n\t\t\t\t\t\tstart -= bounds._pinOffset;\n\t\t\t\t\t\tend -= bounds._pinOffset;\n\t\t\t\t\t}\n\t\t\t\t\tbounds = bounds.parentNode;\n\t\t\t\t}\n\t\t\t}\n\t\t\trevertedPins && revertedPins.forEach(t => t.revert(false, true));\n\t\t\tself.start = start;\n\t\t\tself.end = end;\n\t\t\tscroll1 = scroll2 = _refreshingAll ? prevScroll : scrollFunc(); // reset velocity\n\t\t\tif (!containerAnimation && !_refreshingAll) {\n\t\t\t\tscroll1 < prevScroll && scrollFunc(prevScroll);\n\t\t\t\tself.scroll.rec = 0;\n\t\t\t}\n\t\t\tself.revert(false, true);\n\t\t\tlastRefresh = _getTime();\n\t\t\tif (snapDelayedCall) {\n\t\t\t\tlastSnap = -1; // just so snapping gets re-enabled, clear out any recorded last value\n\t\t\t\t// self.isActive && scrollFunc(start + change * prevProgress); // previously this line was here to ensure that when snapping kicks in, it's from the previous progress but in some cases that's not desirable, like an all-page ScrollTrigger when new content gets added to the page, that'd totally change the progress.\n\t\t\t\tsnapDelayedCall.restart(true);\n\t\t\t}\n\t\t\t_refreshing = 0;\n\t\t\tanimation && isToggle && (animation._initted || prevAnimProgress) && animation.progress() !== prevAnimProgress && animation.progress(prevAnimProgress || 0, true).render(animation.time(), true, true); // must force a re-render because if saveStyles() was used on the target(s), the styles could have been wiped out during the refresh().\n\t\t\tif (isFirstRefresh || prevProgress !== self.progress || containerAnimation || invalidateOnRefresh || (animation && !animation._initted)) { // ensures that the direction is set properly (when refreshing, progress is set back to 0 initially, then back again to wherever it needs to be) and that callbacks are triggered.\n\t\t\t\tanimation && !isToggle && animation.totalProgress(containerAnimation && start < -0.001 && !prevProgress ? gsap.utils.normalize(start, end, 0) : prevProgress, true); // to avoid issues where animation callbacks like onStart aren't triggered.\n\t\t\t\tself.progress = isFirstRefresh || ((scroll1 - start) / change === prevProgress) ? 0 : prevProgress;\n\t\t\t}\n\t\t\tpin && pinSpacing && (spacer._pinOffset = Math.round(self.progress * pinChange));\n\t\t\tscrubTween && scrubTween.invalidate();\n\n\t\t\tif (!isNaN(markerStartOffset)) { // numbers were passed in for the position which are absolute, so instead of just putting the markers at the very bottom of the viewport, we figure out how far they shifted down (it's safe to assume they were originally positioned in closer relation to the trigger element with values like \"top\", \"center\", a percentage or whatever, so we offset that much in the opposite direction to basically revert them to the relative position thy were at previously.\n\t\t\t\tmarkerStartOffset -= gsap.getProperty(markerStartTrigger, direction.p);\n\t\t\t\tmarkerEndOffset -= gsap.getProperty(markerEndTrigger, direction.p);\n\t\t\t\t_shiftMarker(markerStartTrigger, direction, markerStartOffset);\n\t\t\t\t_shiftMarker(markerStart, direction, markerStartOffset - (pinOffset || 0));\n\t\t\t\t_shiftMarker(markerEndTrigger, direction, markerEndOffset);\n\t\t\t\t_shiftMarker(markerEnd, direction, markerEndOffset - (pinOffset || 0));\n\t\t\t}\n\n\t\t\tisFirstRefresh && !_refreshingAll && self.update(); // edge case - when you reload a page when it's already scrolled down, some browsers fire a \"scroll\" event before DOMContentLoaded, triggering an updateAll(). If we don't update the self.progress as part of refresh(), then when it happens next, it may record prevProgress as 0 when it really shouldn't, potentially causing a callback in an animation to fire again.\n\n\t\t\tif (onRefresh && !_refreshingAll && !executingOnRefresh) { // when refreshing all, we do extra work to correct pinnedContainer sizes and ensure things don't exceed the maxScroll, so we should do all the refreshes at the end after all that work so that the start/end values are corrected.\n\t\t\t\texecutingOnRefresh = true;\n\t\t\t\tonRefresh(self);\n\t\t\t\texecutingOnRefresh = false;\n\t\t\t}\n\t\t};\n\n\t\tself.getVelocity = () => ((scrollFunc() - scroll2) / (_getTime() - _time2) * 1000) || 0;\n\n\t\tself.endAnimation = () => {\n\t\t\t_endAnimation(self.callbackAnimation);\n\t\t\tif (animation) {\n\t\t\t\tscrubTween ? scrubTween.progress(1) : (!animation.paused() ? _endAnimation(animation, animation.reversed()) : isToggle || _endAnimation(animation, self.direction < 0, 1));\n\t\t\t}\n\t\t};\n\n\t\tself.labelToScroll = label => animation && animation.labels && ((start || self.refresh() || start) + (animation.labels[label] / animation.duration()) * change) || 0;\n\n\t\tself.getTrailing = name => {\n\t\t\tlet i = _triggers.indexOf(self),\n\t\t\t\ta = self.direction > 0 ? _triggers.slice(0, i).reverse() : _triggers.slice(i+1);\n\t\t\treturn (_isString(name) ? a.filter(t => t.vars.preventOverlaps === name) : a).filter(t => self.direction > 0 ? t.end <= start : t.start >= end);\n\t\t};\n\n\n\t\tself.update = (reset, recordVelocity, forceFake) => {\n\t\t\tif (containerAnimation && !forceFake && !reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tlet scroll = _refreshingAll === true ? prevScroll : self.scroll(),\n\t\t\t\tp = reset ? 0 : (scroll - start) / change,\n\t\t\t\tclipped = p < 0 ? 0 : p > 1 ? 1 : p || 0,\n\t\t\t\tprevProgress = self.progress,\n\t\t\t\tisActive, wasActive, toggleState, action, stateChanged, toggled, isAtMax, isTakingAction;\n\t\t\tif (recordVelocity) {\n\t\t\t\tscroll2 = scroll1;\n\t\t\t\tscroll1 = containerAnimation ? scrollFunc() : scroll;\n\t\t\t\tif (snap) {\n\t\t\t\t\tsnap2 = snap1;\n\t\t\t\t\tsnap1 = animation && !isToggle ? animation.totalProgress() : clipped;\n\t\t\t\t}\n\t\t\t}\n\t\t\t// anticipate the pinning a few ticks ahead of time based on velocity to avoid a visual glitch due to the fact that most browsers do scrolling on a separate thread (not synced with requestAnimationFrame).\n\t\t\tif (anticipatePin && pin && !_refreshing && !_startup && _lastScrollTime) {\n\t\t\t\tif (!clipped && start < scroll + ((scroll - scroll2) / (_getTime() - _time2)) * anticipatePin) {\n\t\t\t\t\tclipped = 0.0001;\n\t\t\t\t} else if (clipped === 1 && end > scroll + ((scroll - scroll2) / (_getTime() - _time2)) * anticipatePin) {\n\t\t\t\t\tclipped = 0.9999;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (clipped !== prevProgress && self.enabled) {\n\t\t\t\tisActive = self.isActive = !!clipped && clipped < 1;\n\t\t\t\twasActive = !!prevProgress && prevProgress < 1;\n\t\t\t\ttoggled = isActive !== wasActive;\n\t\t\t\tstateChanged = toggled || !!clipped !== !!prevProgress; // could go from start all the way to end, thus it didn't toggle but it did change state in a sense (may need to fire a callback)\n\t\t\t\tself.direction = clipped > prevProgress ? 1 : -1;\n\t\t\t\tself.progress = clipped;\n\n\t\t\t\tif (stateChanged && !_refreshing) {\n\t\t\t\t\ttoggleState = clipped && !prevProgress ? 0 : clipped === 1 ? 1 : prevProgress === 1 ? 2 : 3; // 0 = enter, 1 = leave, 2 = enterBack, 3 = leaveBack (we prioritize the FIRST encounter, thus if you scroll really fast past the onEnter and onLeave in one tick, it'd prioritize onEnter.\n\t\t\t\t\tif (isToggle) {\n\t\t\t\t\t\taction = (!toggled && toggleActions[toggleState + 1] !== \"none\" && toggleActions[toggleState + 1]) || toggleActions[toggleState]; // if it didn't toggle, that means it shot right past and since we prioritize the \"enter\" action, we should switch to the \"leave\" in this case (but only if one is defined)\n\t\t\t\t\t\tisTakingAction = animation && (action === \"complete\" || action === \"reset\" || action in animation);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tpreventOverlaps && (toggled || isTakingAction) && (isTakingAction || scrub || !animation) && (_isFunction(preventOverlaps) ? preventOverlaps(self) : self.getTrailing(preventOverlaps).forEach(t => t.endAnimation()));\n\n\t\t\t\tif (!isToggle) {\n\t\t\t\t\tif (scrubTween && !_refreshing && !_startup) {\n\t\t\t\t\t\t(scrubTween._dp._time - scrubTween._start !== scrubTween._time) && scrubTween.render(scrubTween._dp._time - scrubTween._start); // if there's a scrub on both the container animation and this one (or a ScrollSmoother), the update order would cause this one not to have rendered yet, so it wouldn't make any progress before we .restart() it heading toward the new progress so it'd appear stuck thus we force a render here.\n\t\t\t\t\t\tif (scrubTween.resetTo) {\n\t\t\t\t\t\t\tscrubTween.resetTo(\"totalProgress\", clipped, animation._tTime / animation._tDur);\n\t\t\t\t\t\t} else { // legacy support (courtesy), before 3.10.0\n\t\t\t\t\t\t\tscrubTween.vars.totalProgress = clipped;\n\t\t\t\t\t\t\tscrubTween.invalidate().restart();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (animation) {\n\t\t\t\t\t\tanimation.totalProgress(clipped, !!(_refreshing && (lastRefresh || reset)));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (pin) {\n\t\t\t\t\treset && pinSpacing && (spacer.style[pinSpacing + direction.os2] = spacingStart);\n\t\t\t\t\tif (!useFixedPosition) {\n\t\t\t\t\t\tpinSetter(_round(pinStart + pinChange * clipped));\n\t\t\t\t\t} else if (stateChanged) {\n\t\t\t\t\t\tisAtMax = !reset && clipped > prevProgress && end + 1 > scroll && scroll + 1 >= _maxScroll(scroller, direction); // if it's at the VERY end of the page, don't switch away from position: fixed because it's pointless and it could cause a brief flash when the user scrolls back up (when it gets pinned again)\n\t\t\t\t\t\tif (pinReparent) {\n\t\t\t\t\t\t\tif (!reset && (isActive || isAtMax)) {\n\t\t\t\t\t\t\t\tlet bounds = _getBounds(pin, true),\n\t\t\t\t\t\t\t\t\toffset = scroll - start;\n\t\t\t\t\t\t\t\t_reparent(pin, _body, (bounds.top + (direction === _vertical ? offset : 0)) + _px, (bounds.left + (direction === _vertical ? 0 : offset)) + _px);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t_reparent(pin, spacer);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_setState(isActive || isAtMax ? pinActiveState : pinState);\n\t\t\t\t\t\t(pinMoves && clipped < 1 && isActive) || pinSetter(pinStart + (clipped === 1 && !isAtMax ? pinChange : 0));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tsnap && !tweenTo.tween && !_refreshing && !_startup && snapDelayedCall.restart(true);\n\t\t\t\ttoggleClass && (toggled || (once && clipped && (clipped < 1 || !_limitCallbacks))) && _toArray(toggleClass.targets).forEach(el => el.classList[isActive || once ? \"add\" : \"remove\"](toggleClass.className)); // classes could affect positioning, so do it even if reset or refreshing is true.\n\t\t\t\tonUpdate && !isToggle && !reset && onUpdate(self);\n\t\t\t\tif (stateChanged && !_refreshing) {\n\t\t\t\t\tif (isToggle) {\n\t\t\t\t\t\tif (isTakingAction) {\n\t\t\t\t\t\t\tif (action === \"complete\") {\n\t\t\t\t\t\t\t\tanimation.pause().totalProgress(1);\n\t\t\t\t\t\t\t} else if (action === \"reset\") {\n\t\t\t\t\t\t\t\tanimation.restart(true).pause();\n\t\t\t\t\t\t\t} else if (action === \"restart\") {\n\t\t\t\t\t\t\t\tanimation.restart(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tanimation[action]();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonUpdate && onUpdate(self);\n\t\t\t\t\t}\n\t\t\t\t\tif (toggled || !_limitCallbacks) { // on startup, the page could be scrolled and we don't want to fire callbacks that didn't toggle. For example onEnter shouldn't fire if the ScrollTrigger isn't actually entered.\n\t\t\t\t\t\tonToggle && toggled && _callback(self, onToggle);\n\t\t\t\t\t\tcallbacks[toggleState] && _callback(self, callbacks[toggleState]);\n\t\t\t\t\t\tonce && (clipped === 1 ? self.kill(false, 1) : (callbacks[toggleState] = 0)); // a callback shouldn't be called again if once is true.\n\t\t\t\t\t\tif (!toggled) { // it's possible to go completely past, like from before the start to after the end (or vice-versa) in which case BOTH callbacks should be fired in that order\n\t\t\t\t\t\t\ttoggleState = clipped === 1 ? 1 : 3;\n\t\t\t\t\t\t\tcallbacks[toggleState] && _callback(self, callbacks[toggleState]);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (fastScrollEnd && !isActive && Math.abs(self.getVelocity()) > (_isNumber(fastScrollEnd) ? fastScrollEnd : 2500)) {\n\t\t\t\t\t\t_endAnimation(self.callbackAnimation);\n\t\t\t\t\t\tscrubTween ? scrubTween.progress(1) : _endAnimation(animation, action === \"reverse\" ? 1 : !clipped, 1);\n\t\t\t\t\t}\n\t\t\t\t} else if (isToggle && onUpdate && !_refreshing) {\n\t\t\t\t\tonUpdate(self);\n\t\t\t\t}\n\t\t\t}\n\t\t\t// update absolutely-positioned markers (only if the scroller isn't the viewport)\n\t\t\tif (markerEndSetter) {\n\t\t\t\tlet n = containerAnimation ? scroll / containerAnimation.duration() * (containerAnimation._caScrollDist || 0) : scroll;\n\t\t\t\tmarkerStartSetter(n + (markerStartTrigger._isFlipped ? 1 : 0));\n\t\t\t\tmarkerEndSetter(n);\n\t\t\t}\n\t\t\tcaMarkerSetter && caMarkerSetter(-scroll / containerAnimation.duration() * (containerAnimation._caScrollDist || 0));\n\t\t};\n\n\t\tself.enable = (reset, refresh) => {\n\t\t\tif (!self.enabled) {\n\t\t\t\tself.enabled = true;\n\t\t\t\t_addListener(scroller, \"resize\", _onResize);\n\t\t\t\tisViewport || _addListener(scroller, \"scroll\", _onScroll);\n\t\t\t\tonRefreshInit && _addListener(ScrollTrigger, \"refreshInit\", onRefreshInit);\n\t\t\t\tif (reset !== false) {\n\t\t\t\t\tself.progress = prevProgress = 0;\n\t\t\t\t\tscroll1 = scroll2 = lastSnap = scrollFunc();\n\t\t\t\t}\n\t\t\t\trefresh !== false && self.refresh();\n\t\t\t}\n\t\t};\n\n\t\tself.getTween = snap => snap && tweenTo ? tweenTo.tween : scrubTween;\n\n\t\tself.setPositions = (newStart, newEnd, keepClamp, pinOffset) => { // doesn't persist after refresh()! Intended to be a way to override values that were set during refresh(), like you could set it in onRefresh()\n\t\t\tif (containerAnimation) { // convert ratios into scroll positions. Remember, start/end values on ScrollTriggers that have a containerAnimation refer to the time (in seconds), NOT scroll positions.\n\t\t\t\tlet st = containerAnimation.scrollTrigger,\n\t\t\t\t\tduration = containerAnimation.duration(),\n\t\t\t\t\tchange = st.end - st.start;\n\t\t\t\tnewStart = st.start + change * newStart / duration;\n\t\t\t\tnewEnd = st.start + change * newEnd / duration;\n\t\t\t}\n\t\t\tself.refresh(false, false, {start: _keepClamp(newStart, keepClamp && !!self._startClamp), end: _keepClamp(newEnd, keepClamp && !!self._endClamp)}, pinOffset);\n\t\t\tself.update();\n\t\t};\n\n\t\tself.adjustPinSpacing = amount => {\n\t\t\tif (spacerState && amount) {\n\t\t\t\tlet i = spacerState.indexOf(direction.d) + 1;\n\t\t\t\tspacerState[i] = (parseFloat(spacerState[i]) + amount) + _px;\n\t\t\t\tspacerState[1] = (parseFloat(spacerState[1]) + amount) + _px;\n\t\t\t\t_setState(spacerState);\n\t\t\t}\n\t\t};\n\n\t\tself.disable = (reset, allowAnimation) => {\n\t\t\tif (self.enabled) {\n\t\t\t\treset !== false && self.revert(true, true);\n\t\t\t\tself.enabled = self.isActive = false;\n\t\t\t\tallowAnimation || (scrubTween && scrubTween.pause());\n\t\t\t\tprevScroll = 0;\n\t\t\t\tpinCache && (pinCache.uncache = 1);\n\t\t\t\tonRefreshInit && _removeListener(ScrollTrigger, \"refreshInit\", onRefreshInit);\n\t\t\t\tif (snapDelayedCall) {\n\t\t\t\t\tsnapDelayedCall.pause();\n\t\t\t\t\ttweenTo.tween && tweenTo.tween.kill() && (tweenTo.tween = 0);\n\t\t\t\t}\n\t\t\t\tif (!isViewport) {\n\t\t\t\t\tlet i = _triggers.length;\n\t\t\t\t\twhile (i--) {\n\t\t\t\t\t\tif (_triggers[i].scroller === scroller && _triggers[i] !== self) {\n\t\t\t\t\t\t\treturn; //don't remove the listeners if there are still other triggers referencing it.\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t_removeListener(scroller, \"resize\", _onResize);\n\t\t\t\t\tisViewport || _removeListener(scroller, \"scroll\", _onScroll);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tself.kill = (revert, allowAnimation) => {\n\t\t\tself.disable(revert, allowAnimation);\n\t\t\tscrubTween && !allowAnimation && scrubTween.kill();\n\t\t\tid && (delete _ids[id]);\n\t\t\tlet i = _triggers.indexOf(self);\n\t\t\ti >= 0 && _triggers.splice(i, 1);\n\t\t\ti === _i && _direction > 0 && _i--; // if we're in the middle of a refresh() or update(), splicing would cause skips in the index, so adjust...\n\n\t\t\t// if no other ScrollTrigger instances of the same scroller are found, wipe out any recorded scroll position. Otherwise, in a single page application, for example, it could maintain scroll position when it really shouldn't.\n\t\t\ti = 0;\n\t\t\t_triggers.forEach(t => t.scroller === self.scroller && (i = 1));\n\t\t\ti || _refreshingAll || (self.scroll.rec = 0);\n\n\t\t\tif (animation) {\n\t\t\t\tanimation.scrollTrigger = null;\n\t\t\t\trevert && animation.revert({kill: false});\n\t\t\t\tallowAnimation || animation.kill();\n\t\t\t}\n\t\t\tmarkerStart && [markerStart, markerEnd, markerStartTrigger, markerEndTrigger].forEach(m => m.parentNode && m.parentNode.removeChild(m));\n\t\t\t_primary === self && (_primary = 0);\n\t\t\tif (pin) {\n\t\t\t\tpinCache && (pinCache.uncache = 1);\n\t\t\t\ti = 0;\n\t\t\t\t_triggers.forEach(t => t.pin === pin && i++);\n\t\t\t\ti || (pinCache.spacer = 0); // if there aren't any more ScrollTriggers with the same pin, remove the spacer, otherwise it could be contaminated with old/stale values if the user re-creates a ScrollTrigger for the same element.\n\t\t\t}\n\t\t\tvars.onKill && vars.onKill(self);\n\t\t};\n\n\t\t_triggers.push(self);\n\t\tself.enable(false, false);\n\t\tcustomRevertReturn && customRevertReturn(self);\n\n\t\tif (animation && animation.add && !change) { // if the animation is a timeline, it may not have been populated yet, so it wouldn't render at the proper place on the first refresh(), thus we should schedule one for the next tick. If \"change\" is defined, we know it must be re-enabling, thus we can refresh() right away.\n\t\t\tlet updateFunc = self.update; // some browsers may fire a scroll event BEFORE a tick elapses and/or the DOMContentLoaded fires. So there's a chance update() will be called BEFORE a refresh() has happened on a Timeline-attached ScrollTrigger which means the start/end won't be calculated yet. We don't want to add conditional logic inside the update() method (like check to see if end is defined and if not, force a refresh()) because that's a function that gets hit a LOT (performance). So we swap out the real update() method for this one that'll re-attach it the first time it gets called and of course forces a refresh().\n\t\t\tself.update = () => {\n\t\t\t\tself.update = updateFunc;\n\t\t\t\t_scrollers.cache++; // otherwise a cached scroll position may get used in the refresh() in a very rare scenario, like if ScrollTriggers are created inside a DOMContentLoaded event and the queued requestAnimationFrame() fires beforehand. See https://gsap.com/community/forums/topic/41267-scrolltrigger-breaks-on-refresh-when-using-domcontentloaded/\n\t\t\t\tstart || end || self.refresh();\n\t\t\t};\n\t\t\tgsap.delayedCall(0.01, self.update);\n\t\t\tchange = 0.01;\n\t\t\tstart = end = 0;\n\t\t} else {\n\t\t\tself.refresh();\n\t\t}\n\t\tpin && _queueRefreshAll(); // pinning could affect the positions of other things, so make sure we queue a full refresh()\n\t}\n\n\n\tstatic register(core) {\n\t\tif (!_coreInitted) {\n\t\t\tgsap = core || _getGSAP();\n\t\t\t_windowExists() && window.document && ScrollTrigger.enable();\n\t\t\t_coreInitted = _enabled;\n\t\t}\n\t\treturn _coreInitted;\n\t}\n\n\tstatic defaults(config) {\n\t\tif (config) {\n\t\t\tfor (let p in config) {\n\t\t\t\t_defaults[p] = config[p];\n\t\t\t}\n\t\t}\n\t\treturn _defaults;\n\t}\n\n\tstatic disable(reset, kill) {\n\t\t_enabled = 0;\n\t\t_triggers.forEach(trigger => trigger[kill ? \"kill\" : \"disable\"](reset));\n\t\t_removeListener(_win, \"wheel\", _onScroll);\n\t\t_removeListener(_doc, \"scroll\", _onScroll);\n\t\tclearInterval(_syncInterval);\n\t\t_removeListener(_doc, \"touchcancel\", _passThrough);\n\t\t_removeListener(_body, \"touchstart\", _passThrough);\n\t\t_multiListener(_removeListener, _doc, \"pointerdown,touchstart,mousedown\", _pointerDownHandler);\n\t\t_multiListener(_removeListener, _doc, \"pointerup,touchend,mouseup\", _pointerUpHandler);\n\t\t_resizeDelay.kill();\n\t\t_iterateAutoRefresh(_removeListener);\n\t\tfor (let i = 0; i < _scrollers.length; i+=3) {\n\t\t\t_wheelListener(_removeListener, _scrollers[i], _scrollers[i+1]);\n\t\t\t_wheelListener(_removeListener, _scrollers[i], _scrollers[i+2]);\n\t\t}\n\t}\n\n\tstatic enable() {\n\t\t_win = window;\n\t\t_doc = document;\n\t\t_docEl = _doc.documentElement;\n\t\t_body = _doc.body;\n\t\tif (gsap) {\n\t\t\t_toArray = gsap.utils.toArray;\n\t\t\t_clamp = gsap.utils.clamp;\n\t\t\t_context = gsap.core.context || _passThrough;\n\t\t\t_suppressOverwrites = gsap.core.suppressOverwrites || _passThrough;\n\t\t\t_scrollRestoration = _win.history.scrollRestoration || \"auto\";\n\t\t\t_lastScroll = _win.pageYOffset || 0;\n\t\t\tgsap.core.globals(\"ScrollTrigger\", ScrollTrigger); // must register the global manually because in Internet Explorer, functions (classes) don't have a \"name\" property.\n\t\t\tif (_body) {\n\t\t\t\t_enabled = 1;\n\t\t\t\t_div100vh = document.createElement(\"div\"); // to solve mobile browser address bar show/hide resizing, we shouldn't rely on window.innerHeight. Instead, use a
with its height set to 100vh and measure that since that's what the scrolling is based on anyway and it's not affected by address bar showing/hiding.\n\t\t\t\t_div100vh.style.height = \"100vh\";\n\t\t\t\t_div100vh.style.position = \"absolute\";\n\t\t\t\t_refresh100vh();\n\t\t\t\t_rafBugFix();\n\t\t\t\tObserver.register(gsap);\n\t\t\t\t// isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.\n\t\t\t\tScrollTrigger.isTouch = Observer.isTouch;\n\t\t\t\t_fixIOSBug = Observer.isTouch && /(iPad|iPhone|iPod|Mac)/g.test(navigator.userAgent); // since 2017, iOS has had a bug that causes event.clientX/Y to be inaccurate when a scroll occurs, thus we must alternate ignoring every other touchmove event to work around it. See https://bugs.webkit.org/show_bug.cgi?id=181954 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503\n\t\t\t\t_ignoreMobileResize = Observer.isTouch === 1;\n\t\t\t\t_addListener(_win, \"wheel\", _onScroll); // mostly for 3rd party smooth scrolling libraries.\n\t\t\t\t_root = [_win, _doc, _docEl, _body];\n\t\t\t\tif (gsap.matchMedia) {\n\t\t\t\t\tScrollTrigger.matchMedia = vars => {\n\t\t\t\t\t\tlet mm = gsap.matchMedia(),\n\t\t\t\t\t\t\tp;\n\t\t\t\t\t\tfor (p in vars) {\n\t\t\t\t\t\t\tmm.add(p, vars[p]);\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn mm;\n\t\t\t\t\t};\n\t\t\t\t\tgsap.addEventListener(\"matchMediaInit\", () => _revertAll());\n\t\t\t\t\tgsap.addEventListener(\"matchMediaRevert\", () => _revertRecorded());\n\t\t\t\t\tgsap.addEventListener(\"matchMedia\", () => {\n\t\t\t\t\t\t_refreshAll(0, 1);\n\t\t\t\t\t\t_dispatch(\"matchMedia\");\n\t\t\t\t\t});\n\t\t\t\t\tgsap.matchMedia().add(\"(orientation: portrait)\", () => { // when orientation changes, we should take new base measurements for the ignoreMobileResize feature.\n\t\t\t\t\t\t_setBaseDimensions();\n\t\t\t\t\t\treturn _setBaseDimensions;\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tconsole.warn(\"Requires GSAP 3.11.0 or later\");\n\t\t\t\t}\n\t\t\t\t_setBaseDimensions();\n\t\t\t\t_addListener(_doc, \"scroll\", _onScroll); // some browsers (like Chrome), the window stops dispatching scroll events on the window if you scroll really fast, but it's consistent on the document!\n\t\t\t\tlet bodyHasStyle = _body.hasAttribute(\"style\"),\n\t\t\t\t\tbodyStyle = _body.style,\n\t\t\t\t\tborder = bodyStyle.borderTopStyle,\n\t\t\t\t\tAnimationProto = gsap.core.Animation.prototype,\n\t\t\t\t\tbounds, i;\n\t\t\t\tAnimationProto.revert || Object.defineProperty(AnimationProto, \"revert\", { value: function() { return this.time(-0.01, true); }}); // only for backwards compatibility (Animation.revert() was added after 3.10.4)\n\t\t\t\tbodyStyle.borderTopStyle = \"solid\"; // works around an issue where a margin of a child element could throw off the bounds of the _body, making it seem like there's a margin when there actually isn't. The border ensures that the bounds are accurate.\n\t\t\t\tbounds = _getBounds(_body);\n\t\t\t\t_vertical.m = Math.round(bounds.top + _vertical.sc()) || 0; // accommodate the offset of the caused by margins and/or padding\n\t\t\t\t_horizontal.m = Math.round(bounds.left + _horizontal.sc()) || 0;\n\t\t\t\tborder ? (bodyStyle.borderTopStyle = border) : bodyStyle.removeProperty(\"border-top-style\");\n\t\t\t\tif (!bodyHasStyle) { // SSR frameworks like Next.js complain if this attribute gets added.\n\t\t\t\t\t_body.setAttribute(\"style\", \"\"); // it's not enough to just removeAttribute() - we must first set it to empty, otherwise Next.js complains.\n\t\t\t\t\t_body.removeAttribute(\"style\");\n\t\t\t\t}\n\t\t\t\t// TODO: (?) maybe move to leveraging the velocity mechanism in Observer and skip intervals.\n\t\t\t\t_syncInterval = setInterval(_sync, 250);\n\t\t\t\tgsap.delayedCall(0.5, () => _startup = 0);\n\t\t\t\t_addListener(_doc, \"touchcancel\", _passThrough); // some older Android devices intermittently stop dispatching \"touchmove\" events if we don't listen for \"touchcancel\" on the document.\n\t\t\t\t_addListener(_body, \"touchstart\", _passThrough); //works around Safari bug: https://gsap.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/\n\t\t\t\t_multiListener(_addListener, _doc, \"pointerdown,touchstart,mousedown\", _pointerDownHandler);\n\t\t\t\t_multiListener(_addListener, _doc, \"pointerup,touchend,mouseup\", _pointerUpHandler);\n\t\t\t\t_transformProp = gsap.utils.checkPrefix(\"transform\");\n\t\t\t\t_stateProps.push(_transformProp);\n\t\t\t\t_coreInitted = _getTime();\n\t\t\t\t_resizeDelay = gsap.delayedCall(0.2, _refreshAll).pause();\n\t\t\t\t_autoRefresh = [_doc, \"visibilitychange\", () => {\n\t\t\t\t\tlet w = _win.innerWidth,\n\t\t\t\t\t\th = _win.innerHeight;\n\t\t\t\t\tif (_doc.hidden) {\n\t\t\t\t\t\t_prevWidth = w;\n\t\t\t\t\t\t_prevHeight = h;\n\t\t\t\t\t} else if (_prevWidth !== w || _prevHeight !== h) {\n\t\t\t\t\t\t_onResize();\n\t\t\t\t\t}\n\t\t\t\t}, _doc, \"DOMContentLoaded\", _refreshAll, _win, \"load\", _refreshAll, _win, \"resize\", _onResize];\n\t\t\t\t_iterateAutoRefresh(_addListener);\n\t\t\t\t_triggers.forEach(trigger => trigger.enable(0, 1));\n\t\t\t\tfor (i = 0; i < _scrollers.length; i+=3) {\n\t\t\t\t\t_wheelListener(_removeListener, _scrollers[i], _scrollers[i+1]);\n\t\t\t\t\t_wheelListener(_removeListener, _scrollers[i], _scrollers[i+2]);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstatic config(vars) {\n\t\t(\"limitCallbacks\" in vars) && (_limitCallbacks = !!vars.limitCallbacks);\n\t\tlet ms = vars.syncInterval;\n\t\tms && clearInterval(_syncInterval) || ((_syncInterval = ms) && setInterval(_sync, ms));\n\t\t(\"ignoreMobileResize\" in vars) && (_ignoreMobileResize = ScrollTrigger.isTouch === 1 && vars.ignoreMobileResize);\n\t\tif (\"autoRefreshEvents\" in vars) {\n\t\t\t_iterateAutoRefresh(_removeListener) || _iterateAutoRefresh(_addListener, vars.autoRefreshEvents || \"none\");\n\t\t\t_ignoreResize = (vars.autoRefreshEvents + \"\").indexOf(\"resize\") === -1;\n\t\t}\n\t}\n\n\tstatic scrollerProxy(target, vars) {\n\t\tlet t = _getTarget(target),\n\t\t\ti = _scrollers.indexOf(t),\n\t\t\tisViewport = _isViewport(t);\n\t\tif (~i) {\n\t\t\t_scrollers.splice(i, isViewport ? 6 : 2);\n\t\t}\n\t\tif (vars) {\n\t\t\tisViewport ? _proxies.unshift(_win, vars, _body, vars, _docEl, vars) : _proxies.unshift(t, vars);\n\t\t}\n\t}\n\n\tstatic clearMatchMedia(query) {\n\t\t_triggers.forEach(t => t._ctx && t._ctx.query === query && t._ctx.kill(true, true));\n\t}\n\n\tstatic isInViewport(element, ratio, horizontal) {\n\t\tlet bounds = (_isString(element) ? _getTarget(element) : element).getBoundingClientRect(),\n\t\t\toffset = bounds[horizontal ? _width : _height] * ratio || 0;\n\t\treturn horizontal ? bounds.right - offset > 0 && bounds.left + offset < _win.innerWidth : bounds.bottom - offset > 0 && bounds.top + offset < _win.innerHeight;\n\t}\n\n\tstatic positionInViewport(element, referencePoint, horizontal) {\n\t\t_isString(element) && (element = _getTarget(element));\n\t\tlet bounds = element.getBoundingClientRect(),\n\t\t\tsize = bounds[horizontal ? _width : _height],\n\t\t\toffset = referencePoint == null ? size / 2 : ((referencePoint in _keywords) ? _keywords[referencePoint] * size : ~referencePoint.indexOf(\"%\") ? parseFloat(referencePoint) * size / 100 : parseFloat(referencePoint) || 0);\n\t\treturn horizontal ? (bounds.left + offset) / _win.innerWidth : (bounds.top + offset) / _win.innerHeight;\n\t}\n\n\tstatic killAll(allowListeners) {\n\t\t_triggers.slice(0).forEach(t => t.vars.id !== \"ScrollSmoother\" && t.kill());\n\t\tif (allowListeners !== true) {\n\t\t\tlet listeners = _listeners.killAll || [];\n\t\t\t_listeners = {};\n\t\t\tlisteners.forEach(f => f());\n\t\t}\n\t}\n\n}\n\nScrollTrigger.version = \"3.12.7\";\nScrollTrigger.saveStyles = targets => targets ? _toArray(targets).forEach(target => { // saved styles are recorded in a consecutive alternating Array, like [element, cssText, transform attribute, cache, matchMedia, ...]\n\tif (target && target.style) {\n\t\tlet i = _savedStyles.indexOf(target);\n\t\ti >= 0 && _savedStyles.splice(i, 5);\n\t\t_savedStyles.push(target, target.style.cssText, target.getBBox && target.getAttribute(\"transform\"), gsap.core.getCache(target), _context());\n\t}\n}) : _savedStyles;\nScrollTrigger.revert = (soft, media) => _revertAll(!soft, media);\nScrollTrigger.create = (vars, animation) => new ScrollTrigger(vars, animation);\nScrollTrigger.refresh = safe => safe ? _onResize(true) : (_coreInitted || ScrollTrigger.register()) && _refreshAll(true);\nScrollTrigger.update = force => ++_scrollers.cache && _updateAll(force === true ? 2 : 0);\nScrollTrigger.clearScrollMemory = _clearScrollMemory;\nScrollTrigger.maxScroll = (element, horizontal) => _maxScroll(element, horizontal ? _horizontal : _vertical);\nScrollTrigger.getScrollFunc = (element, horizontal) => _getScrollFunc(_getTarget(element), horizontal ? _horizontal : _vertical);\nScrollTrigger.getById = id => _ids[id];\nScrollTrigger.getAll = () => _triggers.filter(t => t.vars.id !== \"ScrollSmoother\"); // it's common for people to ScrollTrigger.getAll(t => t.kill()) on page routes, for example, and we don't want it to ruin smooth scrolling by killing the main ScrollSmoother one.\nScrollTrigger.isScrolling = () => !!_lastScrollTime;\nScrollTrigger.snapDirectional = _snapDirectional;\nScrollTrigger.addEventListener = (type, callback) => {\n\tlet a = _listeners[type] || (_listeners[type] = []);\n\t~a.indexOf(callback) || a.push(callback);\n};\nScrollTrigger.removeEventListener = (type, callback) => {\n\tlet a = _listeners[type],\n\t\ti = a && a.indexOf(callback);\n\ti >= 0 && a.splice(i, 1);\n};\nScrollTrigger.batch = (targets, vars) => {\n\tlet result = [],\n\t\tvarsCopy = {},\n\t\tinterval = vars.interval || 0.016,\n\t\tbatchMax = vars.batchMax || 1e9,\n\t\tproxyCallback = (type, callback) => {\n\t\t\tlet elements = [],\n\t\t\t\ttriggers = [],\n\t\t\t\tdelay = gsap.delayedCall(interval, () => {callback(elements, triggers); elements = []; triggers = [];}).pause();\n\t\t\treturn self => {\n\t\t\t\telements.length || delay.restart(true);\n\t\t\t\telements.push(self.trigger);\n\t\t\t\ttriggers.push(self);\n\t\t\t\tbatchMax <= elements.length && delay.progress(1);\n\t\t\t};\n\t\t},\n\t\tp;\n\tfor (p in vars) {\n\t\tvarsCopy[p] = (p.substr(0, 2) === \"on\" && _isFunction(vars[p]) && p !== \"onRefreshInit\") ? proxyCallback(p, vars[p]) : vars[p];\n\t}\n\tif (_isFunction(batchMax)) {\n\t\tbatchMax = batchMax();\n\t\t_addListener(ScrollTrigger, \"refresh\", () => batchMax = vars.batchMax());\n\t}\n\t_toArray(targets).forEach(target => {\n\t\tlet config = {};\n\t\tfor (p in varsCopy) {\n\t\t\tconfig[p] = varsCopy[p];\n\t\t}\n\t\tconfig.trigger = target;\n\t\tresult.push(ScrollTrigger.create(config));\n\t});\n\treturn result;\n}\n\n\n// to reduce file size. clamps the scroll and also returns a duration multiplier so that if the scroll gets chopped shorter, the duration gets curtailed as well (otherwise if you're very close to the top of the page, for example, and swipe up really fast, it'll suddenly slow down and take a long time to reach the top).\nlet _clampScrollAndGetDurationMultiplier = (scrollFunc, current, end, max) => {\n\t\tcurrent > max ? scrollFunc(max) : current < 0 && scrollFunc(0);\n\t\treturn end > max ? (max - current) / (end - current) : end < 0 ? current / (current - end) : 1;\n\t},\n\t_allowNativePanning = (target, direction) => {\n\t\tif (direction === true) {\n\t\t\ttarget.style.removeProperty(\"touch-action\");\n\t\t} else {\n\t\t\ttarget.style.touchAction = direction === true ? \"auto\" : direction ? \"pan-\" + direction + (Observer.isTouch ? \" pinch-zoom\" : \"\") : \"none\"; // note: Firefox doesn't support it pinch-zoom properly, at least in addition to a pan-x or pan-y.\n\t\t}\n\t\ttarget === _docEl && _allowNativePanning(_body, direction);\n\t},\n\t_overflow = {auto: 1, scroll: 1},\n\t_nestedScroll = ({event, target, axis}) => {\n\t\tlet node = (event.changedTouches ? event.changedTouches[0] : event).target,\n\t\t\tcache = node._gsap || gsap.core.getCache(node),\n\t\t\ttime = _getTime(), cs;\n\t\tif (!cache._isScrollT || time - cache._isScrollT > 2000) { // cache for 2 seconds to improve performance.\n\t\t\twhile (node && node !== _body && ((node.scrollHeight <= node.clientHeight && node.scrollWidth <= node.clientWidth) || !(_overflow[(cs = _getComputedStyle(node)).overflowY] || _overflow[cs.overflowX]))) node = node.parentNode;\n\t\t\tcache._isScroll = node && node !== target && !_isViewport(node) && (_overflow[(cs = _getComputedStyle(node)).overflowY] || _overflow[cs.overflowX]);\n\t\t\tcache._isScrollT = time;\n\t\t}\n\t\tif (cache._isScroll || axis === \"x\") {\n\t\t\tevent.stopPropagation();\n\t\t\tevent._gsapAllow = true;\n\t\t}\n\t},\n\t// capture events on scrollable elements INSIDE the and allow those by calling stopPropagation() when we find a scrollable ancestor\n\t_inputObserver = (target, type, inputs, nested) => Observer.create({\n\t\ttarget: target,\n\t\tcapture: true,\n\t\tdebounce: false,\n\t\tlockAxis: true,\n\t\ttype: type,\n\t\tonWheel: (nested = nested && _nestedScroll),\n\t\tonPress: nested,\n\t\tonDrag: nested,\n\t\tonScroll: nested,\n\t\tonEnable: () => inputs && _addListener(_doc, Observer.eventTypes[0], _captureInputs, false, true),\n\t\tonDisable: () => _removeListener(_doc, Observer.eventTypes[0], _captureInputs, true)\n\t}),\n\t_inputExp = /(input|label|select|textarea)/i,\n\t_inputIsFocused,\n\t_captureInputs = e => {\n\t\tlet isInput = _inputExp.test(e.target.tagName);\n\t\tif (isInput || _inputIsFocused) {\n\t\t\te._gsapAllow = true;\n\t\t\t_inputIsFocused = isInput;\n\t\t}\n\t},\n\t_getScrollNormalizer = vars => {\n\t\t_isObject(vars) || (vars = {});\n\t\tvars.preventDefault = vars.isNormalizer = vars.allowClicks = true;\n\t\tvars.type || (vars.type = \"wheel,touch\");\n\t\tvars.debounce = !!vars.debounce;\n\t\tvars.id = vars.id || \"normalizer\";\n\t\tlet {normalizeScrollX, momentum, allowNestedScroll, onRelease} = vars,\n\t\t\tself, maxY,\n\t\t\ttarget = _getTarget(vars.target) || _docEl,\n\t\t\tsmoother = gsap.core.globals().ScrollSmoother,\n\t\t\tsmootherInstance = smoother && smoother.get(),\n\t\t\tcontent = _fixIOSBug && ((vars.content && _getTarget(vars.content)) || (smootherInstance && vars.content !== false && !smootherInstance.smooth() && smootherInstance.content())),\n\t\t\tscrollFuncY = _getScrollFunc(target, _vertical),\n\t\t\tscrollFuncX = _getScrollFunc(target, _horizontal),\n\t\t\tscale = 1,\n\t\t\tinitialScale = (Observer.isTouch && _win.visualViewport ? _win.visualViewport.scale * _win.visualViewport.width : _win.outerWidth) / _win.innerWidth,\n\t\t\twheelRefresh = 0,\n\t\t\tresolveMomentumDuration = _isFunction(momentum) ? () => momentum(self) : () => momentum || 2.8,\n\t\t\tlastRefreshID, skipTouchMove,\n\t\t\tinputObserver = _inputObserver(target, vars.type, true, allowNestedScroll),\n\t\t\tresumeTouchMove = () => skipTouchMove = false,\n\t\t\tscrollClampX = _passThrough,\n\t\t\tscrollClampY = _passThrough,\n\t\t\tupdateClamps = () => {\n\t\t\t\tmaxY = _maxScroll(target, _vertical);\n\t\t\t\tscrollClampY = _clamp(_fixIOSBug ? 1 : 0, maxY);\n\t\t\t\tnormalizeScrollX && (scrollClampX = _clamp(0, _maxScroll(target, _horizontal)));\n\t\t\t\tlastRefreshID = _refreshID;\n\t\t\t},\n\t\t\tremoveContentOffset = () => {\n\t\t\t\tcontent._gsap.y = _round(parseFloat(content._gsap.y) + scrollFuncY.offset) + \"px\";\n\t\t\t\tcontent.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, \" + parseFloat(content._gsap.y) + \", 0, 1)\";\n\t\t\t\tscrollFuncY.offset = scrollFuncY.cacheID = 0;\n\t\t\t},\n\t\t\tignoreDrag = () => {\n\t\t\t\tif (skipTouchMove) {\n\t\t\t\t\trequestAnimationFrame(resumeTouchMove);\n\t\t\t\t\tlet offset = _round(self.deltaY / 2),\n\t\t\t\t\t\tscroll = scrollClampY(scrollFuncY.v - offset);\n\t\t\t\t\tif (content && scroll !== scrollFuncY.v + scrollFuncY.offset) {\n\t\t\t\t\t\tscrollFuncY.offset = scroll - scrollFuncY.v;\n\t\t\t\t\t\tlet y = _round((parseFloat(content && content._gsap.y) || 0) - scrollFuncY.offset);\n\t\t\t\t\t\tcontent.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, \" + y + \", 0, 1)\";\n\t\t\t\t\t\tcontent._gsap.y = y + \"px\";\n\t\t\t\t\t\tscrollFuncY.cacheID = _scrollers.cache;\n\t\t\t\t\t\t_updateAll();\n\t\t\t\t\t}\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tscrollFuncY.offset && removeContentOffset();\n\t\t\t\tskipTouchMove = true;\n\t\t\t},\n\t\t\ttween, startScrollX, startScrollY, onStopDelayedCall,\n\t\t\tonResize = () => { // if the window resizes, like on an iPhone which Apple FORCES the address bar to show/hide even if we event.preventDefault(), it may be scrolling too far now that the address bar is showing, so we must dynamically adjust the momentum tween.\n\t\t\t\tupdateClamps();\n\t\t\t\tif (tween.isActive() && tween.vars.scrollY > maxY) {\n\t\t\t\t\tscrollFuncY() > maxY ? tween.progress(1) && scrollFuncY(maxY) : tween.resetTo(\"scrollY\", maxY);\n\t\t\t\t}\n\t\t\t};\n\t\tcontent && gsap.set(content, {y: \"+=0\"}); // to ensure there's a cache (element._gsap)\n\t\tvars.ignoreCheck = e => (_fixIOSBug && e.type === \"touchmove\" && ignoreDrag(e)) || (scale > 1.05 && e.type !== \"touchstart\") || self.isGesturing || (e.touches && e.touches.length > 1);\n\t\tvars.onPress = () => {\n\t\t\tskipTouchMove = false;\n\t\t\tlet prevScale = scale;\n\t\t\tscale = _round(((_win.visualViewport && _win.visualViewport.scale) || 1) / initialScale);\n\t\t\ttween.pause();\n\t\t\tprevScale !== scale && _allowNativePanning(target, scale > 1.01 ? true : normalizeScrollX ? false : \"x\");\n\t\t\tstartScrollX = scrollFuncX();\n\t\t\tstartScrollY = scrollFuncY();\n\t\t\tupdateClamps();\n\t\t\tlastRefreshID = _refreshID;\n\t\t}\n\t\tvars.onRelease = vars.onGestureStart = (self, wasDragging) => {\n\t\t\tscrollFuncY.offset && removeContentOffset();\n\t\t\tif (!wasDragging) {\n\t\t\t\tonStopDelayedCall.restart(true);\n\t\t\t} else {\n\t\t\t\t_scrollers.cache++; // make sure we're pulling the non-cached value\n\t\t\t\t// alternate algorithm: durX = Math.min(6, Math.abs(self.velocityX / 800)),\tdur = Math.max(durX, Math.min(6, Math.abs(self.velocityY / 800))); dur = dur * (0.4 + (1 - _power4In(dur / 6)) * 0.6)) * (momentumSpeed || 1)\n\t\t\t\tlet dur = resolveMomentumDuration(),\n\t\t\t\t\tcurrentScroll, endScroll;\n\t\t\t\tif (normalizeScrollX) {\n\t\t\t\t\tcurrentScroll = scrollFuncX();\n\t\t\t\t\tendScroll = currentScroll + (dur * 0.05 * -self.velocityX) / 0.227; // the constant .227 is from power4(0.05). velocity is inverted because scrolling goes in the opposite direction.\n\t\t\t\t\tdur *= _clampScrollAndGetDurationMultiplier(scrollFuncX, currentScroll, endScroll, _maxScroll(target, _horizontal));\n\t\t\t\t\ttween.vars.scrollX = scrollClampX(endScroll);\n\t\t\t\t}\n\t\t\t\tcurrentScroll = scrollFuncY();\n\t\t\t\tendScroll = currentScroll + (dur * 0.05 * -self.velocityY) / 0.227; // the constant .227 is from power4(0.05)\n\t\t\t\tdur *= _clampScrollAndGetDurationMultiplier(scrollFuncY, currentScroll, endScroll, _maxScroll(target, _vertical));\n\t\t\t\ttween.vars.scrollY = scrollClampY(endScroll);\n\t\t\t\ttween.invalidate().duration(dur).play(0.01);\n\t\t\t\tif (_fixIOSBug && tween.vars.scrollY >= maxY || currentScroll >= maxY-1) { // iOS bug: it'll show the address bar but NOT fire the window \"resize\" event until the animation is done but we must protect against overshoot so we leverage an onUpdate to do so.\n\t\t\t\t\tgsap.to({}, {onUpdate: onResize, duration: dur});\n\t\t\t\t}\n\t\t\t}\n\t\t\tonRelease && onRelease(self);\n\t\t};\n\t\tvars.onWheel = () => {\n\t\t\ttween._ts && tween.pause();\n\t\t\tif (_getTime() - wheelRefresh > 1000) { // after 1 second, refresh the clamps otherwise that'll only happen when ScrollTrigger.refresh() is called or for touch-scrolling.\n\t\t\t\tlastRefreshID = 0;\n\t\t\t\twheelRefresh = _getTime();\n\t\t\t}\n\t\t};\n\t\tvars.onChange = (self, dx, dy, xArray, yArray) => {\n\t\t\t_refreshID !== lastRefreshID && updateClamps();\n\t\t\tdx && normalizeScrollX && scrollFuncX(scrollClampX(xArray[2] === dx ? startScrollX + (self.startX - self.x) : scrollFuncX() + dx - xArray[1])); // for more precision, we track pointer/touch movement from the start, otherwise it'll drift.\n\t\t\tif (dy) {\n\t\t\t\tscrollFuncY.offset && removeContentOffset();\n\t\t\t\tlet isTouch = yArray[2] === dy,\n\t\t\t\t\ty = isTouch ? startScrollY + self.startY - self.y : scrollFuncY() + dy - yArray[1],\n\t\t\t\t\tyClamped = scrollClampY(y);\n\t\t\t\tisTouch && y !== yClamped && (startScrollY += yClamped - y);\n\t\t\t\tscrollFuncY(yClamped);\n\t\t\t}\n\t\t\t(dy || dx) && _updateAll();\n\t\t};\n\t\tvars.onEnable = () => {\n\t\t\t_allowNativePanning(target, normalizeScrollX ? false : \"x\");\n\t\t\tScrollTrigger.addEventListener(\"refresh\", onResize);\n\t\t\t_addListener(_win, \"resize\", onResize);\n\t\t\tif (scrollFuncY.smooth) {\n\t\t\t\tscrollFuncY.target.style.scrollBehavior = \"auto\";\n\t\t\t\tscrollFuncY.smooth = scrollFuncX.smooth = false;\n\t\t\t}\n\t\t\tinputObserver.enable();\n\t\t};\n\t\tvars.onDisable = () => {\n\t\t\t_allowNativePanning(target, true);\n\t\t\t_removeListener(_win, \"resize\", onResize);\n\t\t\tScrollTrigger.removeEventListener(\"refresh\", onResize);\n\t\t\tinputObserver.kill();\n\t\t};\n\t\tvars.lockAxis = vars.lockAxis !== false;\n\t\tself = new Observer(vars);\n\t\tself.iOS = _fixIOSBug; // used in the Observer getCachedScroll() function to work around an iOS bug that wreaks havoc with TouchEvent.clientY if we allow scroll to go all the way back to 0.\n\t\t_fixIOSBug && !scrollFuncY() && scrollFuncY(1); // iOS bug causes event.clientY values to freak out (wildly inaccurate) if the scroll position is exactly 0.\n\t\t_fixIOSBug && gsap.ticker.add(_passThrough); // prevent the ticker from sleeping\n\t\tonStopDelayedCall = self._dc;\n\t\ttween = gsap.to(self, {ease: \"power4\", paused: true, inherit: false, scrollX: normalizeScrollX ? \"+=0.1\" : \"+=0\", scrollY: \"+=0.1\", modifiers: {scrollY: _interruptionTracker(scrollFuncY, scrollFuncY(), () => tween.pause())\t}, onUpdate: _updateAll, onComplete: onStopDelayedCall.vars.onComplete}); // we need the modifier to sense if the scroll position is altered outside of the momentum tween (like with a scrollTo tween) so we can pause() it to prevent conflicts.\n\t\treturn self;\n\t};\n\nScrollTrigger.sort = func => {\n\tif (_isFunction(func)) {\n\t\treturn _triggers.sort(func);\n\t}\n\tlet scroll = _win.pageYOffset || 0;\n\tScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + _win.innerHeight);\n\treturn _triggers.sort(func || ((a, b) => (a.vars.refreshPriority || 0) * -1e6 + (a.vars.containerAnimation ? 1e6 : a._sortY) - ((b.vars.containerAnimation ? 1e6 : b._sortY) + (b.vars.refreshPriority || 0) * -1e6))); // anything with a containerAnimation should refresh last.\n}\nScrollTrigger.observe = vars => new Observer(vars);\nScrollTrigger.normalizeScroll = vars => {\n\tif (typeof(vars) === \"undefined\") {\n\t\treturn _normalizer;\n\t}\n\tif (vars === true && _normalizer) {\n\t\treturn _normalizer.enable();\n\t}\n\tif (vars === false) {\n\t\t_normalizer && _normalizer.kill();\n\t\t_normalizer = vars;\n\t\treturn;\n\t}\n\tlet normalizer = vars instanceof Observer ? vars : _getScrollNormalizer(vars);\n\t_normalizer && _normalizer.target === normalizer.target && _normalizer.kill();\n\t_isViewport(normalizer.target) && (_normalizer = normalizer);\n\treturn normalizer;\n};\n\n\nScrollTrigger.core = { // smaller file size way to leverage in ScrollSmoother and Observer\n\t_getVelocityProp,\n\t_inputObserver,\n\t_scrollers,\n\t_proxies,\n\tbridge: {\n\t\t// when normalizeScroll sets the scroll position (ss = setScroll)\n\t\tss: () => {\n\t\t\t_lastScrollTime || _dispatch(\"scrollStart\");\n\t\t\t_lastScrollTime = _getTime();\n\t\t},\n\t\t// a way to get the _refreshing value in Observer\n\t\tref: () => _refreshing\n\t}\n};\n\n_getGSAP() && gsap.registerPlugin(ScrollTrigger);\n\nexport { ScrollTrigger as default };"],"names":["_getGSAP","gsap","window","registerPlugin","_getProxyProp","element","property","_proxies","indexOf","_isViewport","el","_root","_addListener","type","func","passive","capture","addEventListener","_removeListener","removeEventListener","_onScroll","_normalizer","isPressed","_scrollers","cache","_scrollCacheFunc","f","doNotCache","cachingFunc","value","_startup","_win","history","scrollRestoration","isNormalizing","v","Math","round","iOS","cacheID","_bridge","offset","_getTarget","t","self","_ctx","selector","utils","toArray","config","nullTargetWarn","console","warn","_getScrollFunc","s","sc","_doc","scrollingElement","_docEl","i","_vertical","push","prev","arguments","length","target","smooth","getProperty","_getVelocityProp","minTimeRefresh","useDelta","update","force","_getTime","min","t1","v2","v1","t2","dropToZeroTime","max","reset","getVelocity","latestValue","tOld","vOld","_getEvent","e","preventDefault","_gsapAllow","changedTouches","_getAbsoluteMax","a","abs","_setScrollTrigger","ScrollTrigger","core","globals","_integrate","data","bridge","scrollers","proxies","name","_initCore","_coreInitted","document","body","documentElement","_body","clamp","_context","context","_pointerType","_isTouch","Observer","isTouch","matchMedia","matches","navigator","maxTouchPoints","msMaxTouchPoints","_eventTypes","eventTypes","split","setTimeout","_observers","Date","now","_scrollLeft","_scrollTop","_horizontal","p","p2","os","os2","d","d2","scrollTo","pageXOffset","op","pageYOffset","init","vars","tolerance","dragMinimum","lineHeight","debounce","onStop","onStopDelay","ignore","wheelSpeed","event","onDragStart","onDragEnd","onDrag","onPress","onRelease","onRight","onLeft","onUp","onDown","onChangeX","onChangeY","onChange","onToggleX","onToggleY","onHover","onHoverEnd","onMove","ignoreCheck","isNormalizer","onGestureStart","onGestureEnd","onWheel","onEnable","onDisable","onClick","scrollSpeed","allowClicks","lockAxis","onLockAxis","clickCapture","onClickTime","_ignoreCheck","isPointerOrTouch","limitToTouch","pointerType","dx","deltaX","dy","deltaY","changedX","changedY","prevDeltaX","prevDeltaY","moved","dragged","locked","wheeled","id","onDelta","x","y","index","_vx","_vy","requestAnimationFrame","onTouchOrPointerDelta","axis","_onDrag","clientX","clientY","isDragging","startX","startY","_onGestureStart","touches","isGesturing","_onGestureEnd","onScroll","scrollFuncX","scrollFuncY","scrollX","scrollY","onStopDelayedCall","restart","_onWheel","multiplier","deltaMode","innerHeight","_onMove","_onHover","_onHoverEnd","_onClick","parseFloat","getComputedStyle","this","isViewport","ownerDoc","ownerDocument","_onPress","button","pause","_onRelease","isTrackingDrag","isNaN","wasDragging","isDragNotClick","eventData","delayedCall","defaultPrevented","click","createEvent","syntheticEvent","initMouseEvent","screenX","screenY","dispatchEvent","_dc","onStopFunc","enable","isEnabled","disable","filter","o","kill","revert","splice","version","create","register","getAll","slice","getById","_parseClamp","_isString","substr","_keepClamp","_pointerDownHandler","_pointerIsDown","_pointerUpHandler","_passThrough","_round","_windowExists","_getViewportDimension","dimensionProperty","_100vh","_getBoundsFunc","_winOffsets","width","innerWidth","height","_getBounds","_maxScroll","_iterateAutoRefresh","events","_autoRefresh","_isFunction","_isNumber","_isObject","_endAnimation","animation","reversed","progress","_callback","enabled","result","add","totalTime","callbackAnimation","_getComputedStyle","_setDefaults","obj","defaults","_getSize","_getLabelRatioArray","timeline","labels","duration","_snapDirectional","snapIncrementOrArray","snap","Array","isArray","sort","b","direction","threshold","snapped","_multiListener","types","callback","forEach","nonPassive","_wheelListener","scrollFunc","wheelHandler","_offsetToPx","size","eqIndex","relative","charAt","_keywords","_createMarker","container","matchWidthEl","containerAnimation","startColor","endColor","fontSize","indent","fontWeight","createElement","useFixedPosition","isScroller","parent","isStart","color","css","_right","_bottom","offsetWidth","_isStart","setAttribute","style","cssText","innerText","children","insertBefore","appendChild","_offset","_positionMarker","_sync","_lastScrollTime","_rafID","_updateAll","clientWidth","_dispatch","_setBaseDimensions","_baseScreenWidth","_baseScreenHeight","_onResize","_refreshing","_ignoreResize","fullscreenElement","webkitFullscreenElement","_ignoreMobileResize","_resizeDelay","_softRefresh","_refreshAll","_revertRecorded","media","_savedStyles","query","getBBox","uncache","_revertAll","trigger","_i","_triggers","_isReverted","_clearScrollMemory","_refreshingAll","rec","_scrollRestoration","_refresh100vh","_div100vh","offsetHeight","removeChild","_hideAllMarkers","hide","_toArray","display","_swapPinIn","pin","spacer","cs","spacerState","_gsap","swappedIn","_propNamesToCopy","spacerStyle","pinStyle","position","flexBasis","overflow","boxSizing","_width","_px","_height","_padding","_margin","_setState","parentNode","_getState","l","_stateProps","state","_parsePosition","scrollerSize","scroll","marker","markerScroller","scrollerBounds","borderWidth","scrollerMax","clampZeroProp","p1","time","seek","mapRange","scrollTrigger","start","end","bounds","localOffset","globalOffset","offsets","left","top","removeProperty","m","_caScrollDist","_reparent","_stOrig","_prefixExp","test","getCache","_interruptionTracker","getValueFunc","initialValue","onInterrupt","last1","last2","current","_shiftMarker","set","_getTweenCreator","scroller","getTween","change1","change2","tween","onComplete","modifiers","getScroll","checkForInterruption","prop","inherit","ratio","onUpdate","call","to","_clamp","_time2","_syncInterval","_transformProp","_prevWidth","_prevHeight","_sort","_suppressOverwrites","_fixIOSBug","_clampingMax","_limitCallbacks","_queueRefreshID","_primary","_time1","_enabled","_abs","_Right","_Left","_Top","_Bottom","_Width","_Height","withoutTransforms","xPercent","yPercent","rotation","rotationX","rotationY","scale","skewX","skewY","getBoundingClientRect","_markerDefaults","_defaults","toggleActions","anticipatePin","center","bottom","right","flipped","side","oppositeSide","_isFlipped","_ids","_listeners","_emptyArray","map","_refreshID","skipRevert","isRefreshing","refreshInits","scrollBehavior","refresh","_subPinOffset","horizontal","original","adjustPinSpacing","_dir","endClamp","_endClamp","startClamp","_startClamp","setPositions","render","onRefresh","_lastScroll","_direction","isUpdating","recordVelocity","concat","_capsExp","replace","toLowerCase","tweenTo","pinCache","snapFunc","scroll1","scroll2","markerStart","markerEnd","markerStartTrigger","markerEndTrigger","markerVars","executingOnRefresh","change","pinOriginalState","pinActiveState","pinState","pinGetter","pinSetter","pinStart","pinChange","spacingStart","markerStartSetter","pinMoves","markerEndSetter","snap1","snap2","scrubTween","scrubSmooth","snapDurClamp","snapDelayedCall","prevScroll","prevAnimProgress","caMarkerSetter","customRevertReturn","nodeType","toggleClass","onToggle","scrub","pinSpacing","invalidateOnRefresh","onScrubComplete","onSnapComplete","once","pinReparent","pinSpacer","fastScrollEnd","preventOverlaps","isToggle","scrollerCache","pinType","callbacks","onEnter","onLeave","onEnterBack","onLeaveBack","markers","onRefreshInit","getScrollerSize","_getSizeFunc","getScrollerOffsets","_getOffsetsFunc","lastSnap","lastRefresh","prevProgress","bind","refreshPriority","tweenScroll","scrubDuration","ease","totalProgress","paused","lazy","_initted","isReverted","immediateRender","snapTo","_getClosestLabel","_getLabelAtDirection","st","directional","delay","refreshedRecently","isActive","endValue","endScroll","velocity","naturalEnd","inertia","onStart","resetTo","_tTime","_tDur","stRevert","targets","className","nativeElement","spacerIsNative","classList","force3D","quickSetter","content","_makePositionable","oldOnUpdate","oldParams","onUpdateParams","eventCallback","apply","previous","next","temp","r","prevRefreshing","_swapPinOut","soft","pinOffset","invalidate","isVertical","override","curTrigger","curPin","oppositeScroll","initted","revertedPins","forcedOverflow","markerStartOffset","markerEndOffset","isFirstRefresh","otherPinOffset","parsedEnd","parsedEndTrigger","endTrigger","parsedStart","pinnedContainer","triggerIndex","unshift","_pinPush","normalize","_pinOffset","toUpperCase","ceil","_copyState","omitOffsets","endAnimation","labelToScroll","label","getTrailing","reverse","forceFake","toggleState","action","stateChanged","toggled","isAtMax","isTakingAction","clipped","_dp","_time","_start","n","newStart","newEnd","keepClamp","amount","allowAnimation","onKill","updateFunc","_queueRefreshAll","clearInterval","suppressOverwrites","_rafBugFix","userAgent","mm","bodyHasStyle","hasAttribute","bodyStyle","border","borderTopStyle","AnimationProto","Animation","prototype","Object","defineProperty","removeAttribute","setInterval","checkPrefix","w","h","hidden","limitCallbacks","ms","syncInterval","ignoreMobileResize","autoRefreshEvents","scrollerProxy","clearMatchMedia","isInViewport","positionInViewport","referencePoint","killAll","allowListeners","listeners","saveStyles","getAttribute","safe","clearScrollMemory","maxScroll","getScrollFunc","isScrolling","snapDirectional","batch","proxyCallback","elements","triggers","interval","batchMax","varsCopy","_clampScrollAndGetDurationMultiplier","_allowNativePanning","touchAction","_nestedScroll","node","_isScrollT","scrollHeight","clientHeight","scrollWidth","_overflow","overflowY","overflowX","_isScroll","stopPropagation","_inputObserver","inputs","nested","_captureInputs","_getScrollNormalizer","resumeTouchMove","skipTouchMove","updateClamps","maxY","scrollClampY","normalizeScrollX","scrollClampX","lastRefreshID","removeContentOffset","transform","onResize","startScrollX","startScrollY","momentum","allowNestedScroll","smoother","ScrollSmoother","smootherInstance","get","initialScale","visualViewport","outerWidth","wheelRefresh","resolveMomentumDuration","inputObserver","ignoreDrag","prevScale","currentScroll","dur","velocityX","velocityY","play","_ts","xArray","yArray","yClamped","ticker","_inputIsFocused","auto","_inputExp","isInput","tagName","_sortY","observe","normalizeScroll","normalizer","ss","ref"],"mappings":";;;;;;;;;mYAYY,SAAXA,WAAiBC,IAA4B,oBAAZC,SAA4BD,GAAOC,OAAOD,OAASA,GAAKE,gBAAkBF,GAkB3F,SAAhBG,EAAiBC,EAASC,UAAcC,GAASC,QAAQH,IAAYE,GAASA,GAASC,QAAQH,GAAW,GAAGC,GAC/F,SAAdG,EAAcC,YAASC,EAAMH,QAAQE,GACtB,SAAfE,EAAgBP,EAASQ,EAAMC,EAAMC,EAASC,UAAYX,EAAQY,iBAAiBJ,EAAMC,EAAM,CAACC,SAAqB,IAAZA,EAAmBC,UAAWA,IACrH,SAAlBE,EAAmBb,EAASQ,EAAMC,EAAME,UAAYX,EAAQc,oBAAoBN,EAAMC,IAAQE,GAGlF,SAAZI,WAAmBC,IAAeA,GAAYC,WAAcC,GAAWC,QACpD,SAAnBC,EAAoBC,EAAGC,GACJ,SAAdC,GAAcC,MACbA,GAAmB,IAAVA,EAAa,CACzBC,IAAaC,GAAKC,QAAQC,kBAAoB,cAC1CC,EAAgBb,IAAeA,GAAYC,UAC/CO,EAAQD,GAAYO,EAAIC,KAAKC,MAAMR,KAAWR,IAAeA,GAAYiB,IAAM,EAAI,GACnFZ,EAAEG,GACFD,GAAYW,QAAUhB,GAAWC,MACjCU,GAAiBM,EAAQ,KAAMX,QACrBF,GAAcJ,GAAWC,QAAUI,GAAYW,SAAWC,EAAQ,UAC5EZ,GAAYW,QAAUhB,GAAWC,MACjCI,GAAYO,EAAIT,YAEVE,GAAYO,EAAIP,GAAYa,cAEpCb,GAAYa,OAAS,EACdf,GAAKE,GAIA,SAAbc,EAAcC,EAAGC,UAAWA,GAAQA,EAAKC,MAAQD,EAAKC,KAAKC,UAAa7C,GAAK8C,MAAMC,SAASL,GAAG,KAAqB,iBAAPA,IAAoD,IAAjC1C,GAAKgD,SAASC,eAA2BC,QAAQC,KAAK,qBAAsBT,GAAK,MAEhM,SAAjBU,EAAkBhD,SAAUiD,IAAAA,EAAGC,IAAAA,GAC9B9C,EAAYJ,KAAaA,EAAUmD,GAAKC,kBAAoBC,QACxDC,EAAIpC,GAAWf,QAAQH,GAC1BoC,EAASc,IAAOK,GAAUL,GAAK,EAAI,GAClCI,IAAMA,EAAIpC,GAAWsC,KAAKxD,GAAW,GACvCkB,GAAWoC,EAAIlB,IAAW7B,EAAaP,EAAS,SAAUe,OACtD0C,EAAOvC,GAAWoC,EAAIlB,GACzB3B,EAAOgD,IAASvC,GAAWoC,EAAIlB,GAAUhB,EAAiBrB,EAAcC,EAASiD,IAAI,KAAU7C,EAAYJ,GAAWkD,EAAK9B,EAAiB,SAASI,UAAgBkC,UAAUC,OAAU3D,EAAQiD,GAAKzB,EAASxB,EAAQiD,cACxNxC,EAAKmD,OAAS5D,EACdyD,IAAShD,EAAKoD,OAAyD,WAAhDjE,GAAKkE,YAAY9D,EAAS,mBAC1CS,EAEW,SAAnBsD,EAAoBvC,EAAOwC,EAAgBC,GAOhC,SAATC,GAAU1C,EAAO2C,OACZ7B,EAAI8B,KACJD,GAAkBE,EAAT/B,EAAIgC,GAChBC,EAAKC,EACLA,EAAKhD,EACLiD,EAAKH,EACLA,EAAKhC,GACK2B,EACVO,GAAMhD,EAENgD,EAAKD,GAAM/C,EAAQ+C,IAAOjC,EAAImC,IAAOH,EAAKG,OAhBzCD,EAAKhD,EACR+C,EAAK/C,EACL8C,EAAKF,KACLK,EAAKH,EACLD,EAAML,GAAkB,GACxBU,EAAiB3C,KAAK4C,IAAI,IAAW,EAANN,SAsBzB,CAACH,OAAAA,GAAQU,MARP,SAARA,QAAgBL,EAAKC,EAAKP,EAAW,EAAIO,EAAIC,EAAKH,EAAK,GAQjCO,YAPR,SAAdA,YAAcC,OACTC,EAAON,EACVO,EAAOT,EACPjC,EAAI8B,YACJU,GAA+B,IAAhBA,GAAsBA,IAAgBN,GAAMN,GAAOY,GAC3DR,IAAOG,GAAeC,EAATpC,EAAImC,EAAuB,GAAKD,GAAMP,EAAWe,GAAQA,MAAWf,EAAW3B,EAAIgC,GAAMS,GAAQ,MAI7G,SAAZE,EAAaC,EAAGC,UACfA,IAAmBD,EAAEE,YAAcF,EAAEC,iBAC9BD,EAAEG,eAAiBH,EAAEG,eAAe,GAAKH,EAE/B,SAAlBI,EAAkBC,OACbZ,EAAM5C,KAAK4C,UAAL5C,KAAYwD,GACrBlB,EAAMtC,KAAKsC,UAALtC,KAAYwD,UACZxD,KAAKyD,IAAIb,IAAQ5C,KAAKyD,IAAInB,GAAOM,EAAMN,EAE3B,SAApBoB,KACCC,GAAgB9F,GAAK+F,KAAKC,UAAUF,gBACnBA,GAAcC,MA7FnB,SAAbE,iBACKF,EAAOD,GAAcC,KACxBG,EAAOH,EAAKI,QAAU,GACtBC,EAAYL,EAAKzE,WACjB+E,EAAUN,EAAKzF,SAChB8F,EAAUxC,WAAVwC,EAAkB9E,IAClB+E,EAAQzC,WAARyC,EAAgB/F,IAChBgB,GAAa8E,EACb9F,GAAW+F,EACX9D,EAAU,iBAAC+D,EAAM1E,UAAUsE,EAAKI,GAAM1E,IAoFCqE,GAE5B,SAAZM,EAAYR,UACX/F,GAAO+F,GAAQhG,KACVyG,IAAgBxG,IAA6B,oBAAdyG,UAA6BA,SAASC,OACzE5E,GAAO7B,OAEPwD,IADAF,GAAOkD,UACOE,gBACdC,GAAQrD,GAAKmD,KACbhG,EAAQ,CAACoB,GAAMyB,GAAME,GAAQmD,IACpB5G,GAAK8C,MAAM+D,MACpBC,GAAW9G,GAAK+F,KAAKgB,SAAW,aAChCC,GAAe,mBAAoBJ,GAAQ,UAAY,QAEvDK,GAAWC,EAASC,QAAUrF,GAAKsF,YAActF,GAAKsF,WAAW,oCAAoCC,QAAU,EAAK,iBAAkBvF,IAAmC,EAA3BwF,UAAUC,gBAAmD,EAA7BD,UAAUE,iBAAwB,EAAI,EACpNC,GAAcP,EAASQ,YAAc,iBAAkBjE,GAAS,4CAAgD,kBAAmBA,GAAkD,kDAAxC,uCAA2FkE,MAAM,KAC9OC,WAAW,kBAAM/F,EAAW,GAAG,KAC/BgE,IACAW,GAAe,GAETA,GAzHT,IAAIxG,GAAMwG,GAAsB1E,GAAMyB,GAAME,GAAQmD,GAAOK,GAAUD,GAAclB,GAAepF,EAAOU,GAAaqG,GAAaX,GAElIjF,EAAW,EACXgG,GAAa,GACbvG,GAAa,GACbhB,GAAW,GACXkE,GAAWsD,KAAKC,IAChBxF,EAAU,iBAAC+D,EAAM1E,UAAUA,GAgB3BoG,EAAc,aACdC,EAAa,YAoBbC,GAAc,CAAC7E,EAAG2E,EAAaG,EAAG,OAAQC,GAAI,OAAQC,GAAI,QAASC,IAAK,QAASC,EAAG,QAASC,GAAI,QAAS7C,EAAG,IAAKrC,GAAI9B,EAAiB,SAASI,UAAgBkC,UAAUC,OAASjC,GAAK2G,SAAS7G,EAAO+B,GAAUL,MAAQxB,GAAK4G,aAAenF,GAAKyE,IAAgBvE,GAAOuE,IAAgBpB,GAAMoB,IAAgB,KAChTrE,GAAY,CAACN,EAAG4E,EAAYE,EAAG,MAAOC,GAAI,MAAOC,GAAI,SAAUC,IAAK,SAAUC,EAAG,SAAUC,GAAI,SAAU7C,EAAG,IAAKgD,GAAIT,GAAa5E,GAAI9B,EAAiB,SAASI,UAAgBkC,UAAUC,OAASjC,GAAK2G,SAASP,GAAY5E,KAAM1B,GAASE,GAAK8G,aAAerF,GAAK0E,IAAexE,GAAOwE,IAAerB,GAAMqB,IAAe,KA+EhUC,GAAYS,GAAKhF,GACjBrC,GAAWC,MAAQ,MAEN2F,sBAKZ2B,KAAA,cAAKC,GACJtC,IAAgBD,EAAUvG,KAASkD,QAAQC,KAAK,wCAChD2C,IAAiBD,QACZkD,EAA6bD,EAA7bC,UAAWC,EAAkbF,EAAlbE,YAAapI,EAAqakI,EAAralI,KAAMoD,EAA+Z8E,EAA/Z9E,OAAQiF,EAAuZH,EAAvZG,WAAYC,EAA2YJ,EAA3YI,SAAU3D,EAAiYuD,EAAjYvD,eAAgB4D,EAAiXL,EAAjXK,OAAQC,EAAyWN,EAAzWM,YAAaC,EAA4VP,EAA5VO,OAAQC,EAAoVR,EAApVQ,WAAYC,EAAwUT,EAAxUS,MAAOC,EAAiUV,EAAjUU,YAAaC,EAAoTX,EAApTW,UAAWC,EAAySZ,EAAzSY,OAAQC,EAAiSb,EAAjSa,QAASC,EAAwRd,EAAxRc,UAAWC,EAA6Qf,EAA7Qe,QAASC,EAAoQhB,EAApQgB,OAAQC,EAA4PjB,EAA5PiB,KAAMC,EAAsPlB,EAAtPkB,OAAQC,EAA8OnB,EAA9OmB,UAAWC,EAAmOpB,EAAnOoB,UAAWC,EAAwNrB,EAAxNqB,SAAUC,EAA8MtB,EAA9MsB,UAAWC,EAAmMvB,EAAnMuB,UAAWC,EAAwLxB,EAAxLwB,QAASC,EAA+KzB,EAA/KyB,WAAYC,EAAmK1B,EAAnK0B,OAAQC,EAA2J3B,EAA3J2B,YAAaC,EAA8I5B,EAA9I4B,aAAcC,EAAgI7B,EAAhI6B,eAAgBC,EAAgH9B,EAAhH8B,aAAcC,EAAkG/B,EAAlG+B,QAASC,EAAyFhC,EAAzFgC,SAAUC,EAA+EjC,EAA/EiC,UAAWC,EAAoElC,EAApEkC,QAASC,EAA2DnC,EAA3DmC,YAAalK,EAA8C+H,EAA9C/H,QAASmK,EAAqCpC,EAArCoC,YAAaC,EAAwBrC,EAAxBqC,SAAUC,EAActC,EAAdsC,WA0Bpa,SAAfC,YAAqBC,GAAc9G,KACpB,SAAf+G,GAAgBjG,EAAGkG,UAAsB7I,GAAK4G,MAAQjE,IAAO+D,IAAWA,EAAO9I,QAAQ+E,EAAEtB,SAAawH,GAAoBC,IAAkC,UAAlBnG,EAAEoG,aAA6BjB,GAAeA,EAAYnF,EAAGkG,GAO9L,SAATlH,SACKqH,EAAKhJ,GAAKiJ,OAASlG,EAAgBkG,IACtCC,EAAKlJ,GAAKmJ,OAASpG,EAAgBoG,IACnCC,EAAW5J,KAAKyD,IAAI+F,IAAO5C,EAC3BiD,EAAW7J,KAAKyD,IAAIiG,IAAO9C,EAC5BoB,IAAa4B,GAAYC,IAAa7B,EAASxH,GAAMgJ,EAAIE,EAAID,GAAQE,IACjEC,IACHlC,GAAyB,EAAdlH,GAAKiJ,QAAc/B,EAAQlH,IACtCmH,GAAUnH,GAAKiJ,OAAS,GAAK9B,EAAOnH,IACpCsH,GAAaA,EAAUtH,IACvByH,GAAezH,GAAKiJ,OAAS,GAAQK,GAAa,GAAO7B,EAAUzH,IACnEsJ,GAAatJ,GAAKiJ,OAClBA,GAAO,GAAKA,GAAO,GAAKA,GAAO,GAAK,GAEjCI,IACHhC,GAAwB,EAAdrH,GAAKmJ,QAAc9B,EAAOrH,IACpCoH,GAAQpH,GAAKmJ,OAAS,GAAK/B,EAAKpH,IAChCuH,GAAaA,EAAUvH,IACvB0H,GAAe1H,GAAKmJ,OAAS,GAAQI,GAAa,GAAO7B,EAAU1H,IACnEuJ,GAAavJ,GAAKmJ,OAClBA,GAAO,GAAKA,GAAO,GAAKA,GAAO,GAAK,IAEjCK,IAASC,MACZ5B,GAAUA,EAAO7H,IACbyJ,KACH5C,GAA2B,IAAZ4C,IAAiB5C,EAAY7G,IAC5C+G,GAAUA,EAAO/G,IACjByJ,GAAU,GAEXD,IAAQ,GAETE,MAAYA,IAAS,IAAUjB,GAAcA,EAAWzI,IACpD2J,KACHzB,EAAQlI,IACR2J,IAAU,GAEXC,GAAK,EAEI,SAAVC,GAAWC,EAAGC,EAAGC,GAChBf,GAAOe,IAAUF,EACjBX,GAAOa,IAAUD,EACjB/J,GAAKiK,IAAItI,OAAOmI,GAChB9J,GAAKkK,IAAIvI,OAAOoI,GAChBxD,EAAkBqD,GAAPA,IAAYO,sBAAsBxI,IAAWA,KAEjC,SAAxByI,GAAyBN,EAAGC,GACvBvB,IAAa6B,KAChBrK,GAAKqK,KAAOA,GAAO7K,KAAKyD,IAAI6G,GAAKtK,KAAKyD,IAAI8G,GAAK,IAAM,IACrDL,IAAS,GAEG,MAATW,KACHpB,GAAO,IAAMa,EACb9J,GAAKiK,IAAItI,OAAOmI,GAAG,IAEP,MAATO,KACHlB,GAAO,IAAMY,EACb/J,GAAKkK,IAAIvI,OAAOoI,GAAG,IAEpBxD,EAAkBqD,GAAPA,IAAYO,sBAAsBxI,IAAWA,KAE/C,SAAV2I,GAAU3H,OACLiG,GAAajG,EAAG,QAEhBmH,GADJnH,EAAID,EAAUC,EAAGC,IACP2H,QACTR,EAAIpH,EAAE6H,QACNxB,EAAKc,EAAI9J,GAAK8J,EACdZ,EAAKa,EAAI/J,GAAK+J,EACdU,EAAazK,GAAKyK,WACnBzK,GAAK8J,EAAIA,EACT9J,GAAK+J,EAAIA,GACLU,IAAgBzB,GAAME,KAAQ1J,KAAKyD,IAAIjD,GAAK0K,OAASZ,IAAMzD,GAAe7G,KAAKyD,IAAIjD,GAAK2K,OAASZ,IAAM1D,MAC1GoD,GAAUgB,EAAa,EAAI,EAC3BA,IAAezK,GAAKyK,YAAa,GACjCL,GAAsBpB,EAAIE,KAiDV,SAAlB0B,GAAkBjI,UAAKA,EAAEkI,SAA8B,EAAnBlI,EAAEkI,QAAQzJ,SAAepB,GAAK8K,aAAc,IAAS9C,EAAerF,EAAG3C,GAAKyK,YAChG,SAAhBM,YAAuB/K,GAAK8K,aAAc,IAAU7C,EAAajI,IACtD,SAAXgL,GAAWrI,OACNiG,GAAajG,QACbmH,EAAImB,KACPlB,EAAImB,KACLrB,IAASC,EAAIqB,IAAW7C,GAAcyB,EAAIqB,IAAW9C,EAAa,GAClE6C,GAAUrB,EACVsB,GAAUrB,EACVvD,GAAU6E,GAAkBC,SAAQ,IAE1B,SAAXC,GAAW5I,OACNiG,GAAajG,IACjBA,EAAID,EAAUC,EAAGC,GACjBsF,IAAYyB,IAAU,OAClB6B,GAA8B,IAAhB7I,EAAE8I,UAAkBnF,EAA6B,IAAhB3D,EAAE8I,UAAkBtM,GAAKuM,YAAc,GAAK/E,EAC/FkD,GAAQlH,EAAEsG,OAASuC,EAAY7I,EAAEwG,OAASqC,EAAY,GACtDhF,IAAWuB,GAAgBsD,GAAkBC,SAAQ,IAE5C,SAAVK,GAAUhJ,OACLiG,GAAajG,QACbmH,EAAInH,EAAE4H,QACTR,EAAIpH,EAAE6H,QACNxB,EAAKc,EAAI9J,GAAK8J,EACdZ,EAAKa,EAAI/J,GAAK+J,EACf/J,GAAK8J,EAAIA,EACT9J,GAAK+J,EAAIA,EACTP,IAAQ,EACRhD,GAAU6E,GAAkBC,SAAQ,IACnCtC,GAAME,IAAOkB,GAAsBpB,EAAIE,IAE9B,SAAX0C,GAAWjJ,GAAM3C,GAAK4G,MAAQjE,EAAGgF,EAAQ3H,IAC3B,SAAd6L,GAAclJ,GAAM3C,GAAK4G,MAAQjE,EAAGiF,EAAW5H,IACpC,SAAX8L,GAAWnJ,UAAKiG,GAAajG,IAAOD,EAAUC,EAAGC,IAAmByF,EAAQrI,SA5LxEqB,OAASA,EAASvB,EAAWuB,IAAWP,QACxCqF,KAAOA,EACDO,EAAXA,GAAoBrJ,GAAK8C,MAAMC,QAAQsG,GACvCN,EAAYA,GAAa,KACzBC,EAAcA,GAAe,EAC7BM,EAAaA,GAAc,EAC3B2B,EAAcA,GAAe,EAC7BrK,EAAOA,GAAQ,sBACfsI,GAAwB,IAAbA,EACID,EAAfA,GAA4ByF,WAAW5M,GAAK6M,iBAAiB/H,IAAOqC,aAAe,OAC/EsD,GAAIyB,GAAmB5B,GAASD,GAAOG,GAASD,GAAQW,GAC3DrK,GAAOiM,KACP3C,GAAa,EACbC,GAAa,EACbpL,GAAUgI,EAAKhI,UAAayE,IAAmC,IAAjBuD,EAAKhI,QACnD8M,GAAcxK,EAAeY,EAAQkE,IACrC2F,GAAczK,EAAeY,EAAQL,IACrCmK,GAAUF,KACVG,GAAUF,KACVpC,IAAgB7K,EAAKL,QAAQ,YAAcK,EAAKL,QAAQ,YAAiC,gBAAnBkH,GAAY,GAClFoH,GAAarO,EAAYwD,GACzB8K,GAAW9K,EAAO+K,eAAiBxL,GACnCqI,GAAS,CAAC,EAAG,EAAG,GAChBE,GAAS,CAAC,EAAG,EAAG,GAChBR,GAAc,EAqFd0D,GAAWrM,GAAKgH,QAAU,SAAArE,GACrBiG,GAAajG,EAAG,IAAOA,GAAKA,EAAE2J,SAClCtM,GAAKqK,KAAOA,GAAO,KACnBgB,GAAkBkB,QAClBvM,GAAKtB,WAAY,EACjBiE,EAAID,EAAUC,GACd2G,GAAaC,GAAa,EAC1BvJ,GAAK0K,OAAS1K,GAAK8J,EAAInH,EAAE4H,QACzBvK,GAAK2K,OAAS3K,GAAK+J,EAAIpH,EAAE6H,QACzBxK,GAAKiK,IAAI5H,QACTrC,GAAKkK,IAAI7H,QACTrE,EAAa+J,EAAe1G,EAAS8K,GAAUrH,GAAY,GAAIwF,GAASnM,IAAS,GACjF6B,GAAKiJ,OAASjJ,GAAKmJ,OAAS,EAC5BnC,GAAWA,EAAQhH,MAEpBwM,GAAaxM,GAAKiH,UAAY,SAAAtE,OACzBiG,GAAajG,EAAG,IACpBrE,EAAgByJ,EAAe1G,EAAS8K,GAAUrH,GAAY,GAAIwF,IAAS,OACvEmC,GAAkBC,MAAM1M,GAAK+J,EAAI/J,GAAK2K,QACzCgC,EAAc3M,GAAKyK,WACnBmC,EAAiBD,IAAiD,EAAjCnN,KAAKyD,IAAIjD,GAAK8J,EAAI9J,GAAK0K,SAAgD,EAAjClL,KAAKyD,IAAIjD,GAAK+J,EAAI/J,GAAK2K,SAC9FkC,EAAYnK,EAAUC,IAClBiK,GAAkBH,IACtBzM,GAAKiK,IAAI5H,QACTrC,GAAKkK,IAAI7H,QAELO,GAAkB2F,GACrBlL,GAAKyP,YAAY,IAAM,cACS,IAA3BjL,KAAa8G,KAAsBhG,EAAEoK,oBACpCpK,EAAEtB,OAAO2L,MACZrK,EAAEtB,OAAO2L,aACH,GAAIb,GAASc,YAAa,KAC5BC,EAAiBf,GAASc,YAAY,eAC1CC,EAAeC,eAAe,SAAS,GAAM,EAAMhO,GAAM,EAAG0N,EAAUO,QAASP,EAAUQ,QAASR,EAAUtC,QAASsC,EAAUrC,SAAS,GAAO,GAAO,GAAO,EAAO,EAAG,MACvK7H,EAAEtB,OAAOiM,cAAcJ,OAM5BlN,GAAKyK,WAAazK,GAAK8K,YAAc9K,GAAKtB,WAAY,EACtD8H,GAAUmG,IAAgB5E,GAAgBsD,GAAkBC,SAAQ,GACpE7B,IAAW9H,KACXmF,GAAa6F,GAAe7F,EAAU9G,IACtCiH,GAAaA,EAAUjH,GAAM4M,KAqC/BvB,GAAoBrL,GAAKuN,IAAMlQ,GAAKyP,YAAYrG,GAAe,IAnKjD,SAAb+G,aACCxN,GAAKiK,IAAI5H,QACTrC,GAAKkK,IAAI7H,QACTgJ,GAAkBkB,QAClB/F,GAAUA,EAAOxG,MA+J8DuM,QAEjFvM,GAAKiJ,OAASjJ,GAAKmJ,OAAS,EAC5BnJ,GAAKiK,IAAMzI,EAAiB,EAAG,IAAI,GACnCxB,GAAKkK,IAAM1I,EAAiB,EAAG,IAAI,GACnCxB,GAAKmL,QAAUF,GACfjL,GAAKoL,QAAUF,GACflL,GAAKyK,WAAazK,GAAK8K,YAAc9K,GAAKtB,WAAY,EACtDyF,GAAS8H,MACTjM,GAAKyN,OAAS,SAAA9K,UACR3C,GAAK0N,YACT1P,EAAakO,GAAaC,GAAW9K,EAAQ,SAAU7C,GAC7B,GAA1BP,EAAKL,QAAQ,WAAkBI,EAAakO,GAAaC,GAAW9K,EAAQ,SAAU2J,GAAU7M,GAASC,GAChF,GAAzBH,EAAKL,QAAQ,UAAiBI,EAAaqD,EAAQ,QAASkK,GAAUpN,GAASC,IACjD,GAAzBH,EAAKL,QAAQ,UAAiB0G,IAAwC,GAA3BrG,EAAKL,QAAQ,cAC5DI,EAAaqD,EAAQyD,GAAY,GAAIuH,GAAUlO,GAASC,GACxDJ,EAAamO,GAAUrH,GAAY,GAAI0H,IACvCxO,EAAamO,GAAUrH,GAAY,GAAI0H,IACvCjE,GAAevK,EAAaqD,EAAQ,QAASqH,IAAc,GAAM,GACjEL,GAAWrK,EAAaqD,EAAQ,QAASyK,IACzC9D,GAAkBhK,EAAamO,GAAU,eAAgBvB,IACzD3C,GAAgBjK,EAAamO,GAAU,aAAcpB,IACrDpD,GAAW3J,EAAaqD,EAAQgD,GAAe,QAASuH,IACxDhE,GAAc5J,EAAaqD,EAAQgD,GAAe,QAASwH,IAC3DhE,GAAU7J,EAAaqD,EAAQgD,GAAe,OAAQsH,KAEvD3L,GAAK0N,WAAY,EACjB1N,GAAKyK,WAAazK,GAAK8K,YAAc9K,GAAKtB,UAAY8K,GAAQC,IAAU,EACxEzJ,GAAKiK,IAAI5H,QACTrC,GAAKkK,IAAI7H,QACT8I,GAAUF,KACVG,GAAUF,KACVvI,GAAKA,EAAE1E,MAAQoO,GAAS1J,GACxBwF,GAAYA,EAASnI,KAEfA,IAERA,GAAK2N,QAAU,WACV3N,GAAK0N,YAERxI,GAAW0I,OAAO,SAAAC,UAAKA,IAAM7N,IAAQnC,EAAYgQ,EAAExM,UAASD,QAAU9C,EAAgB4N,GAAaC,GAAW9K,EAAQ,SAAU7C,GAC5HwB,GAAKtB,YACRsB,GAAKiK,IAAI5H,QACTrC,GAAKkK,IAAI7H,QACT/D,EAAgByJ,EAAe1G,EAAS8K,GAAUrH,GAAY,GAAIwF,IAAS,IAE5EhM,EAAgB4N,GAAaC,GAAW9K,EAAQ,SAAU2J,GAAU5M,GACpEE,EAAgB+C,EAAQ,QAASkK,GAAUnN,GAC3CE,EAAgB+C,EAAQyD,GAAY,GAAIuH,GAAUjO,GAClDE,EAAgB6N,GAAUrH,GAAY,GAAI0H,IAC1ClO,EAAgB6N,GAAUrH,GAAY,GAAI0H,IAC1ClO,EAAgB+C,EAAQ,QAASqH,IAAc,GAC/CpK,EAAgB+C,EAAQ,QAASyK,IACjCxN,EAAgB6N,GAAU,eAAgBvB,IAC1CtM,EAAgB6N,GAAU,aAAcpB,IACxCzM,EAAgB+C,EAAQgD,GAAe,QAASuH,IAChDtN,EAAgB+C,EAAQgD,GAAe,QAASwH,IAChDvN,EAAgB+C,EAAQgD,GAAe,OAAQsH,IAC/C3L,GAAK0N,UAAY1N,GAAKtB,UAAYsB,GAAKyK,YAAa,EACpDrC,GAAaA,EAAUpI,MAIzBA,GAAK8N,KAAO9N,GAAK+N,OAAS,WACzB/N,GAAK2N,cACD5M,EAAImE,GAAWtH,QAAQoC,IACtB,GAALe,GAAUmE,GAAW8I,OAAOjN,EAAG,GAC/BtC,KAAgBuB,KAASvB,GAAc,IAGxCyG,GAAWjE,KAAKjB,IAChB+H,GAAgBlK,EAAYwD,KAAY5C,GAAcuB,IAEtDA,GAAKyN,OAAO7G,8JAILqF,KAAKhC,IAAI3H,2DAGT2J,KAAK/B,IAAI5H,8CAtRL6D,QACND,KAAKC,GA0RZ5B,EAAS0J,QAAU,SACnB1J,EAAS2J,OAAS,SAAA/H,UAAQ,IAAI5B,EAAS4B,IACvC5B,EAAS4J,SAAWvK,EACpBW,EAAS6J,OAAS,kBAAMlJ,GAAWmJ,SACnC9J,EAAS+J,QAAU,SAAA1E,UAAM1E,GAAW0I,OAAO,SAAAC,UAAKA,EAAE1H,KAAKyD,KAAOA,IAAI,IAElExM,KAAcC,GAAKE,eAAegH,GCxZnB,SAAdgK,GAAetP,EAAOhB,EAAM+B,OACvBkE,EAASsK,GAAUvP,KAAkC,WAAvBA,EAAMwP,OAAO,EAAG,KAA2C,EAAxBxP,EAAMrB,QAAQ,eACnFoC,EAAK,IAAM/B,EAAO,SAAWiG,GACdjF,EAAMwP,OAAO,EAAGxP,EAAMmC,OAAS,GAAKnC,EAEvC,SAAbyP,GAAczP,EAAOiF,UAAUA,GAAWsK,GAAUvP,IAAiC,WAAvBA,EAAMwP,OAAO,EAAG,GAA4CxP,EAAzB,SAAWA,EAAQ,IAE9F,SAAtB0P,YAA4BC,GAAiB,EACzB,SAApBC,YAA0BD,GAAiB,EAC5B,SAAfE,GAAevP,UAAKA,EACX,SAATwP,GAAS9P,UAASO,KAAKC,MAAc,IAARR,GAAkB,KAAU,EACzC,SAAhB+P,WAAyC,oBAAZ1R,OAClB,SAAXF,YAAiBC,IAAS2R,OAAoB3R,GAAOC,OAAOD,OAASA,GAAKE,gBAAkBF,GAC9E,SAAdQ,GAAc8E,YAAQ5E,EAAMH,QAAQ+E,GACZ,SAAxBsM,GAAwBC,UAA4C,WAAtBA,EAAiCC,EAAShQ,GAAK,QAAU+P,KAAuBpO,GAAO,SAAWoO,IAAsBjL,GAAM,SAAWiL,GACtK,SAAjBE,GAAiB3R,UAAWD,EAAcC,EAAS,2BAA6BI,GAAYJ,GAAW,kBAAO4R,GAAYC,MAAQnQ,GAAKoQ,WAAYF,GAAYG,OAASL,EAAeE,IAAgB,kBAAMI,GAAWhS,KAG3M,SAAbiS,GAAcjS,SAAUiD,IAAAA,EAAGmF,IAAAA,GAAID,IAAAA,EAAG5C,IAAAA,SAAOxD,KAAK4C,IAAI,GAAI1B,EAAI,SAAWmF,KAAQ7C,EAAIxF,EAAcC,EAASiD,IAAMsC,IAAMoM,GAAe3R,EAAf2R,GAA0BxJ,GAAK/H,GAAYJ,IAAYqD,GAAOJ,IAAMuD,GAAMvD,IAAMuO,GAAsBpJ,GAAMpI,EAAQiD,GAAKjD,EAAQ,SAAWoI,IAC1O,SAAtB8J,GAAuBzR,EAAM0R,OACvB,IAAI7O,EAAI,EAAGA,EAAI8O,EAAazO,OAAQL,GAAK,EAC3C6O,KAAWA,EAAOhS,QAAQiS,EAAa9O,EAAE,KAAQ7C,EAAK2R,EAAa9O,GAAI8O,EAAa9O,EAAE,GAAI8O,EAAa9O,EAAE,IAI/F,SAAd+O,GAAc7Q,SAA2B,mBAAXA,EAClB,SAAZ8Q,GAAY9Q,SAA2B,iBAAXA,EAChB,SAAZ+Q,GAAY/Q,SAA2B,iBAAXA,EACZ,SAAhBgR,GAAiBC,EAAWC,EAAU5D,UAAU2D,GAAaA,EAAUE,SAASD,EAAW,EAAI,IAAM5D,GAAS2D,EAAU3D,QAC5G,SAAZ8D,GAAarQ,EAAM9B,MACd8B,EAAKsQ,QAAS,KACbC,EAASvQ,EAAKC,KAAOD,EAAKC,KAAKuQ,IAAI,kBAAMtS,EAAK8B,KAAS9B,EAAK8B,GAChEuQ,GAAUA,EAAOE,YAAczQ,EAAK0Q,kBAAoBH,IAmBtC,SAApBI,GAAoBlT,UAAW0B,GAAK6M,iBAAiBvO,GAKtC,SAAfmT,GAAgBC,EAAKC,OACf,IAAItL,KAAKsL,EACZtL,KAAKqL,IAASA,EAAIrL,GAAKsL,EAAStL,WAE3BqL,EAQG,SAAXE,GAAYtT,SAAUoI,IAAAA,UAAQpI,EAAQ,SAAWoI,IAAOpI,EAAQ,SAAWoI,IAAO,EAC5D,SAAtBmL,GAAsBC,OAIpBzL,EAHGxC,EAAI,GACPkO,EAASD,EAASC,OAClBC,EAAWF,EAASE,eAEhB3L,KAAK0L,EACTlO,EAAE/B,KAAKiQ,EAAO1L,GAAK2L,UAEbnO,EAGW,SAAnBoO,GAAmBC,OACdC,EAAOjU,GAAK8C,MAAMmR,KAAKD,GAC1BrO,EAAIuO,MAAMC,QAAQH,IAAyBA,EAAqBhD,MAAM,GAAGoD,KAAK,SAACzO,EAAG0O,UAAM1O,EAAI0O,WACtF1O,EAAI,SAAC/D,EAAO0S,EAAWC,OACzB7Q,cADyB6Q,IAAAA,EAAW,OAEnCD,SACGL,EAAKrS,MAEG,EAAZ0S,EAAe,KAClB1S,GAAS2S,EACJ7Q,EAAI,EAAGA,EAAIiC,EAAE5B,OAAQL,OACrBiC,EAAEjC,IAAM9B,SACJ+D,EAAEjC,UAGJiC,EAAEjC,EAAE,OAEXA,EAAIiC,EAAE5B,OACNnC,GAAS2S,EACF7Q,QACFiC,EAAEjC,IAAM9B,SACJ+D,EAAEjC,UAILiC,EAAE,IACN,SAAC/D,EAAO0S,EAAWC,YAAAA,IAAAA,EAAW,UAC7BC,EAAUP,EAAKrS,UACX0S,GAAanS,KAAKyD,IAAI4O,EAAU5S,GAAS2S,GAAeC,EAAU5S,EAAQ,GAAO0S,EAAY,EAAKE,EAAUP,EAAKK,EAAY,EAAI1S,EAAQoS,EAAuBpS,EAAQoS,IAIjK,SAAjBS,GAAkB5T,EAAMT,EAASsU,EAAOC,UAAaD,EAAM/M,MAAM,KAAKiN,QAAQ,SAAAhU,UAAQC,EAAKT,EAASQ,EAAM+T,KAC3F,SAAfhU,GAAgBP,EAASQ,EAAMC,EAAMgU,EAAY9T,UAAYX,EAAQY,iBAAiBJ,EAAMC,EAAM,CAACC,SAAU+T,EAAY9T,UAAWA,IAClH,SAAlBE,GAAmBb,EAASQ,EAAMC,EAAME,UAAYX,EAAQc,oBAAoBN,EAAMC,IAAQE,GAC7E,SAAjB+T,GAAkBjU,EAAMJ,EAAIsU,IAC3BA,EAAaA,GAAcA,EAAWC,gBAErCnU,EAAKJ,EAAI,QAASsU,GAClBlU,EAAKJ,EAAI,YAAasU,IAMV,SAAdE,GAAerT,EAAOsT,MACjB/D,GAAUvP,GAAQ,KACjBuT,EAAUvT,EAAMrB,QAAQ,KAC3B6U,GAAYD,GAAYvT,EAAMyT,OAAOF,EAAQ,GAAK,GAAKzG,WAAW9M,EAAMwP,OAAO+D,EAAU,IAAM,GAC3FA,IACHvT,EAAMrB,QAAQ,KAAO4U,IAAaC,GAAYF,EAAO,KACtDtT,EAAQA,EAAMwP,OAAO,EAAG+D,EAAQ,IAEjCvT,EAAQwT,GAAaxT,KAAS0T,EAAaA,EAAU1T,GAASsT,GAAQtT,EAAMrB,QAAQ,KAAOmO,WAAW9M,GAASsT,EAAO,IAAMxG,WAAW9M,IAAU,UAE3IA,EAEQ,SAAhB2T,GAAiB3U,EAAM0F,EAAMkP,EAAWlB,IAAiE9R,EAAQiT,EAAcC,OAA3EC,IAAAA,WAAYC,IAAAA,SAAUC,IAAAA,SAAUC,IAAAA,OAAQC,IAAAA,WACvFzQ,EAAI/B,GAAKyS,cAAc,OAC1BC,EAAmBzV,GAAYgV,IAAsD,UAAxCrV,EAAcqV,EAAW,WACtEU,GAA2C,IAA9BtV,EAAKL,QAAQ,YAC1B4V,EAASF,EAAmBrP,GAAQ4O,EACpCY,GAAqC,IAA3BxV,EAAKL,QAAQ,SACvB8V,EAAQD,EAAUT,EAAaC,EAC/BU,EAAM,gBAAkBD,EAAQ,cAAgBR,EAAW,UAAYQ,EAAQ,gBAAkBN,EAAa,8IAC/GO,GAAO,cAAgBJ,GAAcR,IAAuBO,EAAmB,SAAW,cACzFC,IAAcR,GAAuBO,IAAsBK,IAAQhC,IAAc3Q,GAAY4S,EAASC,GAAW,KAAOhU,EAASkM,WAAWoH,IAAW,OACxJL,IAAiBa,GAAO,+CAAiDb,EAAagB,YAAc,OACpGnR,EAAEoR,SAAWN,EACb9Q,EAAEqR,aAAa,QAAS,eAAiB/V,GAAQ0F,EAAO,WAAaA,EAAO,KAC5EhB,EAAEsR,MAAMC,QAAUP,EAClBhR,EAAEwR,UAAYxQ,GAAiB,IAATA,EAAa1F,EAAO,IAAM0F,EAAO1F,EACvDuV,EAAOY,SAAS,GAAKZ,EAAOa,aAAa1R,EAAG6Q,EAAOY,SAAS,IAAMZ,EAAOc,YAAY3R,GACrFA,EAAE4R,QAAU5R,EAAE,SAAWgP,EAAU3L,GAAGH,IACtC2O,EAAgB7R,EAAG,EAAGgP,EAAW8B,GAC1B9Q,EAiBA,SAAR8R,YAA6C,GAA/B5S,KAAa6S,KAAoCC,EAAXA,GAAoBxK,sBAAsByK,IAClF,SAAZpW,KACMC,GAAgBA,EAAYC,aAAaD,EAAYiM,OAASzG,GAAM4Q,eACxElW,GAAWC,QACPH,EACQkW,EAAXA,GAAoBxK,sBAAsByK,GAE1CA,IAEDF,IAAmBI,EAAU,eAC7BJ,GAAkB7S,MAGC,SAArBkT,KACCC,EAAmB7V,GAAKoQ,WACxB0F,EAAoB9V,GAAKuM,YAEd,SAAZwJ,GAAatT,GACZjD,GAAWC,SACA,IAAVgD,IAAoBuT,IAAgBC,GAAkBxU,GAAKyU,mBAAsBzU,GAAK0U,yBAA6BC,GAAuBP,IAAqB7V,GAAKoQ,cAAc/P,KAAKyD,IAAI9D,GAAKuM,YAAcuJ,GAAwC,IAAnB9V,GAAKuM,eAAyB8J,EAAalK,SAAQ,GAIzQ,SAAfmK,YAAqBnX,GAAgB6E,GAAe,YAAasS,KAAiBC,IAAY,GAG5E,SAAlBC,GAAkBC,OACZ,IAAI7U,EAAI,EAAGA,EAAI8U,EAAazU,OAAQL,GAAG,IACtC6U,GAASC,EAAa9U,EAAE,IAAM8U,EAAa9U,EAAE,GAAG+U,QAAUF,KAC9DC,EAAa9U,GAAGkT,MAAMC,QAAU2B,EAAa9U,EAAE,GAC/C8U,EAAa9U,GAAGgV,SAAWF,EAAa9U,GAAGiT,aAAa,YAAa6B,EAAa9U,EAAE,IAAM,IAC1F8U,EAAa9U,EAAE,GAAGiV,QAAU,GAIlB,SAAbC,GAAcnI,EAAM8H,OACfM,MACCC,GAAK,EAAGA,GAAKC,GAAUhV,OAAQ+U,OACnCD,EAAUE,GAAUD,MACHP,GAASM,EAAQjW,OAAS2V,IACtC9H,EACHoI,EAAQpI,KAAK,GAEboI,EAAQnI,QAAO,GAAM,IAIxBsI,GAAc,EACdT,GAASD,GAAgBC,GACzBA,GAASd,EAAU,UAEC,SAArBwB,GAAsBjX,EAAmBuC,GACxCjD,GAAWC,SACVgD,GAAU2U,IAAmB5X,GAAWsT,QAAQ,SAAApB,UAAOf,GAAYe,IAAQA,EAAIlR,YAAckR,EAAI2F,IAAM,KACxGhI,GAAUnP,KAAuBF,GAAKC,QAAQC,kBAAoBoX,EAAqBpX,GAWxE,SAAhBqX,KACCzS,GAAMqQ,YAAYqC,GAClBxH,GAAW1Q,GAAekY,EAAUC,cAAiBzX,GAAKuM,YAC1DzH,GAAM4S,YAAYF,GAED,SAAlBG,GAAkBC,UAAQC,GAAS,gGAAgG/E,QAAQ,SAAAnU,UAAMA,EAAGmW,MAAMgD,QAAUF,EAAO,OAAS,UA8GvK,SAAbG,GAAcC,EAAKC,EAAQC,EAAIC,OACzBH,EAAII,MAAMC,UAAW,SAIxBhS,EAHGzE,EAAI0W,EAAiBrW,OACxBsW,EAAcN,EAAOnD,MACrB0D,EAAWR,EAAIlD,MAETlT,KAEN2W,EADAlS,EAAIiS,EAAiB1W,IACJsW,EAAG7R,GAErBkS,EAAYE,SAA2B,aAAhBP,EAAGO,SAA0B,WAAa,WACjD,WAAfP,EAAGJ,UAA0BS,EAAYT,QAAU,gBACpDU,EAAS9D,GAAW8D,EAAS/D,GAAU,OACvC8D,EAAYG,UAAYR,EAAGQ,WAAa,OACxCH,EAAYI,SAAW,UACvBJ,EAAYK,UAAY,aACxBL,EAAYM,IAAUjH,GAASoG,EAAK5R,IAAe0S,GACnDP,EAAYQ,IAAWnH,GAASoG,EAAKnW,IAAaiX,GAClDP,EAAYS,IAAYR,EAASS,IAAWT,EAAQ,IAASA,EAAQ,KAAU,IAC/EU,GAAUf,GACVK,EAASK,IAAUL,EAAQ,SAAmBN,EAAGW,IACjDL,EAASO,IAAWP,EAAQ,UAAoBN,EAAGa,IACnDP,EAASQ,IAAYd,EAAGc,IACpBhB,EAAImB,aAAelB,IACtBD,EAAImB,WAAWjE,aAAa+C,EAAQD,GACpCC,EAAO9C,YAAY6C,IAEpBA,EAAII,MAAMC,WAAY,GAsBZ,SAAZe,GAAY9a,WACP+a,EAAIC,GAAYrX,OACnB6S,EAAQxW,EAAQwW,MAChByE,EAAQ,GACR3X,EAAI,EACEA,EAAIyX,EAAGzX,IACb2X,EAAMzX,KAAKwX,GAAY1X,GAAIkT,EAAMwE,GAAY1X,YAE9C2X,EAAM3Y,EAAItC,EACHib,EAuBS,SAAjBC,GAAkB1Z,EAAOiX,EAAS0C,EAAcjH,EAAWkH,EAAQC,EAAQC,EAAgB/Y,EAAMgZ,EAAgBC,EAAa3F,EAAkB4F,EAAanG,EAAoBoG,GAChLrJ,GAAY7Q,KAAWA,EAAQA,EAAMe,IACjCwO,GAAUvP,IAAgC,QAAtBA,EAAMwP,OAAO,EAAE,KACtCxP,EAAQia,GAAmC,MAApBja,EAAMyT,OAAO,GAAaJ,GAAY,IAAMrT,EAAMwP,OAAO,GAAImK,GAAgB,QAGpGQ,EAAI3T,EAAIhI,EADL4b,EAAOtG,EAAqBA,EAAmBsG,OAAS,KAE5DtG,GAAsBA,EAAmBuG,KAAK,GAC9C5M,MAAMzN,KAAWA,GAASA,GACrB8Q,GAAU9Q,GAkBd8T,IAAuB9T,EAAQ5B,GAAK8C,MAAMoZ,SAASxG,EAAmByG,cAAcC,MAAO1G,EAAmByG,cAAcE,IAAK,EAAGR,EAAaja,IACjJ8Z,GAAkBvE,EAAgBuE,EAAgBH,EAAcjH,GAAW,OAnBrD,CACtB7B,GAAYoG,KAAaA,EAAUA,EAAQlW,QAE1C2Z,EAAQC,EAAaC,EAAc5C,EADhC6C,GAAW7a,GAAS,KAAK+F,MAAM,KAEnCvH,EAAUqC,EAAWoW,EAASlW,IAASiE,IACvC0V,EAASlK,GAAWhS,IAAY,MACdkc,EAAOI,MAASJ,EAAOK,MAAgD,SAAvCrJ,GAAkBlT,GAASwZ,UAC5EA,EAAUxZ,EAAQwW,MAAMgD,QACxBxZ,EAAQwW,MAAMgD,QAAU,QACxB0C,EAASlK,GAAWhS,GACpBwZ,EAAWxZ,EAAQwW,MAAMgD,QAAUA,EAAWxZ,EAAQwW,MAAMgG,eAAe,YAE5EL,EAActH,GAAYwH,EAAQ,GAAIH,EAAOhI,EAAU/L,IACvDiU,EAAevH,GAAYwH,EAAQ,IAAM,IAAKlB,GAC9C3Z,EAAQ0a,EAAOhI,EAAUnM,GAAKwT,EAAerH,EAAUnM,GAAKyT,EAAcW,EAAcf,EAASgB,EACjGd,GAAkBvE,EAAgBuE,EAAgBc,EAAclI,EAAYiH,EAAeiB,EAAe,IAAOd,EAAehF,UAA2B,GAAf8F,GAC5IjB,GAAgBA,EAAeiB,KAK5BV,IACHnZ,EAAKmZ,GAAiBla,IAAU,KAChCA,EAAQ,IAAMA,EAAQ,IAEnB6Z,EAAQ,KACPlB,EAAW3Y,EAAQ2Z,EACtBnF,EAAUqF,EAAO/E,SAClBqF,EAAK,SAAWzH,EAAU9L,GAC1B2O,EAAgBsE,EAAQlB,EAAUjG,EAAY8B,GAAsB,GAAXmE,IAAoBnE,IAAYH,EAAmB9T,KAAK4C,IAAI6B,GAAMmV,GAAKtY,GAAOsY,IAAON,EAAOR,WAAWc,KAAQxB,EAAW,GAC/KtE,IACH0F,EAAiBvJ,GAAWsJ,GAC5BzF,IAAqBwF,EAAO7E,MAAMtC,EAAU3L,GAAGR,GAAMwT,EAAerH,EAAU3L,GAAGR,GAAKmM,EAAU3L,GAAGkU,EAAIpB,EAAOvE,QAAW0D,YAGvHlF,GAAsBtV,IACzB2b,EAAK3J,GAAWhS,GAChBsV,EAAmBuG,KAAKJ,GACxBzT,EAAKgK,GAAWhS,GAChBsV,EAAmBoH,cAAgBf,EAAGzH,EAAUnM,GAAKC,EAAGkM,EAAUnM,GAClEvG,EAAQA,EAAS8T,EAAmBoH,cAAiBjB,GAEtDnG,GAAsBA,EAAmBuG,KAAKD,GACvCtG,EAAqB9T,EAAQO,KAAKC,MAAMR,GAGpC,SAAZmb,GAAa3c,EAAS+V,EAAQwG,EAAKD,MAC9Btc,EAAQ6a,aAAe9E,EAAQ,KAEjChO,EAAG6R,EADApD,EAAQxW,EAAQwW,SAEhBT,IAAWvP,GAAO,KAGhBuB,KAFL/H,EAAQ4c,QAAUpG,EAAMC,QACxBmD,EAAK1G,GAAkBlT,IAEhB+H,GAAM8U,GAAWC,KAAK/U,KAAM6R,EAAG7R,IAA0B,iBAAbyO,EAAMzO,IAAyB,MAANA,IAC1EyO,EAAMzO,GAAK6R,EAAG7R,IAGhByO,EAAM+F,IAAMA,EACZ/F,EAAM8F,KAAOA,OAEb9F,EAAMC,QAAUzW,EAAQ4c,QAEzBhd,GAAK+F,KAAKoX,SAAS/c,GAASuY,QAAU,EACtCxC,EAAOc,YAAY7W,IAGE,SAAvBgd,GAAwBC,EAAcC,EAAcC,OAC/CC,EAAQF,EACXG,EAAQD,SACF,SAAA5b,OACF8b,EAAUvb,KAAKC,MAAMib,YACrBK,IAAYF,GAASE,IAAYD,GAAqC,EAA5Btb,KAAKyD,IAAI8X,EAAUF,IAA0C,EAA5Brb,KAAKyD,IAAI8X,EAAUD,KACjG7b,EAAQ8b,EACRH,GAAeA,KAEhBE,EAAQD,EACRA,EAAQrb,KAAKC,MAAMR,IAIN,SAAf+b,GAAgBlC,EAAQnH,EAAW1S,OAC9BkH,EAAO,GACXA,EAAKwL,EAAUnM,GAAK,KAAOvG,EAC3B5B,GAAK4d,IAAInC,EAAQ3S,GAUC,SAAnB+U,GAAoBC,EAAUxJ,GAGjB,SAAXyJ,GAAYtV,EAAUK,EAAMwU,EAAcU,EAASC,OAC9CC,EAAQH,GAASG,MACpBC,EAAarV,EAAKqV,WAClBC,EAAY,GACbd,EAAeA,GAAgBe,QAC3BC,EAAuBlB,GAAqBiB,EAAWf,EAAc,WACxEY,EAAMzN,OACNsN,GAASG,MAAQ,WAElBD,EAAWD,GAAWC,GAAY,EAClCD,EAAUA,GAAYvV,EAAW6U,EACjCY,GAASA,EAAMzN,OACf3H,EAAKyV,GAAQ9V,EACbK,EAAK0V,SAAU,GACf1V,EAAKsV,UAAYA,GACPG,GAAQ,kBAAMD,EAAqBhB,EAAeU,EAAUE,EAAMO,MAAQR,EAAUC,EAAMO,MAAQP,EAAMO,QAClH3V,EAAK4V,SAAW,WACfpd,GAAWC,QACXwc,GAASG,OAAS3G,KAEnBzO,EAAKqV,WAAa,WACjBJ,GAASG,MAAQ,EACjBC,GAAcA,EAAWQ,KAAKT,IAE/BA,EAAQH,GAASG,MAAQle,GAAK4e,GAAGd,EAAUhV,OA1BzCuV,EAAYjb,EAAe0a,EAAUxJ,GACxCiK,EAAO,UAAYjK,EAAUlM,UA4B9B0V,EAASS,GAAQF,GACPrJ,aAAe,kBAAM+I,GAASG,OAASH,GAASG,MAAMzN,SAAWsN,GAASG,MAAQ,IAC5Fvd,GAAamd,EAAU,QAASO,EAAUrJ,cAC1ClP,GAAcqB,SAAWxG,GAAamd,EAAU,YAAaO,EAAUrJ,cAChE+I,GAjkBT,IAAI/d,GAAMwG,EAAc1E,GAAMyB,GAAME,GAAQmD,GAAOlG,EAAOyX,EAAcwB,GAAUkF,GAAQC,GAAQC,EAAejH,GAAavG,GAAgByN,EAAgBlG,GAAImG,EAAYC,EAAa1M,EAAc2M,GAAOC,GAAqBrH,EAAe3W,EAAa8W,EAAqBN,EAAmBD,EAAkB0H,EAAYvY,EAAUsS,EAAoBE,EAAWxH,EAAQkH,EAAasG,GACpYC,GAiLAjI,EAyDA4B,GAEAsG,GAwEAC,GAnTA5d,GAAW,EACX2C,GAAWsD,KAAKC,IAChB2X,EAASlb,KACT6S,GAAkB,EAClBsI,GAAW,EAyBXxO,GAAY,SAAZA,UAAYvP,SAA2B,iBAAXA,GAW5Bge,GAAOzd,KAAKyD,IAGZ2Q,EAAS,QACTC,EAAU,SACVmE,GAAS,QACTE,GAAU,SACVgF,GAAS,QACTC,GAAQ,OACRC,GAAO,MACPC,GAAU,SACVlF,GAAW,UACXC,GAAU,SACVkF,GAAS,QACTC,EAAU,SACVtF,GAAM,KAYNxI,GAAa,SAAbA,WAAchS,EAAS+f,OAClBjC,EAAQiC,GAAoE,6BAA/C7M,GAAkBlT,GAAS4e,IAAkDhf,GAAK4e,GAAGxe,EAAS,CAACqM,EAAG,EAAGC,EAAG,EAAG0T,SAAU,EAAGC,SAAU,EAAGC,SAAU,EAAGC,UAAW,EAAGC,UAAW,EAAGC,MAAO,EAAGC,MAAO,EAAGC,MAAO,IAAI5N,SAAS,GACtPuJ,EAASlc,EAAQwgB,+BAClB1C,GAASA,EAAMnL,SAAS,GAAGtC,OACpB6L,GAwDRuE,GAAkB,CAAClL,WAAY,QAASC,SAAU,MAAOE,OAAQ,EAAGD,SAAU,OAAQE,WAAW,UACjG+K,GAAY,CAACC,cAAe,OAAQC,cAAe,GACnD1L,EAAY,CAACqH,IAAK,EAAGD,KAAM,EAAGuE,OAAQ,GAAKC,OAAQ,EAAGC,MAAO,GAiC7DhK,EAAkB,SAAlBA,gBAAmBsE,EAAQW,EAAO9H,EAAW8M,OACxCtY,EAAO,CAAC8Q,QAAS,SACpByH,EAAO/M,EAAU8M,EAAU,MAAQ,MACnCE,EAAehN,EAAU8M,EAAU,KAAO,OAC3C3F,EAAO8F,WAAaH,EACpBtY,EAAKwL,EAAU3O,EAAI,WAAayb,GAAW,IAAM,EACjDtY,EAAKwL,EAAU3O,GAAKyb,EAAU,MAAQ,EACtCtY,EAAK,SAAWuY,EAAOpB,IAAU,EACjCnX,EAAK,SAAWwY,EAAerB,IAAU,EACzCnX,EAAKwL,EAAUnM,GAAKiU,EAAQ,KAC5Bpc,GAAK4d,IAAInC,EAAQ3S,IAElBiQ,GAAY,GACZyI,GAAO,GAuBPC,EAAa,GACbC,EAAc,GAEdjK,EAAY,SAAZA,UAAY7W,UAAS6gB,EAAW7gB,IAAS6gB,EAAW7gB,GAAM+gB,IAAI,SAAAlgB,UAAKA,OAASigB,GAC5ElJ,EAAe,GAgCfoJ,GAAa,EAcbvJ,GAAc,SAAdA,YAAe9T,EAAOsd,MACrBpe,GAASF,GAAKoD,gBACdC,GAAQrD,GAAKmD,KACbhG,EAAQ,CAACoB,GAAMyB,GAAME,GAAQmD,KACzByQ,IAAoB9S,GAAUyU,GAIlCK,KACAH,GAAiBpT,GAAcgc,cAAe,EAC9CxgB,GAAWsT,QAAQ,SAAApB,UAAOf,GAAYe,MAAUA,EAAIlR,UAAYkR,EAAI2F,IAAM3F,WACtEuO,EAAetK,EAAU,eAC7B0H,IAASrZ,GAAcsO,OACvByN,GAAcjJ,KACdtX,GAAWsT,QAAQ,SAAApB,GACdf,GAAYe,KACfA,EAAIvP,SAAWuP,EAAIxP,OAAO4S,MAAMoL,eAAiB,QACjDxO,EAAI,MAGNuF,GAAU/H,MAAM,GAAG4D,QAAQ,SAAAlS,UAAKA,EAAEuf,YAClCjJ,GAAc,EACdD,GAAUnE,QAAQ,SAAClS,MACdA,EAAEwf,eAAiBxf,EAAEoX,IAAK,KACzByE,EAAO7b,EAAEoG,KAAKqZ,WAAa,cAAgB,eAC9CC,EAAW1f,EAAEoX,IAAIyE,GAClB7b,EAAEgO,QAAO,EAAM,GACfhO,EAAE2f,iBAAiB3f,EAAEoX,IAAIyE,GAAQ6D,GACjC1f,EAAEuf,aAGJ3C,GAAe,EACf7F,IAAgB,GAChBV,GAAUnE,QAAQ,SAAAlS,OACbqC,EAAMsN,GAAW3P,EAAEob,SAAUpb,EAAE4f,MAClCC,EAA0B,QAAf7f,EAAEoG,KAAKuT,KAAkB3Z,EAAE8f,WAAa9f,EAAE2Z,IAAMtX,EAC3D0d,EAAa/f,EAAEggB,aAAehgB,EAAE0Z,OAASrX,GACzCwd,GAAYE,IAAe/f,EAAEigB,aAAaF,EAAa1d,EAAM,EAAIrC,EAAE0Z,MAAOmG,EAAWpgB,KAAK4C,IAAI0d,EAAa1d,EAAMrC,EAAE0Z,MAAQ,EAAGrX,GAAOrC,EAAE2Z,KAAK,KAE9I5C,IAAgB,GAChB6F,GAAe,EACfyC,EAAanN,QAAQ,SAAA1B,UAAUA,GAAUA,EAAO0P,QAAU1P,EAAO0P,QAAQ,KACzEthB,GAAWsT,QAAQ,SAAApB,GACdf,GAAYe,KACfA,EAAIvP,QAAU6I,sBAAsB,kBAAM0G,EAAIxP,OAAO4S,MAAMoL,eAAiB,WAC5ExO,EAAI2F,KAAO3F,EAAIA,EAAI2F,QAGrBF,GAAmBG,EAAoB,GACvCjB,EAAajJ,QACb0S,KAEArK,EADA2B,GAAiB,GAEjBH,GAAUnE,QAAQ,SAAAlS,UAAK+P,GAAY/P,EAAEoG,KAAK+Z,YAAcngB,EAAEoG,KAAK+Z,UAAUngB,KACzEwW,GAAiBpT,GAAcgc,cAAe,EAC9CrK,EAAU,gBAlDT9W,GAAamF,GAAe,YAAasS,KAoD3C0K,EAAc,EACdC,GAAa,EAEbxL,EAAa,SAAbA,WAAchT,MACC,IAAVA,IAAiB2U,KAAmBF,EAAc,CACrDlT,GAAckd,YAAa,EAC3BvD,IAAYA,GAASnb,OAAO,OACxB6W,EAAIpC,GAAUhV,OACjBiY,EAAOxX,KACPye,EAAkC,IAAjBjH,EAAO0D,EACxBlE,EAASL,GAAKpC,GAAU,GAAGyC,YAC5BuH,GAA2BvH,EAAdsH,GAAwB,EAAI,EACzC5J,KAAmB4J,EAActH,GAC7ByH,IACC5L,KAAoB9F,IAA2C,IAAzByK,EAAO3E,KAChDA,GAAkB,EAClBI,EAAU,cAEXqH,GAASY,EACTA,EAAS1D,GAEN+G,GAAa,EAAG,KACnBjK,GAAKqC,EACS,EAAPrC,MACNC,GAAUD,KAAOC,GAAUD,IAAIxU,OAAO,EAAG2e,GAE1CF,GAAa,WAERjK,GAAK,EAAGA,GAAKqC,EAAGrC,KACpBC,GAAUD,KAAOC,GAAUD,IAAIxU,OAAO,EAAG2e,GAG3Cnd,GAAckd,YAAa,EAE5B1L,EAAS,GAEV8C,EAAmB,CA5SX,OACD,MA2S0B5D,EAASD,EAAQwE,GAAUiF,GAASjF,GAAU8E,GAAQ9E,GAAUgF,GAAMhF,GAAU+E,GAAO,UAAW,aAAc,QAAS,SAAU,kBAAmB,gBAAiB,eAAgB,aAAc,WAAY,cAAe,YAAa,YAAa,SAC3R1E,GAAchB,EAAiB8I,OAAO,CAACvI,GAAQE,GAAS,YAAa,MAAQoF,GAAQ,MAAQC,EAAS,WAAYnF,GAASD,GAAUA,GAAWiF,GAAMjF,GAAW+E,GAAQ/E,GAAWkF,GAASlF,GAAWgF,KA6CxMqD,GAAW,WACXnI,GAAY,SAAZA,UAAYK,MACPA,EAAO,KAITlT,EAAGvG,EAHAgV,EAAQyE,EAAM3Y,EAAEkU,MACnBuE,EAAIE,EAAMtX,OACVL,EAAI,OAEJ2X,EAAM3Y,EAAEwX,OAASla,GAAK+F,KAAKoX,SAAS9B,EAAM3Y,IAAIiW,QAAU,EAClDjV,EAAIyX,EAAGzX,GAAI,EACjB9B,EAAQyZ,EAAM3X,EAAE,GAChByE,EAAIkT,EAAM3X,GACN9B,EACHgV,EAAMzO,GAAKvG,EACDgV,EAAMzO,IAChByO,EAAMgG,eAAezU,EAAEib,QAAQD,GAAU,OAAOE,iBA4BpDrR,GAAc,CAAC0K,KAAK,EAAGC,IAAI,GA+D3BM,GAAa,qCAyFDnX,4BAQZ+C,KAAA,cAAKC,EAAM+J,WACLE,SAAWnE,KAAKwN,MAAQ,OACxBtT,MAAQ8F,KAAK6B,MAAK,GAAM,GACxBkP,QAwBJ2D,EAASC,EAAUC,EAAUC,EAASC,EAAStH,EAAOC,EAAKsH,EAAaC,EAAWC,EAAoBC,EAAkBC,EAAYC,EACrIC,EAAQC,EAAkBC,EAAgBC,EAAUrK,EAAQvX,EAAQ6hB,EAAWC,EAAWC,EAAUC,EAAWC,EAAcxK,EAAayK,EAAmBC,EAC7JC,EAAiB5K,EAAI6K,EAAOC,EAAOC,GAAYC,EAAaC,EAAcC,GAAiBC,GAAYC,GAAkBC,EAAgBC,EArBrI5G,GADL5V,EAAOyK,GAAcpC,GAAUrI,IAAS4J,GAAU5J,IAASA,EAAKyc,SAAY,CAAC1M,QAAS/P,GAAQA,EAAMgY,KAC/FpC,SAAU8G,EAAsO1c,EAAtO0c,YAAajZ,EAAyNzD,EAAzNyD,GAAIkZ,EAAqN3c,EAArN2c,SAAU5C,GAA2M/Z,EAA3M+Z,UAAW6C,EAAgM5c,EAAhM4c,MAAO7M,GAAyL/P,EAAzL+P,QAASiB,GAAgLhR,EAAhLgR,IAAK6L,GAA2K7c,EAA3K6c,WAAYC,GAA+J9c,EAA/J8c,oBAAqB5E,EAA0IlY,EAA1IkY,cAAe6E,EAA2H/c,EAA3H+c,gBAAiBC,EAA0Ghd,EAA1Ggd,eAAgBC,GAA0Fjd,EAA1Fid,KAAM9R,GAAoFnL,EAApFmL,KAAM+R,GAA8Eld,EAA9Ekd,YAAaC,EAAiEnd,EAAjEmd,UAAWvQ,GAAsD5M,EAAtD4M,mBAAoBwQ,GAAkCpd,EAAlCod,cAAeC,GAAmBrd,EAAnBqd,gBACjO7R,GAAYxL,EAAKqZ,YAAerZ,EAAK4M,qBAA0C,IAApB5M,EAAKqZ,WAAwBja,GAAcvE,GACtGyiB,IAAYV,GAAmB,IAAVA,EACrB5H,GAAWrb,EAAWqG,EAAKgV,UAAYhc,IACvCukB,EAAgBrmB,GAAK+F,KAAKoX,SAASW,IACnCjP,GAAarO,GAAYsd,IACzB7H,GAA0H,WAAtG,YAAanN,EAAOA,EAAKwd,QAAUnmB,EAAc2d,GAAU,YAAejP,IAAc,SAC5G0X,GAAY,CAACzd,EAAK0d,QAAS1d,EAAK2d,QAAS3d,EAAK4d,YAAa5d,EAAK6d,aAChE5F,GAAgBqF,IAAYtd,EAAKiY,cAAcpZ,MAAM,KACrDif,GAAU,YAAa9d,EAAOA,EAAK8d,QAAU9F,GAAU8F,QACvDhL,GAAc/M,GAAa,EAAIH,WAAW4E,GAAkBwK,IAAU,SAAWxJ,GAAUlM,GAAK6X,MAAY,EAC5Gtd,GAAOiM,KACPiY,GAAgB/d,EAAK+d,eAAkB,kBAAM/d,EAAK+d,cAAclkB,KAChEmkB,GA7kBa,SAAfC,aAAgBjJ,EAAUjP,SAAatG,IAAAA,EAAGC,IAAAA,GAAI7C,IAAAA,SAAQA,EAAIxF,EAAc2d,EAAU,0BAA4B,kBAAMnY,IAAI4C,IAAK,kBAAOsG,EAAa+C,GAAsBpJ,GAAMsV,EAAS,SAAWtV,KAAQ,GA6kBrLue,CAAajJ,GAAUjP,GAAYyF,IACrD0S,GA7kBgB,SAAlBC,gBAAmB7mB,EAASyO,UAAgBA,IAAevO,GAASC,QAAQH,GAAW2R,GAAe3R,GAAW,kBAAM4R,IA6kBhGiV,CAAgBnJ,GAAUjP,IAC/CqY,GAAW,EACXC,GAAc,EACdC,GAAe,EACfrS,GAAa3R,EAAe0a,GAAUxJ,OAMvC3R,GAAK+f,YAAc/f,GAAK6f,WAAY,EACpC7f,GAAK2f,KAAOhO,GACZ0M,GAAiB,GACjBre,GAAKmb,SAAWA,GAChBnb,GAAK6Y,OAAS9F,GAAqBA,GAAmBsG,KAAKqL,KAAK3R,IAAsBX,GACtF0O,EAAU1O,KACVpS,GAAKmG,KAAOA,EACZ+J,EAAYA,GAAa/J,EAAK+J,UAC1B,oBAAqB/J,IACxBqW,GAAQ,GACkB,OAA1BrW,EAAKwe,kBAA8B7H,GAAW9c,KAE/C0jB,EAAckB,YAAclB,EAAckB,aAAe,CACxD5K,IAAKkB,GAAiBC,GAAUna,IAChC+Y,KAAMmB,GAAiBC,GAAU5V,KAElCvF,GAAK2gB,QAAUA,EAAU+C,EAAckB,YAAYjT,GAAUnM,GAC7DxF,GAAK6kB,cAAgB,SAAA5lB,IACpBojB,EAActS,GAAU9Q,IAAUA,GAKjCmjB,GAAaA,GAAWjR,SAASlS,GAAUmjB,GAAa/kB,GAAK4e,GAAG/L,EAAW,CAAC4U,KAAM,OAAQC,cAAe,MAAOlJ,SAAS,EAAO1K,SAAUkR,EAAa2C,QAAQ,EAAMxJ,WAAY,6BAAM0H,GAAmBA,EAAgBljB,QAH1NoiB,IAAcA,GAAWhS,SAAS,GAAGtC,OACrCsU,GAAa,IAKXlS,IACHA,EAAU/J,KAAK8e,MAAO,EACrB/U,EAAUgV,WAAallB,GAAKmlB,aAAmD,IAAnCjV,EAAU/J,KAAKif,kBAAsD,IAAzBjf,EAAKif,iBAA6BlV,EAAUiB,YAAcjB,EAAU+P,OAAO,GAAG,GAAM,GAC7KjgB,GAAKkQ,UAAYA,EAAU3D,SAC3B2D,EAAUsJ,cAAgBxZ,IACrB6kB,cAAc9B,GACnBb,EAAQ,EACDtY,EAAPA,GAAYsG,EAAU/J,KAAKyD,IAGxB0H,KAEEtB,GAAUsB,MAASA,GAAKrQ,OAC5BqQ,GAAO,CAAC+T,OAAQ/T,wBAEIrN,GAAMgQ,OAAU5W,GAAK4d,IAAI/O,GAAa,CAACjI,GAAOnD,IAAUqa,GAAU,CAACkE,eAAgB,SACxG1gB,GAAWsT,QAAQ,SAAApE,UAAKiC,GAAYjC,IAAMA,EAAExM,UAAY6K,GAAatL,GAAKC,kBAAoBC,GAASqa,MAActN,EAAEvM,QAAS,KAChIuf,EAAW/Q,GAAYwB,GAAK+T,QAAU/T,GAAK+T,OAAyB,WAAhB/T,GAAK+T,OApkBxC,SAAnBC,iBAAmBpV,UAAa,SAAAjR,UAAS5B,GAAK8C,MAAMmR,KAAKN,GAAoBd,GAAYjR,IAokBRqmB,CAAiBpV,GAA6B,sBAAhBoB,GAAK+T,OApiB7F,SAAvBE,qBAAuBtU,UAAY,SAAChS,EAAOumB,UAAOpU,GAAiBJ,GAAoBC,GAArCG,CAAgDnS,EAAOumB,EAAG7T,YAoiByC4T,CAAqBrV,IAAkC,IAArBoB,GAAKmU,YAAwB,SAACxmB,EAAOumB,UAAOpU,GAAiBE,GAAK+T,OAAtBjU,CAA8BnS,EAAO4C,KAAa2iB,GAAc,IAAM,EAAIgB,EAAG7T,YAAatU,GAAK8C,MAAMmR,KAAKA,GAAK+T,QAChV/C,EAAehR,GAAKH,UAAY,CAACrP,IAAK,GAAKM,IAAK,GAChDkgB,EAAetS,GAAUsS,GAAgBpG,GAAOoG,EAAaxgB,IAAKwgB,EAAalgB,KAAO8Z,GAAOoG,EAAcA,GAC3GC,GAAkBllB,GAAKyP,YAAYwE,GAAKoU,OAAUrD,EAAc,GAAM,GAAK,eACtExJ,EAASzG,KACZuT,EAAoB9jB,KAAa2iB,GAAc,IAC/CjJ,EAAQoF,EAAQpF,WACZoK,GAAqBnmB,KAAKyD,IAAIjD,GAAKsC,eAAiB,KAAQiZ,GAAU3M,IAAkB2V,KAAa1L,EAoC/F7Y,GAAK4lB,UAAYrB,KAAa1L,GACxC0J,GAAgBjX,SAAQ,OArCyF,KAMhHua,EAAUC,EALP1V,GAAYyI,EAASY,GAAS6H,EACjCyD,EAAgB7U,IAAcuT,GAAWvT,EAAU6U,gBAAkB3U,EACrE2V,EAAWJ,EAAoB,GAAMZ,EAAgB5C,IAAUtgB,KAAasa,IAAU,KAAS,EAC/Fd,EAAUhe,GAAK8C,MAAM+D,OAAOkM,EAAU,EAAIA,EAAU6M,GAAK8I,EAAW,GAAKA,EAAW,MACpFC,EAAa5V,IAA6B,IAAjBkB,GAAK2U,QAAoB,EAAI5K,GAEpD6K,EAAqC5U,GAArC4U,QAAStL,EAA4BtJ,GAA5BsJ,YAAaY,EAAelK,GAAfkK,cACzBqK,EAAWhF,EAASmF,EAAYhmB,IAChC+P,GAAU8V,KAAcA,EAAWG,GACnCF,EAAYtmB,KAAK4C,IAAI,EAAG5C,KAAKC,MAAMga,EAAQoM,EAAWvE,IAClDzI,GAAUa,GAAiBD,GAAVZ,GAAmBiN,IAAcjN,EAAQ,IACzD0C,IAAUA,EAAM2J,UAAY3J,EAAMhY,MAAQ0Z,GAAK6I,EAAYjN,WAG1C,IAAjBvH,GAAK2U,UACR5K,EAAUwK,EAAWzV,GAEtBuQ,EAAQmF,EAAW,CAClB3U,SAAUmR,EAAarF,GAAoF,KAA7Ezd,KAAK4C,IAAI6a,GAAK+I,EAAajB,GAAgB9H,GAAK4I,EAAWd,IAA0BgB,EAAW,KAAS,IACvIjB,KAAMxT,GAAKwT,MAAQ,SACnBvhB,KAAM0Z,GAAK6I,EAAYjN,GACvB+B,YAAa,8BAAM2H,GAAgBjX,SAAQ,IAASsP,GAAeA,EAAY5a,KAC/Ewb,iCACCxb,GAAK2B,SACL4iB,GAAWnS,KACPlC,IAAcuT,KACjBrB,GAAaA,GAAW+D,QAAQ,gBAAiBN,EAAU3V,EAAUkW,OAASlW,EAAUmW,OAASnW,EAAUE,SAASyV,IAErH3D,EAAQC,EAAQjS,IAAcuT,GAAWvT,EAAU6U,gBAAkB/kB,GAAKoQ,SAC1E+S,GAAkBA,EAAenjB,IACjCwb,GAAcA,EAAWxb,MAExB6Y,EAAQwC,EAAUiG,EAAQwE,EAAYjN,EAASwC,EAAUiG,GAC5D4E,GAAWA,EAAQlmB,GAAM2gB,EAAQpF,WAKjChP,SAEJ3C,IAAOiV,GAAKjV,GAAM5J,IAKK2iB,GADvBA,GAHAzM,GAAUlW,GAAKkW,QAAUpW,EAAWoW,KAAoB,IAARiB,IAAgBA,MAGhCjB,GAAQqB,OAASrB,GAAQqB,MAAM+O,WACnB3D,EAAmB3iB,IAE/DmX,IAAc,IAARA,GAAejB,GAAUpW,EAAWqX,IAC1C3I,GAAUqU,KAAiBA,EAAc,CAAC0D,QAASrQ,GAASsQ,UAAW3D,IACnE1L,MACa,IAAf6L,IAAwBA,KAAe5K,KAAa4K,MAAcA,IAAc7L,GAAImB,YAAcnB,GAAImB,WAAWrE,OAAuD,SAA9CtD,GAAkBwG,GAAImB,YAAYrB,UAA6BkB,IAC1LnY,GAAKmX,IAAMA,IACXyJ,EAAWvjB,GAAK+F,KAAKoX,SAASrD,KAChBC,OAYbmK,EAAmBX,EAASa,UAXxB6B,KACHA,EAAYxjB,EAAWwjB,MACTA,EAAUV,WAAaU,EAAYA,EAAUvI,SAAWuI,EAAUmD,eAChF7F,EAAS8F,iBAAmBpD,EAC5BA,IAAc1C,EAAStJ,YAAciB,GAAU+K,KAEhD1C,EAASxJ,OAASA,EAASkM,GAAa1iB,GAAKyS,cAAc,OAC3D+D,EAAOuP,UAAUnW,IAAI,cACrB5G,GAAMwN,EAAOuP,UAAUnW,IAAI,cAAgB5G,GAC3CgX,EAASa,SAAWF,EAAmBhJ,GAAUpB,MAIjC,IAAjBhR,EAAKygB,SAAqBvpB,GAAK4d,IAAI9D,GAAK,CAACyP,SAAS,IAClD5mB,GAAKoX,OAASA,EAASwJ,EAASxJ,OAChCC,EAAK1G,GAAkBwG,IACvB2K,EAAezK,EAAG2L,GAAarR,GAAUhM,KACzC+b,EAAYrkB,GAAKkE,YAAY4V,IAC7BwK,EAAYtkB,GAAKwpB,YAAY1P,GAAKxF,GAAU3O,EAAGiV,IAE/Cf,GAAWC,GAAKC,EAAQC,GACxBoK,EAAWlJ,GAAUpB,KAElB8M,GAAS,CACZ7C,EAAapR,GAAUiU,IAAWrT,GAAaqT,GAAS/F,IAAmBA,GAC3EgD,EAAqBtO,GAAc,iBAAkBhJ,EAAIuR,GAAUxJ,GAAWyP,EAAY,GAC1FD,EAAmBvO,GAAc,eAAgBhJ,EAAIuR,GAAUxJ,GAAWyP,EAAY,EAAGF,GACzFrhB,EAASqhB,EAAmB,SAAWvP,GAAU3L,GAAGH,QAChDihB,EAAUhnB,EAAWtC,EAAc2d,GAAU,YAAcA,IAC/D6F,EAAc/U,KAAK+U,YAAcpO,GAAc,QAAShJ,EAAIkd,EAASnV,GAAWyP,EAAYvhB,EAAQ,EAAGkT,IACvGkO,EAAYhV,KAAKgV,UAAYrO,GAAc,MAAOhJ,EAAIkd,EAASnV,GAAWyP,EAAYvhB,EAAQ,EAAGkT,IACjGA,KAAuB2P,EAAiBrlB,GAAKwpB,YAAY,CAAC7F,EAAaC,GAAYtP,GAAU3O,EAAGiV,KAC1F3E,IAAsB3V,GAASyD,SAAsD,IAA5C5D,EAAc2d,GAAU,kBA7rBrD,SAApB4L,kBAAoBtpB,OACfma,EAAWjH,GAAkBlT,GAASma,SAC1Cna,EAAQwW,MAAM2D,SAAyB,aAAbA,GAAwC,UAAbA,EAAwBA,EAAW,WA4rBtFmP,CAAkB7a,GAAajI,GAAQkX,IACvC9d,GAAK4d,IAAI,CAACiG,EAAoBC,GAAmB,CAACyF,SAAS,IAC3D7E,EAAoB1kB,GAAKwpB,YAAY3F,EAAoBvP,GAAU3O,EAAGiV,IACtEgK,EAAkB5kB,GAAKwpB,YAAY1F,EAAkBxP,GAAU3O,EAAGiV,QAIhElF,GAAoB,KACnBiU,EAAcjU,GAAmB5M,KAAK4V,SACzCkL,EAAYlU,GAAmB5M,KAAK+gB,eACrCnU,GAAmBoU,cAAc,WAAY,WAC5CnnB,GAAK2B,OAAO,EAAG,EAAG,GAClBqlB,GAAeA,EAAYI,MAAMrU,GAAoBkU,GAAa,SAIpEjnB,GAAKqnB,SAAW,kBAAMjR,GAAUA,GAAUxY,QAAQoC,IAAQ,IAC1DA,GAAKsnB,KAAO,kBAAMlR,GAAUA,GAAUxY,QAAQoC,IAAQ,IAEtDA,GAAK+N,OAAS,SAACA,EAAQwZ,OACjBA,SAAevnB,GAAK8N,MAAK,OAC1B0Z,GAAe,IAAXzZ,IAAqB/N,GAAKsQ,QACjCmX,EAAiBtS,GACdqS,IAAMxnB,GAAKmlB,aACVqC,IACHhF,GAAahjB,KAAK4C,IAAIgQ,KAAcpS,GAAK6Y,OAAOrC,KAAO,GACvDiO,GAAezkB,GAAKoQ,SACpBqS,GAAmBvS,GAAaA,EAAUE,YAE3C4Q,GAAe,CAACA,EAAaC,EAAWC,EAAoBC,GAAkBlP,QAAQ,SAAAiI,UAAKA,EAAEjG,MAAMgD,QAAUuQ,EAAI,OAAS,UACtHA,IACHrS,GAAcnV,IACT2B,OAAO6lB,IAETrQ,IAASkM,IAAgBrjB,GAAK4lB,WAC7B4B,EAncM,SAAdE,YAAevQ,EAAKC,EAAQsB,GAC3BL,GAAUK,OACN9Z,EAAQuY,EAAII,SACZ3Y,EAAM8nB,eACTrO,GAAUzZ,EAAM0Y,kBACV,GAAIH,EAAII,MAAMC,UAAW,KAC3BhE,EAAS4D,EAAOkB,WAChB9E,IACHA,EAAOa,aAAa8C,EAAKC,GACzB5D,EAAOqD,YAAYO,IAGrBD,EAAII,MAAMC,WAAY,EAwblBkQ,CAAYvQ,GAAKC,EAAQmK,GAEzBrK,GAAWC,GAAKC,EAAQzG,GAAkBwG,IAAMG,IAGlDkQ,GAAKxnB,GAAK2B,OAAO6lB,GACjBrS,GAAcsS,EACdznB,GAAKmlB,WAAaqC,IAIpBxnB,GAAKsf,QAAU,SAACqI,EAAM/lB,EAAOgW,EAAUgQ,OACjCzS,IAAgBnV,GAAKsQ,SAAa1O,KAGnCuV,IAAOwQ,GAAQjT,GAClB1W,GAAamF,cAAe,YAAasS,UAGzCc,IAAkB2N,IAAiBA,GAAclkB,IAClDmV,GAAcnV,GACV2gB,EAAQpF,QAAU3D,IACrB+I,EAAQpF,MAAMzN,OACd6S,EAAQpF,MAAQ,GAEjB6G,IAAcA,GAAW7V,QACzB0W,IAAuB/S,GAAaA,EAAUnC,OAAO,CAACD,MAAM,IAAQ+Z,aACpE7nB,GAAKmlB,YAAcnlB,GAAK+N,QAAO,GAAM,GACrC/N,GAAKuf,eAAgB,MAapBlI,EAAIsC,EAAQd,EAAQiP,EAAYC,EAAUC,EAAYC,EAAQC,EAAgBC,EAASC,EAAcC,EAAgBC,EAAmBC,EAZrIhW,EAAO4R,KACVnL,EAAiBqL,KACjBjiB,EAAM2Q,GAAqBA,GAAmB5B,WAAazB,GAAWyL,GAAUxJ,IAChF6W,EAAiBlH,GAAU,IAC3BzhB,EAAS,EACT4oB,EAAiBb,GAAa,EAC9Bc,EAAY1Y,GAAU4H,GAAYA,EAAS8B,IAAMvT,EAAKuT,IACtDiP,EAAmBxiB,EAAKyiB,YAAc1S,GACtC2S,EAAc7Y,GAAU4H,GAAYA,EAAS6B,MAAStT,EAAKsT,QAAyB,IAAftT,EAAKsT,OAAgBvD,GAAeiB,GAAM,MAAQ,SAAnB,GACpG2R,EAAkB9oB,GAAK8oB,gBAAkB3iB,EAAK2iB,iBAAmBhpB,EAAWqG,EAAK2iB,gBAAiB9oB,IAClG+oB,EAAgB7S,IAAW1W,KAAK4C,IAAI,EAAGgU,GAAUxY,QAAQoC,MAAW,EACpEe,EAAIgoB,MAED9E,IAAWjU,GAAU4H,KACxB0Q,EAAoBjrB,GAAKkE,YAAY2f,EAAoBvP,GAAUnM,GACnE+iB,EAAkBlrB,GAAKkE,YAAY4f,EAAkBxP,GAAUnM,IAEnD,EAANzE,MACNinB,EAAa5R,GAAUrV,IACZ2Y,KAAOsO,EAAW1I,QAAQ,EAAG,KAAOnK,GAAcnV,MAC7DioB,EAASD,EAAW7Q,MACL8Q,IAAW/R,IAAW+R,IAAW9Q,IAAO8Q,IAAWa,GAAqBd,EAAW7C,cAChFiD,EAAjBA,GAAgC,IACnBY,QAAQhB,GACrBA,EAAWja,QAAO,GAAM,IAErBia,IAAe5R,GAAUrV,KAC5BgoB,IACAhoB,SAGF+O,GAAY+Y,KAAiBA,EAAcA,EAAY7oB,KACvD6oB,EAActa,GAAYsa,EAAa,QAAS7oB,IAChDyZ,EAAQd,GAAekQ,EAAa3S,GAAS3D,EAAMZ,GAAWS,KAAc4O,EAAaE,EAAoBlhB,GAAMgZ,EAAgBC,GAAa3F,GAAkBlR,EAAK2Q,GAAoB/S,GAAK+f,aAAe,iBAAmB5I,IAAO,KAAQ,GACjPrH,GAAY4Y,KAAeA,EAAYA,EAAU1oB,KAC7CwO,GAAUka,KAAeA,EAAU9qB,QAAQ,SACzC8qB,EAAU9qB,QAAQ,KACtB8qB,GAAala,GAAUqa,GAAeA,EAAY7jB,MAAM,KAAK,GAAK,IAAM0jB,GAExE7oB,EAASyS,GAAYoW,EAAUja,OAAO,GAAI8D,GAC1CmW,EAAYla,GAAUqa,GAAeA,GAAe9V,GAAqB1V,GAAK8C,MAAMoZ,SAAS,EAAGxG,GAAmB5B,WAAY4B,GAAmByG,cAAcC,MAAO1G,GAAmByG,cAAcE,IAAKD,GAASA,GAAS5Z,EAC/N8oB,EAAmBzS,KAGrBwS,EAAYna,GAAYma,EAAW,MAAO1oB,IAC1C0Z,EAAMla,KAAK4C,IAAIqX,EAAOd,GAAe+P,IAAcC,EAAmB,SAAWvmB,GAAMumB,EAAkBpW,EAAMZ,GAAWS,KAAevS,EAAQohB,EAAWE,EAAkBnhB,GAAMgZ,EAAgBC,GAAa3F,GAAkBlR,EAAK2Q,GAAoB/S,GAAK6f,WAAa,gBAAkB,KAEhShgB,EAAS,EACTkB,EAAIgoB,EACGhoB,MAENknB,GADAD,EAAa5R,GAAUrV,IACHoW,MACN6Q,EAAWvO,MAAQuO,EAAWiB,UAAYxP,IAAU1G,IAAuC,EAAjBiV,EAAWtO,MAClGrC,EAAK2Q,EAAWtO,KAAO1Z,GAAK+f,YAAcvgB,KAAK4C,IAAI,EAAG4lB,EAAWvO,OAASuO,EAAWvO,QAC/EwO,IAAW/R,IAAW8R,EAAWvO,MAAQuO,EAAWiB,SAAWxP,GAAUwO,IAAWa,IAAoBpc,MAAMmc,KACnHhpB,GAAUwX,GAAM,EAAI2Q,EAAW5X,WAEhC6X,IAAW9Q,KAAQsR,GAAkBpR,OAGvCoC,GAAS5Z,EACT6Z,GAAO7Z,EACPG,GAAK+f,cAAgB/f,GAAK+f,aAAelgB,GAErCG,GAAK6f,YAActJ,KACtBvW,GAAK6f,UAAYnG,IAAQ,KACzBA,EAAMla,KAAKsC,IAAI4X,EAAKhK,GAAWyL,GAAUxJ,MAE1C2P,EAAU5H,EAAMD,IAAYA,GAAS,MAAS,KAE1C+O,IACH/D,GAAepnB,GAAK8C,MAAM+D,MAAM,EAAG,EAAG7G,GAAK8C,MAAM+oB,UAAUzP,EAAOC,EAAK8I,MAExExiB,GAAKipB,SAAWR,EACZzH,GAAenhB,KAClBwX,EAAK,IACF1F,GAAU3O,GAAK,KAAOnD,EACzBipB,IAAoBzR,EAAG1F,GAAUnM,GAAK,KAAO4M,MAC7C/U,GAAK4d,IAAI,CAAC+F,EAAaC,GAAY5J,KAGhCF,IAASwF,IAAgB3c,GAAK0Z,KAAOhK,GAAWyL,GAAUxJ,KAuEvD,GAAIuE,IAAW9D,OAAiBW,OACtC4G,EAASzD,GAAQoC,WACVqB,GAAUA,IAAW1V,IACvB0V,EAAOwP,aACV1P,GAASE,EAAOwP,WAChBzP,GAAOC,EAAOwP,YAEfxP,EAASA,EAAOrB,gBA7EjBjB,EAAK1G,GAAkBwG,IACvB2Q,EAAanW,KAAc3Q,GAC3B6X,EAASzG,KACTwP,EAAW7V,WAAW2V,EAAU/P,GAAU3O,IAAMylB,GAC3CrmB,GAAa,EAANsX,IAEX2O,EAAiB,CAACpU,MADlBoU,GAAkBnc,GAActL,GAAKC,kBAAoBC,GAAUqa,IAAUlH,MACpChV,MAAOopB,EAAe,WAAa1W,GAAU3O,EAAEomB,gBACpFld,IAAmF,WAArEyE,GAAkB1M,IAAO,WAAa0N,GAAU3O,EAAEomB,iBACnEf,EAAepU,MAAM,WAAatC,GAAU3O,EAAEomB,eAAiB,WAGjElS,GAAWC,GAAKC,EAAQC,GACxBoK,EAAWlJ,GAAUpB,IAErBwC,EAASlK,GAAW0H,IAAK,GACzB+Q,EAAiB5U,IAAoB7S,EAAe0a,GAAU2M,EAAaviB,GAAcvE,GAApDP,GACjCuiB,KACH1L,EAAc,CAAC0L,GAAarR,GAAUhM,IAAK2b,EAASmH,EAAiBxQ,KACzDlY,EAAIqX,GAChBrW,EAAKiiB,KAAe7K,GAAYpH,GAASoG,GAAKxF,IAAa2P,EAASmH,EAAiB,KAEpFnR,EAAYrW,KAAK0Q,GAAU/L,EAAG7E,EAAIkX,IACP,SAA3Bb,EAAOnD,MAAM4D,YAAyBT,EAAOnD,MAAM4D,UAAY9W,EAAIkX,KAEpEI,GAAUf,GACNwR,GACH1S,GAAUnE,QAAQ,SAAAlS,GACbA,EAAEoX,MAAQ2R,IAAyC,IAAtB/oB,EAAEoG,KAAK6c,aACvCjjB,EAAEwf,eAAgB,KAIrBjM,IAAoBlB,GAAWoQ,MAE/BzhB,EAAIgQ,GAASoG,GAAKxF,MACc,SAA3ByF,EAAOnD,MAAM4D,YAAyBT,EAAOnD,MAAM4D,UAAY9W,EAAIkX,IAErE3E,MACHyU,EAAW,CACV/N,IAAML,EAAOK,KAAO8N,EAAajP,EAASY,EAAQyO,GAAmBjQ,GACrE8B,KAAOJ,EAAOI,MAAQ+N,EAAaI,EAAiBrP,EAASY,GAAUxB,GACvEF,UAAW,aACXH,SAAU,UAEFI,IAAU+P,EAAQ,SAAmBvoB,KAAK6pB,KAAK1P,EAAOrK,OAAS2I,GACxE8P,EAAS7P,IAAW6P,EAAQ,UAAoBvoB,KAAK6pB,KAAK1P,EAAOnK,QAAUyI,GAC3E8P,EAAS3P,IAAW2P,EAAS3P,GAAUgF,IAAQ2K,EAAS3P,GAAU8E,IAAU6K,EAAS3P,GAAUiF,IAAW0K,EAAS3P,GAAU+E,IAAS,IACtI4K,EAAS5P,IAAYd,EAAGc,IACxB4P,EAAS5P,GAAWiF,IAAQ/F,EAAGc,GAAWiF,IAC1C2K,EAAS5P,GAAW+E,IAAU7F,EAAGc,GAAW+E,IAC5C6K,EAAS5P,GAAWkF,IAAWhG,EAAGc,GAAWkF,IAC7C0K,EAAS5P,GAAWgF,IAAS9F,EAAGc,GAAWgF,IAC3CqE,EA7hBS,SAAb8H,WAAc5Q,EAAOqP,EAAUwB,WAI7B/jB,EAHG+K,EAAS,GACZiI,EAAIE,EAAMtX,OACVL,EAAIwoB,EAAc,EAAI,EAEhBxoB,EAAIyX,EAAGzX,GAAK,EAClByE,EAAIkT,EAAM3X,GACVwP,EAAOtP,KAAKuE,EAAIA,KAAKuiB,EAAYA,EAASviB,GAAKkT,EAAM3X,EAAE,WAExDwP,EAAOxQ,EAAI2Y,EAAM3Y,EACVwQ,EAmhBa+Y,CAAW/H,EAAkBwG,EAAU1E,IACxD9M,IAAkBnE,GAAW,IAE1BlC,GACHiY,EAAUjY,EAAUgV,SACpBzI,GAAoB,GACpBvM,EAAU+P,OAAO/P,EAAUiB,YAAY,GAAM,GAC7C0Q,EAAYH,EAAU/P,GAAU3O,GAAK4e,EAAWN,EAASmH,EACzDzG,EAA0C,EAA/BxiB,KAAKyD,IAAIqe,EAASO,GAC7BvO,IAAoB0O,GAAYR,EAAexT,OAAOwT,EAAepgB,OAAS,EAAG,GACjF8O,EAAU+P,OAAO,GAAG,GAAM,GAC1BkI,GAAWjY,EAAU2X,YAAW,GAChC3X,EAAUsD,QAAUtD,EAAUO,UAAUP,EAAUO,aAClDgM,GAAoB,IAEpBoF,EAAYP,EAEb+G,IAAmBA,EAAeppB,MAASopB,EAAepU,MAAM,WAAatC,GAAU3O,EAAEomB,eAAiBf,EAAeppB,MAASopB,EAAepU,MAAMgG,eAAe,YAActI,GAAU3O,IAW/LolB,GAAgBA,EAAanW,QAAQ,SAAAlS,UAAKA,EAAEgO,QAAO,GAAO,KAC1D/N,GAAKyZ,MAAQA,EACbzZ,GAAK0Z,IAAMA,EACXoH,EAAUC,EAAUxK,GAAiBiM,GAAapQ,KAC7CW,IAAuBwD,KAC3BuK,EAAU0B,IAAcpQ,GAAWoQ,IACnCxiB,GAAK6Y,OAAOrC,IAAM,GAEnBxW,GAAK+N,QAAO,GAAO,GACnByW,GAAc3iB,KACV0gB,KACHgC,IAAY,EAEZhC,GAAgBjX,SAAQ,IAEzB6J,GAAc,EACdjF,GAAauT,KAAavT,EAAUgV,UAAYzC,KAAqBvS,EAAUE,aAAeqS,IAAoBvS,EAAUE,SAASqS,IAAoB,GAAG,GAAMxC,OAAO/P,EAAUmJ,QAAQ,GAAM,IAC7LmP,GAAkB/D,KAAiBzkB,GAAKoQ,UAAY2C,IAAsBkQ,IAAwB/S,IAAcA,EAAUgV,YAC7HhV,IAAcuT,IAAYvT,EAAU6U,cAAchS,IAAsB0G,GAAS,OAAUgL,GAAepnB,GAAK8C,MAAM+oB,UAAUzP,EAAOC,EAAK,GAAK+K,IAAc,GAC9JzkB,GAAKoQ,SAAWoY,IAAoB1H,EAAUrH,GAAS6H,IAAWmD,GAAgB,EAAIA,IAEvFtN,IAAO6L,KAAe5L,EAAO+R,WAAa3pB,KAAKC,MAAMO,GAAKoQ,SAAWyR,IACrEO,IAAcA,GAAWyF,aAEpBnb,MAAM4b,KACVA,GAAqBjrB,GAAKkE,YAAY2f,EAAoBvP,GAAUnM,GACpE+iB,GAAmBlrB,GAAKkE,YAAY4f,EAAkBxP,GAAUnM,GAChEwV,GAAakG,EAAoBvP,GAAW2W,GAC5CtN,GAAagG,EAAarP,GAAW2W,GAAqBV,GAAa,IACvE5M,GAAamG,EAAkBxP,GAAW4W,GAC1CvN,GAAaiG,EAAWtP,GAAW4W,GAAmBX,GAAa,KAGpEY,IAAmBjS,IAAkBvW,GAAK2B,UAEtCue,IAAc3J,IAAmB8K,IACpCA,GAAqB,EACrBnB,GAAUlgB,IACVqhB,GAAqB,KAIvBrhB,GAAKsC,YAAc,kBAAQ8P,KAAe2O,IAAYlf,KAAasa,IAAU,KAAS,GAEtFnc,GAAKwpB,aAAe,WACnBvZ,GAAcjQ,GAAK0Q,mBACfR,IACHkS,GAAaA,GAAWhS,SAAS,GAAOF,EAAU8U,SAA4DvB,IAAYxT,GAAcC,EAAWlQ,GAAK2R,UAAY,EAAG,GAA1G1B,GAAcC,EAAWA,EAAUC,cAIlGnQ,GAAKypB,cAAgB,SAAAC,UAASxZ,GAAaA,EAAUgB,SAAYuI,GAASzZ,GAAKsf,WAAa7F,GAAUvJ,EAAUgB,OAAOwY,GAASxZ,EAAUiB,WAAcmQ,GAAW,GAEnKthB,GAAK2pB,YAAc,SAAAhmB,OACd5C,EAAIqV,GAAUxY,QAAQoC,IACzBgD,EAAqB,EAAjBhD,GAAK2R,UAAgByE,GAAU/H,MAAM,EAAGtN,GAAG6oB,UAAYxT,GAAU/H,MAAMtN,EAAE,UACtEyN,GAAU7K,GAAQX,EAAE4K,OAAO,SAAA7N,UAAKA,EAAEoG,KAAKqd,kBAAoB7f,IAAQX,GAAG4K,OAAO,SAAA7N,UAAsB,EAAjBC,GAAK2R,UAAgB5R,EAAE2Z,KAAOD,EAAQ1Z,EAAE0Z,OAASC,KAI5I1Z,GAAK2B,OAAS,SAACU,EAAOie,EAAgBuJ,OACjC9W,IAAuB8W,GAAcxnB,OAOxCujB,EAAqBkE,EAAaC,EAAQC,EAAcC,EAASC,EAASC,EAJvEtR,GAA4B,IAAnBtC,GAA0BiM,GAAaxiB,GAAK6Y,SACxDrT,EAAInD,EAAQ,GAAKwW,EAASY,GAAS6H,EACnC8I,EAAU5kB,EAAI,EAAI,EAAQ,EAAJA,EAAQ,EAAIA,GAAK,EACvCif,EAAezkB,GAAKoQ,YAEjBkQ,IACHS,EAAUD,EACVA,EAAU/N,GAAqBX,KAAeyG,EAC1CvH,KACH6Q,EAAQD,EACRA,EAAQhS,IAAcuT,GAAWvT,EAAU6U,gBAAkBqF,IAI3D/L,GAAiBlH,KAAQhC,KAAgBjW,IAAYwV,MACnD0V,GAAW3Q,EAAQZ,GAAWA,EAASkI,IAAYlf,KAAasa,IAAWkC,EAC/E+L,EAAU,KACY,IAAZA,GAAiB1Q,EAAMb,GAAWA,EAASkI,IAAYlf,KAAasa,IAAWkC,IACzF+L,EAAU,QAGRA,IAAY3F,GAAgBzkB,GAAKsQ,QAAS,IAI7C0Z,GADAC,GAFArE,EAAW5lB,GAAK4lB,WAAawE,GAAWA,EAAU,OACpC3F,GAAgBA,EAAe,OAEjB2F,KAAc3F,EAC1CzkB,GAAK2R,UAAsB8S,EAAV2F,EAAyB,GAAK,EAC/CpqB,GAAKoQ,SAAWga,EAEZJ,IAAiB7U,KACpB2U,EAAcM,IAAY3F,EAAe,EAAgB,IAAZ2F,EAAgB,EAAqB,IAAjB3F,EAAqB,EAAI,EACtFhB,KACHsG,GAAWE,GAA8C,SAAnC7L,GAAc0L,EAAc,IAAiB1L,GAAc0L,EAAc,IAAO1L,GAAc0L,GACpHK,EAAiBja,IAAyB,aAAX6Z,GAAoC,UAAXA,GAAsBA,KAAU7Z,KAI1FsT,KAAoByG,GAAWE,KAAoBA,GAAkBpH,IAAU7S,KAAeJ,GAAY0T,IAAmBA,GAAgBxjB,IAAQA,GAAK2pB,YAAYnG,IAAiBvR,QAAQ,SAAAlS,UAAKA,EAAEypB,kBAEjM/F,MACArB,IAAejN,IAAgBjW,GAQxBgR,GACVA,EAAU6U,cAAcqF,KAAYjV,KAAgBqP,KAAeniB,KARlE+f,GAAWiI,IAAIC,MAAQlI,GAAWmI,SAAWnI,GAAWkI,OAAUlI,GAAWnC,OAAOmC,GAAWiI,IAAIC,MAAQlI,GAAWmI,QACnHnI,GAAW+D,QACd/D,GAAW+D,QAAQ,gBAAiBiE,EAASla,EAAUkW,OAASlW,EAAUmW,QAE1EjE,GAAWjc,KAAK4e,cAAgBqF,EAChChI,GAAWyF,aAAavc,aAMvB6L,MACH9U,GAAS2gB,KAAe5L,EAAOnD,MAAM+O,GAAarR,GAAUhM,KAAOmc,GAC9DxO,IAEE,GAAI0W,EAAc,IACxBE,GAAW7nB,GAAmBoiB,EAAV2F,GAAoCvR,EAAVa,EAAM,GAAcb,EAAS,GAAKnJ,GAAWyL,GAAUxJ,IACjG0R,MACEhhB,IAAUujB,IAAYsE,EAK1B9P,GAAUjD,GAAKC,OALqB,KAChCuC,EAASlK,GAAW0H,IAAK,GAC5BtX,EAASgZ,EAASY,EACnBW,GAAUjD,GAAKlT,GAAQ0V,EAAOK,KAAOrI,KAAc3Q,GAAYnB,EAAS,GAAMoY,GAAM0B,EAAOI,MAAQpI,KAAc3Q,GAAY,EAAInB,GAAWoY,IAK9II,GAAUuN,GAAYsE,EAAU1I,EAAiBC,GAChDO,GAAYoI,EAAU,GAAKxE,GAAajE,EAAUC,GAAwB,IAAZwI,GAAkBF,EAAsB,EAAZrI,UAb3FF,EAAU5S,GAAO6S,EAAWC,EAAYuI,KAgB1C9Y,IAASqP,EAAQpF,OAAUpG,IAAgBjW,IAAYqjB,GAAgBjX,SAAQ,GAC/EuX,IAAgBoH,GAAY7G,IAAQgH,IAAYA,EAAU,IAAMxN,MAAsB5F,GAAS6L,EAAY0D,SAAStU,QAAQ,SAAAnU,UAAMA,EAAG6oB,UAAUf,GAAYxC,GAAO,MAAQ,UAAUP,EAAY2D,cAChMzK,GAAa0H,IAAaphB,GAAS0Z,EAAS/b,IACxCgqB,IAAiB7U,IAChBsO,KACC0G,IACY,aAAXJ,EACH7Z,EAAU3D,QAAQwY,cAAc,GACX,UAAXgF,EACV7Z,EAAU5E,SAAQ,GAAMiB,QACH,YAAXwd,EACV7Z,EAAU5E,SAAQ,GAElB4E,EAAU6Z,MAGZhO,GAAYA,EAAS/b,MAElBiqB,GAAYrN,KACfkG,GAAYmH,GAAW5Z,GAAUrQ,GAAM8iB,GACvCc,GAAUkG,IAAgBzZ,GAAUrQ,GAAM4jB,GAAUkG,IACpD1G,KAAqB,IAAZgH,EAAgBpqB,GAAK8N,MAAK,EAAO,GAAM8V,GAAUkG,GAAe,GACpEG,GAEJrG,GADAkG,EAA0B,IAAZM,EAAgB,EAAI,IACR/Z,GAAUrQ,GAAM4jB,GAAUkG,KAGlDvG,KAAkBqC,GAAYpmB,KAAKyD,IAAIjD,GAAKsC,gBAAkByN,GAAUwT,IAAiBA,GAAgB,QAC5GtT,GAAcjQ,GAAK0Q,mBACnB0R,GAAaA,GAAWhS,SAAS,GAAKH,GAAcC,EAAsB,YAAX6Z,EAAuB,GAAKK,EAAS,KAE3F3G,IAAY1H,IAAa5G,IACnC4G,EAAS/b,OAIPiiB,EAAiB,KAChBuI,EAAIzX,GAAqB8F,EAAS9F,GAAmB5B,YAAc4B,GAAmBoH,eAAiB,GAAKtB,EAChHkJ,EAAkByI,GAAKtJ,EAAmBtC,WAAa,EAAI,IAC3DqD,EAAgBuI,GAEjB9H,GAAkBA,GAAgB7J,EAAS9F,GAAmB5B,YAAc4B,GAAmBoH,eAAiB,MAGjHna,GAAKyN,OAAS,SAACpL,EAAOid,GAChBtf,GAAKsQ,UACTtQ,GAAKsQ,SAAU,EACftS,GAAamd,GAAU,SAAUjG,IACjChJ,IAAclO,GAAamd,GAAU,SAAU3c,IAC/C0lB,IAAiBlmB,GAAamF,cAAe,cAAe+gB,KAC9C,IAAV7hB,IACHrC,GAAKoQ,SAAWqU,GAAe,EAC/B3D,EAAUC,EAAUwD,GAAWnS,OAEpB,IAAZkN,GAAqBtf,GAAKsf,YAI5Btf,GAAKob,SAAW,SAAA9J,UAAQA,GAAQqP,EAAUA,EAAQpF,MAAQ6G,IAE1DpiB,GAAKggB,aAAe,SAACyK,EAAUC,EAAQC,EAAW/C,MAC7C7U,GAAoB,KACnByS,EAAKzS,GAAmByG,cAC3BrI,EAAW4B,GAAmB5B,WAC9BmQ,EAASkE,EAAG9L,IAAM8L,EAAG/L,MACtBgR,EAAWjF,EAAG/L,MAAQ6H,EAASmJ,EAAWtZ,EAC1CuZ,EAASlF,EAAG/L,MAAQ6H,EAASoJ,EAASvZ,EAEvCnR,GAAKsf,SAAQ,GAAO,EAAO,CAAC7F,MAAO/K,GAAW+b,EAAUE,KAAe3qB,GAAK+f,aAAcrG,IAAKhL,GAAWgc,EAAQC,KAAe3qB,GAAK6f,YAAa+H,GACnJ5nB,GAAK2B,UAGN3B,GAAK0f,iBAAmB,SAAAkL,MACnBtT,GAAesT,EAAQ,KACtB7pB,EAAIuW,EAAY1Z,QAAQ+T,GAAU/L,GAAK,EAC3C0R,EAAYvW,GAAMgL,WAAWuL,EAAYvW,IAAM6pB,EAAU3S,GACzDX,EAAY,GAAMvL,WAAWuL,EAAY,IAAMsT,EAAU3S,GACzDI,GAAUf,KAIZtX,GAAK2N,QAAU,SAACtL,EAAOwoB,MAClB7qB,GAAKsQ,WACE,IAAVjO,GAAmBrC,GAAK+N,QAAO,GAAM,GACrC/N,GAAKsQ,QAAUtQ,GAAK4lB,UAAW,EAC/BiF,GAAmBzI,IAAcA,GAAW7V,QAC5CiW,GAAa,EACb5B,IAAaA,EAAS5K,QAAU,GAChCkO,IAAiB5lB,GAAgB6E,cAAe,cAAe+gB,IAC3D3B,KACHA,GAAgBhW,QAChBoU,EAAQpF,OAASoF,EAAQpF,MAAMzN,SAAW6S,EAAQpF,MAAQ,KAEtDrP,IAAY,SACZnL,EAAIqV,GAAUhV,OACXL,QACFqV,GAAUrV,GAAGoa,WAAaA,IAAY/E,GAAUrV,KAAOf,UAI5D1B,GAAgB6c,GAAU,SAAUjG,IACpChJ,IAAc5N,GAAgB6c,GAAU,SAAU3c,MAKrDwB,GAAK8N,KAAO,SAACC,EAAQ8c,GACpB7qB,GAAK2N,QAAQI,EAAQ8c,GACrBzI,KAAeyI,GAAkBzI,GAAWtU,OAC5ClE,UAAciV,GAAKjV,OACf7I,EAAIqV,GAAUxY,QAAQoC,IACrB,GAALe,GAAUqV,GAAUpI,OAAOjN,EAAG,GAC9BA,IAAMoV,IAAmB,EAAbiK,IAAkBjK,KAG9BpV,EAAI,EACJqV,GAAUnE,QAAQ,SAAAlS,UAAKA,EAAEob,WAAanb,GAAKmb,WAAapa,EAAI,KAC5DA,GAAKwV,KAAmBvW,GAAK6Y,OAAOrC,IAAM,GAEtCtG,IACHA,EAAUsJ,cAAgB,KAC1BzL,GAAUmC,EAAUnC,OAAO,CAACD,MAAM,IAClC+c,GAAkB3a,EAAUpC,QAE7BkT,GAAe,CAACA,EAAaC,EAAWC,EAAoBC,GAAkBlP,QAAQ,SAAAiI,UAAKA,EAAE5B,YAAc4B,EAAE5B,WAAWzB,YAAYqD,KACpI4C,KAAa9c,KAAS8c,GAAW,GAC7B3F,KACHyJ,IAAaA,EAAS5K,QAAU,GAChCjV,EAAI,EACJqV,GAAUnE,QAAQ,SAAAlS,UAAKA,EAAEoX,MAAQA,IAAOpW,MACxCA,IAAM6f,EAASxJ,OAAS,IAEzBjR,EAAK2kB,QAAU3kB,EAAK2kB,OAAO9qB,KAG5BoW,GAAUnV,KAAKjB,IACfA,GAAKyN,QAAO,GAAO,GACnBkV,GAAsBA,EAAmB3iB,IAErCkQ,GAAaA,EAAUM,MAAQ8Q,EAAQ,KACtCyJ,EAAa/qB,GAAK2B,OACtB3B,GAAK2B,OAAS,WACb3B,GAAK2B,OAASopB,EACdpsB,GAAWC,QACX6a,GAASC,GAAO1Z,GAAKsf,WAEtBjiB,GAAKyP,YAAY,IAAM9M,GAAK2B,QAC5B2f,EAAS,IACT7H,EAAQC,EAAM,OAEd1Z,GAAKsf,UAENnI,IA7gCkB,SAAnB6T,sBACKnO,KAAoBoC,GAAY,KAC/BrV,EAAKiT,GAAkBoC,GAC3B9U,sBAAsB,kBAAMP,IAAOqV,IAAcvJ,IAAY,MA0gCvDsV,aAxqBDrpB,OAASsK,KAAKqT,QAAUrT,KAAK6B,KAAOgB,kBA4qBpCX,SAAP,kBAAgB/K,UACVS,IACJxG,GAAO+F,GAAQhG,KACf4R,MAAmB1R,OAAOwG,UAAYX,cAAcsK,SACpD5J,EAAemZ,IAETnZ,iBAGDiN,SAAP,kBAAgBzQ,MACXA,MACE,IAAImF,KAAKnF,EACb8d,GAAU3Y,GAAKnF,EAAOmF,UAGjB2Y,kBAGDxQ,QAAP,iBAAetL,EAAOyL,GACrBkP,GAAW,EACX5G,GAAUnE,QAAQ,SAAAiE,UAAWA,EAAQpI,EAAO,OAAS,WAAWzL,KAChE/D,GAAgBa,GAAM,QAASX,IAC/BF,GAAgBsC,GAAM,SAAUpC,IAChCysB,cAAc7O,GACd9d,GAAgBsC,GAAM,cAAekO,IACrCxQ,GAAgB2F,GAAO,aAAc6K,IACrCgD,GAAexT,GAAiBsC,GAAM,mCAAoC+N,IAC1EmD,GAAexT,GAAiBsC,GAAM,6BAA8BiO,IACpE2G,EAAa1H,OACb6B,GAAoBrR,QACf,IAAIyC,EAAI,EAAGA,EAAIpC,GAAWyC,OAAQL,GAAG,EACzCoR,GAAe7T,GAAiBK,GAAWoC,GAAIpC,GAAWoC,EAAE,IAC5DoR,GAAe7T,GAAiBK,GAAWoC,GAAIpC,GAAWoC,EAAE,mBAIvD0M,OAAP,qBACCtO,GAAO7B,OACPsD,GAAOkD,SACPhD,GAASF,GAAKoD,gBACdC,GAAQrD,GAAKmD,KACT1G,KACH2Z,GAAW3Z,GAAK8C,MAAMC,QACtB8b,GAAS7e,GAAK8C,MAAM+D,MACpBC,EAAW9G,GAAK+F,KAAKgB,SAAW0K,GAChC2N,GAAsBpf,GAAK+F,KAAK8nB,oBAAsBpc,GACtD2H,EAAqBtX,GAAKC,QAAQC,mBAAqB,OACvD8gB,EAAchhB,GAAK8G,aAAe,EAClC5I,GAAK+F,KAAKC,QAAQ,gBAAiBF,eAC/Bc,IAAO,CACV+Y,GAAW,GACXrG,EAAY7S,SAASuP,cAAc,QACzBY,MAAMzE,OAAS,QACzBmH,EAAU1C,MAAM2D,SAAW,WAC3BlB,KAxyCU,SAAbyU,oBAAmBnO,IAAY7S,sBAAsBghB,YAyyClDA,GACA5mB,EAAS4J,SAAS9Q,IAElB8F,cAAcqB,QAAUD,EAASC,QACjCkY,EAAanY,EAASC,SAAW,0BAA0B+V,KAAK5V,UAAUymB,WAC1E7V,EAA2C,IAArBhR,EAASC,QAC/BxG,GAAamB,GAAM,QAASX,IAC5BT,EAAQ,CAACoB,GAAMyB,GAAME,GAAQmD,IACzB5G,GAAKoH,YACRtB,cAAcsB,WAAa,SAAA0B,OAEzBX,EADG6lB,EAAKhuB,GAAKoH,iBAETe,KAAKW,EACTklB,EAAG7a,IAAIhL,EAAGW,EAAKX,WAET6lB,GAERhuB,GAAKgB,iBAAiB,iBAAkB,kBAAM4X,OAC9C5Y,GAAKgB,iBAAiB,mBAAoB,kBAAMsX,OAChDtY,GAAKgB,iBAAiB,aAAc,WACnCqX,GAAY,EAAG,GACfZ,EAAU,gBAEXzX,GAAKoH,aAAa+L,IAAI,0BAA2B,kBAChDuE,KACOA,MAGRxU,QAAQC,KAAK,iCAEduU,KACA/W,GAAa4C,GAAM,SAAUpC,QAK5Bmb,EAAQ5Y,EAJLuqB,EAAernB,GAAMsnB,aAAa,SACrCC,EAAYvnB,GAAMgQ,MAClBwX,EAASD,EAAUE,eACnBC,EAAiBtuB,GAAK+F,KAAKwoB,UAAUC,cAEtCF,EAAe5d,QAAU+d,OAAOC,eAAeJ,EAAgB,SAAU,CAAE1sB,MAAO,wBAAoBgN,KAAKoN,MAAM,KAAM,MACvHmS,EAAUE,eAAiB,QAC3B/R,EAASlK,GAAWxL,IACpBjD,GAAUkZ,EAAI1a,KAAKC,MAAMka,EAAOK,IAAMhZ,GAAUL,OAAS,EACzD4E,GAAY2U,EAAI1a,KAAKC,MAAMka,EAAOI,KAAOxU,GAAY5E,OAAS,EAC9D8qB,EAAUD,EAAUE,eAAiBD,EAAUD,EAAUvR,eAAe,oBACnEqR,IACJrnB,GAAM+P,aAAa,QAAS,IAC5B/P,GAAM+nB,gBAAgB,UAGvB5P,EAAgB6P,YAAYxX,GAAO,KACnCpX,GAAKyP,YAAY,GAAK,kBAAM5N,GAAW,IACvClB,GAAa4C,GAAM,cAAekO,IAClC9Q,GAAaiG,GAAO,aAAc6K,IAClCgD,GAAe9T,GAAc4C,GAAM,mCAAoC+N,IACvEmD,GAAe9T,GAAc4C,GAAM,6BAA8BiO,IACjEwN,EAAiBhf,GAAK8C,MAAM+rB,YAAY,aACxCzT,GAAYxX,KAAKob,GACjBxY,EAAehC,KACf2T,EAAenY,GAAKyP,YAAY,GAAK4I,IAAanJ,QAClDsD,EAAe,CAACjP,GAAM,mBAAoB,eACrCurB,EAAIhtB,GAAKoQ,WACZ6c,EAAIjtB,GAAKuM,YACN9K,GAAKyrB,QACR/P,EAAa6P,EACb5P,EAAc6P,GACJ9P,IAAe6P,GAAK5P,IAAgB6P,GAC9ClX,MAECtU,GAAM,mBAAoB8U,GAAavW,GAAM,OAAQuW,GAAavW,GAAM,SAAU+V,IACrFvF,GAAoB3R,IACpBoY,GAAUnE,QAAQ,SAAAiE,UAAWA,EAAQzI,OAAO,EAAG,KAC1C1M,EAAI,EAAGA,EAAIpC,GAAWyC,OAAQL,GAAG,EACrCoR,GAAe7T,GAAiBK,GAAWoC,GAAIpC,GAAWoC,EAAE,IAC5DoR,GAAe7T,GAAiBK,GAAWoC,GAAIpC,GAAWoC,EAAE,oBAMzDV,OAAP,gBAAc8F,sBACQA,IAAUyW,KAAoBzW,EAAKmmB,oBACpDC,EAAKpmB,EAAKqmB,aACdD,GAAMtB,cAAc7O,KAAoBA,EAAgBmQ,IAAON,YAAYxX,GAAO8X,0BACzDpmB,IAAUoP,EAAgD,IAA1BpS,cAAcqB,SAAiB2B,EAAKsmB,oBACzF,sBAAuBtmB,IAC1BwJ,GAAoBrR,KAAoBqR,GAAoB3R,GAAcmI,EAAKumB,mBAAqB,QACpGtX,GAAqE,KAApDjP,EAAKumB,kBAAoB,IAAI9uB,QAAQ,0BAIjD+uB,cAAP,uBAAqBtrB,EAAQ8E,OACxBpG,EAAID,EAAWuB,GAClBN,EAAIpC,GAAWf,QAAQmC,GACvBmM,EAAarO,GAAYkC,IACrBgB,GACJpC,GAAWqP,OAAOjN,EAAGmL,EAAa,EAAI,GAEnC/F,IACH+F,EAAavO,GAASqrB,QAAQ7pB,GAAMgH,EAAMlC,GAAOkC,EAAMrF,GAAQqF,GAAQxI,GAASqrB,QAAQjpB,EAAGoG,mBAItFymB,gBAAP,yBAAuB9W,GACtBM,GAAUnE,QAAQ,SAAAlS,UAAKA,EAAEE,MAAQF,EAAEE,KAAK6V,QAAUA,GAAS/V,EAAEE,KAAK6N,MAAK,GAAM,oBAGvE+e,aAAP,sBAAoBpvB,EAASqe,EAAO0D,OAC/B7F,GAAUnL,GAAU/Q,GAAWqC,EAAWrC,GAAWA,GAASwgB,wBACjEpe,EAAS8Z,EAAO6F,EAAaxH,GAASE,IAAW4D,GAAS,SACpD0D,EAAqC,EAAxB7F,EAAO6E,MAAQ3e,GAAc8Z,EAAOI,KAAOla,EAASV,GAAKoQ,WAAsC,EAAzBoK,EAAO4E,OAAS1e,GAAc8Z,EAAOK,IAAMna,EAASV,GAAKuM,2BAG7IohB,mBAAP,4BAA0BrvB,EAASsvB,EAAgBvN,GAClDhR,GAAU/Q,KAAaA,EAAUqC,EAAWrC,QACxCkc,EAASlc,EAAQwgB,wBACpB1L,EAAOoH,EAAO6F,EAAaxH,GAASE,IACpCrY,EAA2B,MAAlBktB,EAAyBxa,EAAO,EAAMwa,KAAkBpa,EAAaA,EAAUoa,GAAkBxa,GAAQwa,EAAenvB,QAAQ,KAAOmO,WAAWghB,GAAkBxa,EAAO,IAAMxG,WAAWghB,IAAmB,SAClNvN,GAAc7F,EAAOI,KAAOla,GAAUV,GAAKoQ,YAAcoK,EAAOK,IAAMna,GAAUV,GAAKuM,2BAGtFshB,QAAP,iBAAeC,MACd7W,GAAU/H,MAAM,GAAG4D,QAAQ,SAAAlS,SAAmB,mBAAdA,EAAEoG,KAAKyD,IAA2B7J,EAAE+N,UAC7C,IAAnBmf,EAAyB,KACxBC,EAAYpO,EAAWkO,SAAW,GACtClO,EAAa,GACboO,EAAUjb,QAAQ,SAAAnT,UAAKA,8CAz2BbqH,EAAM+J,GACjBrM,GAAgBV,cAAcgL,SAAS9Q,KAASkD,QAAQC,KAAK,6CAC7D2D,EAAS8H,WACJ/F,KAAKC,EAAM+J,MA42BJjC,QAAU,YACVkf,WAAa,SAAA5G,UAAWA,EAAUvP,GAASuP,GAAStU,QAAQ,SAAA5Q,MACrEA,GAAUA,EAAO4S,MAAO,KACvBlT,EAAI8U,EAAajY,QAAQyD,GACxB,GAALN,GAAU8U,EAAa7H,OAAOjN,EAAG,GACjC8U,EAAa5U,KAAKI,EAAQA,EAAO4S,MAAMC,QAAS7S,EAAO0U,SAAW1U,EAAO+rB,aAAa,aAAc/vB,GAAK+F,KAAKoX,SAASnZ,GAAS8C,QAE7H0R,MACS9H,OAAS,SAAC4Z,EAAM/R,UAAUK,IAAY0R,EAAM/R,OAC5C1H,OAAS,SAAC/H,EAAM+J,UAAc,IAAI/M,GAAcgD,EAAM+J,OACtDoP,QAAU,SAAA+N,UAAQA,EAAOnY,IAAU,IAASrR,GAAgBV,GAAcgL,aAAeuH,IAAY,OACrG/T,OAAS,SAAAC,WAAWjD,GAAWC,OAASgW,GAAqB,IAAVhT,EAAiB,EAAI,OACxE0rB,kBAAoBhX,MACpBiX,UAAY,SAAC9vB,EAAS+hB,UAAe9P,GAAWjS,EAAS+hB,EAAaja,GAAcvE,QACpFwsB,cAAgB,SAAC/vB,EAAS+hB,UAAe/e,EAAeX,EAAWrC,GAAU+hB,EAAaja,GAAcvE,QACxGsN,QAAU,SAAA1E,UAAMiV,GAAKjV,OACrBwE,OAAS,kBAAMgI,GAAUxI,OAAO,SAAA7N,SAAmB,mBAAdA,EAAEoG,KAAKyD,SAC5C6jB,YAAc,mBAAQ/Y,OACtBgZ,gBAAkBtc,MAClB/S,iBAAmB,SAACJ,EAAM+T,OACnChP,EAAI8b,EAAW7gB,KAAU6gB,EAAW7gB,GAAQ,KAC/C+E,EAAEpF,QAAQoU,IAAahP,EAAE/B,KAAK+Q,OAElBzT,oBAAsB,SAACN,EAAM+T,OACtChP,EAAI8b,EAAW7gB,GAClB8C,EAAIiC,GAAKA,EAAEpF,QAAQoU,GACf,GAALjR,GAAUiC,EAAEgL,OAAOjN,EAAG,OAET4sB,MAAQ,SAACpH,EAASpgB,GAKd,SAAhBynB,GAAiB3vB,EAAM+T,OAClB6b,EAAW,GACdC,EAAW,GACXpI,EAAQroB,GAAKyP,YAAYihB,EAAU,WAAO/b,EAAS6b,EAAUC,GAAWD,EAAW,GAAIC,EAAW,KAAMvhB,eAClG,SAAAvM,GACN6tB,EAASzsB,QAAUskB,EAAMpa,SAAQ,GACjCuiB,EAAS5sB,KAAKjB,EAAKkW,SACnB4X,EAAS7sB,KAAKjB,GACdguB,GAAYH,EAASzsB,QAAUskB,EAAMtV,SAAS,QAGhD5K,EAfG+K,EAAS,GACZ0d,EAAW,GACXF,EAAW5nB,EAAK4nB,UAAY,KAC5BC,EAAW7nB,EAAK6nB,UAAY,QAaxBxoB,KAAKW,EACT8nB,EAASzoB,GAAyB,OAAnBA,EAAEiJ,OAAO,EAAG,IAAeqB,GAAY3J,EAAKX,KAAa,kBAANA,EAAyBooB,GAAcpoB,EAAGW,EAAKX,IAAMW,EAAKX,UAEzHsK,GAAYke,KACfA,EAAWA,IACXhwB,GAAamF,GAAe,UAAW,kBAAM6qB,EAAW7nB,EAAK6nB,cAE9DhX,GAASuP,GAAStU,QAAQ,SAAA5Q,OACrBhB,EAAS,OACRmF,KAAKyoB,EACT5tB,EAAOmF,GAAKyoB,EAASzoB,GAEtBnF,EAAO6V,QAAU7U,EACjBkP,EAAOtP,KAAKkC,GAAc+K,OAAO7N,MAE3BkQ,GAKmC,SAAvC2d,GAAwC9b,EAAY2I,EAASrB,EAAKtX,UAC1DA,EAAV2Y,EAAgB3I,EAAWhQ,GAAO2Y,EAAU,GAAK3I,EAAW,GAC/ChQ,EAANsX,GAAatX,EAAM2Y,IAAYrB,EAAMqB,GAAWrB,EAAM,EAAIqB,GAAWA,EAAUrB,GAAO,EAExE,SAAtByU,GAAuB9sB,EAAQsQ,IACZ,IAAdA,EACHtQ,EAAO4S,MAAMgG,eAAe,gBAE5B5Y,EAAO4S,MAAMma,aAA4B,IAAdzc,EAAqB,OAASA,EAAY,OAASA,GAAapN,EAASC,QAAU,cAAgB,IAAM,OAErInD,IAAWP,IAAUqtB,GAAoBlqB,GAAO0N,GAGjC,SAAhB0c,UAGqBhX,EAHHzQ,IAAAA,MAAOvF,IAAAA,OAAQgJ,IAAAA,KAC5BikB,GAAQ1nB,EAAM9D,eAAiB8D,EAAM9D,eAAe,GAAK8D,GAAOvF,OACnEzC,EAAQ0vB,EAAK/W,OAASla,GAAK+F,KAAKoX,SAAS8T,GACzCjV,EAAOxX,SACHjD,EAAM2vB,YAAwC,IAA1BlV,EAAOza,EAAM2vB,WAAmB,MACjDD,GAAQA,IAASrqB,KAAWqqB,EAAKE,cAAgBF,EAAKG,cAAgBH,EAAKI,aAAeJ,EAAKzZ,cAAkB8Z,IAAWtX,EAAK1G,GAAkB2d,IAAOM,aAAcD,GAAUtX,EAAGwX,aAAcP,EAAOA,EAAKhW,WACtN1Z,EAAMkwB,UAAYR,GAAQA,IAASjtB,IAAWxD,GAAYywB,KAAUK,IAAWtX,EAAK1G,GAAkB2d,IAAOM,YAAcD,GAAUtX,EAAGwX,YACxIjwB,EAAM2vB,WAAalV,GAEhBza,EAAMkwB,WAAsB,MAATzkB,IACtBzD,EAAMmoB,kBACNnoB,EAAM/D,YAAa,GAIJ,SAAjBmsB,GAAkB3tB,EAAQpD,EAAMgxB,EAAQC,UAAW3qB,EAAS2J,OAAO,CAClE7M,OAAQA,EACRjD,SAAS,EACTmI,UAAU,EACViC,UAAU,EACVvK,KAAMA,EACNiK,QAAUgnB,EAASA,GAAUb,GAC7BrnB,QAASkoB,EACTnoB,OAAQmoB,EACRlkB,SAAUkkB,EACV/mB,SAAU,2BAAM8mB,GAAUjxB,GAAa4C,GAAM2D,EAASQ,WAAW,GAAIoqB,IAAgB,GAAO,IAC5F/mB,UAAW,4BAAM9J,GAAgBsC,GAAM2D,EAASQ,WAAW,GAAIoqB,IAAgB,MAWzD,SAAvBC,GAAuBjpB,GAoBH,SAAlBkpB,YAAwBC,GAAgB,EAGzB,SAAfC,KACCC,EAAO9f,GAAWrO,EAAQL,IAC1ByuB,EAAevT,GAAOQ,EAAa,EAAI,EAAG8S,GAC1CE,IAAqBC,EAAezT,GAAO,EAAGxM,GAAWrO,EAAQkE,MACjEqqB,EAAgB3Q,GAEK,SAAtB4Q,KACC/I,EAAQvP,MAAMxN,EAAIgF,GAAOhD,WAAW+a,EAAQvP,MAAMxN,GAAKmB,EAAYrL,QAAU,KAC7EinB,EAAQ7S,MAAM6b,UAAY,mDAAqD/jB,WAAW+a,EAAQvP,MAAMxN,GAAK,UAC7GmB,EAAYrL,OAASqL,EAAYvL,QAAU,EAqBjC,SAAXowB,KACCR,KACIhU,EAAMqK,YAAcrK,EAAMpV,KAAKiF,QAAUokB,IAC5CtkB,IAAgBskB,EAAOjU,EAAMnL,SAAS,IAAMlF,EAAYskB,GAAQjU,EAAM4K,QAAQ,UAAWqJ,IAvD5Fxf,GAAU7J,KAAUA,EAAO,IAC3BA,EAAKvD,eAAiBuD,EAAK4B,aAAe5B,EAAKoC,aAAc,EAC7DpC,EAAKlI,OAASkI,EAAKlI,KAAO,eAC1BkI,EAAKI,WAAaJ,EAAKI,SACvBJ,EAAKyD,GAAKzD,EAAKyD,IAAM,iBAEpB5J,EAAMwvB,EAWNI,EAAeN,EAkCf/T,EAAOyU,EAAcC,EAAc5kB,EA9C/BqkB,EAA4DvpB,EAA5DupB,iBAAkBQ,EAA0C/pB,EAA1C+pB,SAAUC,EAAgChqB,EAAhCgqB,kBAAmBlpB,EAAad,EAAbc,UAEnD5F,EAASvB,EAAWqG,EAAK9E,SAAWP,GACpCsvB,EAAW/yB,GAAK+F,KAAKC,UAAUgtB,eAC/BC,EAAmBF,GAAYA,EAASG,MACxCzJ,EAAUpK,IAAgBvW,EAAK2gB,SAAWhnB,EAAWqG,EAAK2gB,UAAcwJ,IAAqC,IAAjBnqB,EAAK2gB,UAAsBwJ,EAAiBhvB,UAAYgvB,EAAiBxJ,WACrK5b,EAAczK,EAAeY,EAAQL,IACrCiK,EAAcxK,EAAeY,EAAQkE,IACrCuY,EAAQ,EACR0S,GAAgBjsB,EAASC,SAAWrF,GAAKsxB,eAAiBtxB,GAAKsxB,eAAe3S,MAAQ3e,GAAKsxB,eAAenhB,MAAQnQ,GAAKuxB,YAAcvxB,GAAKoQ,WAC1IohB,EAAe,EACfC,EAA0B9gB,GAAYogB,GAAY,kBAAMA,EAASlwB,IAAQ,kBAAMkwB,GAAY,KAE3FW,EAAgB7B,GAAe3tB,EAAQ8E,EAAKlI,MAAM,EAAMkyB,GAExDR,EAAe7gB,GACf2gB,EAAe3gB,UAqChBgY,GAAWzpB,GAAK4d,IAAI6L,EAAS,CAAC/c,EAAG,QACjC5D,EAAK2B,YAAc,SAAAnF,UAAM+Z,GAAyB,cAAX/Z,EAAE1E,MA1B3B,SAAb6yB,gBACKxB,EAAe,CAClBnlB,sBAAsBklB,QAClBxvB,EAASkP,GAAO/O,EAAKmJ,OAAS,GACjC0P,EAAS4W,EAAavkB,EAAY3L,EAAIM,MACnCinB,GAAWjO,IAAW3N,EAAY3L,EAAI2L,EAAYrL,OAAQ,CAC7DqL,EAAYrL,OAASgZ,EAAS3N,EAAY3L,MACtCwK,EAAIgF,IAAQhD,WAAW+a,GAAWA,EAAQvP,MAAMxN,IAAM,GAAKmB,EAAYrL,QAC3EinB,EAAQ7S,MAAM6b,UAAY,mDAAqD/lB,EAAI,UACnF+c,EAAQvP,MAAMxN,EAAIA,EAAI,KACtBmB,EAAYvL,QAAUhB,GAAWC,MACjCgW,WAEM,EAER1J,EAAYrL,QAAUgwB,KACtBP,GAAgB,EAU+CwB,IAA2B,KAARhT,GAA2B,eAAXnb,EAAE1E,MAA0B+B,EAAK8K,aAAgBnI,EAAEkI,SAA8B,EAAnBlI,EAAEkI,QAAQzJ,QAC5K+E,EAAKa,QAAU,WACdsoB,GAAgB,MACZyB,EAAYjT,EAChBA,EAAQ/O,IAAS5P,GAAKsxB,gBAAkBtxB,GAAKsxB,eAAe3S,OAAU,GAAK0S,GAC3EjV,EAAMhP,QACNwkB,IAAcjT,GAASqQ,GAAoB9sB,EAAgB,KAARyc,IAAsB4R,GAA2B,KACpGM,EAAe/kB,IACfglB,EAAe/kB,IACfqkB,KACAK,EAAgB3Q,IAEjB9Y,EAAKc,UAAYd,EAAK6B,eAAiB,SAAChI,EAAM2M,MAC7CzB,EAAYrL,QAAUgwB,KACjBljB,EAEE,CACNhO,GAAWC,YAGVoyB,EAAelL,EADZmL,EAAML,IAENlB,IAEH5J,GADAkL,EAAgB/lB,KACmB,IAANgmB,GAAcjxB,EAAKkxB,UAAa,KAC7DD,GAAO/C,GAAqCjjB,EAAa+lB,EAAelL,EAAWpW,GAAWrO,EAAQkE,KACtGgW,EAAMpV,KAAKgF,QAAUwkB,EAAa7J,IAGnCA,GADAkL,EAAgB9lB,KACmB,IAAN+lB,GAAcjxB,EAAKmxB,UAAa,KAC7DF,GAAO/C,GAAqChjB,EAAa8lB,EAAelL,EAAWpW,GAAWrO,EAAQL,KACtGua,EAAMpV,KAAKiF,QAAUqkB,EAAa3J,GAClCvK,EAAMsM,aAAa1W,SAAS8f,GAAKG,KAAK,MAClC1U,GAAcnB,EAAMpV,KAAKiF,SAAWokB,GAAyBA,EAAK,GAAtBwB,IAC/C3zB,GAAK4e,GAAG,GAAI,CAACF,SAAUgU,GAAU5e,SAAU8f,SAlB5C5lB,EAAkBC,SAAQ,GAqB3BrE,GAAaA,EAAUjH,IAExBmG,EAAK+B,QAAU,WACdqT,EAAM8V,KAAO9V,EAAMhP,QACa,IAA5B1K,KAAa8uB,IAChBf,EAAgB,EAChBe,EAAe9uB,OAGjBsE,EAAKqB,SAAW,SAACxH,EAAMgJ,EAAIE,EAAIooB,EAAQC,MACtCtS,KAAe2Q,GAAiBL,KAChCvmB,GAAM0mB,GAAoBzkB,EAAY0kB,EAAa2B,EAAO,KAAOtoB,EAAKgnB,GAAgBhwB,EAAK0K,OAAS1K,EAAK8J,GAAKmB,IAAgBjC,EAAKsoB,EAAO,KACtIpoB,EAAI,CACPgC,EAAYrL,QAAUgwB,SAClBrrB,EAAU+sB,EAAO,KAAOroB,EAC3Ba,EAAIvF,EAAUyrB,EAAejwB,EAAK2K,OAAS3K,EAAK+J,EAAImB,IAAgBhC,EAAKqoB,EAAO,GAChFC,EAAW/B,EAAa1lB,GACzBvF,GAAWuF,IAAMynB,IAAavB,GAAgBuB,EAAWznB,GACzDmB,EAAYsmB,IAEZtoB,GAAMF,IAAO4L,KAEfzO,EAAKgC,SAAW,WACfgmB,GAAoB9sB,GAAQquB,GAA2B,KACvDvsB,GAAc9E,iBAAiB,UAAW0xB,IAC1C/xB,GAAamB,GAAM,SAAU4wB,IACzB7kB,EAAY5J,SACf4J,EAAY7J,OAAO4S,MAAMoL,eAAiB,OAC1CnU,EAAY5J,OAAS2J,EAAY3J,QAAS,GAE3CuvB,EAAcpjB,UAEftH,EAAKiC,UAAY,WAChB+lB,GAAoB9sB,GAAQ,GAC5B/C,GAAgBa,GAAM,SAAU4wB,IAChC5sB,GAAc5E,oBAAoB,UAAWwxB,IAC7Cc,EAAc/iB,QAEf3H,EAAKqC,UAA6B,IAAlBrC,EAAKqC,WACrBxI,EAAO,IAAIuE,EAAS4B,IACfzG,IAAMgd,KACIxR,KAAiBA,EAAY,GAC5CwR,GAAcrf,GAAKo0B,OAAOjhB,IAAI1B,IAC9BzD,EAAoBrL,EAAKuN,IACzBgO,EAAQle,GAAK4e,GAAGjc,EAAM,CAAC8kB,KAAM,SAAUE,QAAQ,EAAMnJ,SAAS,EAAO1Q,QAASukB,EAAmB,QAAU,MAAOtkB,QAAS,QAASqQ,UAAW,CAACrQ,QAASqP,GAAqBvP,EAAaA,IAAe,kBAAMqQ,EAAMhP,WAAYwP,SAAUnH,EAAY4G,WAAYnQ,EAAkBlF,KAAKqV,aACpRxb,EA/LT,IA0CC0xB,GA9BA/C,GAAY,CAACgD,KAAM,EAAG9Y,OAAQ,GA6B9B+Y,GAAY,iCAEZzC,GAAiB,SAAjBA,eAAiBxsB,OACZkvB,EAAUD,GAAUrX,KAAK5X,EAAEtB,OAAOywB,UAClCD,GAAWH,MACd/uB,EAAEE,YAAa,EACf6uB,GAAkBG,OAmJPpgB,KAAO,SAAAvT,MAChB4R,GAAY5R,UACRkY,GAAU3E,KAAKvT,OAEnB2a,EAAS1Z,GAAK8G,aAAe,SACjC9C,GAAciL,SAAS6D,QAAQ,SAAAlS,UAAKA,EAAEgyB,OAAShyB,EAAEmW,QAAU2C,EAAS9Y,EAAEmW,QAAQ+H,wBAAwBjE,IAAMja,EAAE0Z,MAAQta,GAAKuM,cACpH0K,GAAU3E,KAAKvT,GAAS,SAAC8E,EAAG0O,UAAuC,KAAhC1O,EAAEmD,KAAKwe,iBAAmB,IAAa3hB,EAAEmD,KAAK4M,mBAAqB,IAAM/P,EAAE+uB,UAAYrgB,EAAEvL,KAAK4M,mBAAqB,IAAMrB,EAAEqgB,SAA2C,KAAhCrgB,EAAEvL,KAAKwe,iBAAmB,UAE7LqN,QAAU,SAAA7rB,UAAQ,IAAI5B,EAAS4B,OAC/B8rB,gBAAkB,SAAA9rB,WACV,IAAVA,SACH1H,MAEK,IAAT0H,GAAiB1H,SACbA,EAAYgP,aAEP,IAATtH,SACH1H,GAAeA,EAAYqP,YAC3BrP,EAAc0H,OAGX+rB,EAAa/rB,aAAgB5B,EAAW4B,EAAOipB,GAAqBjpB,UACxE1H,GAAeA,EAAY4C,SAAW6wB,EAAW7wB,QAAU5C,EAAYqP,OACvEjQ,GAAYq0B,EAAW7wB,UAAY5C,EAAcyzB,GAC1CA,MAIM9uB,KAAO,CACpB5B,iBAAAA,EACAwtB,eAAAA,GACArwB,WAAAA,GACAhB,SAAAA,GACA6F,OAAQ,CAEP2uB,GAAI,cACHzd,IAAmBI,EAAU,eAC7BJ,GAAkB7S,MAGnBuwB,IAAK,sBAAMjd,YAIC9X,GAAKE,eAAe4F"} \ No newline at end of file diff --git a/dot-line-system/public/gsap.min.js b/dot-line-system/public/gsap.min.js deleted file mode 100644 index c0f9bfa..0000000 --- a/dot-line-system/public/gsap.min.js +++ /dev/null @@ -1,11 +0,0 @@ -/*! - * GSAP 3.12.7 - * https://gsap.com - * - * @license Copyright 2025, GreenSock. All rights reserved. - * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership. - * @author: Jack Doyle, jack@greensock.com - */ - -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Vt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Mt(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&Ct(t,"onInterrupt"),t}function wb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Wt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(ze,i,_e)}else At.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&St,e&St]:0:zt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),zt[e])p=zt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=c=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(Z(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof $t?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=$t.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||X,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||Z(t)||$(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(Z(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Nt,Gt,Wt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?re:te:Zt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(d=ka(p,n)+(Ya(p)||0))&&0!==d||(n=d))),!f||p!==n||Gt)return isNaN(p*n)||""===n?(c||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ka(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),D.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||Rt.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Gt=1,t.vars[e]="+=0",Qt(t,s),Gt=0,o?R(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ia(r)+Ya(h.e)),h.b&&(h.b=u.s+Ya(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!L),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Mt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa($t.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){$t[r]=function(){var t=new Xt,e=Ot.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Zt=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:Zt},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ae,this.d=s||this,this.set=o||Zt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=$t,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2 typeof(value) === \"string\",\n\t_isFunction = value => typeof(value) === \"function\",\n\t_isNumber = value => typeof(value) === \"number\",\n\t_isUndefined = value => typeof(value) === \"undefined\",\n\t_isObject = value => typeof(value) === \"object\",\n\t_isNotFalse = value => value !== false,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_isFuncOrString = value => _isFunction(value) || _isString(value),\n\t_isTypedArray = (typeof ArrayBuffer === \"function\" && ArrayBuffer.isView) || function() {}, // note: IE10 has ArrayBuffer, but NOT ArrayBuffer.isView().\n\t_isArray = Array.isArray,\n\t_strictNumExp = /(?:-?\\.?\\d|\\.)+/gi, //only numbers (including negatives and decimals) but NOT relative values.\n\t_numExp = /[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g, //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.\n\t_numWithUnitExp = /[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,\n\t_complexStringNumExp = /[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi, //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.\n\t_relExp = /[+-]=-?[.\\d]+/,\n\t_delimitedValueExp = /[^,'\"\\[\\]\\s]+/gi, // previously /[#\\-+.]*\\b[a-z\\d\\-=+%.]+/gi but didn't catch special characters.\n\t_unitExp = /^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,\n\t_globalTimeline, _win, _coreInitted, _doc,\n\t_globals = {},\n\t_installScope = {},\n\t_coreReady,\n\t_install = scope => (_installScope = _merge(scope, _globals)) && gsap,\n\t_missingPlugin = (property, value) => console.warn(\"Invalid property\", property, \"set to\", value, \"Missing plugin? gsap.registerPlugin()\"),\n\t_warn = (message, suppress) => !suppress && console.warn(message),\n\t_addGlobal = (name, obj) => (name && (_globals[name] = obj) && (_installScope && (_installScope[name] = obj))) || _globals,\n\t_emptyFunc = () => 0,\n\t_startAtRevertConfig = {suppressEvents: true, isStart: true, kill: false},\n\t_revertConfigNoKill = {suppressEvents: true, kill: false},\n\t_revertConfig = {suppressEvents: true},\n\t_reservedProps = {},\n\t_lazyTweens = [],\n\t_lazyLookup = {},\n\t_lastRenderedFrame,\n\t_plugins = {},\n\t_effects = {},\n\t_nextGCFrame = 30,\n\t_harnessPlugins = [],\n\t_callbackNames = \"\",\n\t_harness = targets => {\n\t\tlet target = targets[0],\n\t\t\tharnessPlugin, i;\n\t\t_isObject(target) || _isFunction(target) || (targets = [targets]);\n\t\tif (!(harnessPlugin = (target._gsap || {}).harness)) { // find the first target with a harness. We assume targets passed into an animation will be of similar type, meaning the same kind of harness can be used for them all (performance optimization)\n\t\t\ti = _harnessPlugins.length;\n\t\t\twhile (i-- && !_harnessPlugins[i].targetTest(target)) {\t}\n\t\t\tharnessPlugin = _harnessPlugins[i];\n\t\t}\n\t\ti = targets.length;\n\t\twhile (i--) {\n\t\t\t(targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin)))) || targets.splice(i, 1);\n\t\t}\n\t\treturn targets;\n\t},\n\t_getCache = target => target._gsap || _harness(toArray(target))[0]._gsap,\n\t_getProperty = (target, property, v) => (v = target[property]) && _isFunction(v) ? target[property]() : (_isUndefined(v) && target.getAttribute && target.getAttribute(property)) || v,\n\t_forEachName = (names, func) => ((names = names.split(\",\")).forEach(func)) || names, //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).\n\t_round = value => Math.round(value * 100000) / 100000 || 0,\n\t_roundPrecise = value => Math.round(value * 10000000) / 10000000 || 0, // increased precision mostly for timing values.\n\t_parseRelative = (start, value) => {\n\t\tlet operator = value.charAt(0),\n\t\t\tend = parseFloat(value.substr(2));\n\t\tstart = parseFloat(start);\n\t\treturn operator === \"+\" ? start + end : operator === \"-\" ? start - end : operator === \"*\" ? start * end : start / end;\n\t},\n\t_arrayContainsAny = (toSearch, toFind) => { //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.\n\t\tlet l = toFind.length,\n\t\t\ti = 0;\n\t\tfor (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) { }\n\t\treturn (i < l);\n\t},\n\t_lazyRender = () => {\n\t\tlet l = _lazyTweens.length,\n\t\t\ta = _lazyTweens.slice(0),\n\t\t\ti, tween;\n\t\t_lazyLookup = {};\n\t\t_lazyTweens.length = 0;\n\t\tfor (i = 0; i < l; i++) {\n\t\t\ttween = a[i];\n\t\t\ttween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);\n\t\t}\n\t},\n\t_lazySafeRender = (animation, time, suppressEvents, force) => {\n\t\t_lazyTweens.length && !_reverting && _lazyRender();\n\t\tanimation.render(time, suppressEvents, force || (_reverting && time < 0 && (animation._initted || animation._startAt)));\n\t\t_lazyTweens.length && !_reverting && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.\n\t},\n\t_numericIfPossible = value => {\n\t\tlet n = parseFloat(value);\n\t\treturn (n || n === 0) && (value + \"\").match(_delimitedValueExp).length < 2 ? n : _isString(value) ? value.trim() : value;\n\t},\n\t_passThrough = p => p,\n\t_setDefaults = (obj, defaults) => {\n\t\tfor (let p in defaults) {\n\t\t\t(p in obj) || (obj[p] = defaults[p]);\n\t\t}\n\t\treturn obj;\n\t},\n\t_setKeyframeDefaults = excludeDuration => (obj, defaults) => {\n\t\tfor (let p in defaults) {\n\t\t\t(p in obj) || (p === \"duration\" && excludeDuration) || p === \"ease\" || (obj[p] = defaults[p]);\n\t\t}\n\t},\n\t_merge = (base, toMerge) => {\n\t\tfor (let p in toMerge) {\n\t\t\tbase[p] = toMerge[p];\n\t\t}\n\t\treturn base;\n\t},\n\t_mergeDeep = (base, toMerge) => {\n\t\tfor (let p in toMerge) {\n\t\t\tp !== \"__proto__\" && p !== \"constructor\" && p !== \"prototype\" && (base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p]);\n\t\t}\n\t\treturn base;\n\t},\n\t_copyExcluding = (obj, excluding) => {\n\t\tlet copy = {},\n\t\t\tp;\n\t\tfor (p in obj) {\n\t\t\t(p in excluding) || (copy[p] = obj[p]);\n\t\t}\n\t\treturn copy;\n\t},\n\t_inheritDefaults = vars => {\n\t\tlet parent = vars.parent || _globalTimeline,\n\t\t\tfunc = vars.keyframes ? _setKeyframeDefaults(_isArray(vars.keyframes)) : _setDefaults;\n\t\tif (_isNotFalse(vars.inherit)) {\n\t\t\twhile (parent) {\n\t\t\t\tfunc(vars, parent.vars.defaults);\n\t\t\t\tparent = parent.parent || parent._dp;\n\t\t\t}\n\t\t}\n\t\treturn vars;\n\t},\n\t_arraysMatch = (a1, a2) => {\n\t\tlet i = a1.length,\n\t\t\tmatch = i === a2.length;\n\t\twhile (match && i-- && a1[i] === a2[i]) { }\n\t\treturn i < 0;\n\t},\n\t_addLinkedListItem = (parent, child, firstProp = \"_first\", lastProp = \"_last\", sortBy) => {\n\t\tlet prev = parent[lastProp],\n\t\t\tt;\n\t\tif (sortBy) {\n\t\t\tt = child[sortBy];\n\t\t\twhile (prev && prev[sortBy] > t) {\n\t\t\t\tprev = prev._prev;\n\t\t\t}\n\t\t}\n\t\tif (prev) {\n\t\t\tchild._next = prev._next;\n\t\t\tprev._next = child;\n\t\t} else {\n\t\t\tchild._next = parent[firstProp];\n\t\t\tparent[firstProp] = child;\n\t\t}\n\t\tif (child._next) {\n\t\t\tchild._next._prev = child;\n\t\t} else {\n\t\t\tparent[lastProp] = child;\n\t\t}\n\t\tchild._prev = prev;\n\t\tchild.parent = child._dp = parent;\n\t\treturn child;\n\t},\n\t_removeLinkedListItem = (parent, child, firstProp = \"_first\", lastProp = \"_last\") => {\n\t\tlet prev = child._prev,\n\t\t\tnext = child._next;\n\t\tif (prev) {\n\t\t\tprev._next = next;\n\t\t} else if (parent[firstProp] === child) {\n\t\t\tparent[firstProp] = next;\n\t\t}\n\t\tif (next) {\n\t\t\tnext._prev = prev;\n\t\t} else if (parent[lastProp] === child) {\n\t\t\tparent[lastProp] = prev;\n\t\t}\n\t\tchild._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.\n\t},\n\t_removeFromParent = (child, onlyIfParentHasAutoRemove) => {\n\t\tchild.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove && child.parent.remove(child);\n\t\tchild._act = 0;\n\t},\n\t_uncache = (animation, child) => {\n\t\tif (animation && (!child || child._end > animation._dur || child._start < 0)) { // performance optimization: if a child animation is passed in we should only uncache if that child EXTENDS the animation (its end time is beyond the end)\n\t\t\tlet a = animation;\n\t\t\twhile (a) {\n\t\t\t\ta._dirty = 1;\n\t\t\t\ta = a.parent;\n\t\t\t}\n\t\t}\n\t\treturn animation;\n\t},\n\t_recacheAncestors = animation => {\n\t\tlet parent = animation.parent;\n\t\twhile (parent && parent.parent) { //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.\n\t\t\tparent._dirty = 1;\n\t\t\tparent.totalDuration();\n\t\t\tparent = parent.parent;\n\t\t}\n\t\treturn animation;\n\t},\n\t_rewindStartAt = (tween, totalTime, suppressEvents, force) => tween._startAt && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : (tween.vars.immediateRender && !tween.vars.autoRevert) || tween._startAt.render(totalTime, true, force)),\n\t_hasNoPausedAncestors = animation => !animation || (animation._ts && _hasNoPausedAncestors(animation.parent)),\n\t_elapsedCycleDuration = animation => animation._repeat ? _animationCycle(animation._tTime, (animation = animation.duration() + animation._rDelay)) * animation : 0,\n\t// feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.\n\t_animationCycle = (tTime, cycleDuration) => {\n\t\tlet whole = Math.floor(tTime = _roundPrecise(tTime / cycleDuration));\n\t\treturn tTime && (whole === tTime) ? whole - 1 : whole;\n\t},\n\t_parentToChildTotalTime = (parentTime, child) => (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : (child._dirty ? child.totalDuration() : child._tDur)),\n\t_setEnd = animation => (animation._end = _roundPrecise(animation._start + ((animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum)) || 0))),\n\t_alignPlayhead = (animation, totalTime) => { // adjusts the animation's _start and _end according to the provided totalTime (only if the parent's smoothChildTiming is true and the animation isn't paused). It doesn't do any rendering or forcing things back into parent timelines, etc. - that's what totalTime() is for.\n\t\tlet parent = animation._dp;\n\t\tif (parent && parent.smoothChildTiming && animation._ts) {\n\t\t\tanimation._start = _roundPrecise(parent._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));\n\t\t\t_setEnd(animation);\n\t\t\tparent._dirty || _uncache(parent, animation); //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.\n\t\t}\n\t\treturn animation;\n\t},\n\t/*\n\t_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {\n\t\tlet cycleDuration = duration + repeatDelay,\n\t\t\ttime = _round(clampedTotalTime % cycleDuration);\n\t\tif (time > duration) {\n\t\t\ttime = duration;\n\t\t}\n\t\treturn (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;\n\t},\n\t*/\n\t_postAddChecks = (timeline, child) => {\n\t\tlet t;\n\t\tif (child._time || (!child._dur && child._initted) || (child._start < timeline._time && (child._dur || !child.add))) { // in case, for example, the _start is moved on a tween that has already rendered, or if it's being inserted into a timeline BEFORE where the playhead is currently. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning. Special case: if it's a timeline (has .add() method) and no duration, we can skip rendering because the user may be populating it AFTER adding it to a parent timeline (unconventional, but possible, and we wouldn't want it to get removed if the parent's autoRemoveChildren is true).\n\t\t\tt = _parentToChildTotalTime(timeline.rawTime(), child);\n\t\t\tif (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {\n\t\t\t\tchild.render(t, true);\n\t\t\t}\n\t\t}\n\t\t//if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.\n\t\tif (_uncache(timeline, child)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {\n\t\t\t//in case any of the ancestors had completed but should now be enabled...\n\t\t\tif (timeline._dur < timeline.duration()) {\n\t\t\t\tt = timeline;\n\t\t\t\twhile (t._dp) {\n\t\t\t\t\t(t.rawTime() >= 0) && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.\n\t\t\t\t\tt = t._dp;\n\t\t\t\t}\n\t\t\t}\n\t\t\ttimeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.\n\t\t}\n\t},\n\t_addToTimeline = (timeline, child, position, skipChecks) => {\n\t\tchild.parent && _removeFromParent(child);\n\t\tchild._start = _roundPrecise((_isNumber(position) ? position : position || timeline !== _globalTimeline ? _parsePosition(timeline, position, child) : timeline._time) + child._delay);\n\t\tchild._end = _roundPrecise(child._start + ((child.totalDuration() / Math.abs(child.timeScale())) || 0));\n\t\t_addLinkedListItem(timeline, child, \"_first\", \"_last\", timeline._sort ? \"_start\" : 0);\n\t\t_isFromOrFromStart(child) || (timeline._recent = child);\n\t\tskipChecks || _postAddChecks(timeline, child);\n\t\ttimeline._ts < 0 && _alignPlayhead(timeline, timeline._tTime); // if the timeline is reversed and the new child makes it longer, we may need to adjust the parent's _start (push it back)\n\t\treturn timeline;\n\t},\n\t_scrollTrigger = (animation, trigger) => (_globals.ScrollTrigger || _missingPlugin(\"scrollTrigger\", trigger)) && _globals.ScrollTrigger.create(trigger, animation),\n\t_attemptInitTween = (tween, time, force, suppressEvents, tTime) => {\n\t\t_initTween(tween, time, tTime);\n\t\tif (!tween._initted) {\n\t\t\treturn 1;\n\t\t}\n\t\tif (!force && tween._pt && !_reverting && ((tween._dur && tween.vars.lazy !== false) || (!tween._dur && tween.vars.lazy)) && _lastRenderedFrame !== _ticker.frame) {\n\t\t\t_lazyTweens.push(tween);\n\t\t\ttween._lazy = [tTime, suppressEvents];\n\t\t\treturn 1;\n\t\t}\n\t},\n\t_parentPlayheadIsBeforeStart = ({parent}) => parent && parent._ts && parent._initted && !parent._lock && (parent.rawTime() < 0 || _parentPlayheadIsBeforeStart(parent)), // check parent's _lock because when a timeline repeats/yoyos and does its artificial wrapping, we shouldn't force the ratio back to 0\n\t_isFromOrFromStart = ({data}) => data === \"isFromStart\" || data === \"isStart\",\n\t_renderZeroDurationTween = (tween, totalTime, suppressEvents, force) => {\n\t\tlet prevRatio = tween.ratio,\n\t\t\tratio = totalTime < 0 || (!totalTime && ((!tween._start && _parentPlayheadIsBeforeStart(tween) && !(!tween._initted && _isFromOrFromStart(tween))) || ((tween._ts < 0 || tween._dp._ts < 0) && !_isFromOrFromStart(tween)))) ? 0 : 1, // if the tween or its parent is reversed and the totalTime is 0, we should go to a ratio of 0. Edge case: if a from() or fromTo() stagger tween is placed later in a timeline, the \"startAt\" zero-duration tween could initially render at a time when the parent timeline's playhead is technically BEFORE where this tween is, so make sure that any \"from\" and \"fromTo\" startAt tweens are rendered the first time at a ratio of 1.\n\t\t\trepeatDelay = tween._rDelay,\n\t\t\ttTime = 0,\n\t\t\tpt, iteration, prevIteration;\n\t\tif (repeatDelay && tween._repeat) { // in case there's a zero-duration tween that has a repeat with a repeatDelay\n\t\t\ttTime = _clamp(0, tween._tDur, totalTime);\n\t\t\titeration = _animationCycle(tTime, repeatDelay);\n\t\t\ttween._yoyo && (iteration & 1) && (ratio = 1 - ratio);\n\t\t\tif (iteration !== _animationCycle(tween._tTime, repeatDelay)) { // if iteration changed\n\t\t\t\tprevRatio = 1 - ratio;\n\t\t\t\ttween.vars.repeatRefresh && tween._initted && tween.invalidate();\n\t\t\t}\n\t\t}\n\t\tif (ratio !== prevRatio || _reverting || force || tween._zTime === _tinyNum || (!totalTime && tween._zTime)) {\n\t\t\tif (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents, tTime)) { // if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprevIteration = tween._zTime;\n\t\t\ttween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); // when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\t\t\tsuppressEvents || (suppressEvents = totalTime && !prevIteration); // if it was rendered previously at exactly 0 (_zTime) and now the playhead is moving away, DON'T fire callbacks otherwise they'll seem like duplicates.\n\t\t\ttween.ratio = ratio;\n\t\t\ttween._from && (ratio = 1 - ratio);\n\t\t\ttween._time = 0;\n\t\t\ttween._tTime = tTime;\n\t\t\tpt = tween._pt;\n\t\t\twhile (pt) {\n\t\t\t\tpt.r(ratio, pt.d);\n\t\t\t\tpt = pt._next;\n\t\t\t}\n\t\t\ttotalTime < 0 && _rewindStartAt(tween, totalTime, suppressEvents, true);\n\t\t\ttween._onUpdate && !suppressEvents && _callback(tween, \"onUpdate\");\n\t\t\ttTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, \"onRepeat\");\n\t\t\tif ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {\n\t\t\t\tratio && _removeFromParent(tween, 1);\n\t\t\t\tif (!suppressEvents && !_reverting) {\n\t\t\t\t\t_callback(tween, (ratio ? \"onComplete\" : \"onReverseComplete\"), true);\n\t\t\t\t\ttween._prom && tween._prom();\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (!tween._zTime) {\n\t\t\ttween._zTime = totalTime;\n\t\t}\n\t},\n\t_findNextPauseTween = (animation, prevTime, time) => {\n\t\tlet child;\n\t\tif (time > prevTime) {\n\t\t\tchild = animation._first;\n\t\t\twhile (child && child._start <= time) {\n\t\t\t\tif (child.data === \"isPause\" && child._start > prevTime) {\n\t\t\t\t\treturn child;\n\t\t\t\t}\n\t\t\t\tchild = child._next;\n\t\t\t}\n\t\t} else {\n\t\t\tchild = animation._last;\n\t\t\twhile (child && child._start >= time) {\n\t\t\t\tif (child.data === \"isPause\" && child._start < prevTime) {\n\t\t\t\t\treturn child;\n\t\t\t\t}\n\t\t\t\tchild = child._prev;\n\t\t\t}\n\t\t}\n\t},\n\t_setDuration = (animation, duration, skipUncache, leavePlayhead) => {\n\t\tlet repeat = animation._repeat,\n\t\t\tdur = _roundPrecise(duration) || 0,\n\t\t\ttotalProgress = animation._tTime / animation._tDur;\n\t\ttotalProgress && !leavePlayhead && (animation._time *= dur / animation._dur);\n\t\tanimation._dur = dur;\n\t\tanimation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _roundPrecise(dur * (repeat + 1) + (animation._rDelay * repeat));\n\t\ttotalProgress > 0 && !leavePlayhead && _alignPlayhead(animation, (animation._tTime = animation._tDur * totalProgress));\n\t\tanimation.parent && _setEnd(animation);\n\t\tskipUncache || _uncache(animation.parent, animation);\n\t\treturn animation;\n\t},\n\t_onUpdateTotalDuration = animation => (animation instanceof Timeline) ? _uncache(animation) : _setDuration(animation, animation._dur),\n\t_zeroPosition = {_start:0, endTime:_emptyFunc, totalDuration:_emptyFunc},\n\t_parsePosition = (animation, position, percentAnimation) => {\n\t\tlet labels = animation.labels,\n\t\t\trecent = animation._recent || _zeroPosition,\n\t\t\tclippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur, //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.\n\t\t\ti, offset, isPercent;\n\t\tif (_isString(position) && (isNaN(position) || (position in labels))) { //if the string is a number like \"1\", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).\n\t\t\toffset = position.charAt(0);\n\t\t\tisPercent = position.substr(-1) === \"%\";\n\t\t\ti = position.indexOf(\"=\");\n\t\t\tif (offset === \"<\" || offset === \">\") {\n\t\t\t\ti >= 0 && (position = position.replace(/=/, \"\"));\n\t\t\t\treturn (offset === \"<\" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0) * (isPercent ? (i < 0 ? recent : percentAnimation).totalDuration() / 100 : 1);\n\t\t\t}\n\t\t\tif (i < 0) {\n\t\t\t\t(position in labels) || (labels[position] = clippedDuration);\n\t\t\t\treturn labels[position];\n\t\t\t}\n\t\t\toffset = parseFloat(position.charAt(i-1) + position.substr(i+1));\n\t\t\tif (isPercent && percentAnimation) {\n\t\t\t\toffset = offset / 100 * (_isArray(percentAnimation) ? percentAnimation[0] : percentAnimation).totalDuration();\n\t\t\t}\n\t\t\treturn (i > 1) ? _parsePosition(animation, position.substr(0, i-1), percentAnimation) + offset : clippedDuration + offset;\n\t\t}\n\t\treturn (position == null) ? clippedDuration : +position;\n\t},\n\t_createTweenType = (type, params, timeline) => {\n\t\tlet isLegacy = _isNumber(params[1]),\n\t\t\tvarsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),\n\t\t\tvars = params[varsIndex],\n\t\t\tirVars, parent;\n\t\tisLegacy && (vars.duration = params[1]);\n\t\tvars.parent = timeline;\n\t\tif (type) {\n\t\t\tirVars = vars;\n\t\t\tparent = timeline;\n\t\t\twhile (parent && !(\"immediateRender\" in irVars)) { // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.\n\t\t\t\tirVars = parent.vars.defaults || {};\n\t\t\t\tparent = _isNotFalse(parent.vars.inherit) && parent.parent;\n\t\t\t}\n\t\t\tvars.immediateRender = _isNotFalse(irVars.immediateRender);\n\t\t\ttype < 2 ? (vars.runBackwards = 1) : (vars.startAt = params[varsIndex - 1]); // \"from\" vars\n\t\t}\n\t\treturn new Tween(params[0], vars, params[varsIndex + 1]);\n\t},\n\t_conditionalReturn = (value, func) => value || value === 0 ? func(value) : func,\n\t_clamp = (min, max, value) => value < min ? min : value > max ? max : value,\n\tgetUnit = (value, v) => !_isString(value) || !(v = _unitExp.exec(value)) ? \"\" : v[1], // note: protect against padded numbers as strings, like \"100.100\". That shouldn't return \"00\" as the unit. If it's numeric, return no unit.\n\tclamp = (min, max, value) => _conditionalReturn(value, v => _clamp(min, max, v)),\n\t_slice = [].slice,\n\t_isArrayLike = (value, nonEmpty) => value && (_isObject(value) && \"length\" in value && ((!nonEmpty && !value.length) || ((value.length - 1) in value && _isObject(value[0]))) && !value.nodeType && value !== _win),\n\t_flatten = (ar, leaveStrings, accumulator = []) => ar.forEach(value => (_isString(value) && !leaveStrings) || _isArrayLike(value, 1) ? accumulator.push(...toArray(value)) : accumulator.push(value)) || accumulator,\n\t//takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.\n\ttoArray = (value, scope, leaveStrings) => _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [],\n\tselector = value => {\n\t\tvalue = toArray(value)[0] || _warn(\"Invalid scope\") || {};\n\t\treturn v => {\n\t\t\tlet el = value.current || value.nativeElement || value;\n\t\t\treturn toArray(v, el.querySelectorAll ? el : el === value ? _warn(\"Invalid scope\") || _doc.createElement(\"div\") : value);\n\t\t};\n\t},\n\tshuffle = a => a.sort(() => .5 - Math.random()), // alternative that's a bit faster and more reliably diverse but bigger: for (let j, v, i = a.length; i; j = (Math.random() * i) | 0, v = a[--i], a[i] = a[j], a[j] = v); return a;\n\t//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following\n\tdistribute = v => {\n\t\tif (_isFunction(v)) {\n\t\t\treturn v;\n\t\t}\n\t\tlet vars = _isObject(v) ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total \"amount\" that's chunked out among them all.\n\t\t\tease = _parseEase(vars.ease),\n\t\t\tfrom = vars.from || 0,\n\t\t\tbase = parseFloat(vars.base) || 0,\n\t\t\tcache = {},\n\t\t\tisDecimal = (from > 0 && from < 1),\n\t\t\tratios = isNaN(from) || isDecimal,\n\t\t\taxis = vars.axis,\n\t\t\tratioX = from,\n\t\t\tratioY = from;\n\t\tif (_isString(from)) {\n\t\t\tratioX = ratioY = {center:.5, edges:.5, end:1}[from] || 0;\n\t\t} else if (!isDecimal && ratios) {\n\t\t\tratioX = from[0];\n\t\t\tratioY = from[1];\n\t\t}\n\t\treturn (i, target, a) => {\n\t\t\tlet l = (a || vars).length,\n\t\t\t\tdistances = cache[l],\n\t\t\t\toriginX, originY, x, y, d, j, max, min, wrapAt;\n\t\t\tif (!distances) {\n\t\t\t\twrapAt = (vars.grid === \"auto\") ? 0 : (vars.grid || [1, _bigNum])[1];\n\t\t\t\tif (!wrapAt) {\n\t\t\t\t\tmax = -_bigNum;\n\t\t\t\t\twhile (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) { }\n\t\t\t\t\twrapAt < l && wrapAt--;\n\t\t\t\t}\n\t\t\t\tdistances = cache[l] = [];\n\t\t\t\toriginX = ratios ? (Math.min(wrapAt, l) * ratioX) - .5 : from % wrapAt;\n\t\t\t\toriginY = wrapAt === _bigNum ? 0 : ratios ? l * ratioY / wrapAt - .5 : (from / wrapAt) | 0;\n\t\t\t\tmax = 0;\n\t\t\t\tmin = _bigNum;\n\t\t\t\tfor (j = 0; j < l; j++) {\n\t\t\t\t\tx = (j % wrapAt) - originX;\n\t\t\t\t\ty = originY - ((j / wrapAt) | 0);\n\t\t\t\t\tdistances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs((axis === \"y\") ? y : x);\n\t\t\t\t\t(d > max) && (max = d);\n\t\t\t\t\t(d < min) && (min = d);\n\t\t\t\t}\n\t\t\t\t(from === \"random\") && shuffle(distances);\n\t\t\t\tdistances.max = max - min;\n\t\t\t\tdistances.min = min;\n\t\t\t\tdistances.v = l = (parseFloat(vars.amount) || (parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === \"y\" ? l / wrapAt : wrapAt)) || 0) * (from === \"edges\" ? -1 : 1);\n\t\t\t\tdistances.b = (l < 0) ? base - l : base;\n\t\t\t\tdistances.u = getUnit(vars.amount || vars.each) || 0; //unit\n\t\t\t\tease = (ease && l < 0) ? _invertEase(ease) : ease;\n\t\t\t}\n\t\t\tl = ((distances[i] - distances.min) / distances.max) || 0;\n\t\t\treturn _roundPrecise(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors\n\t\t};\n\t},\n\t_roundModifier = v => { //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.\n\t\tlet p = Math.pow(10, ((v + \"\").split(\".\")[1] || \"\").length); //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed())\n\t\treturn raw => {\n\t\t\tlet n = _roundPrecise(Math.round(parseFloat(raw) / v) * v * p);\n\t\t\treturn (n - n % 1) / p + (_isNumber(raw) ? 0 : getUnit(raw)); // n - n % 1 replaces Math.floor() in order to handle negative values properly. For example, Math.floor(-150.00000000000003) is 151!\n\t\t};\n\t},\n\tsnap = (snapTo, value) => {\n\t\tlet isArray = _isArray(snapTo),\n\t\t\tradius, is2D;\n\t\tif (!isArray && _isObject(snapTo)) {\n\t\t\tradius = isArray = snapTo.radius || _bigNum;\n\t\t\tif (snapTo.values) {\n\t\t\t\tsnapTo = toArray(snapTo.values);\n\t\t\t\tif ((is2D = !_isNumber(snapTo[0]))) {\n\t\t\t\t\tradius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsnapTo = _roundModifier(snapTo.increment);\n\t\t\t}\n\t\t}\n\t\treturn _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? raw => {is2D = snapTo(raw); return Math.abs(is2D - raw) <= radius ? is2D : raw; } : raw => {\n\t\t\tlet x = parseFloat(is2D ? raw.x : raw),\n\t\t\t\ty = parseFloat(is2D ? raw.y : 0),\n\t\t\t\tmin = _bigNum,\n\t\t\t\tclosest = 0,\n\t\t\t\ti = snapTo.length,\n\t\t\t\tdx, dy;\n\t\t\twhile (i--) {\n\t\t\t\tif (is2D) {\n\t\t\t\t\tdx = snapTo[i].x - x;\n\t\t\t\t\tdy = snapTo[i].y - y;\n\t\t\t\t\tdx = dx * dx + dy * dy;\n\t\t\t\t} else {\n\t\t\t\t\tdx = Math.abs(snapTo[i] - x);\n\t\t\t\t}\n\t\t\t\tif (dx < min) {\n\t\t\t\t\tmin = dx;\n\t\t\t\t\tclosest = i;\n\t\t\t\t}\n\t\t\t}\n\t\t\tclosest = (!radius || min <= radius) ? snapTo[closest] : raw;\n\t\t\treturn (is2D || closest === raw || _isNumber(raw)) ? closest : closest + getUnit(raw);\n\t\t});\n\t},\n\trandom = (min, max, roundingIncrement, returnFunction) => _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, () => _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? 10 ** ((roundingIncrement + \"\").length - 2) : 1) && (Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction)),\n\tpipe = (...functions) => value => functions.reduce((v, f) => f(v), value),\n\tunitize = (func, unit) => value => func(parseFloat(value)) + (unit || getUnit(value)),\n\tnormalize = (min, max, value) => mapRange(min, max, 0, 1, value),\n\t_wrapArray = (a, wrapper, value) => _conditionalReturn(value, index => a[~~wrapper(index)]),\n\twrap = function(min, max, value) { // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).\n\t\tlet range = max - min;\n\t\treturn _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, value => ((range + (value - min) % range) % range) + min);\n\t},\n\twrapYoyo = (min, max, value) => {\n\t\tlet range = max - min,\n\t\t\ttotal = range * 2;\n\t\treturn _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, value => {\n\t\t\tvalue = (total + (value - min) % total) % total || 0;\n\t\t\treturn min + ((value > range) ? (total - value) : value);\n\t\t});\n\t},\n\t_replaceRandom = value => { //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])\n\t\tlet prev = 0,\n\t\t\ts = \"\",\n\t\t\ti, nums, end, isArray;\n\t\twhile (~(i = value.indexOf(\"random(\", prev))) {\n\t\t\tend = value.indexOf(\")\", i);\n\t\t\tisArray = value.charAt(i + 7) === \"[\";\n\t\t\tnums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);\n\t\t\ts += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);\n\t\t\tprev = end + 1;\n\t\t}\n\t\treturn s + value.substr(prev, value.length - prev);\n\t},\n\tmapRange = (inMin, inMax, outMin, outMax, value) => {\n\t\tlet inRange = inMax - inMin,\n\t\t\toutRange = outMax - outMin;\n\t\treturn _conditionalReturn(value, value => outMin + ((((value - inMin) / inRange) * outRange) || 0));\n\t},\n\tinterpolate = (start, end, progress, mutate) => {\n\t\tlet func = isNaN(start + end) ? 0 : p => (1 - p) * start + p * end;\n\t\tif (!func) {\n\t\t\tlet isString = _isString(start),\n\t\t\t\tmaster = {},\n\t\t\t\tp, i, interpolators, l, il;\n\t\t\tprogress === true && (mutate = 1) && (progress = null);\n\t\t\tif (isString) {\n\t\t\t\tstart = {p: start};\n\t\t\t\tend = {p: end};\n\n\t\t\t} else if (_isArray(start) && !_isArray(end)) {\n\t\t\t\tinterpolators = [];\n\t\t\t\tl = start.length;\n\t\t\t\til = l - 2;\n\t\t\t\tfor (i = 1; i < l; i++) {\n\t\t\t\t\tinterpolators.push(interpolate(start[i-1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.\n\t\t\t\t}\n\t\t\t\tl--;\n\t\t\t\tfunc = p => {\n\t\t\t\t\tp *= l;\n\t\t\t\t\tlet i = Math.min(il, ~~p);\n\t\t\t\t\treturn interpolators[i](p - i);\n\t\t\t\t};\n\t\t\t\tprogress = end;\n\t\t\t} else if (!mutate) {\n\t\t\t\tstart = _merge(_isArray(start) ? [] : {}, start);\n\t\t\t}\n\t\t\tif (!interpolators) {\n\t\t\t\tfor (p in end) {\n\t\t\t\t\t_addPropTween.call(master, start, p, \"get\", end[p]);\n\t\t\t\t}\n\t\t\t\tfunc = p => _renderPropTweens(p, master) || (isString ? start.p : start);\n\t\t\t}\n\t\t}\n\t\treturn _conditionalReturn(progress, func);\n\t},\n\t_getLabelInDirection = (timeline, fromTime, backward) => { //used for nextLabel() and previousLabel()\n\t\tlet labels = timeline.labels,\n\t\t\tmin = _bigNum,\n\t\t\tp, distance, label;\n\t\tfor (p in labels) {\n\t\t\tdistance = labels[p] - fromTime;\n\t\t\tif ((distance < 0) === !!backward && distance && min > (distance = Math.abs(distance))) {\n\t\t\t\tlabel = p;\n\t\t\t\tmin = distance;\n\t\t\t}\n\t\t}\n\t\treturn label;\n\t},\n\t_callback = (animation, type, executeLazyFirst) => {\n\t\tlet v = animation.vars,\n\t\t\tcallback = v[type],\n\t\t\tprevContext = _context,\n\t\t\tcontext = animation._ctx,\n\t\t\tparams, scope, result;\n\t\tif (!callback) {\n\t\t\treturn;\n\t\t}\n\t\tparams = v[type + \"Params\"];\n\t\tscope = v.callbackScope || animation;\n\t\texecuteLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.\n\t\tcontext && (_context = context);\n\t\tresult = params ? callback.apply(scope, params) : callback.call(scope);\n\t\t_context = prevContext;\n\t\treturn result;\n\t},\n\t_interrupt = animation => {\n\t\t_removeFromParent(animation);\n\t\tanimation.scrollTrigger && animation.scrollTrigger.kill(!!_reverting);\n\t\tanimation.progress() < 1 && _callback(animation, \"onInterrupt\");\n\t\treturn animation;\n\t},\n\t_quickTween,\n\t_registerPluginQueue = [],\n\t_createPlugin = config => {\n\t\tif (!config) return;\n\t\tconfig = (!config.name && config.default) || config; // UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.\n\t\tif (_windowExists() || config.headless) { // edge case: some build tools may pass in a null/undefined value\n\t\t\tlet name = config.name,\n\t\t\t\tisFunc = _isFunction(config),\n\t\t\t\tPlugin = (name && !isFunc && config.init) ? function () {\n\t\t\t\t\tthis._props = [];\n\t\t\t\t} : config, //in case someone passes in an object that's not a plugin, like CustomEase\n\t\t\t\tinstanceDefaults = {init: _emptyFunc, render: _renderPropTweens, add: _addPropTween, kill: _killPropTweensOf, modifier: _addPluginModifier, rawVars: 0},\n\t\t\t\tstatics = {targetTest: 0, get: 0, getSetter: _getSetter, aliases: {}, register: 0};\n\t\t\t_wake();\n\t\t\tif (config !== Plugin) {\n\t\t\t\tif (_plugins[name]) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t_setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods\n\t\t\t\t_merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods\n\t\t\t\t_plugins[(Plugin.prop = name)] = Plugin;\n\t\t\t\tif (config.targetTest) {\n\t\t\t\t\t_harnessPlugins.push(Plugin);\n\t\t\t\t\t_reservedProps[name] = 1;\n\t\t\t\t}\n\t\t\t\tname = (name === \"css\" ? \"CSS\" : name.charAt(0).toUpperCase() + name.substr(1)) + \"Plugin\"; //for the global name. \"motionPath\" should become MotionPathPlugin\n\t\t\t}\n\t\t\t_addGlobal(name, Plugin);\n\t\t\tconfig.register && config.register(gsap, Plugin, PropTween);\n\t\t} else {\n\t\t\t_registerPluginQueue.push(config);\n\t\t}\n\t},\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * COLORS\n * --------------------------------------------------------------------------------------\n */\n\n\t_255 = 255,\n\t_colorLookup = {\n\t\taqua:[0,_255,_255],\n\t\tlime:[0,_255,0],\n\t\tsilver:[192,192,192],\n\t\tblack:[0,0,0],\n\t\tmaroon:[128,0,0],\n\t\tteal:[0,128,128],\n\t\tblue:[0,0,_255],\n\t\tnavy:[0,0,128],\n\t\twhite:[_255,_255,_255],\n\t\tolive:[128,128,0],\n\t\tyellow:[_255,_255,0],\n\t\torange:[_255,165,0],\n\t\tgray:[128,128,128],\n\t\tpurple:[128,0,128],\n\t\tgreen:[0,128,0],\n\t\tred:[_255,0,0],\n\t\tpink:[_255,192,203],\n\t\tcyan:[0,_255,_255],\n\t\ttransparent:[_255,_255,_255,0]\n\t},\n\t// possible future idea to replace the hard-coded color name values - put this in the ticker.wake() where we set the _doc:\n\t// let ctx = _doc.createElement(\"canvas\").getContext(\"2d\");\n\t// _forEachName(\"aqua,lime,silver,black,maroon,teal,blue,navy,white,olive,yellow,orange,gray,purple,green,red,pink,cyan\", color => {ctx.fillStyle = color; _colorLookup[color] = splitColor(ctx.fillStyle)});\n\t_hue = (h, m1, m2) => {\n\t\th += h < 0 ? 1 : h > 1 ? -1 : 0;\n\t\treturn ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255) + .5) | 0;\n\t},\n\tsplitColor = (v, toHSL, forceAlpha) => {\n\t\tlet a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, (v >> 8) & _255, v & _255] : 0,\n\t\t\tr, g, b, h, s, l, max, min, d, wasHSL;\n\t\tif (!a) {\n\t\t\tif (v.substr(-1) === \",\") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:\"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)\" - in this example \"blue,\" has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.\n\t\t\t\tv = v.substr(0, v.length - 1);\n\t\t\t}\n\t\t\tif (_colorLookup[v]) {\n\t\t\t\ta = _colorLookup[v];\n\t\t\t} else if (v.charAt(0) === \"#\") {\n\t\t\t\tif (v.length < 6) { //for shorthand like #9F0 or #9F0F (could have alpha)\n\t\t\t\t\tr = v.charAt(1);\n\t\t\t\t\tg = v.charAt(2);\n\t\t\t\t\tb = v.charAt(3);\n\t\t\t\t\tv = \"#\" + r + r + g + g + b + b + (v.length === 5 ? v.charAt(4) + v.charAt(4) : \"\");\n\t\t\t\t}\n\t\t\t\tif (v.length === 9) { // hex with alpha, like #fd5e53ff\n\t\t\t\t\ta = parseInt(v.substr(1, 6), 16);\n\t\t\t\t\treturn [a >> 16, (a >> 8) & _255, a & _255, parseInt(v.substr(7), 16) / 255];\n\t\t\t\t}\n\t\t\t\tv = parseInt(v.substr(1), 16);\n\t\t\t\ta = [v >> 16, (v >> 8) & _255, v & _255];\n\t\t\t} else if (v.substr(0, 3) === \"hsl\") {\n\t\t\t\ta = wasHSL = v.match(_strictNumExp);\n\t\t\t\tif (!toHSL) {\n\t\t\t\t\th = (+a[0] % 360) / 360;\n\t\t\t\t\ts = +a[1] / 100;\n\t\t\t\t\tl = +a[2] / 100;\n\t\t\t\t\tg = (l <= .5) ? l * (s + 1) : l + s - l * s;\n\t\t\t\t\tr = l * 2 - g;\n\t\t\t\t\ta.length > 3 && (a[3] *= 1); //cast as number\n\t\t\t\t\ta[0] = _hue(h + 1 / 3, r, g);\n\t\t\t\t\ta[1] = _hue(h, r, g);\n\t\t\t\t\ta[2] = _hue(h - 1 / 3, r, g);\n\t\t\t\t} else if (~v.indexOf(\"=\")) { //if relative values are found, just return the raw strings with the relative prefixes in place.\n\t\t\t\t\ta = v.match(_numExp);\n\t\t\t\t\tforceAlpha && a.length < 4 && (a[3] = 1);\n\t\t\t\t\treturn a;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ta = v.match(_strictNumExp) || _colorLookup.transparent;\n\t\t\t}\n\t\t\ta = a.map(Number);\n\t\t}\n\t\tif (toHSL && !wasHSL) {\n\t\t\tr = a[0] / _255;\n\t\t\tg = a[1] / _255;\n\t\t\tb = a[2] / _255;\n\t\t\tmax = Math.max(r, g, b);\n\t\t\tmin = Math.min(r, g, b);\n\t\t\tl = (max + min) / 2;\n\t\t\tif (max === min) {\n\t\t\t\th = s = 0;\n\t\t\t} else {\n\t\t\t\td = max - min;\n\t\t\t\ts = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\t\t\t\th = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;\n\t\t\t\th *= 60;\n\t\t\t}\n\t\t\ta[0] = ~~(h + .5);\n\t\t\ta[1] = ~~(s * 100 + .5);\n\t\t\ta[2] = ~~(l * 100 + .5);\n\t\t}\n\t\tforceAlpha && a.length < 4 && (a[3] = 1);\n\t\treturn a;\n\t},\n\t_colorOrderData = v => { // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a \"c\" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()\n\t\tlet values = [],\n\t\t\tc = [],\n\t\t\ti = -1;\n\t\tv.split(_colorExp).forEach(v => {\n\t\t\tlet a = v.match(_numWithUnitExp) || [];\n\t\t\tvalues.push(...a);\n\t\t\tc.push(i += a.length + 1);\n\t\t});\n\t\tvalues.c = c;\n\t\treturn values;\n\t},\n\t_formatColors = (s, toHSL, orderMatchData) => {\n\t\tlet result = \"\",\n\t\t\tcolors = (s + result).match(_colorExp),\n\t\t\ttype = toHSL ? \"hsla(\" : \"rgba(\",\n\t\t\ti = 0,\n\t\t\tc, shell, d, l;\n\t\tif (!colors) {\n\t\t\treturn s;\n\t\t}\n\t\tcolors = colors.map(color => (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + \",\" + color[1] + \"%,\" + color[2] + \"%,\" + color[3] : color.join(\",\")) + \")\");\n\t\tif (orderMatchData) {\n\t\t\td = _colorOrderData(s);\n\t\t\tc = orderMatchData.c;\n\t\t\tif (c.join(result) !== d.c.join(result)) {\n\t\t\t\tshell = s.replace(_colorExp, \"1\").split(_numWithUnitExp);\n\t\t\t\tl = shell.length - 1;\n\t\t\t\tfor (; i < l; i++) {\n\t\t\t\t\tresult += shell[i] + (~c.indexOf(i) ? colors.shift() || type + \"0,0,0,0)\" : (d.length ? d : colors.length ? colors : orderMatchData).shift());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (!shell) {\n\t\t\tshell = s.split(_colorExp);\n\t\t\tl = shell.length - 1;\n\t\t\tfor (; i < l; i++) {\n\t\t\t\tresult += shell[i] + colors[i];\n\t\t\t}\n\t\t}\n\t\treturn result + shell[l];\n\t},\n\t_colorExp = (function() {\n\t\tlet s = \"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\", //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,\n\t\t\tp;\n\t\tfor (p in _colorLookup) {\n\t\t\ts += \"|\" + p + \"\\\\b\";\n\t\t}\n\t\treturn new RegExp(s + \")\", \"gi\");\n\t})(),\n\t_hslExp = /hsl[a]?\\(/,\n\t_colorStringFilter = a => {\n\t\tlet combined = a.join(\" \"),\n\t\t\ttoHSL;\n\t\t_colorExp.lastIndex = 0;\n\t\tif (_colorExp.test(combined)) {\n\t\t\ttoHSL = _hslExp.test(combined);\n\t\t\ta[1] = _formatColors(a[1], toHSL);\n\t\t\ta[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.\n\t\t\treturn true;\n\t\t}\n\t},\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * TICKER\n * --------------------------------------------------------------------------------------\n */\n\t_tickerActive,\n\t_ticker = (function() {\n\t\tlet _getTime = Date.now,\n\t\t\t_lagThreshold = 500,\n\t\t\t_adjustedLag = 33,\n\t\t\t_startTime = _getTime(),\n\t\t\t_lastUpdate = _startTime,\n\t\t\t_gap = 1000 / 240,\n\t\t\t_nextTime = _gap,\n\t\t\t_listeners = [],\n\t\t\t_id, _req, _raf, _self, _delta, _i,\n\t\t\t_tick = v => {\n\t\t\t\tlet elapsed = _getTime() - _lastUpdate,\n\t\t\t\t\tmanual = v === true,\n\t\t\t\t\toverlap, dispatch, time, frame;\n\t\t\t\t(elapsed > _lagThreshold || elapsed < 0) && (_startTime += elapsed - _adjustedLag);\n\t\t\t\t_lastUpdate += elapsed;\n\t\t\t\ttime = _lastUpdate - _startTime;\n\t\t\t\toverlap = time - _nextTime;\n\t\t\t\tif (overlap > 0 || manual) {\n\t\t\t\t\tframe = ++_self.frame;\n\t\t\t\t\t_delta = time - _self.time * 1000;\n\t\t\t\t\t_self.time = time = time / 1000;\n\t\t\t\t\t_nextTime += overlap + (overlap >= _gap ? 4 : _gap - overlap);\n\t\t\t\t\tdispatch = 1;\n\t\t\t\t}\n\t\t\t\tmanual || (_id = _req(_tick)); //make sure the request is made before we dispatch the \"tick\" event so that timing is maintained. Otherwise, if processing the \"tick\" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.\n\t\t\t\tif (dispatch) {\n\t\t\t\t\tfor (_i = 0; _i < _listeners.length; _i++) { // use _i and check _listeners.length instead of a variable because a listener could get removed during the loop, and if that happens to an element less than the current index, it'd throw things off in the loop.\n\t\t\t\t\t\t_listeners[_i](time, _delta, frame, v);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t_self = {\n\t\t\ttime:0,\n\t\t\tframe:0,\n\t\t\ttick() {\n\t\t\t\t_tick(true);\n\t\t\t},\n\t\t\tdeltaRatio(fps) {\n\t\t\t\treturn _delta / (1000 / (fps || 60));\n\t\t\t},\n\t\t\twake() {\n\t\t\t\tif (_coreReady) {\n\t\t\t\t\tif (!_coreInitted && _windowExists()) {\n\t\t\t\t\t\t_win = _coreInitted = window;\n\t\t\t\t\t\t_doc = _win.document || {};\n\t\t\t\t\t\t_globals.gsap = gsap;\n\t\t\t\t\t\t(_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);\n\t\t\t\t\t\t_install(_installScope || _win.GreenSockGlobals || (!_win.gsap && _win) || {});\n\t\t\t\t\t\t_registerPluginQueue.forEach(_createPlugin);\n\t\t\t\t\t}\n\t\t\t\t\t_raf = typeof(requestAnimationFrame) !== \"undefined\" && requestAnimationFrame;\n\t\t\t\t\t_id && _self.sleep();\n\t\t\t\t\t_req = _raf || (f => setTimeout(f, (_nextTime - _self.time * 1000 + 1) | 0));\n\t\t\t\t\t_tickerActive = 1;\n\t\t\t\t\t_tick(2);\n\t\t\t\t}\n\t\t\t},\n\t\t\tsleep() {\n\t\t\t\t(_raf ? cancelAnimationFrame : clearTimeout)(_id);\n\t\t\t\t_tickerActive = 0;\n\t\t\t\t_req = _emptyFunc;\n\t\t\t},\n\t\t\tlagSmoothing(threshold, adjustedLag) {\n\t\t\t\t_lagThreshold = threshold || Infinity; // zero should be interpreted as basically unlimited\n\t\t\t\t_adjustedLag = Math.min(adjustedLag || 33, _lagThreshold);\n\t\t\t},\n\t\t\tfps(fps) {\n\t\t\t\t_gap = 1000 / (fps || 240);\n\t\t\t\t_nextTime = _self.time * 1000 + _gap;\n\t\t\t},\n\t\t\tadd(callback, once, prioritize) {\n\t\t\t\tlet func = once ? (t, d, f, v) => {callback(t, d, f, v); _self.remove(func);} : callback;\n\t\t\t\t_self.remove(callback);\n\t\t\t\t_listeners[prioritize ? \"unshift\" : \"push\"](func);\n\t\t\t\t_wake();\n\t\t\t\treturn func;\n\t\t\t},\n\t\t\tremove(callback, i) {\n\t\t\t\t~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1) && _i >= i && _i--;\n\t\t\t},\n\t\t\t_listeners:_listeners\n\t\t};\n\t\treturn _self;\n\t})(),\n\t_wake = () => !_tickerActive && _ticker.wake(), //also ensures the core classes are initialized.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n* -------------------------------------------------\n* EASING\n* -------------------------------------------------\n*/\n\t_easeMap = {},\n\t_customEaseExp = /^[\\d.\\-M][\\d.\\-,\\s]/,\n\t_quotesExp = /[\"']/g,\n\t_parseObjectInString = value => { //takes a string like \"{wiggles:10, type:anticipate})\" and turns it into a real object. Notice it ends in \")\" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.\n\t\tlet obj = {},\n\t\t\tsplit = value.substr(1, value.length-3).split(\":\"),\n\t\t\tkey = split[0],\n\t\t\ti = 1,\n\t\t\tl = split.length,\n\t\t\tindex, val, parsedVal;\n\t\tfor (; i < l; i++) {\n\t\t\tval = split[i];\n\t\t\tindex = i !== l-1 ? val.lastIndexOf(\",\") : val.length;\n\t\t\tparsedVal = val.substr(0, index);\n\t\t\tobj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, \"\").trim() : +parsedVal;\n\t\t\tkey = val.substr(index+1).trim();\n\t\t}\n\t\treturn obj;\n\t},\n\t_valueInParentheses = value => {\n\t\tlet open = value.indexOf(\"(\") + 1,\n\t\t\tclose = value.indexOf(\")\"),\n\t\t\tnested = value.indexOf(\"(\", open);\n\t\treturn value.substring(open, ~nested && nested < close ? value.indexOf(\")\", close + 1) : close);\n\t},\n\t_configEaseFromString = name => { //name can be a string like \"elastic.out(1,0.5)\", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).\n\t\tlet split = (name + \"\").split(\"(\"),\n\t\t\tease = _easeMap[split[0]];\n\t\treturn (ease && split.length > 1 && ease.config) ? ease.config.apply(null, ~name.indexOf(\"{\") ? [_parseObjectInString(split[1])] : _valueInParentheses(name).split(\",\").map(_numericIfPossible)) : (_easeMap._CE && _customEaseExp.test(name)) ? _easeMap._CE(\"\", name) : ease;\n\t},\n\t_invertEase = ease => p => 1 - ease(1 - p),\n\t// allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos.\n\t_propagateYoyoEase = (timeline, isYoyo) => {\n\t\tlet child = timeline._first, ease;\n\t\twhile (child) {\n\t\t\tif (child instanceof Timeline) {\n\t\t\t\t_propagateYoyoEase(child, isYoyo);\n\t\t\t} else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {\n\t\t\t\tif (child.timeline) {\n\t\t\t\t\t_propagateYoyoEase(child.timeline, isYoyo);\n\t\t\t\t} else {\n\t\t\t\t\tease = child._ease;\n\t\t\t\t\tchild._ease = child._yEase;\n\t\t\t\t\tchild._yEase = ease;\n\t\t\t\t\tchild._yoyo = isYoyo;\n\t\t\t\t}\n\t\t\t}\n\t\t\tchild = child._next;\n\t\t}\n\t},\n\t_parseEase = (ease, defaultEase) => !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase,\n\t_insertEase = (names, easeIn, easeOut = p => 1 - easeIn(1 - p), easeInOut = (p => p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2)) => {\n\t\tlet ease = {easeIn, easeOut, easeInOut},\n\t\t\tlowercaseName;\n\t\t_forEachName(names, name => {\n\t\t\t_easeMap[name] = _globals[name] = ease;\n\t\t\t_easeMap[(lowercaseName = name.toLowerCase())] = easeOut;\n\t\t\tfor (let p in ease) {\n\t\t\t\t_easeMap[lowercaseName + (p === \"easeIn\" ? \".in\" : p === \"easeOut\" ? \".out\" : \".inOut\")] = _easeMap[name + \".\" + p] = ease[p];\n\t\t\t}\n\t\t});\n\t\treturn ease;\n\t},\n\t_easeInOutFromOut = easeOut => (p => p < .5 ? (1 - easeOut(1 - (p * 2))) / 2 : .5 + easeOut((p - .5) * 2) / 2),\n\t_configElastic = (type, amplitude, period) => {\n\t\tlet p1 = (amplitude >= 1) ? amplitude : 1, //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.\n\t\t\tp2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),\n\t\t\tp3 = p2 / _2PI * (Math.asin(1 / p1) || 0),\n\t\t\teaseOut = p => p === 1 ? 1 : p1 * (2 ** (-10 * p)) * _sin((p - p3) * p2) + 1,\n\t\t\tease = (type === \"out\") ? easeOut : (type === \"in\") ? p => 1 - easeOut(1 - p) : _easeInOutFromOut(easeOut);\n\t\tp2 = _2PI / p2; //precalculate to optimize\n\t\tease.config = (amplitude, period) => _configElastic(type, amplitude, period);\n\t\treturn ease;\n\t},\n\t_configBack = (type, overshoot = 1.70158) => {\n\t\tlet easeOut = p => p ? ((--p) * p * ((overshoot + 1) * p + overshoot) + 1) : 0,\n\t\t\tease = type === \"out\" ? easeOut : type === \"in\" ? p => 1 - easeOut(1 - p) : _easeInOutFromOut(easeOut);\n\t\tease.config = overshoot => _configBack(type, overshoot);\n\t\treturn ease;\n\t};\n\t// a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n\t// _weightedEase = ratio => {\n\t// \tlet y = 0.5 + ratio / 2;\n\t// \treturn p => (2 * (1 - p) * p * y + p * p);\n\t// },\n\t// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n\t// _weightedEaseStrong = ratio => {\n\t// \tratio = .5 + ratio / 2;\n\t// \tlet o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),\n\t// \t\tb = ratio - o,\n\t// \t\tc = ratio + o;\n\t// \treturn p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;\n\t// };\n\n_forEachName(\"Linear,Quad,Cubic,Quart,Quint,Strong\", (name, i) => {\n\tlet power = i < 5 ? i + 1 : i;\n\t_insertEase(name + \",Power\" + (power - 1), i ? p => p ** power : p => p, p => 1 - (1 - p) ** power, p => p < .5 ? (p * 2) ** power / 2 : 1 - ((1 - p) * 2) ** power / 2);\n});\n_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;\n_insertEase(\"Elastic\", _configElastic(\"in\"), _configElastic(\"out\"), _configElastic());\n((n, c) => {\n\tlet n1 = 1 / c,\n\t\tn2 = 2 * n1,\n\t\tn3 = 2.5 * n1,\n\t\teaseOut = p => (p < n1) ? n * p * p : (p < n2) ? n * (p - 1.5 / c) ** 2 + .75 : (p < n3) ? n * (p -= 2.25 / c) * p + .9375 : n * (p - 2.625 / c) ** 2 + .984375;\n\t_insertEase(\"Bounce\", p => 1 - easeOut(1 - p), easeOut);\n})(7.5625, 2.75);\n_insertEase(\"Expo\", p => (2 ** (10 * (p - 1))) * p + p * p * p * p * p * p * (1-p)); // previously 2 ** (10 * (p - 1)) but that doesn't end up with the value quite at the right spot so we do a blended ease to ensure it lands where it should perfectly.\n_insertEase(\"Circ\", p => -(_sqrt(1 - (p * p)) - 1));\n_insertEase(\"Sine\", p => p === 1 ? 1 : -_cos(p * _HALF_PI) + 1);\n_insertEase(\"Back\", _configBack(\"in\"), _configBack(\"out\"), _configBack());\n_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {\n\tconfig(steps = 1, immediateStart) {\n\t\tlet p1 = 1 / steps,\n\t\t\tp2 = steps + (immediateStart ? 0 : 1),\n\t\t\tp3 = immediateStart ? 1 : 0,\n\t\t\tmax = 1 - _tinyNum;\n\t\treturn p => (((p2 * _clamp(0, max, p)) | 0) + p3) * p1;\n\t}\n};\n_defaults.ease = _easeMap[\"quad.out\"];\n\n\n_forEachName(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\", name => _callbackNames += name + \",\" + name + \"Params,\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * CACHE\n * --------------------------------------------------------------------------------------\n */\nexport class GSCache {\n\n\tconstructor(target, harness) {\n\t\tthis.id = _gsID++;\n\t\ttarget._gsap = this;\n\t\tthis.target = target;\n\t\tthis.harness = harness;\n\t\tthis.get = harness ? harness.get : _getProperty;\n\t\tthis.set = harness ? harness.getSetter : _getSetter;\n\t}\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * ANIMATION\n * --------------------------------------------------------------------------------------\n */\n\nexport class Animation {\n\n\tconstructor(vars) {\n\t\tthis.vars = vars;\n\t\tthis._delay = +vars.delay || 0;\n\t\tif ((this._repeat = vars.repeat === Infinity ? -2 : vars.repeat || 0)) { // TODO: repeat: Infinity on a timeline's children must flag that timeline internally and affect its totalDuration, otherwise it'll stop in the negative direction when reaching the start.\n\t\t\tthis._rDelay = vars.repeatDelay || 0;\n\t\t\tthis._yoyo = !!vars.yoyo || !!vars.yoyoEase;\n\t\t}\n\t\tthis._ts = 1;\n\t\t_setDuration(this, +vars.duration, 1, 1);\n\t\tthis.data = vars.data;\n\t\tif (_context) {\n\t\t\tthis._ctx = _context;\n\t\t\t_context.data.push(this);\n\t\t}\n\t\t_tickerActive || _ticker.wake();\n\t}\n\n\tdelay(value) {\n\t\tif (value || value === 0) {\n\t\t\tthis.parent && this.parent.smoothChildTiming && (this.startTime(this._start + value - this._delay));\n\t\t\tthis._delay = value;\n\t\t\treturn this;\n\t\t}\n\t\treturn this._delay;\n\t}\n\n\tduration(value) {\n\t\treturn arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;\n\t}\n\n\ttotalDuration(value) {\n\t\tif (!arguments.length) {\n\t\t\treturn this._tDur;\n\t\t}\n\t\tthis._dirty = 0;\n\t\treturn _setDuration(this, this._repeat < 0 ? value : (value - (this._repeat * this._rDelay)) / (this._repeat + 1));\n\t}\n\n\ttotalTime(totalTime, suppressEvents) {\n\t\t_wake();\n\t\tif (!arguments.length) {\n\t\t\treturn this._tTime;\n\t\t}\n\t\tlet parent = this._dp;\n\t\tif (parent && parent.smoothChildTiming && this._ts) {\n\t\t\t_alignPlayhead(this, totalTime);\n\t\t\t!parent._dp || parent.parent || _postAddChecks(parent, this); // edge case: if this is a child of a timeline that already completed, for example, we must re-activate the parent.\n\t\t\t//in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.\n\t\t\twhile (parent && parent.parent) {\n\t\t\t\tif (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {\n\t\t\t\t\tparent.totalTime(parent._tTime, true);\n\t\t\t\t}\n\t\t\t\tparent = parent.parent;\n\t\t\t}\n\t\t\tif (!this.parent && this._dp.autoRemoveChildren && ((this._ts > 0 && totalTime < this._tDur) || (this._ts < 0 && totalTime > 0) || (!this._tDur && !totalTime) )) { //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.\n\t\t\t\t_addToTimeline(this._dp, this, this._start - this._delay);\n\t\t\t}\n\t\t}\n if (this._tTime !== totalTime || (!this._dur && !suppressEvents) || (this._initted && Math.abs(this._zTime) === _tinyNum) || (!totalTime && !this._initted && (this.add || this._ptLookup))) { // check for _ptLookup on a Tween instance to ensure it has actually finished being instantiated, otherwise if this.reverse() gets called in the Animation constructor, it could trigger a render() here even though the _targets weren't populated, thus when _init() is called there won't be any PropTweens (it'll act like the tween is non-functional)\n \tthis._ts || (this._pTime = totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause\n\t //if (!this._lock) { // avoid endless recursion (not sure we need this yet or if it's worth the performance hit)\n\t\t // this._lock = 1;\n\t\t _lazySafeRender(this, totalTime, suppressEvents);\n\t\t // this._lock = 0;\n\t //}\n\t\t}\n\t\treturn this;\n\t}\n\n\ttime(value, suppressEvents) {\n\t\treturn arguments.length ? this.totalTime((Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % (this._dur + this._rDelay)) || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!\n\t}\n\n\ttotalProgress(value, suppressEvents) {\n\t\treturn arguments.length ? this.totalTime( this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.rawTime() >= 0 && this._initted ? 1 : 0;\n\t}\n\n\tprogress(value, suppressEvents) {\n\t\treturn arguments.length ? this.totalTime( this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : (this.duration() ? Math.min(1, this._time / this._dur) : this.rawTime() > 0 ? 1 : 0);\n\t}\n\n\titeration(value, suppressEvents) {\n\t\tlet cycleDuration = this.duration() + this._rDelay;\n\t\treturn arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;\n\t}\n\n\t// potential future addition:\n\t// isPlayingBackwards() {\n\t// \tlet animation = this,\n\t// \t\torientation = 1; // 1 = forward, -1 = backward\n\t// \twhile (animation) {\n\t// \t\torientation *= animation.reversed() || (animation.repeat() && !(animation.iteration() & 1)) ? -1 : 1;\n\t// \t\tanimation = animation.parent;\n\t// \t}\n\t// \treturn orientation < 0;\n\t// }\n\n\ttimeScale(value, suppressEvents) {\n\t\tif (!arguments.length) {\n\t\t\treturn this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.\n\t\t}\n\t\tif (this._rts === value) {\n\t\t\treturn this;\n\t\t}\n\t\tlet tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.\n\n\t\t// future addition? Up side: fast and minimal file size. Down side: only works on this animation; if a timeline is reversed, for example, its childrens' onReverse wouldn't get called.\n\t\t//(+value < 0 && this._rts >= 0) && _callback(this, \"onReverse\", true);\n\n\t\t// prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.\n\t\tthis._rts = +value || 0;\n\t\tthis._ts = (this._ps || value === -_tinyNum) ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.\n\t\tthis.totalTime(_clamp(-Math.abs(this._delay), this._tDur, tTime), suppressEvents !== false);\n\t\t_setEnd(this); // if parent.smoothChildTiming was false, the end time didn't get updated in the _alignPlayhead() method, so do it here.\n\t\treturn _recacheAncestors(this);\n\t}\n\n\tpaused(value) {\n\t\tif (!arguments.length) {\n\t\t\treturn this._ps;\n\t\t}\n\t\t// possible future addition - if an animation is removed from its parent and then .restart() or .play() or .resume() is called, perhaps we should force it back into the globalTimeline but be careful because what if it's already at its end? We don't want it to just persist forever and not get released for GC.\n\t\t// !this.parent && !value && this._tTime < this._tDur && this !== _globalTimeline && _globalTimeline.add(this);\n\t\tif (this._ps !== value) {\n\t\t\tthis._ps = value;\n\t\t\tif (value) {\n\t\t\t\tthis._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.\n\t\t\t\tthis._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the \"real\" timeScale as _rts (recorded time scale)\n\t\t\t} else {\n\t\t\t\t_wake();\n\t\t\t\tthis._ts = this._rts;\n\t\t\t\t//only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.\n\t\t\t\tthis.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, (this.progress() === 1) && Math.abs(this._zTime) !== _tinyNum && (this._tTime -= _tinyNum)); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tstartTime(value) {\n\t\tif (arguments.length) {\n\t\t\tthis._start = value;\n\t\t\tlet parent = this.parent || this._dp;\n\t\t\tparent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);\n\t\t\treturn this;\n\t\t}\n\t\treturn this._start;\n\t}\n\n\tendTime(includeRepeats) {\n\t\treturn this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts || 1);\n\t}\n\n\trawTime(wrapRepeats) {\n\t\tlet parent = this.parent || this._dp; // _dp = detached parent\n\t\treturn !parent ? this._tTime : (wrapRepeats && (!this._ts || (this._repeat && this._time && this.totalProgress() < 1))) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);\n\t}\n\n\trevert(config= _revertConfig) {\n\t\tlet prevIsReverting = _reverting;\n\t\t_reverting = config;\n\t\tif (this._initted || this._startAt) {\n\t\t\tthis.timeline && this.timeline.revert(config);\n\t\t\tthis.totalTime(-0.01, config.suppressEvents);\n\t\t}\n\t\tthis.data !== \"nested\" && config.kill !== false && this.kill();\n\t\t_reverting = prevIsReverting;\n\t\treturn this;\n\t}\n\n\tglobalTime(rawTime) {\n\t\tlet animation = this,\n\t\t\ttime = arguments.length ? rawTime : animation.rawTime();\n\t\twhile (animation) {\n\t\t\ttime = animation._start + time / (Math.abs(animation._ts) || 1);\n\t\t\tanimation = animation._dp;\n\t\t}\n\t\treturn !this.parent && this._sat ? this._sat.globalTime(rawTime) : time; // the _startAt tweens for .fromTo() and .from() that have immediateRender should always be FIRST in the timeline (important for context.revert()). \"_sat\" stands for _startAtTween, referring to the parent tween that created the _startAt. We must discern if that tween had immediateRender so that we can know whether or not to prioritize it in revert().\n\t}\n\n\trepeat(value) {\n\t\tif (arguments.length) {\n\t\t\tthis._repeat = value === Infinity ? -2 : value;\n\t\t\treturn _onUpdateTotalDuration(this);\n\t\t}\n\t\treturn this._repeat === -2 ? Infinity : this._repeat;\n\t}\n\n\trepeatDelay(value) {\n\t\tif (arguments.length) {\n\t\t\tlet time = this._time;\n\t\t\tthis._rDelay = value;\n\t\t\t_onUpdateTotalDuration(this);\n\t\t\treturn time ? this.time(time) : this;\n\t\t}\n\t\treturn this._rDelay;\n\t}\n\n\tyoyo(value) {\n\t\tif (arguments.length) {\n\t\t\tthis._yoyo = value;\n\t\t\treturn this;\n\t\t}\n\t\treturn this._yoyo;\n\t}\n\n\tseek(position, suppressEvents) {\n\t\treturn this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));\n\t}\n\n\trestart(includeDelay, suppressEvents) {\n\t\tthis.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));\n\t\tthis._dur || (this._zTime = -_tinyNum); // ensures onComplete fires on a zero-duration animation that gets restarted.\n\t\treturn this;\n\t}\n\n\tplay(from, suppressEvents) {\n\t\tfrom != null && this.seek(from, suppressEvents);\n\t\treturn this.reversed(false).paused(false);\n\t}\n\n\treverse(from, suppressEvents) {\n\t\tfrom != null && this.seek(from || this.totalDuration(), suppressEvents);\n\t\treturn this.reversed(true).paused(false);\n\t}\n\n\tpause(atTime, suppressEvents) {\n\t\tatTime != null && this.seek(atTime, suppressEvents);\n\t\treturn this.paused(true);\n\t}\n\n\tresume() {\n\t\treturn this.paused(false);\n\t}\n\n\treversed(value) {\n\t\tif (arguments.length) {\n\t\t\t!!value !== this.reversed() && this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.\n\t\t\treturn this;\n\t\t}\n\t\treturn this._rts < 0;\n\t}\n\n\tinvalidate() {\n\t\tthis._initted = this._act = 0;\n\t\tthis._zTime = -_tinyNum;\n\t\treturn this;\n\t}\n\n\tisActive() {\n\t\tlet parent = this.parent || this._dp,\n\t\t\tstart = this._start,\n\t\t\trawTime;\n\t\treturn !!(!parent || (this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum));\n\t}\n\n\teventCallback(type, callback, params) {\n\t\tlet vars = this.vars;\n\t\tif (arguments.length > 1) {\n\t\t\tif (!callback) {\n\t\t\t\tdelete vars[type];\n\t\t\t} else {\n\t\t\t\tvars[type] = callback;\n\t\t\t\tparams && (vars[type + \"Params\"] = params);\n\t\t\t\ttype === \"onUpdate\" && (this._onUpdate = callback);\n\t\t\t}\n\t\t\treturn this;\n\t\t}\n\t\treturn vars[type];\n\t}\n\n\tthen(onFulfilled) {\n\t\tlet self = this;\n\t\treturn new Promise(resolve => {\n\t\t\tlet f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,\n\t\t\t\t_resolve = () => {\n\t\t\t\t\tlet _then = self.then;\n\t\t\t\t\tself.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)\n\t\t\t\t\t_isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);\n\t\t\t\t\tresolve(f);\n\t\t\t\t\tself.then = _then;\n\t\t\t\t};\n\t\t\tif (self._initted && (self.totalProgress() === 1 && self._ts >= 0) || (!self._tTime && self._ts < 0)) {\n\t\t\t\t_resolve();\n\t\t\t} else {\n\t\t\t\tself._prom = _resolve;\n\t\t\t}\n\t\t});\n\t}\n\n\tkill() {\n\t\t_interrupt(this);\n\t}\n\n}\n\n_setDefaults(Animation.prototype, {_time:0, _start:0, _end:0, _tTime:0, _tDur:0, _dirty:0, _repeat:0, _yoyo:false, parent:null, _initted:false, _rDelay:0, _ts:1, _dp:0, ratio:0, _zTime:-_tinyNum, _prom:0, _ps:false, _rts:1});\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * -------------------------------------------------\n * TIMELINE\n * -------------------------------------------------\n */\n\nexport class Timeline extends Animation {\n\n\tconstructor(vars = {}, position) {\n\t\tsuper(vars);\n\t\tthis.labels = {};\n\t\tthis.smoothChildTiming = !!vars.smoothChildTiming;\n\t\tthis.autoRemoveChildren = !!vars.autoRemoveChildren;\n\t\tthis._sort = _isNotFalse(vars.sortChildren);\n\t\t_globalTimeline && _addToTimeline(vars.parent || _globalTimeline, this, position);\n\t\tvars.reversed && this.reverse();\n\t\tvars.paused && this.paused(true);\n\t\tvars.scrollTrigger && _scrollTrigger(this, vars.scrollTrigger);\n\t}\n\n\tto(targets, vars, position) {\n\t\t_createTweenType(0, arguments, this);\n\t\treturn this;\n\t}\n\n\tfrom(targets, vars, position) {\n\t\t_createTweenType(1, arguments, this);\n\t\treturn this;\n\t}\n\n\tfromTo(targets, fromVars, toVars, position) {\n\t\t_createTweenType(2, arguments, this);\n\t\treturn this;\n\t}\n\n\tset(targets, vars, position) {\n\t\tvars.duration = 0;\n\t\tvars.parent = this;\n\t\t_inheritDefaults(vars).repeatDelay || (vars.repeat = 0);\n\t\tvars.immediateRender = !!vars.immediateRender;\n\t\tnew Tween(targets, vars, _parsePosition(this, position), 1);\n\t\treturn this;\n\t}\n\n\tcall(callback, params, position) {\n\t\treturn _addToTimeline(this, Tween.delayedCall(0, callback, params), position);\n\t}\n\n\t//ONLY for backward compatibility! Maybe delete?\n\tstaggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n\t\tvars.duration = duration;\n\t\tvars.stagger = vars.stagger || stagger;\n\t\tvars.onComplete = onCompleteAll;\n\t\tvars.onCompleteParams = onCompleteAllParams;\n\t\tvars.parent = this;\n\t\tnew Tween(targets, vars, _parsePosition(this, position));\n\t\treturn this;\n\t}\n\n\tstaggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n\t\tvars.runBackwards = 1;\n\t\t_inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);\n\t\treturn this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);\n\t}\n\n\tstaggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {\n\t\ttoVars.startAt = fromVars;\n\t\t_inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);\n\t\treturn this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);\n\t}\n\n\trender(totalTime, suppressEvents, force) {\n\t\tlet prevTime = this._time,\n\t\t\ttDur = this._dirty ? this.totalDuration() : this._tDur,\n\t\t\tdur = this._dur,\n\t\t\ttTime = totalTime <= 0 ? 0 : _roundPrecise(totalTime), // if a paused timeline is resumed (or its _start is updated for another reason...which rounds it), that could result in the playhead shifting a **tiny** amount and a zero-duration child at that spot may get rendered at a different ratio, like its totalTime in render() may be 1e-17 instead of 0, for example.\n\t\t\tcrossingStart = (this._zTime < 0) !== (totalTime < 0) && (this._initted || !dur),\n\t\t\ttime, child, next, iteration, cycleDuration, prevPaused, pauseTween, timeScale, prevStart, prevIteration, yoyo, isYoyo;\n\t\tthis !== _globalTimeline && tTime > tDur && totalTime >= 0 && (tTime = tDur);\n\t\tif (tTime !== this._tTime || force || crossingStart) {\n\t\t\tif (prevTime !== this._time && dur) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).\n\t\t\t\ttTime += this._time - prevTime;\n\t\t\t\ttotalTime += this._time - prevTime;\n\t\t\t}\n\t\t\ttime = tTime;\n\t\t\tprevStart = this._start;\n\t\t\ttimeScale = this._ts;\n\t\t\tprevPaused = !timeScale;\n\t\t\tif (crossingStart) {\n\t\t\t\tdur || (prevTime = this._zTime);\n\t\t\t\t //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\t\t\t\t(totalTime || !suppressEvents) && (this._zTime = totalTime);\n\t\t\t}\n\t\t\tif (this._repeat) { //adjust the time for repeats and yoyos\n\t\t\t\tyoyo = this._yoyo;\n\t\t\t\tcycleDuration = dur + this._rDelay;\n\t\t\t\tif (this._repeat < -1 && totalTime < 0) {\n\t\t\t\t\treturn this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n\t\t\t\t}\n\t\t\t\ttime = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\t\t\t\tif (tTime === tDur) { // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n\t\t\t\t\titeration = this._repeat;\n\t\t\t\t\ttime = dur;\n\t\t\t\t} else {\n\t\t\t\t\tprevIteration = _roundPrecise(tTime / cycleDuration); // full decimal version of iterations, not the previous iteration (we're reusing prevIteration variable for efficiency)\n\t\t\t\t\titeration = ~~prevIteration;\n\t\t\t\t\tif (iteration && iteration === prevIteration) {\n\t\t\t\t\t\ttime = dur;\n\t\t\t\t\t\titeration--;\n\t\t\t\t\t}\n\t\t\t\t\ttime > dur && (time = dur);\n\t\t\t\t}\n\t\t\t\tprevIteration = _animationCycle(this._tTime, cycleDuration);\n\t\t\t\t!prevTime && this._tTime && prevIteration !== iteration && this._tTime - prevIteration * cycleDuration - this._dur <= 0 && (prevIteration = iteration); // edge case - if someone does addPause() at the very beginning of a repeating timeline, that pause is technically at the same spot as the end which causes this._time to get set to 0 when the totalTime would normally place the playhead at the end. See https://gsap.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005 also, this._tTime - prevIteration * cycleDuration - this._dur <= 0 just checks to make sure it wasn't previously in the \"repeatDelay\" portion\n\t\t\t\tif (yoyo && (iteration & 1)) {\n\t\t\t\t\ttime = dur - time;\n\t\t\t\t\tisYoyo = 1;\n\t\t\t\t}\n\t\t\t\t/*\n\t\t\t\tmake sure children at the end/beginning of the timeline are rendered properly. If, for example,\n\t\t\t\ta 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which\n\t\t\t\twould get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there\n\t\t\t\tcould be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So\n\t\t\t\twe need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must\n\t\t\t\tensure that zero-duration tweens at the very beginning or end of the Timeline work.\n\t\t\t\t*/\n\t\t\t\tif (iteration !== prevIteration && !this._lock) {\n\t\t\t\t\tlet rewinding = (yoyo && (prevIteration & 1)),\n\t\t\t\t\t\tdoesWrap = (rewinding === (yoyo && (iteration & 1)));\n\t\t\t\t\titeration < prevIteration && (rewinding = !rewinding);\n\t\t\t\t\tprevTime = rewinding ? 0 : tTime % dur ? dur : tTime; // if the playhead is landing exactly at the end of an iteration, use that totalTime rather than only the duration, otherwise it'll skip the 2nd render since it's effectively at the same time.\n\t\t\t\t\tthis._lock = 1;\n\t\t\t\t\tthis.render(prevTime || (isYoyo ? 0 : _roundPrecise(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;\n\t\t\t\t\tthis._tTime = tTime; // if a user gets the iteration() inside the onRepeat, for example, it should be accurate.\n\t\t\t\t\t!suppressEvents && this.parent && _callback(this, \"onRepeat\");\n\t\t\t\t\tthis.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);\n\t\t\t\t\tif ((prevTime && prevTime !== this._time) || prevPaused !== !this._ts || (this.vars.onRepeat && !this.parent && !this._act)) { // if prevTime is 0 and we render at the very end, _time will be the end, thus won't match. So in this edge case, prevTime won't match _time but that's okay. If it gets killed in the onRepeat, eject as well.\n\t\t\t\t\t\treturn this;\n\t\t\t\t\t}\n\t\t\t\t\tdur = this._dur; // in case the duration changed in the onRepeat\n\t\t\t\t\ttDur = this._tDur;\n\t\t\t\t\tif (doesWrap) {\n\t\t\t\t\t\tthis._lock = 2;\n\t\t\t\t\t\tprevTime = rewinding ? dur : -0.0001;\n\t\t\t\t\t\tthis.render(prevTime, true);\n\t\t\t\t\t\tthis.vars.repeatRefresh && !isYoyo && this.invalidate();\n\t\t\t\t\t}\n\t\t\t\t\tthis._lock = 0;\n\t\t\t\t\tif (!this._ts && !prevPaused) {\n\t\t\t\t\t\treturn this;\n\t\t\t\t\t}\n\t\t\t\t\t//in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.\n\t\t\t\t\t_propagateYoyoEase(this, isYoyo);\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (this._hasPause && !this._forcing && this._lock < 2) {\n\t\t\t\tpauseTween = _findNextPauseTween(this, _roundPrecise(prevTime), _roundPrecise(time));\n\t\t\t\tif (pauseTween) {\n\t\t\t\t\ttTime -= time - (time = pauseTween._start);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis._tTime = tTime;\n\t\t\tthis._time = time;\n\t\t\tthis._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\n\t\t\tif (!this._initted) {\n\t\t\t\tthis._onUpdate = this.vars.onUpdate;\n\t\t\t\tthis._initted = 1;\n\t\t\t\tthis._zTime = totalTime;\n\t\t\t\tprevTime = 0; // upon init, the playhead should always go forward; someone could invalidate() a completed timeline and then if they restart(), that would make child tweens render in reverse order which could lock in the wrong starting values if they build on each other, like tl.to(obj, {x: 100}).to(obj, {x: 0}).\n\t\t\t}\n\t\t\tif (!prevTime && time && !suppressEvents && !iteration) {\n\t\t\t\t_callback(this, \"onStart\");\n\t\t\t\tif (this._tTime !== tTime) { // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (time >= prevTime && totalTime >= 0) {\n\t\t\t\tchild = this._first;\n\t\t\t\twhile (child) {\n\t\t\t\t\tnext = child._next;\n\t\t\t\t\tif ((child._act || time >= child._start) && child._ts && pauseTween !== child) {\n\t\t\t\t\t\tif (child.parent !== this) { // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n\t\t\t\t\t\t\treturn this.render(totalTime, suppressEvents, force);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchild.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);\n\t\t\t\t\t\tif (time !== this._time || (!this._ts && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n\t\t\t\t\t\t\tpauseTween = 0;\n\t\t\t\t\t\t\tnext && (tTime += (this._zTime = -_tinyNum)); // it didn't finish rendering, so flag zTime as negative so that the next time render() is called it'll be forced (to render any remaining children)\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tchild = next;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tchild = this._last;\n\t\t\t\tlet adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.\n\t\t\t\twhile (child) {\n\t\t\t\t\tnext = child._prev;\n\t\t\t\t\tif ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {\n\t\t\t\t\t\tif (child.parent !== this) { // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n\t\t\t\t\t\t\treturn this.render(totalTime, suppressEvents, force);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchild.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force || (_reverting && (child._initted || child._startAt))); // if reverting, we should always force renders of initted tweens (but remember that .fromTo() or .from() may have a _startAt but not _initted yet). If, for example, a .fromTo() tween with a stagger (which creates an internal timeline) gets reverted BEFORE some of its child tweens render for the first time, it may not properly trigger them to revert.\n\t\t\t\t\t\tif (time !== this._time || (!this._ts && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n\t\t\t\t\t\t\tpauseTween = 0;\n\t\t\t\t\t\t\tnext && (tTime += (this._zTime = adjustedTime ? -_tinyNum : _tinyNum)); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tchild = next;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (pauseTween && !suppressEvents) {\n\t\t\t\tthis.pause();\n\t\t\t\tpauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;\n\t\t\t\tif (this._ts) { //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).\n\t\t\t\t\tthis._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.\n\t\t\t\t\t_setEnd(this);\n\t\t\t\t\treturn this.render(totalTime, suppressEvents, force);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis._onUpdate && !suppressEvents && _callback(this, \"onUpdate\", true);\n\t\t\tif ((tTime === tDur && this._tTime >= this.totalDuration()) || (!tTime && prevTime)) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) { // remember, a child's callback may alter this timeline's playhead or timeScale which is why we need to add some of these checks.\n\t\t\t\t(totalTime || !dur) && ((tTime === tDur && this._ts > 0) || (!tTime && this._ts < 0)) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\t\t\t\tif (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime || !tDur)) {\n\t\t\t\t\t_callback(this, (tTime === tDur && totalTime >= 0 ? \"onComplete\" : \"onReverseComplete\"), true);\n\t\t\t\t\tthis._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tadd(child, position) {\n\t\t_isNumber(position) || (position = _parsePosition(this, position, child));\n\t\tif (!(child instanceof Animation)) {\n\t\t\tif (_isArray(child)) {\n\t\t\t\tchild.forEach(obj => this.add(obj, position));\n\t\t\t\treturn this;\n\t\t\t}\n\t\t\tif (_isString(child)) {\n\t\t\t\treturn this.addLabel(child, position);\n\t\t\t}\n\t\t\tif (_isFunction(child)) {\n\t\t\t\tchild = Tween.delayedCall(0, child);\n\t\t\t} else {\n\t\t\t\treturn this;\n\t\t\t}\n\t\t}\n\t\treturn this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!\n\t}\n\n\tgetChildren(nested = true, tweens = true, timelines = true, ignoreBeforeTime = -_bigNum) {\n\t\tlet a = [],\n\t\t\tchild = this._first;\n\t\twhile (child) {\n\t\t\tif (child._start >= ignoreBeforeTime) {\n\t\t\t\tif (child instanceof Tween) {\n\t\t\t\t\ttweens && a.push(child);\n\t\t\t\t} else {\n\t\t\t\t\ttimelines && a.push(child);\n\t\t\t\t\tnested && a.push(...child.getChildren(true, tweens, timelines));\n\t\t\t\t}\n\t\t\t}\n\t\t\tchild = child._next;\n\t\t}\n\t\treturn a;\n\t}\n\n\tgetById(id) {\n\t\tlet animations = this.getChildren(1, 1, 1),\n\t\t\ti = animations.length;\n\t\twhile(i--) {\n\t\t\tif (animations[i].vars.id === id) {\n\t\t\t\treturn animations[i];\n\t\t\t}\n\t\t}\n\t}\n\n\tremove(child) {\n\t\tif (_isString(child)) {\n\t\t\treturn this.removeLabel(child);\n\t\t}\n\t\tif (_isFunction(child)) {\n\t\t\treturn this.killTweensOf(child);\n\t\t}\n\t\tchild.parent === this && _removeLinkedListItem(this, child);\n\t\tif (child === this._recent) {\n\t\t\tthis._recent = this._last;\n\t\t}\n\t\treturn _uncache(this);\n\t}\n\n\ttotalTime(totalTime, suppressEvents) {\n\t\tif (!arguments.length) {\n\t\t\treturn this._tTime;\n\t\t}\n\t\tthis._forcing = 1;\n\t\tif (!this._dp && this._ts) { //special case for the global timeline (or any other that has no parent or detached parent).\n\t\t\tthis._start = _roundPrecise(_ticker.time - (this._ts > 0 ? totalTime / this._ts : (this.totalDuration() - totalTime) / -this._ts));\n\t\t}\n\t\tsuper.totalTime(totalTime, suppressEvents);\n\t\tthis._forcing = 0;\n\t\treturn this;\n\t}\n\n\taddLabel(label, position) {\n\t\tthis.labels[label] = _parsePosition(this, position);\n\t\treturn this;\n\t}\n\n\tremoveLabel(label) {\n\t\tdelete this.labels[label];\n\t\treturn this;\n\t}\n\n\taddPause(position, callback, params) {\n\t\tlet t = Tween.delayedCall(0, callback || _emptyFunc, params);\n\t\tt.data = \"isPause\";\n\t\tthis._hasPause = 1;\n\t\treturn _addToTimeline(this, t, _parsePosition(this, position));\n\t}\n\n\tremovePause(position) {\n\t\tlet child = this._first;\n\t\tposition = _parsePosition(this, position);\n\t\twhile (child) {\n\t\t\tif (child._start === position && child.data === \"isPause\") {\n\t\t\t\t_removeFromParent(child);\n\t\t\t}\n\t\t\tchild = child._next;\n\t\t}\n\t}\n\n\tkillTweensOf(targets, props, onlyActive) {\n\t\tlet tweens = this.getTweensOf(targets, onlyActive),\n\t\t\ti = tweens.length;\n\t\twhile (i--) {\n\t\t\t(_overwritingTween !== tweens[i]) && tweens[i].kill(targets, props);\n\t\t}\n\t\treturn this;\n\t}\n\n\tgetTweensOf(targets, onlyActive) {\n\t\tlet a = [],\n\t\t\tparsedTargets = toArray(targets),\n\t\t\tchild = this._first,\n\t\t\tisGlobalTime = _isNumber(onlyActive), // a number is interpreted as a global time. If the animation spans\n\t\t\tchildren;\n\t\twhile (child) {\n\t\t\tif (child instanceof Tween) {\n\t\t\t\tif (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || (child._initted && child._ts)) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) { // note: if this is for overwriting, it should only be for tweens that aren't paused and are initted.\n\t\t\t\t\ta.push(child);\n\t\t\t\t}\n\t\t\t} else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {\n\t\t\t\ta.push(...children);\n\t\t\t}\n\t\t\tchild = child._next;\n\t\t}\n\t\treturn a;\n\t}\n\n\t// potential future feature - targets() on timelines\n\t// targets() {\n\t// \tlet result = [];\n\t// \tthis.getChildren(true, true, false).forEach(t => result.push(...t.targets()));\n\t// \treturn result.filter((v, i) => result.indexOf(v) === i);\n\t// }\n\n\ttweenTo(position, vars) {\n\t\tvars = vars || {};\n\t\tlet tl = this,\n\t\t\tendTime = _parsePosition(tl, position),\n\t\t\t{ startAt, onStart, onStartParams, immediateRender } = vars,\n\t\t\tinitted,\n\t\t\ttween = Tween.to(tl, _setDefaults({\n\t\t\t\tease: vars.ease || \"none\",\n\t\t\t\tlazy: false,\n\t\t\t\timmediateRender: false,\n\t\t\t\ttime: endTime,\n\t\t\t\toverwrite: \"auto\",\n\t\t\t\tduration: vars.duration || (Math.abs((endTime - ((startAt && \"time\" in startAt) ? startAt.time : tl._time)) / tl.timeScale())) || _tinyNum,\n\t\t\t\tonStart: () => {\n\t\t\t\t\ttl.pause();\n\t\t\t\t\tif (!initted) {\n\t\t\t\t\t\tlet duration = vars.duration || Math.abs((endTime - ((startAt && \"time\" in startAt) ? startAt.time : tl._time)) / tl.timeScale());\n\t\t\t\t\t\t(tween._dur !== duration) && _setDuration(tween, duration, 0, 1).render(tween._time, true, true);\n\t\t\t\t\t\tinitted = 1;\n\t\t\t\t\t}\n\t\t\t\t\tonStart && onStart.apply(tween, onStartParams || []); //in case the user had an onStart in the vars - we don't want to overwrite it.\n\t\t\t\t}\n\t\t\t}, vars));\n\t\treturn immediateRender ? tween.render(0) : tween;\n\t}\n\n\ttweenFromTo(fromPosition, toPosition, vars) {\n\t\treturn this.tweenTo(toPosition, _setDefaults({startAt:{time:_parsePosition(this, fromPosition)}}, vars));\n\t}\n\n\trecent() {\n\t\treturn this._recent;\n\t}\n\n\tnextLabel(afterTime = this._time) {\n\t\treturn _getLabelInDirection(this, _parsePosition(this, afterTime));\n\t}\n\n\tpreviousLabel(beforeTime = this._time) {\n\t\treturn _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);\n\t}\n\n\tcurrentLabel(value) {\n\t\treturn arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);\n\t}\n\n\tshiftChildren(amount, adjustLabels, ignoreBeforeTime = 0) {\n\t\tlet child = this._first,\n\t\t\tlabels = this.labels,\n\t\t\tp;\n\t\twhile (child) {\n\t\t\tif (child._start >= ignoreBeforeTime) {\n\t\t\t\tchild._start += amount;\n\t\t\t\tchild._end += amount;\n\t\t\t}\n\t\t\tchild = child._next;\n\t\t}\n\t\tif (adjustLabels) {\n\t\t\tfor (p in labels) {\n\t\t\t\tif (labels[p] >= ignoreBeforeTime) {\n\t\t\t\t\tlabels[p] += amount;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn _uncache(this);\n\t}\n\n\tinvalidate(soft) {\n\t\tlet child = this._first;\n\t\tthis._lock = 0;\n\t\twhile (child) {\n\t\t\tchild.invalidate(soft);\n\t\t\tchild = child._next;\n\t\t}\n\t\treturn super.invalidate(soft);\n\t}\n\n\tclear(includeLabels = true) {\n\t\tlet child = this._first,\n\t\t\tnext;\n\t\twhile (child) {\n\t\t\tnext = child._next;\n\t\t\tthis.remove(child);\n\t\t\tchild = next;\n\t\t}\n\t\tthis._dp && (this._time = this._tTime = this._pTime = 0);\n\t\tincludeLabels && (this.labels = {});\n\t\treturn _uncache(this);\n\t}\n\n\ttotalDuration(value) {\n\t\tlet max = 0,\n\t\t\tself = this,\n\t\t\tchild = self._last,\n\t\t\tprevStart = _bigNum,\n\t\t\tprev, start, parent;\n\t\tif (arguments.length) {\n\t\t\treturn self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));\n\t\t}\n\t\tif (self._dirty) {\n\t\t\tparent = self.parent;\n\t\t\twhile (child) {\n\t\t\t\tprev = child._prev; //record it here in case the tween changes position in the sequence...\n\t\t\t\tchild._dirty && child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.\n\t\t\t\tstart = child._start;\n\t\t\t\tif (start > prevStart && self._sort && child._ts && !self._lock) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence\n\t\t\t\t\tself._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().\n\t\t\t\t\t_addToTimeline(self, child, start - child._delay, 1)._lock = 0;\n\t\t\t\t} else {\n\t\t\t\t\tprevStart = start;\n\t\t\t\t}\n\t\t\t\tif (start < 0 && child._ts) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.\n\t\t\t\t\tmax -= start;\n\t\t\t\t\tif ((!parent && !self._dp) || (parent && parent.smoothChildTiming)) {\n\t\t\t\t\t\tself._start += start / self._ts;\n\t\t\t\t\t\tself._time -= start;\n\t\t\t\t\t\tself._tTime -= start;\n\t\t\t\t\t}\n\t\t\t\t\tself.shiftChildren(-start, false, -1e999);\n\t\t\t\t\tprevStart = 0;\n\t\t\t\t}\n\t\t\t\tchild._end > max && child._ts && (max = child._end);\n\t\t\t\tchild = prev;\n\t\t\t}\n\t\t\t_setDuration(self, (self === _globalTimeline && self._time > max) ? self._time : max, 1, 1);\n\t\t\tself._dirty = 0;\n\t\t}\n\t\treturn self._tDur;\n\t}\n\n\tstatic updateRoot(time) {\n\t\tif (_globalTimeline._ts) {\n\t\t\t_lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));\n\t\t\t_lastRenderedFrame = _ticker.frame;\n\t\t}\n\t\tif (_ticker.frame >= _nextGCFrame) {\n\t\t\t_nextGCFrame += _config.autoSleep || 120;\n\t\t\tlet child = _globalTimeline._first;\n\t\t\tif (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {\n\t\t\t\twhile (child && !child._ts) {\n\t\t\t\t\tchild = child._next;\n\t\t\t\t}\n\t\t\t\tchild || _ticker.sleep();\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n_setDefaults(Timeline.prototype, {_lock:0, _hasPause:0, _forcing:0});\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nlet _addComplexStringPropTween = function(target, prop, start, end, setter, stringFilter, funcParam) { //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n\t\tlet pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),\n\t\t\tindex = 0,\n\t\t\tmatchIndex = 0,\n\t\t\tresult,\tstartNums, color, endNum, chunk, startNum, hasRandom, a;\n\t\tpt.b = start;\n\t\tpt.e = end;\n\t\tstart += \"\"; //ensure values are strings\n\t\tend += \"\";\n\t\tif ((hasRandom = ~end.indexOf(\"random(\"))) {\n\t\t\tend = _replaceRandom(end);\n\t\t}\n\t\tif (stringFilter) {\n\t\t\ta = [start, end];\n\t\t\tstringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.\n\t\t\tstart = a[0];\n\t\t\tend = a[1];\n\t\t}\n\t\tstartNums = start.match(_complexStringNumExp) || [];\n\t\twhile ((result = _complexStringNumExp.exec(end))) {\n\t\t\tendNum = result[0];\n\t\t\tchunk = end.substring(index, result.index);\n\t\t\tif (color) {\n\t\t\t\tcolor = (color + 1) % 5;\n\t\t\t} else if (chunk.substr(-5) === \"rgba(\") {\n\t\t\t\tcolor = 1;\n\t\t\t}\n\t\t\tif (endNum !== startNums[matchIndex++]) {\n\t\t\t\tstartNum = parseFloat(startNums[matchIndex-1]) || 0;\n\t\t\t\t//these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\t\t\t\tpt._pt = {\n\t\t\t\t\t_next: pt._pt,\n\t\t\t\t\tp: (chunk || matchIndex === 1) ? chunk : \",\", //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n\t\t\t\t\ts: startNum,\n\t\t\t\t\tc: endNum.charAt(1) === \"=\" ? _parseRelative(startNum, endNum) - startNum : parseFloat(endNum) - startNum,\n\t\t\t\t\tm: (color && color < 4) ? Math.round : 0\n\t\t\t\t};\n\t\t\t\tindex = _complexStringNumExp.lastIndex;\n\t\t\t}\n\t\t}\n\t\tpt.c = (index < end.length) ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n\t\tpt.fp = funcParam;\n\t\tif (_relExp.test(end) || hasRandom) {\n\t\t\tpt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n\t\t}\n\t\tthis._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n\t\treturn pt;\n\t},\n\t_addPropTween = function(target, prop, start, end, index, targets, modifier, stringFilter, funcParam, optional) {\n\t\t_isFunction(end) && (end = end(index || 0, target, targets));\n\t\tlet currentValue = target[prop],\n\t\t\tparsedStart = (start !== \"get\") ? start : !_isFunction(currentValue) ? currentValue : (funcParam ? target[(prop.indexOf(\"set\") || !_isFunction(target[\"get\" + prop.substr(3)])) ? prop : \"get\" + prop.substr(3)](funcParam) : target[prop]()),\n\t\t\tsetter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,\n\t\t\tpt;\n\t\tif (_isString(end)) {\n\t\t\tif (~end.indexOf(\"random(\")) {\n\t\t\t\tend = _replaceRandom(end);\n\t\t\t}\n\t\t\tif (end.charAt(1) === \"=\") {\n\t\t\t\tpt = _parseRelative(parsedStart, end) + (getUnit(parsedStart) || 0);\n\t\t\t\tif (pt || pt === 0) { // to avoid isNaN, like if someone passes in a value like \"!= whatever\"\n\t\t\t\t\tend = pt;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (!optional || parsedStart !== end || _forceAllPropTweens) {\n\t\t\tif (!isNaN(parsedStart * end) && end !== \"\") { // fun fact: any number multiplied by \"\" is evaluated as the number 0!\n\t\t\t\tpt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof(currentValue) === \"boolean\" ? _renderBoolean : _renderPlain, 0, setter);\n\t\t\t\tfuncParam && (pt.fp = funcParam);\n\t\t\t\tmodifier && pt.modifier(modifier, this, target);\n\t\t\t\treturn (this._pt = pt);\n\t\t\t}\n\t\t\t!currentValue && !(prop in target) && _missingPlugin(prop, end);\n\t\t\treturn _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);\n\t\t}\n\t},\n\t//creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with \"random()\" in them. It does NOT process relative values.\n\t_processVars = (vars, index, target, targets, tween) => {\n\t\t_isFunction(vars) && (vars = _parseFuncOrString(vars, tween, index, target, targets));\n\t\tif (!_isObject(vars) || (vars.style && vars.nodeType) || _isArray(vars) || _isTypedArray(vars)) {\n\t\t\treturn _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;\n\t\t}\n\t\tlet copy = {},\n\t\t\tp;\n\t\tfor (p in vars) {\n\t\t\tcopy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);\n\t\t}\n\t\treturn copy;\n\t},\n\t_checkPlugin = (property, vars, tween, index, target, targets) => {\n\t\tlet plugin, pt, ptLookup, i;\n\t\tif (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {\n\t\t\ttween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\t\t\tif (tween !== _quickTween) {\n\t\t\t\tptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.\n\t\t\t\ti = plugin._props.length;\n\t\t\t\twhile (i--) {\n\t\t\t\t\tptLookup[plugin._props[i]] = pt;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn plugin;\n\t},\n\t_overwritingTween, //store a reference temporarily so we can avoid overwriting itself.\n\t_forceAllPropTweens,\n\t_initTween = (tween, time, tTime) => {\n\t\tlet vars = tween.vars,\n\t\t\t{ ease, startAt, immediateRender, lazy, onUpdate, runBackwards, yoyoEase, keyframes, autoRevert } = vars,\n\t\t\tdur = tween._dur,\n\t\t\tprevStartAt = tween._startAt,\n\t\t\ttargets = tween._targets,\n\t\t\tparent = tween.parent,\n\t\t\t//when a stagger (or function-based duration/delay) is on a Tween instance, we create a nested timeline which means that the \"targets\" of that tween don't reflect the parent. This function allows us to discern when it's a nested tween and in that case, return the full targets array so that function-based values get calculated properly. Also remember that if the tween has a stagger AND keyframes, it could be multiple levels deep which is why we store the targets Array in the vars of the timeline.\n\t\t\tfullTargets = (parent && parent.data === \"nested\") ? parent.vars.targets : targets,\n\t\t\tautoOverwrite = (tween._overwrite === \"auto\") && !_suppressOverwrites,\n\t\t\ttl = tween.timeline,\n\t\t\tcleanVars, i, p, pt, target, hasPriority, gsData, harness, plugin, ptLookup, index, harnessVars, overwritten;\n\t\ttl && (!keyframes || !ease) && (ease = \"none\");\n\t\ttween._ease = _parseEase(ease, _defaults.ease);\n\t\ttween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;\n\t\tif (yoyoEase && tween._yoyo && !tween._repeat) { //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.\n\t\t\tyoyoEase = tween._yEase;\n\t\t\ttween._yEase = tween._ease;\n\t\t\ttween._ease = yoyoEase;\n\t\t}\n\t\ttween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.\n\t\tif (!tl || (keyframes && !vars.stagger)) { //if there's an internal timeline, skip all the parsing because we passed that task down the chain.\n\t\t\tharness = targets[0] ? _getCache(targets[0]).harness : 0;\n\t\t\tharnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an \"x\" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.\n\t\t\tcleanVars = _copyExcluding(vars, _reservedProps);\n\t\t\tif (prevStartAt) {\n\t\t\t\tprevStartAt._zTime < 0 && prevStartAt.progress(1); // in case it's a lazy startAt that hasn't rendered yet.\n\t\t\t\t(time < 0 && runBackwards && immediateRender && !autoRevert) ? prevStartAt.render(-1, true) : prevStartAt.revert(runBackwards && dur ? _revertConfigNoKill : _startAtRevertConfig); // if it's a \"startAt\" (not \"from()\" or runBackwards: true), we only need to do a shallow revert (keep transforms cached in CSSPlugin)\n\t\t\t\t// don't just _removeFromParent(prevStartAt.render(-1, true)) because that'll leave inline styles. We're creating a new _startAt for \"startAt\" tweens that re-capture things to ensure that if the pre-tween values changed since the tween was created, they're recorded.\n\t\t\t\tprevStartAt._lazy = 0;\n\t\t\t}\n\t\t\tif (startAt) {\n\t\t\t\t_removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({data: \"isStart\", overwrite: false, parent: parent, immediateRender: true, lazy: !prevStartAt && _isNotFalse(lazy), startAt: null, delay: 0, onUpdate: onUpdate && (() => _callback(tween, \"onUpdate\")), stagger: 0}, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);\n\t\t\t\ttween._startAt._dp = 0; // don't allow it to get put back into root timeline! Like when revert() is called and totalTime() gets set.\n\t\t\t\ttween._startAt._sat = tween; // used in globalTime(). _sat stands for _startAtTween\n\t\t\t\t(time < 0 && (_reverting || (!immediateRender && !autoRevert))) && tween._startAt.revert(_revertConfigNoKill); // rare edge case, like if a render is forced in the negative direction of a non-initted tween.\n\t\t\t\tif (immediateRender) {\n\t\t\t\t\tif (dur && time <= 0 && tTime <= 0) { // check tTime here because in the case of a yoyo tween whose playhead gets pushed to the end like tween.progress(1), we should allow it through so that the onComplete gets fired properly.\n\t\t\t\t\t\ttime && (tween._zTime = time);\n\t\t\t\t\t\treturn; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (runBackwards && dur) {\n\t\t\t\t//from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)\n\t\t\t\tif (!prevStartAt) {\n\t\t\t\t\ttime && (immediateRender = false); //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0\n\t\t\t\t\tp = _setDefaults({\n\t\t\t\t\t\toverwrite: false,\n\t\t\t\t\t\tdata: \"isFromStart\", //we tag the tween with as \"isFromStart\" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a \"from()\" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:\"height\", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.\n\t\t\t\t\t\tlazy: immediateRender && !prevStartAt && _isNotFalse(lazy),\n\t\t\t\t\t\timmediateRender: immediateRender, //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)\n\t\t\t\t\t\tstagger: 0,\n\t\t\t\t\t\tparent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(\".class\", {y: gsap.utils.wrap([-100,100]), stagger: 0.5})\n\t\t\t\t\t}, cleanVars);\n\t\t\t\t\tharnessVars && (p[harness.prop] = harnessVars); // in case someone does something like .from(..., {css:{}})\n\t\t\t\t\t_removeFromParent(tween._startAt = Tween.set(targets, p));\n\t\t\t\t\ttween._startAt._dp = 0; // don't allow it to get put back into root timeline!\n\t\t\t\t\ttween._startAt._sat = tween; // used in globalTime()\n\t\t\t\t\t(time < 0) && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : tween._startAt.render(-1, true));\n\t\t\t\t\ttween._zTime = time;\n\t\t\t\t\tif (!immediateRender) {\n\t\t\t\t\t\t_initTween(tween._startAt, _tinyNum, _tinyNum); //ensures that the initial values are recorded\n\t\t\t\t\t} else if (!time) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\ttween._pt = tween._ptCache = 0;\n\t\t\tlazy = (dur && _isNotFalse(lazy)) || (lazy && !dur);\n\t\t\tfor (i = 0; i < targets.length; i++) {\n\t\t\t\ttarget = targets[i];\n\t\t\t\tgsData = target._gsap || _harness(targets)[i]._gsap;\n\t\t\t\ttween._ptLookup[i] = ptLookup = {};\n\t\t\t\t_lazyLookup[gsData.id] && _lazyTweens.length && _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)\n\t\t\t\tindex = fullTargets === targets ? i : fullTargets.indexOf(target);\n\t\t\t\tif (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {\n\t\t\t\t\ttween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\t\t\t\t\tplugin._props.forEach(name => {ptLookup[name] = pt;});\n\t\t\t\t\tplugin.priority && (hasPriority = 1);\n\t\t\t\t}\n\t\t\t\tif (!harness || harnessVars) {\n\t\t\t\t\tfor (p in cleanVars) {\n\t\t\t\t\t\tif (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {\n\t\t\t\t\t\t\tplugin.priority && (hasPriority = 1);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tptLookup[p] = pt = _addPropTween.call(tween, target, p, \"get\", cleanVars[p], index, fullTargets, 0, vars.stringFilter);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttween._op && tween._op[i] && tween.kill(target, tween._op[i]);\n\t\t\t\tif (autoOverwrite && tween._pt) {\n\t\t\t\t\t_overwritingTween = tween;\n\t\t\t\t\t_globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(time)); // make sure the overwriting doesn't overwrite THIS tween!!!\n\t\t\t\t\toverwritten = !tween.parent;\n\t\t\t\t\t_overwritingTween = 0;\n\t\t\t\t}\n\t\t\t\ttween._pt && lazy && (_lazyLookup[gsData.id] = 1);\n\t\t\t}\n\t\t\thasPriority && _sortPropTweensByPriority(tween);\n\t\t\ttween._onInit && tween._onInit(tween); //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.\n\t\t}\n\t\ttween._onUpdate = onUpdate;\n\t\ttween._initted = (!tween._op || tween._pt) && !overwritten; // if overwrittenProps resulted in the entire tween being killed, do NOT flag it as initted or else it may render for one tick.\n\t\t(keyframes && time <= 0) && tl.render(_bigNum, true, true); // if there's a 0% keyframe, it'll render in the \"before\" state for any staggered/delayed animations thus when the following tween initializes, it'll use the \"before\" state instead of the \"after\" state as the initial values.\n\t},\n\t_updatePropTweens = (tween, property, value, start, startIsRelative, ratio, time, skipRecursion) => {\n\t\tlet ptCache = ((tween._pt && tween._ptCache) || (tween._ptCache = {}))[property],\n\t\t\tpt, rootPT, lookup, i;\n\t\tif (!ptCache) {\n\t\t\tptCache = tween._ptCache[property] = [];\n\t\t\tlookup = tween._ptLookup;\n\t\t\ti = tween._targets.length;\n\t\t\twhile (i--) {\n\t\t\t\tpt = lookup[i][property];\n\t\t\t\tif (pt && pt.d && pt.d._pt) { // it's a plugin, so find the nested PropTween\n\t\t\t\t\tpt = pt.d._pt;\n\t\t\t\t\twhile (pt && pt.p !== property && pt.fp !== property) { // \"fp\" is functionParam for things like setting CSS variables which require .setProperty(\"--var-name\", value)\n\t\t\t\t\t\tpt = pt._next;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!pt) { // there is no PropTween associated with that property, so we must FORCE one to be created and ditch out of this\n\t\t\t\t\t// if the tween has other properties that already rendered at new positions, we'd normally have to rewind to put them back like tween.render(0, true) before forcing an _initTween(), but that can create another edge case like tweening a timeline's progress would trigger onUpdates to fire which could move other things around. It's better to just inform users that .resetTo() should ONLY be used for tweens that already have that property. For example, you can't gsap.to(...{ y: 0 }) and then tween.restTo(\"x\", 200) for example.\n\t\t\t\t\t_forceAllPropTweens = 1; // otherwise, when we _addPropTween() and it finds no change between the start and end values, it skips creating a PropTween (for efficiency...why tween when there's no difference?) but in this case we NEED that PropTween created so we can edit it.\n\t\t\t\t\ttween.vars[property] = \"+=0\";\n\t\t\t\t\t_initTween(tween, time);\n\t\t\t\t\t_forceAllPropTweens = 0;\n\t\t\t\t\treturn skipRecursion ? _warn(property + \" not eligible for reset\") : 1; // if someone tries to do a quickTo() on a special property like borderRadius which must get split into 4 different properties, that's not eligible for .resetTo().\n\t\t\t\t}\n\t\t\t\tptCache.push(pt);\n\t\t\t}\n\t\t}\n\t\ti = ptCache.length;\n\t\twhile (i--) {\n\t\t\trootPT = ptCache[i];\n\t\t\tpt = rootPT._pt || rootPT; // complex values may have nested PropTweens. We only accommodate the FIRST value.\n\t\t\tpt.s = (start || start === 0) && !startIsRelative ? start : pt.s + (start || 0) + ratio * pt.c;\n\t\t\tpt.c = value - pt.s;\n\t\t\trootPT.e && (rootPT.e = _round(value) + getUnit(rootPT.e)); // mainly for CSSPlugin (end value)\n\t\t\trootPT.b && (rootPT.b = pt.s + getUnit(rootPT.b)); // (beginning value)\n\t\t}\n\t},\n\t_addAliasesToVars = (targets, vars) => {\n\t\tlet harness = targets[0] ? _getCache(targets[0]).harness : 0,\n\t\t\tpropertyAliases = (harness && harness.aliases),\n\t\t\tcopy, p, i, aliases;\n\t\tif (!propertyAliases) {\n\t\t\treturn vars;\n\t\t}\n\t\tcopy = _merge({}, vars);\n\t\tfor (p in propertyAliases) {\n\t\t\tif (p in copy) {\n\t\t\t\taliases = propertyAliases[p].split(\",\");\n\t\t\t\ti = aliases.length;\n\t\t\t\twhile(i--) {\n\t\t\t\t\tcopy[aliases[i]] = copy[p];\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t\treturn copy;\n\t},\n\t// parses multiple formats, like {\"0%\": {x: 100}, {\"50%\": {x: -20}} and { x: {\"0%\": 100, \"50%\": -20} }, and an \"ease\" can be set on any object. We populate an \"allProps\" object with an Array for each property, like {x: [{}, {}], y:[{}, {}]} with data for each property tween. The objects have a \"t\" (time), \"v\", (value), and \"e\" (ease) property. This allows us to piece together a timeline later.\n\t_parseKeyframe = (prop, obj, allProps, easeEach) => {\n\t\tlet ease = obj.ease || easeEach || \"power1.inOut\",\n\t\t\tp, a;\n\t\tif (_isArray(obj)) {\n\t\t\ta = allProps[prop] || (allProps[prop] = []);\n\t\t\t// t = time (out of 100), v = value, e = ease\n\t\t\tobj.forEach((value, i) => a.push({t: i / (obj.length - 1) * 100, v: value, e: ease}));\n\t\t} else {\n\t\t\tfor (p in obj) {\n\t\t\t\ta = allProps[p] || (allProps[p] = []);\n\t\t\t\tp === \"ease\" || a.push({t: parseFloat(prop), v: obj[p], e: ease});\n\t\t\t}\n\t\t}\n\t},\n\t_parseFuncOrString = (value, tween, i, target, targets) => (_isFunction(value) ? value.call(tween, i, target, targets) : (_isString(value) && ~value.indexOf(\"random(\")) ? _replaceRandom(value) : value),\n\t_staggerTweenProps = _callbackNames + \"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",\n\t_staggerPropsToSkip = {};\n_forEachName(_staggerTweenProps + \",id,stagger,delay,duration,paused,scrollTrigger\", name => _staggerPropsToSkip[name] = 1);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * TWEEN\n * --------------------------------------------------------------------------------------\n */\n\nexport class Tween extends Animation {\n\n\tconstructor(targets, vars, position, skipInherit) {\n\t\tif (typeof(vars) === \"number\") {\n\t\t\tposition.duration = vars;\n\t\t\tvars = position;\n\t\t\tposition = null;\n\t\t}\n\t\tsuper(skipInherit ? vars : _inheritDefaults(vars));\n\t\tlet { duration, delay, immediateRender, stagger, overwrite, keyframes, defaults, scrollTrigger, yoyoEase } = this.vars,\n\t\t\tparent = vars.parent || _globalTimeline,\n\t\t\tparsedTargets = (_isArray(targets) || _isTypedArray(targets) ? _isNumber(targets[0]) : (\"length\" in vars)) ? [targets] : toArray(targets), // edge case: someone might try animating the \"length\" of an object with a \"length\" property that's initially set to 0 so don't interpret that as an empty Array-like object.\n\t\t\ttl, i, copy, l, p, curTarget, staggerFunc, staggerVarsToMerge;\n\t\tthis._targets = parsedTargets.length ? _harness(parsedTargets) : _warn(\"GSAP target \" + targets + \" not found. https://gsap.com\", !_config.nullTargetWarn) || [];\n\t\tthis._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property\n\t\tthis._overwrite = overwrite;\n\t\tif (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {\n\t\t\tvars = this.vars;\n\t\t\ttl = this.timeline = new Timeline({data: \"nested\", defaults: defaults || {}, targets: parent && parent.data === \"nested\" ? parent.vars.targets : parsedTargets}); // we need to store the targets because for staggers and keyframes, we end up creating an individual tween for each but function-based values need to know the index and the whole Array of targets.\n\t\t\ttl.kill();\n\t\t\ttl.parent = tl._dp = this;\n\t\t\ttl._start = 0;\n\t\t\tif (stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {\n\t\t\t\tl = parsedTargets.length;\n\t\t\t\tstaggerFunc = stagger && distribute(stagger);\n\t\t\t\tif (_isObject(stagger)) { //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.\n\t\t\t\t\tfor (p in stagger) {\n\t\t\t\t\t\tif (~_staggerTweenProps.indexOf(p)) {\n\t\t\t\t\t\t\tstaggerVarsToMerge || (staggerVarsToMerge = {});\n\t\t\t\t\t\t\tstaggerVarsToMerge[p] = stagger[p];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tfor (i = 0; i < l; i++) {\n\t\t\t\t\tcopy = _copyExcluding(vars, _staggerPropsToSkip);\n\t\t\t\t\tcopy.stagger = 0;\n\t\t\t\t\tyoyoEase && (copy.yoyoEase = yoyoEase);\n\t\t\t\t\tstaggerVarsToMerge && _merge(copy, staggerVarsToMerge);\n\t\t\t\t\tcurTarget = parsedTargets[i];\n\t\t\t\t\t//don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.\n\t\t\t\t\tcopy.duration = +_parseFuncOrString(duration, this, i, curTarget, parsedTargets);\n\t\t\t\t\tcopy.delay = (+_parseFuncOrString(delay, this, i, curTarget, parsedTargets) || 0) - this._delay;\n\t\t\t\t\tif (!stagger && l === 1 && copy.delay) { // if someone does delay:\"random(1, 5)\", repeat:-1, for example, the delay shouldn't be inside the repeat.\n\t\t\t\t\t\tthis._delay = delay = copy.delay;\n\t\t\t\t\t\tthis._start += delay;\n\t\t\t\t\t\tcopy.delay = 0;\n\t\t\t\t\t}\n\t\t\t\t\ttl.to(curTarget, copy, staggerFunc ? staggerFunc(i, curTarget, parsedTargets) : 0);\n\t\t\t\t\ttl._ease = _easeMap.none;\n\t\t\t\t}\n\t\t\t\ttl.duration() ? (duration = delay = 0) : (this.timeline = 0); // if the timeline's duration is 0, we don't need a timeline internally!\n\t\t\t} else if (keyframes) {\n\t\t\t\t_inheritDefaults(_setDefaults(tl.vars.defaults, {ease:\"none\"}));\n\t\t\t\ttl._ease = _parseEase(keyframes.ease || vars.ease || \"none\");\n\t\t\t\tlet time = 0,\n\t\t\t\t\ta, kf, v;\n\t\t\t\tif (_isArray(keyframes)) {\n\t\t\t\t\tkeyframes.forEach(frame => tl.to(parsedTargets, frame, \">\"));\n\t\t\t\t\ttl.duration(); // to ensure tl._dur is cached because we tap into it for performance purposes in the render() method.\n\t\t\t\t} else {\n\t\t\t\t\tcopy = {};\n\t\t\t\t\tfor (p in keyframes) {\n\t\t\t\t\t\tp === \"ease\" || p === \"easeEach\" || _parseKeyframe(p, keyframes[p], copy, keyframes.easeEach);\n\t\t\t\t\t}\n\t\t\t\t\tfor (p in copy) {\n\t\t\t\t\t\ta = copy[p].sort((a, b) => a.t - b.t);\n\t\t\t\t\t\ttime = 0;\n\t\t\t\t\t\tfor (i = 0; i < a.length; i++) {\n\t\t\t\t\t\t\tkf = a[i];\n\t\t\t\t\t\t\tv = {ease: kf.e, duration: (kf.t - (i ? a[i - 1].t : 0)) / 100 * duration};\n\t\t\t\t\t\t\tv[p] = kf.v;\n\t\t\t\t\t\t\ttl.to(parsedTargets, v, time);\n\t\t\t\t\t\t\ttime += v.duration;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\ttl.duration() < duration && tl.to({}, {duration: duration - tl.duration()}); // in case keyframes didn't go to 100%\n\t\t\t\t}\n\t\t\t}\n\t\t\tduration || this.duration((duration = tl.duration()));\n\n\t\t} else {\n\t\t\tthis.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)\n\t\t}\n\n\t\tif (overwrite === true && !_suppressOverwrites) {\n\t\t\t_overwritingTween = this;\n\t\t\t_globalTimeline.killTweensOf(parsedTargets);\n\t\t\t_overwritingTween = 0;\n\t\t}\n\t\t_addToTimeline(parent, this, position);\n\t\tvars.reversed && this.reverse();\n\t\tvars.paused && this.paused(true);\n\t\tif (immediateRender || (!duration && !keyframes && this._start === _roundPrecise(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(this) && parent.data !== \"nested\")) {\n\t\t\tthis._tTime = -_tinyNum; //forces a render without having to set the render() \"force\" parameter to true because we want to allow lazying by default (using the \"force\" parameter always forces an immediate full render)\n\t\t\tthis.render(Math.max(0, -delay) || 0); //in case delay is negative\n\t\t}\n\t\tscrollTrigger && _scrollTrigger(this, scrollTrigger);\n\t}\n\n\trender(totalTime, suppressEvents, force) {\n\t\tlet prevTime = this._time,\n\t\t\ttDur = this._tDur,\n\t\t\tdur = this._dur,\n\t\t\tisNegative = totalTime < 0,\n\t\t\ttTime = (totalTime > tDur - _tinyNum && !isNegative) ? tDur : (totalTime < _tinyNum) ? 0 : totalTime,\n\t\t\ttime, pt, iteration, cycleDuration, prevIteration, isYoyo, ratio, timeline, yoyoEase;\n\t\tif (!dur) {\n\t\t\t_renderZeroDurationTween(this, totalTime, suppressEvents, force);\n\t\t} else if (tTime !== this._tTime || !totalTime || force || (!this._initted && this._tTime) || (this._startAt && (this._zTime < 0) !== isNegative) || this._lazy) { // this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)\n\t\t\ttime = tTime;\n\t\t\ttimeline = this.timeline;\n\t\t\tif (this._repeat) { //adjust the time for repeats and yoyos\n\t\t\t\tcycleDuration = dur + this._rDelay;\n\t\t\t\tif (this._repeat < -1 && isNegative) {\n\t\t\t\t\treturn this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n\t\t\t\t}\n\t\t\t\ttime = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\t\t\t\tif (tTime === tDur) { // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n\t\t\t\t\titeration = this._repeat;\n\t\t\t\t\ttime = dur;\n\t\t\t\t} else {\n\t\t\t\t\tprevIteration = _roundPrecise(tTime / cycleDuration); // full decimal version of iterations, not the previous iteration (we're reusing prevIteration variable for efficiency)\n\t\t\t\t\titeration = ~~prevIteration;\n\t\t\t\t\tif (iteration && iteration === prevIteration) {\n\t\t\t\t\t\ttime = dur;\n\t\t\t\t\t\titeration--;\n\t\t\t\t\t} else if (time > dur) {\n\t\t\t\t\t\ttime = dur;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tisYoyo = this._yoyo && (iteration & 1);\n\t\t\t\tif (isYoyo) {\n\t\t\t\t\tyoyoEase = this._yEase;\n\t\t\t\t\ttime = dur - time;\n\t\t\t\t}\n\t\t\t\tprevIteration = _animationCycle(this._tTime, cycleDuration);\n\t\t\t\tif (time === prevTime && !force && this._initted && iteration === prevIteration) {\n\t\t\t\t\t//could be during the repeatDelay part. No need to render and fire callbacks.\n\t\t\t\t\tthis._tTime = tTime;\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t\tif (iteration !== prevIteration) {\n\t\t\t\t\ttimeline && this._yEase && _propagateYoyoEase(timeline, isYoyo);\n\t\t\t\t\t//repeatRefresh functionality\n\t\t\t\t\tif (this.vars.repeatRefresh && !isYoyo && !this._lock && time !== cycleDuration && this._initted) { // this._time will === cycleDuration when we render at EXACTLY the end of an iteration. Without this condition, it'd often do the repeatRefresh render TWICE (again on the very next tick).\n\t\t\t\t\t\tthis._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.\n\t\t\t\t\t\tthis.render(_roundPrecise(cycleDuration * iteration), true).invalidate()._lock = 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (!this._initted) {\n\t\t\t\tif (_attemptInitTween(this, isNegative ? totalTime : time, force, suppressEvents, tTime)) {\n\t\t\t\t\tthis._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t\tif (prevTime !== this._time && !(force && this.vars.repeatRefresh && iteration !== prevIteration)) { // rare edge case - during initialization, an onUpdate in the _startAt (.fromTo()) might force this tween to render at a different spot in which case we should ditch this render() call so that it doesn't revert the values. But we also don't want to dump if we're doing a repeatRefresh render!\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t\tif (dur !== this._dur) { // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.\n\t\t\t\t\treturn this.render(totalTime, suppressEvents, force);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis._tTime = tTime;\n\t\t\tthis._time = time;\n\n\t\t\tif (!this._act && this._ts) {\n\t\t\t\tthis._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\t\t\t\tthis._lazy = 0;\n\t\t\t}\n\n\t\t\tthis.ratio = ratio = (yoyoEase || this._ease)(time / dur);\n\t\t\tif (this._from) {\n\t\t\t\tthis.ratio = ratio = 1 - ratio;\n\t\t\t}\n\n\t\t\tif (time && !prevTime && !suppressEvents && !iteration) {\n\t\t\t\t_callback(this, \"onStart\");\n\t\t\t\tif (this._tTime !== tTime) { // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t}\n\t\t\tpt = this._pt;\n\t\t\twhile (pt) {\n\t\t\t\tpt.r(ratio, pt.d);\n\t\t\t\tpt = pt._next;\n\t\t\t}\n\t\t\t(timeline && timeline.render(totalTime < 0 ? totalTime : timeline._dur * timeline._ease(time / this._dur), suppressEvents, force)) || (this._startAt && (this._zTime = totalTime));\n\n\t\t\tif (this._onUpdate && !suppressEvents) {\n\t\t\t\tisNegative && _rewindStartAt(this, totalTime, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.\n\t\t\t\t_callback(this, \"onUpdate\");\n\t\t\t}\n\n\t\t\tthis._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, \"onRepeat\");\n\n\t\t\tif ((tTime === this._tDur || !tTime) && this._tTime === tTime) {\n\t\t\t\tisNegative && !this._onUpdate && _rewindStartAt(this, totalTime, true, true);\n\t\t\t\t(totalTime || !dur) && ((tTime === this._tDur && this._ts > 0) || (!tTime && this._ts < 0)) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\t\t\t if (!suppressEvents && !(isNegative && !prevTime) && (tTime || prevTime || isYoyo)) { // if prevTime and tTime are zero, we shouldn't fire the onReverseComplete. This could happen if you gsap.to(... {paused:true}).play();\n\t\t\t\t\t_callback(this, (tTime === tDur ? \"onComplete\" : \"onReverseComplete\"), true);\n\t\t\t\t\tthis._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t\treturn this;\n\t}\n\n\ttargets() {\n\t\treturn this._targets;\n\t}\n\n\tinvalidate(soft) { // \"soft\" gives us a way to clear out everything EXCEPT the recorded pre-\"from\" portion of from() tweens. Otherwise, for example, if you tween.progress(1).render(0, true true).invalidate(), the \"from\" values would persist and then on the next render, the from() tweens would initialize and the current value would match the \"from\" values, thus animate from the same value to the same value (no animation). We tap into this in ScrollTrigger's refresh() where we must push a tween to completion and then back again but honor its init state in case the tween is dependent on another tween further up on the page.\n\t\t(!soft || !this.vars.runBackwards) && (this._startAt = 0)\n\t\tthis._pt = this._op = this._onUpdate = this._lazy = this.ratio = 0;\n\t\tthis._ptLookup = [];\n\t\tthis.timeline && this.timeline.invalidate(soft);\n\t\treturn super.invalidate(soft);\n\t}\n\n\tresetTo(property, value, start, startIsRelative, skipRecursion) {\n\t\t_tickerActive || _ticker.wake();\n\t\tthis._ts || this.play();\n\t\tlet time = Math.min(this._dur, (this._dp._time - this._start) * this._ts),\n\t\t\tratio;\n\t\tthis._initted || _initTween(this, time);\n\t\tratio = this._ease(time / this._dur); // don't just get tween.ratio because it may not have rendered yet.\n\t\t// possible future addition to allow an object with multiple values to update, like tween.resetTo({x: 100, y: 200}); At this point, it doesn't seem worth the added kb given the fact that most users will likely opt for the convenient gsap.quickTo() way of interacting with this method.\n\t\t// if (_isObject(property)) { // performance optimization\n\t\t// \tfor (p in property) {\n\t\t// \t\tif (_updatePropTweens(this, p, property[p], value ? value[p] : null, start, ratio, time)) {\n\t\t// \t\t\treturn this.resetTo(property, value, start, startIsRelative); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.\n\t\t// \t\t}\n\t\t// \t}\n\t\t// } else {\n\t\t\tif (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time, skipRecursion)) {\n\t\t\t\treturn this.resetTo(property, value, start, startIsRelative, 1); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.\n\t\t\t}\n\t\t//}\n\t\t_alignPlayhead(this, 0);\n\t\tthis.parent || _addLinkedListItem(this._dp, this, \"_first\", \"_last\", this._dp._sort ? \"_start\" : 0);\n\t\treturn this.render(0);\n\t}\n\n\tkill(targets, vars = \"all\") {\n\t\tif (!targets && (!vars || vars === \"all\")) {\n\t\t\tthis._lazy = this._pt = 0;\n\t\t\tthis.parent ? _interrupt(this) : this.scrollTrigger && this.scrollTrigger.kill(!!_reverting);\n\t\t\treturn this;\n\t\t}\n\t\tif (this.timeline) {\n\t\t\tlet tDur = this.timeline.totalDuration();\n\t\t\tthis.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this); // if nothing is left tweening, interrupt.\n\t\t\tthis.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur, 0, 1); // if a nested tween is killed that changes the duration, it should affect this tween's duration. We must use the ratio, though, because sometimes the internal timeline is stretched like for keyframes where they don't all add up to whatever the parent tween's duration was set to.\n\t\t\treturn this;\n\t\t}\n\t\tlet parsedTargets = this._targets,\n\t\t\tkillingTargets = targets ? toArray(targets) : parsedTargets,\n\t\t\tpropTweenLookup = this._ptLookup,\n\t\t\tfirstPT = this._pt,\n\t\t\toverwrittenProps, curLookup, curOverwriteProps, props, p, pt, i;\n\t\tif ((!vars || vars === \"all\") && _arraysMatch(parsedTargets, killingTargets)) {\n\t\t\tvars === \"all\" && (this._pt = 0);\n\t\t\treturn _interrupt(this);\n\t\t}\n\t\toverwrittenProps = this._op = this._op || [];\n\t\tif (vars !== \"all\") { //so people can pass in a comma-delimited list of property names\n\t\t\tif (_isString(vars)) {\n\t\t\t\tp = {};\n\t\t\t\t_forEachName(vars, name => p[name] = 1);\n\t\t\t\tvars = p;\n\t\t\t}\n\t\t\tvars = _addAliasesToVars(parsedTargets, vars);\n\t\t}\n\t\ti = parsedTargets.length;\n\t\twhile (i--) {\n\t\t\tif (~killingTargets.indexOf(parsedTargets[i])) {\n\t\t\t\tcurLookup = propTweenLookup[i];\n\t\t\t\tif (vars === \"all\") {\n\t\t\t\t\toverwrittenProps[i] = vars;\n\t\t\t\t\tprops = curLookup;\n\t\t\t\t\tcurOverwriteProps = {};\n\t\t\t\t} else {\n\t\t\t\t\tcurOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};\n\t\t\t\t\tprops = vars;\n\t\t\t\t}\n\t\t\t\tfor (p in props) {\n\t\t\t\t\tpt = curLookup && curLookup[p];\n\t\t\t\t\tif (pt) {\n\t\t\t\t\t\tif (!(\"kill\" in pt.d) || pt.d.kill(p) === true) {\n\t\t\t\t\t\t\t_removeLinkedListItem(this, pt, \"_pt\");\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdelete curLookup[p];\n\t\t\t\t\t}\n\t\t\t\t\tif (curOverwriteProps !== \"all\") {\n\t\t\t\t\t\tcurOverwriteProps[p] = 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tthis._initted && !this._pt && firstPT && _interrupt(this); //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.\n\t\treturn this;\n\t}\n\n\n\tstatic to(targets, vars) {\n\t\treturn new Tween(targets, vars, arguments[2]);\n\t}\n\n\tstatic from(targets, vars) {\n\t\treturn _createTweenType(1, arguments);\n\t}\n\n\tstatic delayedCall(delay, callback, params, scope) {\n\t\treturn new Tween(callback, 0, {immediateRender:false, lazy:false, overwrite:false, delay:delay, onComplete:callback, onReverseComplete:callback, onCompleteParams:params, onReverseCompleteParams:params, callbackScope:scope}); // we must use onReverseComplete too for things like timeline.add(() => {...}) which should be triggered in BOTH directions (forward and reverse)\n\t}\n\n\tstatic fromTo(targets, fromVars, toVars) {\n\t\treturn _createTweenType(2, arguments);\n\t}\n\n\tstatic set(targets, vars) {\n\t\tvars.duration = 0;\n\t\tvars.repeatDelay || (vars.repeat = 0);\n\t\treturn new Tween(targets, vars);\n\t}\n\n\tstatic killTweensOf(targets, props, onlyActive) {\n\t\treturn _globalTimeline.killTweensOf(targets, props, onlyActive);\n\t}\n}\n\n_setDefaults(Tween.prototype, {_targets:[], _lazy:0, _startAt:0, _op:0, _onInit:0});\n\n//add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)\n// _forEachName(\"to,from,fromTo,set,call,add,addLabel,addPause\", name => {\n// \tTween.prototype[name] = function() {\n// \t\tlet tl = new Timeline();\n// \t\treturn _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));\n// \t}\n// });\n\n//for backward compatibility. Leverage the timeline calls.\n_forEachName(\"staggerTo,staggerFrom,staggerFromTo\", name => {\n\tTween[name] = function() {\n\t\tlet tl = new Timeline(),\n\t\t\tparams = _slice.call(arguments, 0);\n\t\tparams.splice(name === \"staggerFromTo\" ? 5 : 4, 0, 0);\n\t\treturn tl[name].apply(tl, params);\n\t}\n});\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * PROPTWEEN\n * --------------------------------------------------------------------------------------\n */\nlet _setterPlain = (target, property, value) => target[property] = value,\n\t_setterFunc = (target, property, value) => target[property](value),\n\t_setterFuncWithParam = (target, property, value, data) => target[property](data.fp, value),\n\t_setterAttribute = (target, property, value) => target.setAttribute(property, value),\n\t_getSetter = (target, property) => _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain,\n\t_renderPlain = (ratio, data) => data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1000000) / 1000000, data),\n\t_renderBoolean = (ratio, data) => data.set(data.t, data.p, !!(data.s + data.c * ratio), data),\n\t_renderComplexString = function(ratio, data) {\n\t\tlet pt = data._pt,\n\t\t\ts = \"\";\n\t\tif (!ratio && data.b) { //b = beginning string\n\t\t\ts = data.b;\n\t\t} else if (ratio === 1 && data.e) { //e = ending string\n\t\t\ts = data.e;\n\t\t} else {\n\t\t\twhile (pt) {\n\t\t\t\ts = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : (Math.round((pt.s + pt.c * ratio) * 10000) / 10000)) + s; //we use the \"p\" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.\n\t\t\t\tpt = pt._next;\n\t\t\t}\n\t\t\ts += data.c; //we use the \"c\" of the PropTween to store the final chunk of non-numeric text.\n\t\t}\n\t\tdata.set(data.t, data.p, s, data);\n\t},\n\t_renderPropTweens = function(ratio, data) {\n\t\tlet pt = data._pt;\n\t\twhile (pt) {\n\t\t\tpt.r(ratio, pt.d);\n\t\t\tpt = pt._next;\n\t\t}\n\t},\n\t_addPluginModifier = function(modifier, tween, target, property) {\n\t\tlet pt = this._pt,\n\t\t\tnext;\n\t\twhile (pt) {\n\t\t\tnext = pt._next;\n\t\t\tpt.p === property && pt.modifier(modifier, tween, target);\n\t\t\tpt = next;\n\t\t}\n\t},\n\t_killPropTweensOf = function(property) {\n\t\tlet pt = this._pt,\n\t\t\thasNonDependentRemaining, next;\n\t\twhile (pt) {\n\t\t\tnext = pt._next;\n\t\t\tif ((pt.p === property && !pt.op) || pt.op === property) {\n\t\t\t\t_removeLinkedListItem(this, pt, \"_pt\");\n\t\t\t} else if (!pt.dep) {\n\t\t\t\thasNonDependentRemaining = 1;\n\t\t\t}\n\t\t\tpt = next;\n\t\t}\n\t\treturn !hasNonDependentRemaining;\n\t},\n\t_setterWithModifier = (target, property, value, data) => {\n\t\tdata.mSet(target, property, data.m.call(data.tween, value, data.mt), data);\n\t},\n\t_sortPropTweensByPriority = parent => {\n\t\tlet pt = parent._pt,\n\t\t\tnext, pt2, first, last;\n\t\t//sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)\n\t\twhile (pt) {\n\t\t\tnext = pt._next;\n\t\t\tpt2 = first;\n\t\t\twhile (pt2 && pt2.pr > pt.pr) {\n\t\t\t\tpt2 = pt2._next;\n\t\t\t}\n\t\t\tif ((pt._prev = pt2 ? pt2._prev : last)) {\n\t\t\t\tpt._prev._next = pt;\n\t\t\t} else {\n\t\t\t\tfirst = pt;\n\t\t\t}\n\t\t\tif ((pt._next = pt2)) {\n\t\t\t\tpt2._prev = pt;\n\t\t\t} else {\n\t\t\t\tlast = pt;\n\t\t\t}\n\t\t\tpt = next;\n\t\t}\n\t\tparent._pt = first;\n\t};\n\n//PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)\nexport class PropTween {\n\n\tconstructor(next, target, prop, start, change, renderer, data, setter, priority) {\n\t\tthis.t = target;\n\t\tthis.s = start;\n\t\tthis.c = change;\n\t\tthis.p = prop;\n\t\tthis.r = renderer || _renderPlain;\n\t\tthis.d = data || this;\n\t\tthis.set = setter || _setterPlain;\n\t\tthis.pr = priority || 0;\n\t\tthis._next = next;\n\t\tif (next) {\n\t\t\tnext._prev = this;\n\t\t}\n\t}\n\n\tmodifier(func, tween, target) {\n\t\tthis.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)\n\t\tthis.set = _setterWithModifier;\n\t\tthis.m = func;\n\t\tthis.mt = target; //modifier target\n\t\tthis.tween = tween;\n\t}\n}\n\n\n\n//Initialization tasks\n_forEachName(_callbackNames + \"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\", name => _reservedProps[name] = 1);\n_globals.TweenMax = _globals.TweenLite = Tween;\n_globals.TimelineLite = _globals.TimelineMax = Timeline;\n_globalTimeline = new Timeline({sortChildren: false, defaults: _defaults, autoRemoveChildren: true, id:\"root\", smoothChildTiming: true});\n_config.stringFilter = _colorStringFilter;\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nlet _media = [],\n\t_listeners = {},\n\t_emptyArray = [],\n\t_lastMediaTime = 0,\n\t_contextID = 0,\n\t_dispatch = type => (_listeners[type] || _emptyArray).map(f => f()),\n\t_onMediaChange = () => {\n\t\tlet time = Date.now(),\n\t\t\tmatches = [];\n\t\tif (time - _lastMediaTime > 2) {\n\t\t\t_dispatch(\"matchMediaInit\");\n\t\t\t_media.forEach(c => {\n\t\t\t\tlet queries = c.queries,\n\t\t\t\t\tconditions = c.conditions,\n\t\t\t\t\tmatch, p, anyMatch, toggled;\n\t\t\t\tfor (p in queries) {\n\t\t\t\t\tmatch = _win.matchMedia(queries[p]).matches; // Firefox doesn't update the \"matches\" property of the MediaQueryList object correctly - it only does so as it calls its change handler - so we must re-create a media query here to ensure it's accurate.\n\t\t\t\t\tmatch && (anyMatch = 1);\n\t\t\t\t\tif (match !== conditions[p]) {\n\t\t\t\t\t\tconditions[p] = match;\n\t\t\t\t\t\ttoggled = 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (toggled) {\n\t\t\t\t\tc.revert();\n\t\t\t\t\tanyMatch && matches.push(c);\n\t\t\t\t}\n\t\t\t});\n\t\t\t_dispatch(\"matchMediaRevert\");\n\t\t\tmatches.forEach(c => c.onMatch(c, func => c.add(null, func)));\n\t\t\t_lastMediaTime = time;\n\t\t\t_dispatch(\"matchMedia\");\n\t\t}\n\t};\n\nclass Context {\n\tconstructor(func, scope) {\n\t\tthis.selector = scope && selector(scope);\n\t\tthis.data = [];\n\t\tthis._r = []; // returned/cleanup functions\n\t\tthis.isReverted = false;\n\t\tthis.id = _contextID++; // to work around issues that frameworks like Vue cause by making things into Proxies which make it impossible to do something like _media.indexOf(this) because \"this\" would no longer refer to the Context instance itself - it'd refer to a Proxy! We needed a way to identify the context uniquely\n\t\tfunc && this.add(func);\n\t}\n\tadd(name, func, scope) {\n\t\t// possible future addition if we need the ability to add() an animation to a context and for whatever reason cannot create that animation inside of a context.add(() => {...}) function.\n\t\t// if (name && _isFunction(name.revert)) {\n\t\t// \tthis.data.push(name);\n\t\t// \treturn (name._ctx = this);\n\t\t// }\n\t\tif (_isFunction(name)) {\n\t\t\tscope = func;\n\t\t\tfunc = name;\n\t\t\tname = _isFunction;\n\t\t}\n\t\tlet self = this,\n\t\t\tf = function() {\n\t\t\t\tlet prev = _context,\n\t\t\t\t\tprevSelector = self.selector,\n\t\t\t\t\tresult;\n\t\t\t\tprev && prev !== self && prev.data.push(self);\n\t\t\t\tscope && (self.selector = selector(scope));\n\t\t\t\t_context = self;\n\t\t\t\tresult = func.apply(self, arguments);\n\t\t\t\t_isFunction(result) && self._r.push(result);\n\t\t\t\t_context = prev;\n\t\t\t\tself.selector = prevSelector;\n\t\t\t\tself.isReverted = false;\n\t\t\t\treturn result;\n\t\t\t};\n\t\tself.last = f;\n\t\treturn name === _isFunction ? f(self, func => self.add(null, func)) : name ? (self[name] = f) : f;\n\t}\n\tignore(func) {\n\t\tlet prev = _context;\n\t\t_context = null;\n\t\tfunc(this);\n\t\t_context = prev;\n\t}\n\tgetTweens() {\n\t\tlet a = [];\n\t\tthis.data.forEach(e => (e instanceof Context) ? a.push(...e.getTweens()) : (e instanceof Tween) && !(e.parent && e.parent.data === \"nested\") && a.push(e));\n\t\treturn a;\n\t}\n\tclear() {\n\t\tthis._r.length = this.data.length = 0;\n\t}\n\tkill(revert, matchMedia) {\n\t\tif (revert) {\n\t\t\tlet tweens = this.getTweens(),\n\t\t\t\ti = this.data.length,\n\t\t\t\tt;\n\t\t\twhile (i--) { // Flip plugin tweens are very different in that they should actually be pushed to their end. The plugin replaces the timeline's .revert() method to do exactly that. But we also need to remove any of those nested tweens inside the flip timeline so that they don't get individually reverted.\n\t\t\t\tt = this.data[i];\n\t\t\t\tif (t.data === \"isFlip\") {\n\t\t\t\t\tt.revert();\n\t\t\t\t\tt.getChildren(true, true, false).forEach(tween => tweens.splice(tweens.indexOf(tween), 1));\n\t\t\t\t}\n\t\t\t}\n\t\t\t// save as an object so that we can cache the globalTime for each tween to optimize performance during the sort\n\t\t\ttweens.map(t => { return {g: t._dur || t._delay || (t._sat && !t._sat.vars.immediateRender) ? t.globalTime(0) : -Infinity, t}}).sort((a, b) => b.g - a.g || -Infinity).forEach(o => o.t.revert(revert)); // note: all of the _startAt tweens should be reverted in reverse order that they were created, and they'll all have the same globalTime (-1) so the \" || -1\" in the sort keeps the order properly.\n\t\t\ti = this.data.length;\n\t\t\twhile (i--) { // make sure we loop backwards so that, for example, SplitTexts that were created later on the same element get reverted first\n\t\t\t\tt = this.data[i];\n\t\t\t\tif (t instanceof Timeline) {\n\t\t\t\t\tif (t.data !== \"nested\") {\n\t\t\t\t\t\tt.scrollTrigger && t.scrollTrigger.revert();\n\t\t\t\t\t\tt.kill(); // don't revert() the timeline because that's duplicating efforts since we already reverted all the tweens\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t!(t instanceof Tween) && t.revert && t.revert(revert)\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis._r.forEach(f => f(revert, this));\n\t\t\tthis.isReverted = true;\n\t\t} else {\n\t\t\tthis.data.forEach(e => e.kill && e.kill());\n\t\t}\n\t\tthis.clear();\n\t\tif (matchMedia) {\n\t\t\tlet i = _media.length;\n\t\t\twhile (i--) { // previously, we checked _media.indexOf(this), but some frameworks like Vue enforce Proxy objects that make it impossible to get the proper result that way, so we must use a unique ID number instead.\n\t\t\t\t_media[i].id === this.id && _media.splice(i, 1);\n\t\t\t}\n\t\t}\n\t}\n\n\t// killWithCleanup() {\n\t// \tthis.kill();\n\t// \tthis._r.forEach(f => f(false, this));\n\t// }\n\n\trevert(config) {\n\t\tthis.kill(config || {});\n\t}\n}\n\n\n\n\nclass MatchMedia {\n\tconstructor(scope) {\n\t\tthis.contexts = [];\n\t\tthis.scope = scope;\n\t\t_context && _context.data.push(this);\n\t}\n\tadd(conditions, func, scope) {\n\t\t_isObject(conditions) || (conditions = {matches: conditions});\n\t\tlet context = new Context(0, scope || this.scope),\n\t\t\tcond = context.conditions = {},\n\t\t\tmq, p, active;\n\t\t_context && !context.selector && (context.selector = _context.selector); // in case a context is created inside a context. Like a gsap.matchMedia() that's inside a scoped gsap.context()\n\t\tthis.contexts.push(context);\n\t\tfunc = context.add(\"onMatch\", func);\n\t\tcontext.queries = conditions;\n\t\tfor (p in conditions) {\n\t\t\tif (p === \"all\") {\n\t\t\t\tactive = 1;\n\t\t\t} else {\n\t\t\t\tmq = _win.matchMedia(conditions[p]);\n\t\t\t\tif (mq) {\n\t\t\t\t\t_media.indexOf(context) < 0 && _media.push(context);\n\t\t\t\t\t(cond[p] = mq.matches) && (active = 1);\n\t\t\t\t\tmq.addListener ? mq.addListener(_onMediaChange) : mq.addEventListener(\"change\", _onMediaChange);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tactive && func(context, f => context.add(null, f));\n\t\treturn this;\n\t}\n\t// refresh() {\n\t// \tlet time = _lastMediaTime,\n\t// \t\tmedia = _media;\n\t// \t_lastMediaTime = -1;\n\t// \t_media = this.contexts;\n\t// \t_onMediaChange();\n\t// \t_lastMediaTime = time;\n\t// \t_media = media;\n\t// }\n\trevert(config) {\n\t\tthis.kill(config || {});\n\t}\n\tkill(revert) {\n\t\tthis.contexts.forEach(c => c.kill(revert, true));\n\t}\n}\n\n\n\n/*\n * --------------------------------------------------------------------------------------\n * GSAP\n * --------------------------------------------------------------------------------------\n */\nconst _gsap = {\n\tregisterPlugin(...args) {\n\t\targs.forEach(config => _createPlugin(config));\n\t},\n\ttimeline(vars) {\n\t\treturn new Timeline(vars);\n\t},\n\tgetTweensOf(targets, onlyActive) {\n\t\treturn _globalTimeline.getTweensOf(targets, onlyActive);\n\t},\n\tgetProperty(target, property, unit, uncache) {\n\t\t_isString(target) && (target = toArray(target)[0]); //in case selector text or an array is passed in\n\t\tlet getter = _getCache(target || {}).get,\n\t\t\tformat = unit ? _passThrough : _numericIfPossible;\n\t\tunit === \"native\" && (unit = \"\");\n\t\treturn !target ? target : !property ? (property, unit, uncache) => format(((_plugins[property] && _plugins[property].get) || getter)(target, property, unit, uncache)) : format(((_plugins[property] && _plugins[property].get) || getter)(target, property, unit, uncache));\n\t},\n\tquickSetter(target, property, unit) {\n\t\ttarget = toArray(target);\n\t\tif (target.length > 1) {\n\t\t\tlet setters = target.map(t => gsap.quickSetter(t, property, unit)),\n\t\t\t\tl = setters.length;\n\t\t\treturn value => {\n\t\t\t\tlet i = l;\n\t\t\t\twhile(i--) {\n\t\t\t\t\tsetters[i](value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\ttarget = target[0] || {};\n\t\tlet Plugin = _plugins[property],\n\t\t\tcache = _getCache(target),\n\t\t\tp = (cache.harness && (cache.harness.aliases || {})[property]) || property, // in case it's an alias, like \"rotate\" for \"rotation\".\n\t\t\tsetter = Plugin ? value => {\n\t\t\t\tlet p = new Plugin();\n\t\t\t\t_quickTween._pt = 0;\n\t\t\t\tp.init(target, unit ? value + unit : value, _quickTween, 0, [target]);\n\t\t\t\tp.render(1, p);\n\t\t\t\t_quickTween._pt && _renderPropTweens(1, _quickTween);\n\t\t\t} : cache.set(target, p);\n\t\treturn Plugin ? setter : value => setter(target, p, unit ? value + unit : value, cache, 1);\n\t},\n\tquickTo(target, property, vars) {\n\t\tlet tween = gsap.to(target, _setDefaults({[property]: \"+=0.1\", paused: true, stagger: 0}, vars || {})),\n\t\t\tfunc = (value, start, startIsRelative) => tween.resetTo(property, value, start, startIsRelative);\n\t\tfunc.tween = tween;\n\t\treturn func;\n\t},\n\tisTweening(targets) {\n\t\treturn _globalTimeline.getTweensOf(targets, true).length > 0;\n\t},\n\tdefaults(value) {\n\t\tvalue && value.ease && (value.ease = _parseEase(value.ease, _defaults.ease));\n\t\treturn _mergeDeep(_defaults, value || {});\n\t},\n\tconfig(value) {\n\t\treturn _mergeDeep(_config, value || {});\n\t},\n\tregisterEffect({name, effect, plugins, defaults, extendTimeline}) {\n\t\t(plugins || \"\").split(\",\").forEach(pluginName => pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + \" effect requires \" + pluginName + \" plugin.\"));\n\t\t_effects[name] = (targets, vars, tl) => effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);\n\t\tif (extendTimeline) {\n\t\t\tTimeline.prototype[name] = function(targets, vars, position) {\n\t\t\t\treturn this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);\n\t\t\t};\n\t\t}\n\t},\n\tregisterEase(name, ease) {\n\t\t_easeMap[name] = _parseEase(ease);\n\t},\n\tparseEase(ease, defaultEase) {\n\t\treturn arguments.length ? _parseEase(ease, defaultEase) : _easeMap;\n\t},\n\tgetById(id) {\n\t\treturn _globalTimeline.getById(id);\n\t},\n\texportRoot(vars = {}, includeDelayedCalls) {\n\t\tlet tl = new Timeline(vars),\n\t\t\tchild, next;\n\t\ttl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);\n\t\t_globalTimeline.remove(tl);\n\t\ttl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).\n\t\ttl._time = tl._tTime = _globalTimeline._time;\n\t\tchild = _globalTimeline._first;\n\t\twhile (child) {\n\t\t\tnext = child._next;\n\t\t\tif (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {\n\t\t\t\t_addToTimeline(tl, child, child._start - child._delay);\n\t\t\t}\n\t\t\tchild = next;\n\t\t}\n\t\t_addToTimeline(_globalTimeline, tl, 0);\n\t\treturn tl;\n\t},\n\tcontext: (func, scope) => func ? new Context(func, scope) : _context,\n\tmatchMedia: scope => new MatchMedia(scope),\n\tmatchMediaRefresh: () => _media.forEach(c => {\n\t\tlet cond = c.conditions,\n\t\t\tfound, p;\n\t\tfor (p in cond) {\n\t\t\tif (cond[p]) {\n\t\t\t\tcond[p] = false;\n\t\t\t\tfound = 1;\n\t\t\t}\n\t\t}\n\t\tfound && c.revert();\n\t}) || _onMediaChange(),\n\taddEventListener(type, callback) {\n\t\tlet a = _listeners[type] || (_listeners[type] = []);\n\t\t~a.indexOf(callback) || a.push(callback);\n\t},\n\tremoveEventListener(type, callback) {\n\t\tlet a = _listeners[type],\n\t\t\ti = a && a.indexOf(callback);\n\t\ti >= 0 && a.splice(i, 1);\n\t},\n\tutils: { wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, selector, mapRange, pipe, unitize, interpolate, shuffle },\n\tinstall: _install,\n\teffects: _effects,\n\tticker: _ticker,\n\tupdateRoot: Timeline.updateRoot,\n\tplugins: _plugins,\n\tglobalTimeline: _globalTimeline,\n\tcore: {PropTween, globals: _addGlobal, Tween, Timeline, Animation, getCache: _getCache, _removeLinkedListItem, reverting: () => _reverting, context: toAdd => {if (toAdd && _context) { _context.data.push(toAdd); toAdd._ctx = _context} return _context; }, suppressOverwrites: value => _suppressOverwrites = value}\n};\n\n_forEachName(\"to,from,fromTo,delayedCall,set,killTweensOf\", name => _gsap[name] = Tween[name]);\n_ticker.add(Timeline.updateRoot);\n_quickTween = _gsap.to({}, {duration:0});\n\n\n\n\n// ---- EXTRA PLUGINS --------------------------------------------------------\n\n\nlet _getPluginPropTween = (plugin, prop) => {\n\t\tlet pt = plugin._pt;\n\t\twhile (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {\n\t\t\tpt = pt._next;\n\t\t}\n\t\treturn pt;\n\t},\n\t_addModifiers = (tween, modifiers) => {\n\t\t\tlet\ttargets = tween._targets,\n\t\t\t\tp, i, pt;\n\t\t\tfor (p in modifiers) {\n\t\t\t\ti = targets.length;\n\t\t\t\twhile (i--) {\n\t\t\t\t\tpt = tween._ptLookup[i][p];\n\t\t\t\t\tif (pt && (pt = pt.d)) {\n\t\t\t\t\t\tif (pt._pt) { // is a plugin\n\t\t\t\t\t\t\tpt = _getPluginPropTween(pt, p);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tpt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t},\n\t_buildModifierPlugin = (name, modifier) => {\n\t\treturn {\n\t\t\tname: name,\n\t\t\trawVars: 1, //don't pre-process function-based values or \"random()\" strings.\n\t\t\tinit(target, vars, tween) {\n\t\t\t\ttween._onInit = tween => {\n\t\t\t\t\tlet temp, p;\n\t\t\t\t\tif (_isString(vars)) {\n\t\t\t\t\t\ttemp = {};\n\t\t\t\t\t\t_forEachName(vars, name => temp[name] = 1); //if the user passes in a comma-delimited list of property names to roundProps, like \"x,y\", we round to whole numbers.\n\t\t\t\t\t\tvars = temp;\n\t\t\t\t\t}\n\t\t\t\t\tif (modifier) {\n\t\t\t\t\t\ttemp = {};\n\t\t\t\t\t\tfor (p in vars) {\n\t\t\t\t\t\t\ttemp[p] = modifier(vars[p]);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvars = temp;\n\t\t\t\t\t}\n\t\t\t\t\t_addModifiers(tween, vars);\n\t\t\t\t};\n\t\t\t}\n\t\t};\n\t};\n\n//register core plugins\nexport const gsap = _gsap.registerPlugin({\n\t\tname:\"attr\",\n\t\tinit(target, vars, tween, index, targets) {\n\t\t\tlet p, pt, v;\n\t\t\tthis.tween = tween;\n\t\t\tfor (p in vars) {\n\t\t\t\tv = target.getAttribute(p) || \"\";\n\t\t\t\tpt = this.add(target, \"setAttribute\", (v || 0) + \"\", vars[p], index, targets, 0, 0, p);\n\t\t\t\tpt.op = p;\n\t\t\t\tpt.b = v; // record the beginning value so we can revert()\n\t\t\t\tthis._props.push(p);\n\t\t\t}\n\t\t},\n\t\trender(ratio, data) {\n\t\t\tlet pt = data._pt;\n\t\t\twhile (pt) {\n\t\t\t\t_reverting ? pt.set(pt.t, pt.p, pt.b, pt) : pt.r(ratio, pt.d); // if reverting, go back to the original (pt.b)\n\t\t\t\tpt = pt._next;\n\t\t\t}\n\t\t}\n\t}, {\n\t\tname:\"endArray\",\n\t\tinit(target, value) {\n\t\t\tlet i = value.length;\n\t\t\twhile (i--) {\n\t\t\t\tthis.add(target, i, target[i] || 0, value[i], 0, 0, 0, 0, 0, 1);\n\t\t\t}\n\t\t}\n\t},\n\t_buildModifierPlugin(\"roundProps\", _roundModifier),\n\t_buildModifierPlugin(\"modifiers\"),\n\t_buildModifierPlugin(\"snap\", snap)\n) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.\n\nTween.version = Timeline.version = gsap.version = \"3.12.7\";\n_coreReady = 1;\n_windowExists() && _wake();\n\nexport const { Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ } = _easeMap;\nexport { Tween as TweenMax, Tween as TweenLite, Timeline as TimelineMax, Timeline as TimelineLite, gsap as default, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, selector, mapRange, pipe, unitize, interpolate, shuffle };\n//export some internal methods/orojects for use in CSSPlugin so that we can externalize that file and allow custom builds that exclude it.\nexport { _getProperty, _numExp, _numWithUnitExp, _isString, _isUndefined, _renderComplexString, _relExp, _setDefaults, _removeLinkedListItem, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _replaceRandom, _checkPlugin, _plugins, _ticker, _config, _roundModifier, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative }","/*!\n * CSSPlugin 3.12.7\n * https://gsap.com\n *\n * Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\n\nimport {gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative,\n\t_setDefaults, _removeLinkedListItem //for the commented-out className feature.\n} from \"./gsap-core.js\";\n\nlet _win, _doc, _docElement, _pluginInitted, _tempDiv, _tempDivStyler, _recentSetterPlugin, _reverting,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_transformProps = {},\n\t_RAD2DEG = 180 / Math.PI,\n\t_DEG2RAD = Math.PI / 180,\n\t_atan2 = Math.atan2,\n\t_bigNum = 1e8,\n\t_capsExp = /([A-Z])/g,\n\t_horizontalExp = /(left|right|width|margin|padding|x)/i,\n\t_complexExp = /[\\s,\\(]\\S/,\n\t_propertyAliases = {autoAlpha:\"opacity,visibility\", scale:\"scaleX,scaleY\", alpha:\"opacity\"},\n\t_renderCSSProp = (ratio, data) => data.set(data.t, data.p, (Math.round((data.s + data.c * ratio) * 10000) / 10000) + data.u, data),\n\t_renderPropWithEnd = (ratio, data) => data.set(data.t, data.p, ratio === 1 ? data.e : (Math.round((data.s + data.c * ratio) * 10000) / 10000) + data.u, data),\n\t_renderCSSPropWithBeginning = (ratio, data) => data.set(data.t, data.p, ratio ? (Math.round((data.s + data.c * ratio) * 10000) / 10000) + data.u : data.b, data), //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)\n\t_renderRoundedCSSProp = (ratio, data) => {\n\t\tlet value = data.s + data.c * ratio;\n\t\tdata.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);\n\t},\n\t_renderNonTweeningValue = (ratio, data) => data.set(data.t, data.p, ratio ? data.e : data.b, data),\n\t_renderNonTweeningValueOnlyAtEnd = (ratio, data) => data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data),\n\t_setterCSSStyle = (target, property, value) => target.style[property] = value,\n\t_setterCSSProp = (target, property, value) => target.style.setProperty(property, value),\n\t_setterTransform = (target, property, value) => target._gsap[property] = value,\n\t_setterScale = (target, property, value) => target._gsap.scaleX = target._gsap.scaleY = value,\n\t_setterScaleWithRender = (target, property, value, data, ratio) => {\n\t\tlet cache = target._gsap;\n\t\tcache.scaleX = cache.scaleY = value;\n\t\tcache.renderTransform(ratio, cache);\n\t},\n\t_setterTransformWithRender = (target, property, value, data, ratio) => {\n\t\tlet cache = target._gsap;\n\t\tcache[property] = value;\n\t\tcache.renderTransform(ratio, cache);\n\t},\n\t_transformProp = \"transform\",\n\t_transformOriginProp = _transformProp + \"Origin\",\n\t_saveStyle = function(property, isNotCSS) {\n\t\tlet target = this.target,\n\t\t\tstyle = target.style,\n\t\t\tcache = target._gsap;\n\t\tif ((property in _transformProps) && style) {\n\t\t\tthis.tfm = this.tfm || {};\n\t\t\tif (property !== \"transform\") {\n\t\t\t\tproperty = _propertyAliases[property] || property;\n\t\t\t\t~property.indexOf(\",\") ? property.split(\",\").forEach(a => this.tfm[a] = _get(target, a)) : (this.tfm[property] = cache.x ? cache[property] : _get(target, property)); // note: scale would map to \"scaleX,scaleY\", thus we loop and apply them both.\n\t\t\t\tproperty === _transformOriginProp && (this.tfm.zOrigin = cache.zOrigin);\n\t\t\t} else {\n\t\t\t\treturn _propertyAliases.transform.split(\",\").forEach(p => _saveStyle.call(this, p, isNotCSS));\n\t\t\t}\n\t\t\tif (this.props.indexOf(_transformProp) >= 0) { return; }\n\t\t\tif (cache.svg) {\n\t\t\t\tthis.svgo = target.getAttribute(\"data-svg-origin\");\n\t\t\t\tthis.props.push(_transformOriginProp, isNotCSS, \"\");\n\t\t\t}\n\t\t\tproperty = _transformProp;\n\t\t}\n\t\t(style || isNotCSS) && this.props.push(property, isNotCSS, style[property]);\n\t},\n\t_removeIndependentTransforms = style => {\n\t\tif (style.translate) {\n\t\t\tstyle.removeProperty(\"translate\");\n\t\t\tstyle.removeProperty(\"scale\");\n\t\t\tstyle.removeProperty(\"rotate\");\n\t\t}\n\t},\n\t_revertStyle = function() {\n\t\tlet props = this.props,\n\t\t\ttarget = this.target,\n\t\t\tstyle = target.style,\n\t\t\tcache = target._gsap,\n\t\t\ti, p;\n\t\tfor (i = 0; i < props.length; i+=3) { // stored like this: property, isNotCSS, value\n\t\t\tif (!props[i+1]) {\n\t\t\t\tprops[i+2] ? (style[props[i]] = props[i+2]) : style.removeProperty(props[i].substr(0,2) === \"--\" ? props[i] : props[i].replace(_capsExp, \"-$1\").toLowerCase());\n\t\t\t} else if (props[i+1] === 2) { // non-CSS value (function-based)\n\t\t\t\ttarget[props[i]](props[i+2]);\n\t\t\t} else { // non-CSS value (not function-based)\n\t\t\t\ttarget[props[i]] = props[i+2];\n\t\t\t}\n\t\t}\n\t\tif (this.tfm) {\n\t\t\tfor (p in this.tfm) {\n\t\t\t\tcache[p] = this.tfm[p];\n\t\t\t}\n\t\t\tif (cache.svg) {\n\t\t\t\tcache.renderTransform();\n\t\t\t\ttarget.setAttribute(\"data-svg-origin\", this.svgo || \"\");\n\t\t\t}\n\t\t\ti = _reverting();\n\t\t\tif ((!i || !i.isStart) && !style[_transformProp]) {\n\t\t\t\t_removeIndependentTransforms(style);\n\t\t\t\tif (cache.zOrigin && style[_transformOriginProp]) {\n\t\t\t\t\tstyle[_transformOriginProp] += \" \" + cache.zOrigin + \"px\"; // since we're uncaching, we must put the zOrigin back into the transformOrigin so that we can pull it out accurately when we parse again. Otherwise, we'd lose the z portion of the origin since we extract it to protect from Safari bugs.\n\t\t\t\t\tcache.zOrigin = 0;\n\t\t\t\t\tcache.renderTransform();\n\t\t\t\t}\n\t\t\t\tcache.uncache = 1; // if it's a startAt that's being reverted in the _initTween() of the core, we don't need to uncache transforms. This is purely a performance optimization.\n\t\t\t}\n\t\t}\n\t},\n\t_getStyleSaver = (target, properties) => {\n\t\tlet saver = {\n\t\t\ttarget,\n\t\t\tprops: [],\n\t\t\trevert: _revertStyle,\n\t\t\tsave: _saveStyle\n\t\t};\n\t\ttarget._gsap || gsap.core.getCache(target); // just make sure there's a _gsap cache defined because we read from it in _saveStyle() and it's more efficient to just check it here once.\n\t\tproperties && target.style && target.nodeType && properties.split(\",\").forEach(p => saver.save(p)); // make sure it's a DOM node too.\n\t\treturn saver;\n\t},\n\t_supports3D,\n\t_createElement = (type, ns) => {\n\t\tlet e = _doc.createElementNS ? _doc.createElementNS((ns || \"http://www.w3.org/1999/xhtml\").replace(/^https/, \"http\"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making \"style\" inaccessible.\n\t\treturn e && e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://gsap.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).\n\t},\n\t_getComputedProperty = (target, property, skipPrefixFallback) => {\n\t\tlet cs = getComputedStyle(target);\n\t\treturn cs[property] || cs.getPropertyValue(property.replace(_capsExp, \"-$1\").toLowerCase()) || cs.getPropertyValue(property) || (!skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1)) || \"\"; //css variables may not need caps swapped out for dashes and lowercase.\n\t},\n\t_prefixes = \"O,Moz,ms,Ms,Webkit\".split(\",\"),\n\t_checkPropPrefix = (property, element, preferPrefix) => {\n\t\tlet e = element || _tempDiv,\n\t\t\ts = e.style,\n\t\t\ti = 5;\n\t\tif (property in s && !preferPrefix) {\n\t\t\treturn property;\n\t\t}\n\t\tproperty = property.charAt(0).toUpperCase() + property.substr(1);\n\t\twhile (i-- && !((_prefixes[i]+property) in s)) { }\n\t\treturn (i < 0) ? null : ((i === 3) ? \"ms\" : (i >= 0) ? _prefixes[i] : \"\") + property;\n\t},\n\t_initCore = () => {\n\t\tif (_windowExists() && window.document) {\n\t\t\t_win = window;\n\t\t\t_doc = _win.document;\n\t\t\t_docElement = _doc.documentElement;\n\t\t\t_tempDiv = _createElement(\"div\") || {style:{}};\n\t\t\t_tempDivStyler = _createElement(\"div\");\n\t\t\t_transformProp = _checkPropPrefix(_transformProp);\n\t\t\t_transformOriginProp = _transformProp + \"Origin\";\n\t\t\t_tempDiv.style.cssText = \"border-width:0;line-height:0;position:absolute;padding:0\"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.\n\t\t\t_supports3D = !!_checkPropPrefix(\"perspective\");\n\t\t\t_reverting = gsap.core.reverting;\n\t\t\t_pluginInitted = 1;\n\t\t}\n\t},\n\t_getReparentedCloneBBox = target => { //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a element and/or . We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).\n\t\tlet owner = target.ownerSVGElement,\n\t\t\tsvg = _createElement(\"svg\", (owner && owner.getAttribute(\"xmlns\")) || \"http://www.w3.org/2000/svg\"),\n\t\t\tclone = target.cloneNode(true),\n\t\t\tbbox;\n\t\tclone.style.display = \"block\";\n\t\tsvg.appendChild(clone);\n\t\t_docElement.appendChild(svg);\n\t\ttry {\n\t\t\tbbox = clone.getBBox();\n\t\t} catch (e) { }\n\t\tsvg.removeChild(clone);\n\t\t_docElement.removeChild(svg);\n\t\treturn bbox;\n\t},\n\t_getAttributeFallbacks = (target, attributesArray) => {\n\t\tlet i = attributesArray.length;\n\t\twhile (i--) {\n\t\t\tif (target.hasAttribute(attributesArray[i])) {\n\t\t\t\treturn target.getAttribute(attributesArray[i]);\n\t\t\t}\n\t\t}\n\t},\n\t_getBBox = target => {\n\t\tlet bounds, cloned;\n\t\ttry {\n\t\t\tbounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a or ). https://bugzilla.mozilla.org/show_bug.cgi?id=612118\n\t\t} catch (error) {\n\t\t\tbounds = _getReparentedCloneBBox(target);\n\t\t\tcloned = 1;\n\t\t}\n\t\t(bounds && (bounds.width || bounds.height)) || cloned || (bounds = _getReparentedCloneBBox(target));\n\t\t//some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.\n\t\treturn (bounds && !bounds.width && !bounds.x && !bounds.y) ? {x: +_getAttributeFallbacks(target, [\"x\",\"cx\",\"x1\"]) || 0, y:+_getAttributeFallbacks(target, [\"y\",\"cy\",\"y1\"]) || 0, width:0, height:0} : bounds;\n\t},\n\t_isSVG = e => !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e)), //reports if the element is an SVG on which getBBox() actually works\n\t_removeProperty = (target, property) => {\n\t\tif (property) {\n\t\t\tlet style = target.style,\n\t\t\t\tfirst2Chars;\n\t\t\tif (property in _transformProps && property !== _transformOriginProp) {\n\t\t\t\tproperty = _transformProp;\n\t\t\t}\n\t\t\tif (style.removeProperty) {\n\t\t\t\tfirst2Chars = property.substr(0,2);\n\t\t\t\tif (first2Chars === \"ms\" || property.substr(0,6) === \"webkit\") { //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be \"ms-transform\" instead of \"-ms-transform\" for IE9, for example)\n\t\t\t\t\tproperty = \"-\" + property;\n\t\t\t\t}\n\t\t\t\tstyle.removeProperty(first2Chars === \"--\" ? property : property.replace(_capsExp, \"-$1\").toLowerCase());\n\t\t\t} else { //note: old versions of IE use \"removeAttribute()\" instead of \"removeProperty()\"\n\t\t\t\tstyle.removeAttribute(property);\n\t\t\t}\n\t\t}\n\t},\n\t_addNonTweeningPT = (plugin, target, property, beginning, end, onlySetAtEnd) => {\n\t\tlet pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);\n\t\tplugin._pt = pt;\n\t\tpt.b = beginning;\n\t\tpt.e = end;\n\t\tplugin._props.push(property);\n\t\treturn pt;\n\t},\n\t_nonConvertibleUnits = {deg:1, rad:1, turn:1},\n\t_nonStandardLayouts = {grid:1, flex:1},\n\t//takes a single value like 20px and converts it to the unit specified, like \"%\", returning only the numeric amount.\n\t_convertToUnit = (target, property, value, unit) => {\n\t\tlet curValue = parseFloat(value) || 0,\n\t\t\tcurUnit = (value + \"\").trim().substr((curValue + \"\").length) || \"px\", // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()\n\t\t\tstyle = _tempDiv.style,\n\t\t\thorizontal = _horizontalExp.test(property),\n\t\t\tisRootSVG = target.tagName.toLowerCase() === \"svg\",\n\t\t\tmeasureProperty = (isRootSVG ? \"client\" : \"offset\") + (horizontal ? \"Width\" : \"Height\"),\n\t\t\tamount = 100,\n\t\t\ttoPixels = unit === \"px\",\n\t\t\ttoPercent = unit === \"%\",\n\t\t\tpx, parent, cache, isSVG;\n\t\tif (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {\n\t\t\treturn curValue;\n\t\t}\n\t\t(curUnit !== \"px\" && !toPixels) && (curValue = _convertToUnit(target, property, value, \"px\"));\n\t\tisSVG = target.getCTM && _isSVG(target);\n\t\tif ((toPercent || curUnit === \"%\") && (_transformProps[property] || ~property.indexOf(\"adius\"))) {\n\t\t\tpx = isSVG ? target.getBBox()[horizontal ? \"width\" : \"height\"] : target[measureProperty];\n\t\t\treturn _round(toPercent ? curValue / px * amount : curValue / 100 * px);\n\t\t}\n\t\tstyle[horizontal ? \"width\" : \"height\"] = amount + (toPixels ? curUnit : unit);\n\t\tparent = ((unit !== \"rem\" && ~property.indexOf(\"adius\")) || (unit === \"em\" && target.appendChild && !isRootSVG)) ? target : target.parentNode;\n\t\tif (isSVG) {\n\t\t\tparent = (target.ownerSVGElement || {}).parentNode;\n\t\t}\n\t\tif (!parent || parent === _doc || !parent.appendChild) {\n\t\t\tparent = _doc.body;\n\t\t}\n\t\tcache = parent._gsap;\n\t\tif (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) {\n\t\t\treturn _round(curValue / cache.width * amount);\n\t\t} else {\n\t\t\tif (toPercent && (property === \"height\" || property === \"width\")) { // if we're dealing with width/height that's inside a container with padding and/or it's a flexbox/grid container, we must apply it to the target itself rather than the _tempDiv in order to ensure complete accuracy, factoring in the parent's padding.\n\t\t\t\tlet v = target.style[property];\n\t\t\t\ttarget.style[property] = amount + unit;\n\t\t\t\tpx = target[measureProperty];\n\t\t\t\tv ? (target.style[property] = v) : _removeProperty(target, property);\n\t\t\t} else {\n\t\t\t\t(toPercent || curUnit === \"%\") && !_nonStandardLayouts[_getComputedProperty(parent, \"display\")] && (style.position = _getComputedProperty(target, \"position\"));\n\t\t\t\t(parent === target) && (style.position = \"static\"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.\n\t\t\t\tparent.appendChild(_tempDiv);\n\t\t\t\tpx = _tempDiv[measureProperty];\n\t\t\t\tparent.removeChild(_tempDiv);\n\t\t\t\tstyle.position = \"absolute\";\n\t\t\t}\n\t\t\tif (horizontal && toPercent) {\n\t\t\t\tcache = _getCache(parent);\n\t\t\t\tcache.time = _ticker.time;\n\t\t\t\tcache.width = parent[measureProperty];\n\t\t\t}\n\t\t}\n\t\treturn _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);\n\t},\n\t_get = (target, property, unit, uncache) => {\n\t\tlet value;\n\t\t_pluginInitted || _initCore();\n\t\tif ((property in _propertyAliases) && property !== \"transform\") {\n\t\t\tproperty = _propertyAliases[property];\n\t\t\tif (~property.indexOf(\",\")) {\n\t\t\t\tproperty = property.split(\",\")[0];\n\t\t\t}\n\t\t}\n\t\tif (_transformProps[property] && property !== \"transform\") {\n\t\t\tvalue = _parseTransform(target, uncache);\n\t\t\tvalue = (property !== \"transformOrigin\") ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + \" \" + value.zOrigin + \"px\";\n\t\t} else {\n\t\t\tvalue = target.style[property];\n\t\t\tif (!value || value === \"auto\" || uncache || ~(value + \"\").indexOf(\"calc(\")) {\n\t\t\t\tvalue = (_specialProps[property] && _specialProps[property](target, property, unit)) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === \"opacity\" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like borderTopLeftRadius\n\t\t\t}\n\t\t}\n\t\treturn unit && !~(value + \"\").trim().indexOf(\" \") ? _convertToUnit(target, property, value, unit) + unit : value;\n\n\t},\n\t_tweenComplexCSSString = function(target, prop, start, end) { // note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n\t\tif (!start || start === \"none\") { // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style (\"clipPath\" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as \"none\" whereas WebkitClipPath reports accurately like \"ellipse(100% 0% at 50% 0%)\", so in this case we must SWITCH to using the prefixed property instead. See https://gsap.com/forums/topic/18310-clippath-doesnt-work-on-ios/\n\t\t\tlet p = _checkPropPrefix(prop, target, 1),\n\t\t\t\ts = p && _getComputedProperty(target, p, 1);\n\t\t\tif (s && s !== start) {\n\t\t\t\tprop = p;\n\t\t\t\tstart = s;\n\t\t\t} else if (prop === \"borderColor\") {\n\t\t\t\tstart = _getComputedProperty(target, \"borderTopColor\"); // Firefox bug: always reports \"borderColor\" as \"\", so we must fall back to borderTopColor. See https://gsap.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/\n\t\t\t}\n\t\t}\n\t\tlet pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString),\n\t\t\tindex = 0,\n\t\t\tmatchIndex = 0,\n\t\t\ta, result,\tstartValues, startNum, color, startValue, endValue, endNum, chunk, endUnit, startUnit, endValues;\n\t\tpt.b = start;\n\t\tpt.e = end;\n\t\tstart += \"\"; // ensure values are strings\n\t\tend += \"\";\n\t\tif (end === \"auto\") {\n\t\t\tstartValue = target.style[prop];\n\t\t\ttarget.style[prop] = end;\n\t\t\tend = _getComputedProperty(target, prop) || end;\n\t\t\tstartValue ? (target.style[prop] = startValue) : _removeProperty(target, prop);\n\t\t}\n\t\ta = [start, end];\n\t\t_colorStringFilter(a); // pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().\n\t\tstart = a[0];\n\t\tend = a[1];\n\t\tstartValues = start.match(_numWithUnitExp) || [];\n\t\tendValues = end.match(_numWithUnitExp) || [];\n\t\tif (endValues.length) {\n\t\t\twhile ((result = _numWithUnitExp.exec(end))) {\n\t\t\t\tendValue = result[0];\n\t\t\t\tchunk = end.substring(index, result.index);\n\t\t\t\tif (color) {\n\t\t\t\t\tcolor = (color + 1) % 5;\n\t\t\t\t} else if (chunk.substr(-5) === \"rgba(\" || chunk.substr(-5) === \"hsla(\") {\n\t\t\t\t\tcolor = 1;\n\t\t\t\t}\n\t\t\t\tif (endValue !== (startValue = startValues[matchIndex++] || \"\")) {\n\t\t\t\t\tstartNum = parseFloat(startValue) || 0;\n\t\t\t\t\tstartUnit = startValue.substr((startNum + \"\").length);\n\t\t\t\t\t(endValue.charAt(1) === \"=\") && (endValue = _parseRelative(startNum, endValue) + startUnit);\n\t\t\t\t\tendNum = parseFloat(endValue);\n\t\t\t\t\tendUnit = endValue.substr((endNum + \"\").length);\n\t\t\t\t\tindex = _numWithUnitExp.lastIndex - endUnit.length;\n\t\t\t\t\tif (!endUnit) { //if something like \"perspective:300\" is passed in and we must add a unit to the end\n\t\t\t\t\t\tendUnit = endUnit || _config.units[prop] || startUnit;\n\t\t\t\t\t\tif (index === end.length) {\n\t\t\t\t\t\t\tend += endUnit;\n\t\t\t\t\t\t\tpt.e += endUnit;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (startUnit !== endUnit) {\n\t\t\t\t\t\tstartNum = _convertToUnit(target, prop, startValue, endUnit) || 0;\n\t\t\t\t\t}\n\t\t\t\t\t// these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\t\t\t\t\tpt._pt = {\n\t\t\t\t\t\t_next: pt._pt,\n\t\t\t\t\t\tp: (chunk || (matchIndex === 1)) ? chunk : \",\", //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n\t\t\t\t\t\ts: startNum,\n\t\t\t\t\t\tc: endNum - startNum,\n\t\t\t\t\t\tm: (color && color < 4) || prop === \"zIndex\" ? Math.round : 0\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t\tpt.c = (index < end.length) ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n\t\t} else {\n\t\t\tpt.r = prop === \"display\" && end === \"none\" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;\n\t\t}\n\t\t_relExp.test(end) && (pt.e = 0); //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n\t\tthis._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus \"this\" would refer to the plugin.\n\t\treturn pt;\n\t},\n\t_keywordToPercent = {top:\"0%\", bottom:\"100%\", left:\"0%\", right:\"100%\", center:\"50%\"},\n\t_convertKeywordsToPercentages = value => {\n\t\tlet split = value.split(\" \"),\n\t\t\tx = split[0],\n\t\t\ty = split[1] || \"50%\";\n\t\tif (x === \"top\" || x === \"bottom\" || y === \"left\" || y === \"right\") { //the user provided them in the wrong order, so flip them\n\t\t\tvalue = x;\n\t\t\tx = y;\n\t\t\ty = value;\n\t\t}\n\t\tsplit[0] = _keywordToPercent[x] || x;\n\t\tsplit[1] = _keywordToPercent[y] || y;\n\t\treturn split.join(\" \");\n\t},\n\t_renderClearProps = (ratio, data) => {\n\t\tif (data.tween && data.tween._time === data.tween._dur) {\n\t\t\tlet target = data.t,\n\t\t\t\tstyle = target.style,\n\t\t\t\tprops = data.u,\n\t\t\t\tcache = target._gsap,\n\t\t\t\tprop, clearTransforms, i;\n\t\t\tif (props === \"all\" || props === true) {\n\t\t\t\tstyle.cssText = \"\";\n\t\t\t\tclearTransforms = 1;\n\t\t\t} else {\n\t\t\t\tprops = props.split(\",\");\n\t\t\t\ti = props.length;\n\t\t\t\twhile (--i > -1) {\n\t\t\t\t\tprop = props[i];\n\t\t\t\t\tif (_transformProps[prop]) {\n\t\t\t\t\t\tclearTransforms = 1;\n\t\t\t\t\t\tprop = (prop === \"transformOrigin\") ? _transformOriginProp : _transformProp;\n\t\t\t\t\t}\n\t\t\t\t\t_removeProperty(target, prop);\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (clearTransforms) {\n\t\t\t\t_removeProperty(target, _transformProp);\n\t\t\t\tif (cache) {\n\t\t\t\t\tcache.svg && target.removeAttribute(\"transform\");\n\t\t\t\t\tstyle.scale = style.rotate = style.translate = \"none\";\n\t\t\t\t\t_parseTransform(target, 1); // force all the cached values back to \"normal\"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.\n\t\t\t\t\tcache.uncache = 1;\n\t\t\t\t\t_removeIndependentTransforms(style);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\t// note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.\n\t_specialProps = {\n\t\tclearProps(plugin, target, property, endValue, tween) {\n\t\t\tif (tween.data !== \"isFromStart\") {\n\t\t\t\tlet pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);\n\t\t\t\tpt.u = endValue;\n\t\t\t\tpt.pr = -10;\n\t\t\t\tpt.tween = tween;\n\t\t\t\tplugin._props.push(property);\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t}\n\t\t/* className feature (about 0.4kb gzipped).\n\t\t, className(plugin, target, property, endValue, tween) {\n\t\t\tlet _renderClassName = (ratio, data) => {\n\t\t\t\t\tdata.css.render(ratio, data.css);\n\t\t\t\t\tif (!ratio || ratio === 1) {\n\t\t\t\t\t\tlet inline = data.rmv,\n\t\t\t\t\t\t\ttarget = data.t,\n\t\t\t\t\t\t\tp;\n\t\t\t\t\t\ttarget.setAttribute(\"class\", ratio ? data.e : data.b);\n\t\t\t\t\t\tfor (p in inline) {\n\t\t\t\t\t\t\t_removeProperty(target, p);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t_getAllStyles = (target) => {\n\t\t\t\t\tlet styles = {},\n\t\t\t\t\t\tcomputed = getComputedStyle(target),\n\t\t\t\t\t\tp;\n\t\t\t\t\tfor (p in computed) {\n\t\t\t\t\t\tif (isNaN(p) && p !== \"cssText\" && p !== \"length\") {\n\t\t\t\t\t\t\tstyles[p] = computed[p];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t_setDefaults(styles, _parseTransform(target, 1));\n\t\t\t\t\treturn styles;\n\t\t\t\t},\n\t\t\t\tstartClassList = target.getAttribute(\"class\"),\n\t\t\t\tstyle = target.style,\n\t\t\t\tcssText = style.cssText,\n\t\t\t\tcache = target._gsap,\n\t\t\t\tclassPT = cache.classPT,\n\t\t\t\tinlineToRemoveAtEnd = {},\n\t\t\t\tdata = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== \"=\") ? endValue : startClassList.replace(new RegExp(\"(?:\\\\s|^)\" + endValue.substr(2) + \"(?![\\\\w-])\"), \"\") + ((endValue.charAt(0) === \"+\") ? \" \" + endValue.substr(2) : \"\")},\n\t\t\t\tchangingVars = {},\n\t\t\t\tstartVars = _getAllStyles(target),\n\t\t\t\ttransformRelated = /(transform|perspective)/i,\n\t\t\t\tendVars, p;\n\t\t\tif (classPT) {\n\t\t\t\tclassPT.r(1, classPT.d);\n\t\t\t\t_removeLinkedListItem(classPT.d.plugin, classPT, \"_pt\");\n\t\t\t}\n\t\t\ttarget.setAttribute(\"class\", data.e);\n\t\t\tendVars = _getAllStyles(target, true);\n\t\t\ttarget.setAttribute(\"class\", startClassList);\n\t\t\tfor (p in endVars) {\n\t\t\t\tif (endVars[p] !== startVars[p] && !transformRelated.test(p)) {\n\t\t\t\t\tchangingVars[p] = endVars[p];\n\t\t\t\t\tif (!style[p] && style[p] !== \"0\") {\n\t\t\t\t\t\tinlineToRemoveAtEnd[p] = 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tcache.classPT = plugin._pt = new PropTween(plugin._pt, target, \"className\", 0, 0, _renderClassName, data, 0, -11);\n\t\t\tif (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://gsap.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.\n\t\t\t\tstyle.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).\n\t\t\t}\n\t\t\t_parseTransform(target, true); //to clear the caching of transforms\n\t\t\tdata.css = new gsap.plugins.css();\n\t\t\tdata.css.init(target, changingVars, tween);\n\t\t\tplugin._props.push(...data.css._props);\n\t\t\treturn 1;\n\t\t}\n\t\t*/\n\t},\n\n\n\n\n\n\t/*\n\t * --------------------------------------------------------------------------------------\n\t * TRANSFORMS\n\t * --------------------------------------------------------------------------------------\n\t */\n\t_identity2DMatrix = [1,0,0,1,0,0],\n\t_rotationalProperties = {},\n\t_isNullTransform = value => (value === \"matrix(1, 0, 0, 1, 0, 0)\" || value === \"none\" || !value),\n\t_getComputedTransformMatrixAsArray = target => {\n\t\tlet matrixString = _getComputedProperty(target, _transformProp);\n\t\treturn _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round);\n\t},\n\t_getMatrix = (target, force2D) => {\n\t\tlet cache = target._gsap || _getCache(target),\n\t\t\tstyle = target.style,\n\t\t\tmatrix = _getComputedTransformMatrixAsArray(target),\n\t\t\tparent, nextSibling, temp, addedToDOM;\n\t\tif (cache.svg && target.getAttribute(\"transform\")) {\n\t\t\ttemp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like \"translate(50,60) rotate(135,0,0)\" are parsed because it mashes it into a matrix.\n\t\t\tmatrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];\n\t\t\treturn (matrix.join(\",\") === \"1,0,0,1,0,0\") ? _identity2DMatrix : matrix;\n\t\t} else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397\n\t\t\t//browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not \"none\". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).\n\t\t\ttemp = style.display;\n\t\t\tstyle.display = \"block\";\n\t\t\tparent = target.parentNode;\n\t\t\tif (!parent || (!target.offsetParent && !target.getBoundingClientRect().width)) { // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375. Note: position: fixed elements report a null offsetParent but they could also be invisible because they're in an ancestor with display: none, so we check getBoundingClientRect(). We only want to alter the DOM if we absolutely have to because it can cause iframe content to reload, like a Vimeo video.\n\t\t\t\taddedToDOM = 1; //flag\n\t\t\t\tnextSibling = target.nextElementSibling;\n\t\t\t\t_docElement.appendChild(target); //we must add it to the DOM in order to get values properly\n\t\t\t}\n\t\t\tmatrix = _getComputedTransformMatrixAsArray(target);\n\t\t\ttemp ? (style.display = temp) : _removeProperty(target, \"display\");\n\t\t\tif (addedToDOM) {\n\t\t\t\tnextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);\n\t\t\t}\n\t\t}\n\t\treturn (force2D && matrix.length > 6) ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;\n\t},\n\t_applySVGOrigin = (target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) => {\n\t\tlet cache = target._gsap,\n\t\t\tmatrix = matrixArray || _getMatrix(target, true),\n\t\t\txOriginOld = cache.xOrigin || 0,\n\t\t\tyOriginOld = cache.yOrigin || 0,\n\t\t\txOffsetOld = cache.xOffset || 0,\n\t\t\tyOffsetOld = cache.yOffset || 0,\n\t\t\t[a, b, c, d, tx, ty] = matrix,\n\t\t\toriginSplit = origin.split(\" \"),\n\t\t\txOrigin = parseFloat(originSplit[0]) || 0,\n\t\t\tyOrigin = parseFloat(originSplit[1]) || 0,\n\t\t\tbounds, determinant, x, y;\n\t\tif (!originIsAbsolute) {\n\t\t\tbounds = _getBBox(target);\n\t\t\txOrigin = bounds.x + (~originSplit[0].indexOf(\"%\") ? xOrigin / 100 * bounds.width : xOrigin);\n\t\t\tyOrigin = bounds.y + (~((originSplit[1] || originSplit[0]).indexOf(\"%\")) ? yOrigin / 100 * bounds.height : yOrigin);\n\t\t\t// if (!(\"xOrigin\" in cache) && (xOrigin || yOrigin)) { // added in 3.12.3, reverted in 3.12.4; requires more exploration\n\t\t\t// \txOrigin -= bounds.x;\n\t\t\t// \tyOrigin -= bounds.y;\n\t\t\t// }\n\t\t} else if (matrix !== _identity2DMatrix && (determinant = (a * d - b * c))) { //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.\n\t\t\tx = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + ((c * ty - d * tx) / determinant);\n\t\t\ty = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - ((a * ty - b * tx) / determinant);\n\t\t\txOrigin = x;\n\t\t\tyOrigin = y;\n\t\t\t// theory: we only had to do this for smoothing and it assumes that the previous one was not originIsAbsolute.\n\t\t}\n\t\tif (smooth || (smooth !== false && cache.smooth)) {\n\t\t\ttx = xOrigin - xOriginOld;\n\t\t\tty = yOrigin - yOriginOld;\n\t\t\tcache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;\n\t\t\tcache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;\n\t\t} else {\n\t\t\tcache.xOffset = cache.yOffset = 0;\n\t\t}\n\t\tcache.xOrigin = xOrigin;\n\t\tcache.yOrigin = yOrigin;\n\t\tcache.smooth = !!smooth;\n\t\tcache.origin = origin;\n\t\tcache.originIsAbsolute = !!originIsAbsolute;\n\t\ttarget.style[_transformOriginProp] = \"0px 0px\"; //otherwise, if someone sets an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).\n\t\tif (pluginToAddPropTweensTo) {\n\t\t\t_addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOrigin\", xOriginOld, xOrigin);\n\t\t\t_addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOrigin\", yOriginOld, yOrigin);\n\t\t\t_addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOffset\", xOffsetOld, cache.xOffset);\n\t\t\t_addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOffset\", yOffsetOld, cache.yOffset);\n\t\t}\n\t\ttarget.setAttribute(\"data-svg-origin\", xOrigin + \" \" + yOrigin);\n\t},\n\t_parseTransform = (target, uncache) => {\n\t\tlet cache = target._gsap || new GSCache(target);\n\t\tif (\"x\" in cache && !uncache && !cache.uncache) {\n\t\t\treturn cache;\n\t\t}\n\t\tlet style = target.style,\n\t\t\tinvertedScaleX = cache.scaleX < 0,\n\t\t\tpx = \"px\",\n\t\t\tdeg = \"deg\",\n\t\t\tcs = getComputedStyle(target),\n\t\t\torigin = _getComputedProperty(target, _transformOriginProp) || \"0\",\n\t\t\tx, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, perspective, xOrigin, yOrigin,\n\t\t\tmatrix, angle, cos, sin, a, b, c, d, a12, a22, t1, t2, t3, a13, a23, a33, a42, a43, a32;\n\t\tx = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;\n\t\tscaleX = scaleY = 1;\n\t\tcache.svg = !!(target.getCTM && _isSVG(target));\n\n\t\tif (cs.translate) { // accommodate independent transforms by combining them into normal ones.\n\t\t\tif (cs.translate !== \"none\" || cs.scale !== \"none\" || cs.rotate !== \"none\") {\n\t\t\t\tstyle[_transformProp] = (cs.translate !== \"none\" ? \"translate3d(\" + (cs.translate + \" 0 0\").split(\" \").slice(0, 3).join(\", \") + \") \" : \"\") + (cs.rotate !== \"none\" ? \"rotate(\" + cs.rotate + \") \" : \"\") + (cs.scale !== \"none\" ? \"scale(\" + cs.scale.split(\" \").join(\",\") + \") \" : \"\") + (cs[_transformProp] !== \"none\" ? cs[_transformProp] : \"\");\n\t\t\t}\n\t\t\tstyle.scale = style.rotate = style.translate = \"none\";\n\t\t}\n\n\t\tmatrix = _getMatrix(target, cache.svg);\n\t\tif (cache.svg) {\n\t\t\tif (cache.uncache) { // if cache.uncache is true (and maybe if origin is 0,0), we need to set element.style.transformOrigin = (cache.xOrigin - bbox.x) + \"px \" + (cache.yOrigin - bbox.y) + \"px\". Previously we let the data-svg-origin stay instead, but when introducing revert(), it complicated things.\n\t\t\t\tt2 = target.getBBox();\n\t\t\t\torigin = (cache.xOrigin - t2.x) + \"px \" + (cache.yOrigin - t2.y) + \"px\";\n\t\t\t\tt1 = \"\";\n\t\t\t} else {\n\t\t\t\tt1 = !uncache && target.getAttribute(\"data-svg-origin\"); // Remember, to work around browser inconsistencies we always force SVG elements' transformOrigin to 0,0 and offset the translation accordingly.\n\t\t\t}\n\t\t\t_applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);\n\t\t}\n\t\txOrigin = cache.xOrigin || 0;\n\t\tyOrigin = cache.yOrigin || 0;\n\t\tif (matrix !== _identity2DMatrix) {\n\t\t\ta = matrix[0]; //a11\n\t\t\tb = matrix[1]; //a21\n\t\t\tc = matrix[2]; //a31\n\t\t\td = matrix[3]; //a41\n\t\t\tx = a12 = matrix[4];\n\t\t\ty = a22 = matrix[5];\n\n\t\t\t//2D matrix\n\t\t\tif (matrix.length === 6) {\n\t\t\t\tscaleX = Math.sqrt(a * a + b * b);\n\t\t\t\tscaleY = Math.sqrt(d * d + c * c);\n\t\t\t\trotation = (a || b) ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).\n\t\t\t\tskewX = (c || d) ? _atan2(c, d) * _RAD2DEG + rotation : 0;\n\t\t\t\tskewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD)));\n\t\t\t\tif (cache.svg) {\n\t\t\t\t\tx -= xOrigin - (xOrigin * a + yOrigin * c);\n\t\t\t\t\ty -= yOrigin - (xOrigin * b + yOrigin * d);\n\t\t\t\t}\n\n\t\t\t//3D matrix\n\t\t\t} else {\n\t\t\t\ta32 = matrix[6];\n\t\t\t\ta42 = matrix[7];\n\t\t\t\ta13 = matrix[8];\n\t\t\t\ta23 = matrix[9];\n\t\t\t\ta33 = matrix[10];\n\t\t\t\ta43 = matrix[11];\n\t\t\t\tx = matrix[12];\n\t\t\t\ty = matrix[13];\n\t\t\t\tz = matrix[14];\n\n\t\t\t\tangle = _atan2(a32, a33);\n\t\t\t\trotationX = angle * _RAD2DEG;\n\t\t\t\t//rotationX\n\t\t\t\tif (angle) {\n\t\t\t\t\tcos = Math.cos(-angle);\n\t\t\t\t\tsin = Math.sin(-angle);\n\t\t\t\t\tt1 = a12*cos+a13*sin;\n\t\t\t\t\tt2 = a22*cos+a23*sin;\n\t\t\t\t\tt3 = a32*cos+a33*sin;\n\t\t\t\t\ta13 = a12*-sin+a13*cos;\n\t\t\t\t\ta23 = a22*-sin+a23*cos;\n\t\t\t\t\ta33 = a32*-sin+a33*cos;\n\t\t\t\t\ta43 = a42*-sin+a43*cos;\n\t\t\t\t\ta12 = t1;\n\t\t\t\t\ta22 = t2;\n\t\t\t\t\ta32 = t3;\n\t\t\t\t}\n\t\t\t\t//rotationY\n\t\t\t\tangle = _atan2(-c, a33);\n\t\t\t\trotationY = angle * _RAD2DEG;\n\t\t\t\tif (angle) {\n\t\t\t\t\tcos = Math.cos(-angle);\n\t\t\t\t\tsin = Math.sin(-angle);\n\t\t\t\t\tt1 = a*cos-a13*sin;\n\t\t\t\t\tt2 = b*cos-a23*sin;\n\t\t\t\t\tt3 = c*cos-a33*sin;\n\t\t\t\t\ta43 = d*sin+a43*cos;\n\t\t\t\t\ta = t1;\n\t\t\t\t\tb = t2;\n\t\t\t\t\tc = t3;\n\t\t\t\t}\n\t\t\t\t//rotationZ\n\t\t\t\tangle = _atan2(b, a);\n\t\t\t\trotation = angle * _RAD2DEG;\n\t\t\t\tif (angle) {\n\t\t\t\t\tcos = Math.cos(angle);\n\t\t\t\t\tsin = Math.sin(angle);\n\t\t\t\t\tt1 = a*cos+b*sin;\n\t\t\t\t\tt2 = a12*cos+a22*sin;\n\t\t\t\t\tb = b*cos-a*sin;\n\t\t\t\t\ta22 = a22*cos-a12*sin;\n\t\t\t\t\ta = t1;\n\t\t\t\t\ta12 = t2;\n\t\t\t\t}\n\n\t\t\t\tif (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) { //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.\n\t\t\t\t\trotationX = rotation = 0;\n\t\t\t\t\trotationY = 180 - rotationY;\n\t\t\t\t}\n\t\t\t\tscaleX = _round(Math.sqrt(a * a + b * b + c * c));\n\t\t\t\tscaleY = _round(Math.sqrt(a22 * a22 + a32 * a32));\n\t\t\t\tangle = _atan2(a12, a22);\n\t\t\t\tskewX = (Math.abs(angle) > 0.0002) ? angle * _RAD2DEG : 0;\n\t\t\t\tperspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0;\n\t\t\t}\n\n\t\t\tif (cache.svg) { //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).\n\t\t\t\tt1 = target.getAttribute(\"transform\");\n\t\t\t\tcache.forceCSS = target.setAttribute(\"transform\", \"\") || (!_isNullTransform(_getComputedProperty(target, _transformProp)));\n\t\t\t\tt1 && target.setAttribute(\"transform\", t1);\n\t\t\t}\n\t\t}\n\n\t\tif (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {\n\t\t\tif (invertedScaleX) {\n\t\t\t\tscaleX *= -1;\n\t\t\t\tskewX += (rotation <= 0) ? 180 : -180;\n\t\t\t\trotation += (rotation <= 0) ? 180 : -180;\n\t\t\t} else {\n\t\t\t\tscaleY *= -1;\n\t\t\t\tskewX += (skewX <= 0) ? 180 : -180;\n\t\t\t}\n\t\t}\n\t\tuncache = uncache || cache.uncache;\n\t\tcache.x = x - ((cache.xPercent = x && ((!uncache && cache.xPercent) || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px;\n\t\tcache.y = y - ((cache.yPercent = y && ((!uncache && cache.yPercent) || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px;\n\t\tcache.z = z + px;\n\t\tcache.scaleX = _round(scaleX);\n\t\tcache.scaleY = _round(scaleY);\n\t\tcache.rotation = _round(rotation) + deg;\n\t\tcache.rotationX = _round(rotationX) + deg;\n\t\tcache.rotationY = _round(rotationY) + deg;\n\t\tcache.skewX = skewX + deg;\n\t\tcache.skewY = skewY + deg;\n\t\tcache.transformPerspective = perspective + px;\n\t\tif ((cache.zOrigin = parseFloat(origin.split(\" \")[2]) || (!uncache && cache.zOrigin) || 0)) {\n\t\t\tstyle[_transformOriginProp] = _firstTwoOnly(origin);\n\t\t}\n\t\tcache.xOffset = cache.yOffset = 0;\n\t\tcache.force3D = _config.force3D;\n\t\tcache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;\n\t\tcache.uncache = 0;\n\t\treturn cache;\n\t},\n\t_firstTwoOnly = value => (value = value.split(\" \"))[0] + \" \" + value[1], //for handling transformOrigin values, stripping out the 3rd dimension\n\t_addPxTranslate = (target, start, value) => {\n\t\tlet unit = getUnit(start);\n\t\treturn _round(parseFloat(start) + parseFloat(_convertToUnit(target, \"x\", value + \"px\", unit))) + unit;\n\t},\n\t_renderNon3DTransforms = (ratio, cache) => {\n\t\tcache.z = \"0px\";\n\t\tcache.rotationY = cache.rotationX = \"0deg\";\n\t\tcache.force3D = 0;\n\t\t_renderCSSTransforms(ratio, cache);\n\t},\n\t_zeroDeg = \"0deg\",\n\t_zeroPx = \"0px\",\n\t_endParenthesis = \") \",\n\t_renderCSSTransforms = function(ratio, cache) {\n\t\tlet {xPercent, yPercent, x, y, z, rotation, rotationY, rotationX, skewX, skewY, scaleX, scaleY, transformPerspective, force3D, target, zOrigin} = cache || this,\n\t\t\ttransforms = \"\",\n\t\t\tuse3D = (force3D === \"auto\" && ratio && ratio !== 1) || force3D === true;\n\n\t\t// Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)\n\t\tif (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {\n\t\t\tlet angle = parseFloat(rotationY) * _DEG2RAD,\n\t\t\t\ta13 = Math.sin(angle),\n\t\t\t\ta33 = Math.cos(angle),\n\t\t\t\tcos;\n\t\t\tangle = parseFloat(rotationX) * _DEG2RAD;\n\t\t\tcos = Math.cos(angle);\n\t\t\tx = _addPxTranslate(target, x, a13 * cos * -zOrigin);\n\t\t\ty = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);\n\t\t\tz = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);\n\t\t}\n\n\t\tif (transformPerspective !== _zeroPx) {\n\t\t\ttransforms += \"perspective(\" + transformPerspective + _endParenthesis;\n\t\t}\n\t\tif (xPercent || yPercent) {\n\t\t\ttransforms += \"translate(\" + xPercent + \"%, \" + yPercent + \"%) \";\n\t\t}\n\t\tif (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {\n\t\t\ttransforms += (z !== _zeroPx || use3D) ? \"translate3d(\" + x + \", \" + y + \", \" + z + \") \" : \"translate(\" + x + \", \" + y + _endParenthesis;\n\t\t}\n\t\tif (rotation !== _zeroDeg) {\n\t\t\ttransforms += \"rotate(\" + rotation + _endParenthesis;\n\t\t}\n\t\tif (rotationY !== _zeroDeg) {\n\t\t\ttransforms += \"rotateY(\" + rotationY + _endParenthesis;\n\t\t}\n\t\tif (rotationX !== _zeroDeg) {\n\t\t\ttransforms += \"rotateX(\" + rotationX + _endParenthesis;\n\t\t}\n\t\tif (skewX !== _zeroDeg || skewY !== _zeroDeg) {\n\t\t\ttransforms += \"skew(\" + skewX + \", \" + skewY + _endParenthesis;\n\t\t}\n\t\tif (scaleX !== 1 || scaleY !== 1) {\n\t\t\ttransforms += \"scale(\" + scaleX + \", \" + scaleY + _endParenthesis;\n\t\t}\n\t\ttarget.style[_transformProp] = transforms || \"translate(0, 0)\";\n\t},\n\t_renderSVGTransforms = function(ratio, cache) {\n\t\tlet {xPercent, yPercent, x, y, rotation, skewX, skewY, scaleX, scaleY, target, xOrigin, yOrigin, xOffset, yOffset, forceCSS} = cache || this,\n\t\t\ttx = parseFloat(x),\n\t\t\tty = parseFloat(y),\n\t\t\ta11, a21, a12, a22, temp;\n\t\trotation = parseFloat(rotation);\n\t\tskewX = parseFloat(skewX);\n\t\tskewY = parseFloat(skewY);\n\t\tif (skewY) { //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.\n\t\t\tskewY = parseFloat(skewY);\n\t\t\tskewX += skewY;\n\t\t\trotation += skewY;\n\t\t}\n\t\tif (rotation || skewX) {\n\t\t\trotation *= _DEG2RAD;\n\t\t\tskewX *= _DEG2RAD;\n\t\t\ta11 = Math.cos(rotation) * scaleX;\n\t\t\ta21 = Math.sin(rotation) * scaleX;\n\t\t\ta12 = Math.sin(rotation - skewX) * -scaleY;\n\t\t\ta22 = Math.cos(rotation - skewX) * scaleY;\n\t\t\tif (skewX) {\n\t\t\t\tskewY *= _DEG2RAD;\n\t\t\t\ttemp = Math.tan(skewX - skewY);\n\t\t\t\ttemp = Math.sqrt(1 + temp * temp);\n\t\t\t\ta12 *= temp;\n\t\t\t\ta22 *= temp;\n\t\t\t\tif (skewY) {\n\t\t\t\t\ttemp = Math.tan(skewY);\n\t\t\t\t\ttemp = Math.sqrt(1 + temp * temp);\n\t\t\t\t\ta11 *= temp;\n\t\t\t\t\ta21 *= temp;\n\t\t\t\t}\n\t\t\t}\n\t\t\ta11 = _round(a11);\n\t\t\ta21 = _round(a21);\n\t\t\ta12 = _round(a12);\n\t\t\ta22 = _round(a22);\n\t\t} else {\n\t\t\ta11 = scaleX;\n\t\t\ta22 = scaleY;\n\t\t\ta21 = a12 = 0;\n\t\t}\n\t\tif ((tx && !~(x + \"\").indexOf(\"px\")) || (ty && !~(y + \"\").indexOf(\"px\"))) {\n\t\t\ttx = _convertToUnit(target, \"x\", x, \"px\");\n\t\t\tty = _convertToUnit(target, \"y\", y, \"px\");\n\t\t}\n\t\tif (xOrigin || yOrigin || xOffset || yOffset) {\n\t\t\ttx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);\n\t\t\tty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);\n\t\t}\n\t\tif (xPercent || yPercent) {\n\t\t\t//The SVG spec doesn't support percentage-based translation in the \"transform\" attribute, so we merge it into the translation to simulate it.\n\t\t\ttemp = target.getBBox();\n\t\t\ttx = _round(tx + xPercent / 100 * temp.width);\n\t\t\tty = _round(ty + yPercent / 100 * temp.height);\n\t\t}\n\t\ttemp = \"matrix(\" + a11 + \",\" + a21 + \",\" + a12 + \",\" + a22 + \",\" + tx + \",\" + ty + \")\";\n\t\ttarget.setAttribute(\"transform\", temp);\n\t\tforceCSS && (target.style[_transformProp] = temp); //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the transform attribute changes!)\n\t},\n\t_addRotationalPropTween = function(plugin, target, property, startNum, endValue) {\n\t\tlet cap = 360,\n\t\t\tisString = _isString(endValue),\n\t\t\tendNum = parseFloat(endValue) * ((isString && ~endValue.indexOf(\"rad\")) ? _RAD2DEG : 1),\n\t\t\tchange = endNum - startNum,\n\t\t\tfinalValue = (startNum + change) + \"deg\",\n\t\t\tdirection, pt;\n\t\tif (isString) {\n\t\t\tdirection = endValue.split(\"_\")[1];\n\t\t\tif (direction === \"short\") {\n\t\t\t\tchange %= cap;\n\t\t\t\tif (change !== change % (cap / 2)) {\n\t\t\t\t\tchange += (change < 0) ? cap : -cap;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (direction === \"cw\" && change < 0) {\n\t\t\t\tchange = ((change + cap * _bigNum) % cap) - ~~(change / cap) * cap;\n\t\t\t} else if (direction === \"ccw\" && change > 0) {\n\t\t\t\tchange = ((change - cap * _bigNum) % cap) - ~~(change / cap) * cap;\n\t\t\t}\n\t\t}\n\t\tplugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);\n\t\tpt.e = finalValue;\n\t\tpt.u = \"deg\";\n\t\tplugin._props.push(property);\n\t\treturn pt;\n\t},\n\t_assign = (target, source) => { // Internet Explorer doesn't have Object.assign(), so we recreate it here.\n\t\tfor (let p in source) {\n\t\t\ttarget[p] = source[p];\n\t\t}\n\t\treturn target;\n\t},\n\t_addRawTransformPTs = (plugin, transforms, target) => { //for handling cases where someone passes in a whole transform string, like transform: \"scale(2, 3) rotate(20deg) translateY(30em)\"\n\t\tlet startCache = _assign({}, target._gsap),\n\t\t\texclude = \"perspective,force3D,transformOrigin,svgOrigin\",\n\t\t\tstyle = target.style,\n\t\t\tendCache, p, startValue, endValue, startNum, endNum, startUnit, endUnit;\n\t\tif (startCache.svg) {\n\t\t\tstartValue = target.getAttribute(\"transform\");\n\t\t\ttarget.setAttribute(\"transform\", \"\");\n\t\t\tstyle[_transformProp] = transforms;\n\t\t\tendCache = _parseTransform(target, 1);\n\t\t\t_removeProperty(target, _transformProp);\n\t\t\ttarget.setAttribute(\"transform\", startValue);\n\t\t} else {\n\t\t\tstartValue = getComputedStyle(target)[_transformProp];\n\t\t\tstyle[_transformProp] = transforms;\n\t\t\tendCache = _parseTransform(target, 1);\n\t\t\tstyle[_transformProp] = startValue;\n\t\t}\n\t\tfor (p in _transformProps) {\n\t\t\tstartValue = startCache[p];\n\t\t\tendValue = endCache[p];\n\t\t\tif (startValue !== endValue && exclude.indexOf(p) < 0) { //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.\n\t\t\t\tstartUnit = getUnit(startValue);\n\t\t\t\tendUnit = getUnit(endValue);\n\t\t\t\tstartNum = (startUnit !== endUnit) ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);\n\t\t\t\tendNum = parseFloat(endValue);\n\t\t\t\tplugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp);\n\t\t\t\tplugin._pt.u = endUnit || 0;\n\t\t\t\tplugin._props.push(p);\n\t\t\t}\n\t\t}\n\t\t_assign(endCache, startCache);\n\t};\n\n// handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.\n_forEachName(\"padding,margin,Width,Radius\", (name, index) => {\n\tlet t = \"Top\",\n\t\tr = \"Right\",\n\t\tb = \"Bottom\",\n\t\tl = \"Left\",\n\t\tprops = (index < 3 ? [t,r,b,l] : [t+l, t+r, b+r, b+l]).map(side => index < 2 ? name + side : \"border\" + side + name);\n\t_specialProps[(index > 1 ? \"border\" + name : name)] = function(plugin, target, property, endValue, tween) {\n\t\tlet a, vars;\n\t\tif (arguments.length < 4) { // getter, passed target, property, and unit (from _get())\n\t\t\ta = props.map(prop => _get(plugin, prop, property));\n\t\t\tvars = a.join(\" \");\n\t\t\treturn vars.split(a[0]).length === 5 ? a[0] : vars;\n\t\t}\n\t\ta = (endValue + \"\").split(\" \");\n\t\tvars = {};\n\t\tprops.forEach((prop, i) => vars[prop] = a[i] = a[i] || a[(((i - 1) / 2) | 0)]);\n\t\tplugin.init(target, vars, tween);\n\t}\n});\n\n\nexport const CSSPlugin = {\n\tname: \"css\",\n\tregister: _initCore,\n\ttargetTest(target) {\n\t\treturn target.style && target.nodeType;\n\t},\n\tinit(target, vars, tween, index, targets) {\n\t\tlet props = this._props,\n\t\t\tstyle = target.style,\n\t\t\tstartAt = tween.vars.startAt,\n\t\t\tstartValue, endValue, endNum, startNum, type, specialProp, p, startUnit, endUnit, relative, isTransformRelated, transformPropTween, cache, smooth, hasPriority, inlineProps;\n\t\t_pluginInitted || _initCore();\n\t\t// we may call init() multiple times on the same plugin instance, like when adding special properties, so make sure we don't overwrite the revert data or inlineProps\n\t\tthis.styles = this.styles || _getStyleSaver(target);\n\t\tinlineProps = this.styles.props;\n\t\tthis.tween = tween;\n\t\tfor (p in vars) {\n\t\t\tif (p === \"autoRound\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tendValue = vars[p];\n\t\t\tif (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) { // plugins\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\ttype = typeof(endValue);\n\t\t\tspecialProp = _specialProps[p];\n\t\t\tif (type === \"function\") {\n\t\t\t\tendValue = endValue.call(tween, index, target, targets);\n\t\t\t\ttype = typeof(endValue);\n\t\t\t}\n\t\t\tif (type === \"string\" && ~endValue.indexOf(\"random(\")) {\n\t\t\t\tendValue = _replaceRandom(endValue);\n\t\t\t}\n\t\t\tif (specialProp) {\n\t\t\t\tspecialProp(this, target, p, endValue, tween) && (hasPriority = 1);\n\t\t\t} else if (p.substr(0,2) === \"--\") { //CSS variable\n\t\t\t\tstartValue = (getComputedStyle(target).getPropertyValue(p) + \"\").trim();\n\t\t\t\tendValue += \"\";\n\t\t\t\t_colorExp.lastIndex = 0;\n\t\t\t\tif (!_colorExp.test(startValue)) { // colors don't have units\n\t\t\t\t\tstartUnit = getUnit(startValue);\n\t\t\t\t\tendUnit = getUnit(endValue);\n\t\t\t\t}\n\t\t\t\tendUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);\n\t\t\t\tthis.add(style, \"setProperty\", startValue, endValue, index, targets, 0, 0, p);\n\t\t\t\tprops.push(p);\n\t\t\t\tinlineProps.push(p, 0, style[p]);\n\t\t\t} else if (type !== \"undefined\") {\n\t\t\t\tif (startAt && p in startAt) { // in case someone hard-codes a complex value as the start, like top: \"calc(2vh / 2)\". Without this, it'd use the computed value (always in px)\n\t\t\t\t\tstartValue = typeof(startAt[p]) === \"function\" ? startAt[p].call(tween, index, target, targets) : startAt[p];\n\t\t\t\t\t_isString(startValue) && ~startValue.indexOf(\"random(\") && (startValue = _replaceRandom(startValue));\n\t\t\t\t\tgetUnit(startValue + \"\") || startValue === \"auto\" || (startValue += _config.units[p] || getUnit(_get(target, p)) || \"\"); // for cases when someone passes in a unitless value like {x: 100}; if we try setting translate(100, 0px) it won't work.\n\t\t\t\t\t(startValue + \"\").charAt(1) === \"=\" && (startValue = _get(target, p)); // can't work with relative values\n\t\t\t\t} else {\n\t\t\t\t\tstartValue = _get(target, p);\n\t\t\t\t}\n\t\t\t\tstartNum = parseFloat(startValue);\n\t\t\t\trelative = (type === \"string\" && endValue.charAt(1) === \"=\") && endValue.substr(0, 2);\n\t\t\t\trelative && (endValue = endValue.substr(2));\n\t\t\t\tendNum = parseFloat(endValue);\n\t\t\t\tif (p in _propertyAliases) {\n\t\t\t\t\tif (p === \"autoAlpha\") { //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.\n\t\t\t\t\t\tif (startNum === 1 && _get(target, \"visibility\") === \"hidden\" && endNum) { //if visibility is initially set to \"hidden\", we should interpret that as intent to make opacity 0 (a convenience)\n\t\t\t\t\t\t\tstartNum = 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinlineProps.push(\"visibility\", 0, style.visibility);\n\t\t\t\t\t\t_addNonTweeningPT(this, style, \"visibility\", startNum ? \"inherit\" : \"hidden\", endNum ? \"inherit\" : \"hidden\", !endNum);\n\t\t\t\t\t}\n\t\t\t\t\tif (p !== \"scale\" && p !== \"transform\") {\n\t\t\t\t\t\tp = _propertyAliases[p];\n\t\t\t\t\t\t~p.indexOf(\",\") && (p = p.split(\",\")[0]);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tisTransformRelated = (p in _transformProps);\n\n\t\t\t\t//--- TRANSFORM-RELATED ---\n\t\t\t\tif (isTransformRelated) {\n\t\t\t\t\tthis.styles.save(p);\n\t\t\t\t\tif (!transformPropTween) {\n\t\t\t\t\t\tcache = target._gsap;\n\t\t\t\t\t\t(cache.renderTransform && !vars.parseTransform) || _parseTransform(target, vars.parseTransform); // if, for example, gsap.set(... {transform:\"translateX(50vw)\"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.\n\t\t\t\t\t\tsmooth = (vars.smoothOrigin !== false && cache.smooth);\n\t\t\t\t\t\ttransformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)\n\t\t\t\t\t\ttransformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.\n\t\t\t\t\t}\n\t\t\t\t\tif (p === \"scale\") {\n\t\t\t\t\t\tthis._pt = new PropTween(this._pt, cache, \"scaleY\", cache.scaleY, ((relative ? _parseRelative(cache.scaleY, relative + endNum) : endNum) - cache.scaleY) || 0, _renderCSSProp);\n\t\t\t\t\t\tthis._pt.u = 0;\n\t\t\t\t\t\tprops.push(\"scaleY\", p);\n\t\t\t\t\t\tp += \"X\";\n\t\t\t\t\t} else if (p === \"transformOrigin\") {\n\t\t\t\t\t\tinlineProps.push(_transformOriginProp, 0, style[_transformOriginProp]);\n\t\t\t\t\t\tendValue = _convertKeywordsToPercentages(endValue); //in case something like \"left top\" or \"bottom right\" is passed in. Convert to percentages.\n\t\t\t\t\t\tif (cache.svg) {\n\t\t\t\t\t\t\t_applySVGOrigin(target, endValue, 0, smooth, 0, this);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tendUnit = parseFloat(endValue.split(\" \")[2]) || 0; //handle the zOrigin separately!\n\t\t\t\t\t\t\tendUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, \"zOrigin\", cache.zOrigin, endUnit);\n\t\t\t\t\t\t\t_addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (p === \"svgOrigin\") {\n\t\t\t\t\t\t_applySVGOrigin(target, endValue, 1, smooth, 0, this);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (p in _rotationalProperties) {\n\t\t\t\t\t\t_addRotationalPropTween(this, cache, p, startNum, relative ? _parseRelative(startNum, relative + endValue) : endValue);\n\t\t\t\t\t\tcontinue;\n\n\t\t\t\t\t} else if (p === \"smoothOrigin\") {\n\t\t\t\t\t\t_addNonTweeningPT(this, cache, \"smooth\", cache.smooth, endValue);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (p === \"force3D\") {\n\t\t\t\t\t\tcache[p] = endValue;\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (p === \"transform\") {\n\t\t\t\t\t\t_addRawTransformPTs(this, endValue, target);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t} else if (!(p in style)) {\n\t\t\t\t\tp = _checkPropPrefix(p) || p;\n\t\t\t\t}\n\n\t\t\t\tif (isTransformRelated || ((endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && (p in style))) {\n\t\t\t\t\tstartUnit = (startValue + \"\").substr((startNum + \"\").length);\n\t\t\t\t\tendNum || (endNum = 0); // protect against NaN\n\t\t\t\t\tendUnit = getUnit(endValue) || ((p in _config.units) ? _config.units[p] : startUnit);\n\t\t\t\t\tstartUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit));\n\t\t\t\t\tthis._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, (!isTransformRelated && (endUnit === \"px\" || p === \"zIndex\") && vars.autoRound !== false) ? _renderRoundedCSSProp : _renderCSSProp);\n\t\t\t\t\tthis._pt.u = endUnit || 0;\n\t\t\t\t\tif (startUnit !== endUnit && endUnit !== \"%\") { //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a \"b\" (beginning) property and point to a render method that handles that. (performance optimization)\n\t\t\t\t\t\tthis._pt.b = startValue;\n\t\t\t\t\t\tthis._pt.r = _renderCSSPropWithBeginning;\n\t\t\t\t\t}\n\t\t\t\t} else if (!(p in style)) {\n\t\t\t\t\tif (p in target) { //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.\n\t\t\t\t\t\tthis.add(target, p, startValue || target[p], relative ? relative + endValue : endValue, index, targets);\n\t\t\t\t\t} else if (p !== \"parseTransform\") {\n\t\t\t\t\t\t_missingPlugin(p, endValue);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t_tweenComplexCSSString.call(this, target, p, startValue, relative ? relative + endValue : endValue);\n\t\t\t\t}\n\t\t\t\tisTransformRelated || (p in style ? inlineProps.push(p, 0, style[p]) : typeof(target[p]) === \"function\" ? inlineProps.push(p, 2, target[p]()) : inlineProps.push(p, 1, startValue || target[p]));\n\t\t\t\tprops.push(p);\n\t\t\t}\n\t\t}\n\t\thasPriority && _sortPropTweensByPriority(this);\n\n\t},\n\trender(ratio, data) {\n\t\tif (data.tween._time || !_reverting()) {\n\t\t\tlet pt = data._pt;\n\t\t\twhile (pt) {\n\t\t\t\tpt.r(ratio, pt.d);\n\t\t\t\tpt = pt._next;\n\t\t\t}\n\t\t} else {\n\t\t\tdata.styles.revert();\n\t\t}\n\t},\n\tget: _get,\n\taliases: _propertyAliases,\n\tgetSetter(target, property, plugin) { //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like \"x\" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.\n\t\tlet p = _propertyAliases[property];\n\t\t(p && p.indexOf(\",\") < 0) && (property = p);\n\t\treturn (property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, \"x\"))) ? (plugin && _recentSetterPlugin === plugin ? (property === \"scale\" ? _setterScale : _setterTransform) : (_recentSetterPlugin = plugin || {}) && (property === \"scale\" ? _setterScaleWithRender : _setterTransformWithRender)) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf(\"-\") ? _setterCSSProp : _getSetter(target, property);\n\t},\n\tcore: { _removeProperty, _getMatrix }\n\n};\n\ngsap.utils.checkPrefix = _checkPropPrefix;\ngsap.core.getStyleSaver = _getStyleSaver;\n(function(positionAndScale, rotation, others, aliases) {\n\tlet all = _forEachName(positionAndScale + \",\" + rotation + \",\" + others, name => {_transformProps[name] = 1});\n\t_forEachName(rotation, name => {_config.units[name] = \"deg\"; _rotationalProperties[name] = 1});\n\t_propertyAliases[all[13]] = positionAndScale + \",\" + rotation;\n\t_forEachName(aliases, name => {\n\t\tlet split = name.split(\":\");\n\t\t_propertyAliases[split[1]] = all[split[0]];\n\t});\n})(\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\", \"rotation,rotationX,rotationY,skewX,skewY\", \"transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\", \"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\");\n_forEachName(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\", name => {_config.units[name] = \"px\"});\n\ngsap.registerPlugin(CSSPlugin);\n\nexport { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix };","import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from \"./gsap-core.js\";\nimport { CSSPlugin } from \"./CSSPlugin.js\";\n\nconst gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking\n\tTweenMaxWithCSS = gsapWithCSS.core.Tween;\n\nexport {\n\tgsapWithCSS as gsap,\n\tgsapWithCSS as default,\n\tCSSPlugin,\n\tTweenMaxWithCSS as TweenMax,\n\tTweenLite,\n\tTimelineMax,\n\tTimelineLite,\n\tPower0,\n\tPower1,\n\tPower2,\n\tPower3,\n\tPower4,\n\tLinear,\n\tQuad,\n\tCubic,\n\tQuart,\n\tQuint,\n\tStrong,\n\tElastic,\n\tBack,\n\tSteppedEase,\n\tBounce,\n\tSine,\n\tExpo,\n\tCirc\n};"],"names":["_isString","value","_isFunction","_isNumber","_isUndefined","_isObject","_isNotFalse","_windowExists","window","_isFuncOrString","_install","scope","_installScope","_merge","_globals","gsap","_missingPlugin","property","console","warn","_warn","message","suppress","_addGlobal","name","obj","_emptyFunc","_harness","targets","harnessPlugin","i","target","_gsap","harness","_harnessPlugins","length","targetTest","GSCache","splice","_getCache","toArray","_getProperty","v","getAttribute","_forEachName","names","func","split","forEach","_round","Math","round","_roundPrecise","_parseRelative","start","operator","charAt","end","parseFloat","substr","_arrayContainsAny","toSearch","toFind","l","indexOf","_lazyRender","tween","_lazyTweens","a","slice","_lazyLookup","_lazy","render","_lazySafeRender","animation","time","suppressEvents","force","_reverting","_initted","_startAt","_numericIfPossible","n","match","_delimitedValueExp","trim","_passThrough","p","_setDefaults","defaults","_mergeDeep","base","toMerge","_copyExcluding","excluding","copy","_inheritDefaults","vars","parent","_globalTimeline","keyframes","_setKeyframeDefaults","excludeDuration","_isArray","inherit","_dp","_addLinkedListItem","child","firstProp","lastProp","sortBy","t","prev","_prev","_next","_removeLinkedListItem","next","_removeFromParent","onlyIfParentHasAutoRemove","autoRemoveChildren","remove","_act","_uncache","_end","_dur","_start","_dirty","_rewindStartAt","totalTime","revert","_revertConfigNoKill","immediateRender","autoRevert","_elapsedCycleDuration","_repeat","_animationCycle","_tTime","duration","_rDelay","_parentToChildTotalTime","parentTime","_ts","totalDuration","_tDur","_setEnd","abs","_rts","_tinyNum","_alignPlayhead","smoothChildTiming","_time","_postAddChecks","timeline","add","rawTime","_clamp","_zTime","_addToTimeline","position","skipChecks","_parsePosition","_delay","timeScale","_sort","_isFromOrFromStart","_recent","_scrollTrigger","trigger","ScrollTrigger","create","_attemptInitTween","tTime","_initTween","_pt","lazy","_lastRenderedFrame","_ticker","frame","push","_setDuration","skipUncache","leavePlayhead","repeat","dur","totalProgress","_onUpdateTotalDuration","Timeline","_createTweenType","type","params","irVars","isLegacy","varsIndex","runBackwards","startAt","Tween","_conditionalReturn","getUnit","_unitExp","exec","_isArrayLike","nonEmpty","nodeType","_win","selector","el","current","nativeElement","querySelectorAll","_doc","createElement","shuffle","sort","random","distribute","each","ease","_parseEase","from","cache","isDecimal","ratios","isNaN","axis","ratioX","ratioY","center","edges","originX","originY","x","y","d","j","max","min","wrapAt","distances","grid","_bigNum","getBoundingClientRect","left","_sqrt","amount","b","u","_invertEase","_roundModifier","pow","raw","snap","snapTo","radius","is2D","isArray","values","increment","dx","dy","closest","roundingIncrement","returnFunction","floor","_wrapArray","wrapper","index","_replaceRandom","nums","s","_strictNumExp","_getLabelInDirection","fromTime","backward","distance","label","labels","_interrupt","scrollTrigger","kill","progress","_callback","_createPlugin","config","headless","isFunc","Plugin","init","_props","instanceDefaults","_renderPropTweens","_addPropTween","_killPropTweensOf","modifier","_addPluginModifier","rawVars","statics","get","getSetter","_getSetter","aliases","register","_wake","_plugins","prototype","prop","_reservedProps","toUpperCase","PropTween","_registerPluginQueue","_hue","h","m1","m2","_255","splitColor","toHSL","forceAlpha","r","g","wasHSL","_colorLookup","black","parseInt","_numExp","transparent","map","Number","_colorOrderData","c","_colorExp","_numWithUnitExp","_formatColors","orderMatchData","shell","result","colors","color","join","replace","shift","_colorStringFilter","combined","lastIndex","test","_hslExp","_configEaseFromString","_easeMap","apply","_parseObjectInString","val","parsedVal","key","lastIndexOf","_quotesExp","_valueInParentheses","open","close","nested","substring","_CE","_customEaseExp","_propagateYoyoEase","isYoyo","_first","yoyoEase","_yoyo","_ease","_yEase","_insertEase","easeIn","easeOut","easeInOut","lowercaseName","toLowerCase","_easeInOutFromOut","_configElastic","amplitude","period","p1","_sin","p3","p2","_2PI","asin","_configBack","overshoot","_suppressOverwrites","_context","_coreInitted","_coreReady","_quickTween","_tickerActive","_id","_req","_raf","_self","_delta","_i","_getTime","_lagThreshold","_adjustedLag","_startTime","_lastUpdate","_gap","_nextTime","_listeners","n1","_config","autoSleep","force3D","nullTargetWarn","units","lineHeight","_defaults","overwrite","delay","PI","_HALF_PI","_gsID","sqrt","_cos","cos","sin","_isTypedArray","ArrayBuffer","isView","Array","_complexStringNumExp","_relExp","_startAtRevertConfig","isStart","_revertConfig","_effects","_nextGCFrame","_callbackNames","cycleDuration","whole","data","_zeroPosition","endTime","percentAnimation","offset","isPercent","recent","clippedDuration","_slice","leaveStrings","_flatten","ar","accumulator","call","mapRange","inMin","inMax","outMin","outMax","inRange","outRange","executeLazyFirst","callback","prevContext","context","_ctx","callbackScope","aqua","lime","silver","maroon","teal","blue","navy","white","olive","yellow","orange","gray","purple","green","red","pink","cyan","RegExp","Date","now","tick","_tick","deltaRatio","fps","wake","document","gsapVersions","version","GreenSockGlobals","requestAnimationFrame","sleep","f","setTimeout","cancelAnimationFrame","clearTimeout","lagSmoothing","threshold","adjustedLag","Infinity","once","prioritize","defaultEase","overlap","dispatch","elapsed","manual","power","Linear","easeNone","none","SteppedEase","steps","immediateStart","id","this","set","Animation","startTime","arguments","_ptLookup","_pTime","iteration","_ps","_recacheAncestors","paused","includeRepeats","wrapRepeats","prevIsReverting","globalTime","_sat","repeatDelay","yoyo","seek","restart","includeDelay","play","reversed","reverse","pause","atTime","resume","invalidate","isActive","eventCallback","_onUpdate","then","onFulfilled","self","Promise","resolve","_resolve","_then","_prom","ratio","sortChildren","_this","to","fromTo","fromVars","toVars","delayedCall","staggerTo","stagger","onCompleteAll","onCompleteAllParams","onComplete","onCompleteParams","staggerFrom","staggerFromTo","prevPaused","pauseTween","prevStart","prevIteration","prevTime","tDur","crossingStart","_lock","rewinding","doesWrap","repeatRefresh","onRepeat","_hasPause","_forcing","_findNextPauseTween","_last","onUpdate","adjustedTime","_this2","addLabel","getChildren","tweens","timelines","ignoreBeforeTime","getById","animations","removeLabel","killTweensOf","addPause","removePause","props","onlyActive","getTweensOf","_overwritingTween","children","parsedTargets","isGlobalTime","_targets","tweenTo","initted","tl","onStart","onStartParams","tweenFromTo","fromPosition","toPosition","nextLabel","afterTime","previousLabel","beforeTime","currentLabel","shiftChildren","adjustLabels","soft","clear","includeLabels","updateRoot","_checkPlugin","plugin","pt","ptLookup","_processVars","_parseFuncOrString","style","priority","_parseKeyframe","allProps","easeEach","e","_forceAllPropTweens","stringFilter","funcParam","optional","currentValue","parsedStart","setter","_setterFuncWithParam","_setterFunc","_setterPlain","_addComplexStringPropTween","startNums","endNum","chunk","startNum","hasRandom","_renderComplexString","matchIndex","m","fp","_renderBoolean","_renderPlain","cleanVars","hasPriority","gsData","harnessVars","overwritten","prevStartAt","fullTargets","autoOverwrite","_overwrite","_from","_ptCache","_op","_sortPropTweensByPriority","_onInit","_staggerTweenProps","_staggerPropsToSkip","skipInherit","curTarget","staggerFunc","staggerVarsToMerge","_this3","kf","_hasNoPausedAncestors","isNegative","_renderZeroDurationTween","prevRatio","_parentPlayheadIsBeforeStart","resetTo","startIsRelative","skipRecursion","_updatePropTweens","rootPT","lookup","ptCache","overwrittenProps","curLookup","curOverwriteProps","killingTargets","propTweenLookup","firstPT","_arraysMatch","a1","a2","_addAliasesToVars","propertyAliases","onReverseComplete","onReverseCompleteParams","_setterAttribute","setAttribute","_setterWithModifier","mSet","mt","hasNonDependentRemaining","op","dep","pt2","first","last","pr","change","renderer","TweenMax","TweenLite","TimelineLite","TimelineMax","_dispatch","_emptyArray","_onMediaChange","matches","_lastMediaTime","_media","anyMatch","toggled","queries","conditions","matchMedia","onMatch","_contextID","Context","prevSelector","_r","isReverted","ignore","getTweens","_this4","o","MatchMedia","mq","active","cond","contexts","addListener","addEventListener","registerPlugin","args","getProperty","unit","uncache","getter","format","quickSetter","setters","quickTo","isTweening","registerEffect","effect","plugins","extendTimeline","pluginName","registerEase","parseEase","exportRoot","includeDelayedCalls","matchMediaRefresh","found","removeEventListener","utils","wrap","range","wrapYoyo","total","normalize","clamp","pipe","functions","reduce","unitize","interpolate","mutate","interpolators","il","isString","master","install","effects","ticker","globalTimeline","core","globals","getCache","reverting","toAdd","suppressOverwrites","_getPluginPropTween","_buildModifierPlugin","temp","_addModifiers","modifiers","_renderCSSProp","_renderPropWithEnd","_renderCSSPropWithBeginning","_renderRoundedCSSProp","_renderNonTweeningValue","_renderNonTweeningValueOnlyAtEnd","_setterCSSStyle","_setterCSSProp","setProperty","_setterTransform","_setterScale","scaleX","scaleY","_setterScaleWithRender","renderTransform","_setterTransformWithRender","_saveStyle","isNotCSS","_transformProps","tfm","_propertyAliases","transform","_get","_transformOriginProp","zOrigin","_transformProp","svg","svgo","_removeIndependentTransforms","translate","removeProperty","_revertStyle","_capsExp","_getStyleSaver","properties","saver","save","_createElement","ns","createElementNS","_getComputedProperty","skipPrefixFallback","cs","getComputedStyle","getPropertyValue","_checkPropPrefix","_initCore","_docElement","documentElement","_tempDiv","cssText","_supports3D","_pluginInitted","_getReparentedCloneBBox","bbox","owner","ownerSVGElement","clone","cloneNode","display","appendChild","getBBox","removeChild","_getAttributeFallbacks","attributesArray","hasAttribute","_getBBox","bounds","cloned","error","width","height","_isSVG","getCTM","parentNode","_removeProperty","first2Chars","removeAttribute","_addNonTweeningPT","beginning","onlySetAtEnd","_convertToUnit","px","isSVG","curValue","curUnit","horizontal","_horizontalExp","isRootSVG","tagName","measureProperty","toPixels","toPercent","_nonConvertibleUnits","body","_nonStandardLayouts","_tweenComplexCSSString","startValues","startValue","endValue","endUnit","startUnit","_convertKeywordsToPercentages","_keywordToPercent","_renderClearProps","clearTransforms","scale","rotate","_parseTransform","_isNullTransform","_getComputedTransformMatrixAsArray","matrixString","_identity2DMatrix","_getMatrix","force2D","nextSibling","addedToDOM","matrix","baseVal","consolidate","offsetParent","nextElementSibling","insertBefore","_applySVGOrigin","origin","originIsAbsolute","smooth","matrixArray","pluginToAddPropTweensTo","determinant","xOriginOld","xOrigin","yOriginOld","yOrigin","xOffsetOld","xOffset","yOffsetOld","yOffset","tx","ty","originSplit","_addPxTranslate","_addRotationalPropTween","direction","cap","_RAD2DEG","finalValue","_assign","source","_addRawTransformPTs","transforms","endCache","startCache","_recentSetterPlugin","Power0","Power1","Power2","Power3","Power4","Quad","Cubic","Quart","Quint","Strong","Elastic","Back","Bounce","Sine","Expo","Circ","_DEG2RAD","_atan2","atan2","_complexExp","autoAlpha","alpha","_prefixes","element","preferPrefix","deg","rad","turn","flex","_firstTwoOnly","_specialProps","top","bottom","right","clearProps","_rotationalProperties","z","rotation","rotationX","rotationY","skewX","skewY","perspective","angle","a12","a22","t1","t2","t3","a13","a23","a33","a42","a43","a32","invertedScaleX","forceCSS","xPercent","offsetWidth","yPercent","offsetHeight","transformPerspective","_renderSVGTransforms","_renderCSSTransforms","_renderNon3DTransforms","_zeroDeg","_zeroPx","_endParenthesis","use3D","a11","a21","tan","side","positionAndScale","all","CSSPlugin","specialProp","relative","isTransformRelated","transformPropTween","inlineProps","styles","visibility","parseTransform","smoothOrigin","autoRound","checkPrefix","getStyleSaver","gsapWithCSS","TweenMaxWithCSS"],"mappings":";;;;;;;;;ycAgCa,SAAZA,EAAYC,SAA2B,iBAAXA,EACd,SAAdC,EAAcD,SAA2B,mBAAXA,EAClB,SAAZE,EAAYF,SAA2B,iBAAXA,EACb,SAAfG,EAAeH,eAA2B,IAAXA,EACnB,SAAZI,EAAYJ,SAA2B,iBAAXA,EACd,SAAdK,EAAcL,UAAmB,IAAVA,EACP,SAAhBM,UAAyC,oBAAZC,OACX,SAAlBC,EAAkBR,UAASC,EAAYD,IAAUD,EAAUC,GAchD,SAAXS,EAAWC,UAAUC,EAAgBC,GAAOF,EAAOG,MAAcC,GAChD,SAAjBC,EAAkBC,EAAUhB,UAAUiB,QAAQC,KAAK,mBAAoBF,EAAU,SAAUhB,EAAO,yCAC1F,SAARmB,EAASC,EAASC,UAAcA,GAAYJ,QAAQC,KAAKE,GAC5C,SAAbE,EAAcC,EAAMC,UAASD,IAASV,GAASU,GAAQC,IAASb,IAAkBA,EAAcY,GAAQC,IAAUX,GACrG,SAAbY,WAAmB,EAaR,SAAXC,GAAWC,OAETC,EAAeC,EADZC,EAASH,EAAQ,MAErBvB,EAAU0B,IAAW7B,EAAY6B,KAAYH,EAAU,CAACA,MAClDC,GAAiBE,EAAOC,OAAS,IAAIC,SAAU,KACpDH,EAAII,GAAgBC,OACbL,MAAQI,GAAgBJ,GAAGM,WAAWL,KAC7CF,EAAgBK,GAAgBJ,OAEjCA,EAAIF,EAAQO,OACLL,KACLF,EAAQE,KAAOF,EAAQE,GAAGE,QAAUJ,EAAQE,GAAGE,MAAQ,IAAIK,GAAQT,EAAQE,GAAID,MAAqBD,EAAQU,OAAOR,EAAG,UAEjHF,EAEI,SAAZW,GAAYR,UAAUA,EAAOC,OAASL,GAASa,GAAQT,IAAS,GAAGC,MACpD,SAAfS,GAAgBV,EAAQd,EAAUyB,UAAOA,EAAIX,EAAOd,KAAcf,EAAYwC,GAAKX,EAAOd,KAAeb,EAAasC,IAAMX,EAAOY,cAAgBZ,EAAOY,aAAa1B,IAAcyB,EACtK,SAAfE,GAAgBC,EAAOC,UAAWD,EAAQA,EAAME,MAAM,MAAMC,QAAQF,IAAUD,EACrE,SAATI,GAAShD,UAASiD,KAAKC,MAAc,IAARlD,GAAkB,KAAU,EACzC,SAAhBmD,GAAgBnD,UAASiD,KAAKC,MAAc,IAARlD,GAAoB,KAAY,EACnD,SAAjBoD,GAAkBC,EAAOrD,OACpBsD,EAAWtD,EAAMuD,OAAO,GAC3BC,EAAMC,WAAWzD,EAAM0D,OAAO,WAC/BL,EAAQI,WAAWJ,GACC,MAAbC,EAAmBD,EAAQG,EAAmB,MAAbF,EAAmBD,EAAQG,EAAmB,MAAbF,EAAmBD,EAAQG,EAAMH,EAAQG,EAE/F,SAApBG,GAAqBC,EAAUC,WAC1BC,EAAID,EAAO3B,OACdL,EAAI,EACE+B,EAASG,QAAQF,EAAOhC,IAAM,KAAOA,EAAIiC,WACxCjC,EAAIiC,EAEC,SAAdE,SAGEnC,EAAGoC,EAFAH,EAAII,GAAYhC,OACnBiC,EAAID,GAAYE,MAAM,OAEvBC,GAAc,GAETxC,EADLqC,GAAYhC,OAAS,EACTL,EAAIiC,EAAGjC,KAClBoC,EAAQE,EAAEtC,KACDoC,EAAMK,QAAUL,EAAMM,OAAON,EAAMK,MAAM,GAAIL,EAAMK,MAAM,IAAI,GAAMA,MAAQ,GAGpE,SAAlBE,GAAmBC,EAAWC,EAAMC,EAAgBC,GACnDV,GAAYhC,SAAW2C,GAAcb,KACrCS,EAAUF,OAAOG,EAAMC,EAAgBC,GAAUC,GAAcH,EAAO,IAAMD,EAAUK,UAAYL,EAAUM,WAC5Gb,GAAYhC,SAAW2C,GAAcb,KAEjB,SAArBgB,GAAqBhF,OAChBiF,EAAIxB,WAAWzD,UACXiF,GAAW,IAANA,KAAajF,EAAQ,IAAIkF,MAAMC,IAAoBjD,OAAS,EAAI+C,EAAIlF,EAAUC,GAASA,EAAMoF,OAASpF,EAErG,SAAfqF,GAAeC,UAAKA,EACL,SAAfC,GAAgB/D,EAAKgE,OACf,IAAIF,KAAKE,EACZF,KAAK9D,IAASA,EAAI8D,GAAKE,EAASF,WAE3B9D,EAaK,SAAbiE,GAAcC,EAAMC,OACd,IAAIL,KAAKK,EACP,cAANL,GAA2B,gBAANA,GAA6B,cAANA,IAAsBI,EAAKJ,GAAKlF,EAAUuF,EAAQL,IAAMG,GAAWC,EAAKJ,KAAOI,EAAKJ,GAAK,IAAKK,EAAQL,IAAMK,EAAQL,WAE1JI,EAES,SAAjBE,GAAkBpE,EAAKqE,OAErBP,EADGQ,EAAO,OAENR,KAAK9D,EACR8D,KAAKO,IAAeC,EAAKR,GAAK9D,EAAI8D,WAE7BQ,EAEW,SAAnBC,GAAmBC,OACdC,EAASD,EAAKC,QAAUC,EAC3BrD,EAAOmD,EAAKG,UA3BS,SAAvBC,qBAAuBC,UAAmB,SAAC7E,EAAKgE,OAC1C,IAAIF,KAAKE,EACZF,KAAK9D,GAAe,aAAN8D,GAAoBe,GAA0B,SAANf,IAAiB9D,EAAI8D,GAAKE,EAASF,KAyBlEc,CAAqBE,EAASN,EAAKG,YAAcZ,MACtElF,EAAY2F,EAAKO,cACbN,GACNpD,EAAKmD,EAAMC,EAAOD,KAAKR,UACvBS,EAASA,EAAOA,QAAUA,EAAOO,WAG5BR,EAQa,SAArBS,GAAsBR,EAAQS,EAAOC,EAAsBC,EAAoBC,YAA1CF,IAAAA,EAAY,mBAAUC,IAAAA,EAAW,aAEpEE,EADGC,EAAOd,EAAOW,MAEdC,MACHC,EAAIJ,EAAMG,GACHE,GAAQA,EAAKF,GAAUC,GAC7BC,EAAOA,EAAKC,aAGVD,GACHL,EAAMO,MAAQF,EAAKE,MACnBF,EAAKE,MAAQP,IAEbA,EAAMO,MAAQhB,EAAOU,GACrBV,EAAOU,GAAaD,GAEjBA,EAAMO,MACTP,EAAMO,MAAMD,MAAQN,EAEpBT,EAAOW,GAAYF,EAEpBA,EAAMM,MAAQD,EACdL,EAAMT,OAASS,EAAMF,IAAMP,EACpBS,EAEgB,SAAxBQ,GAAyBjB,EAAQS,EAAOC,EAAsBC,YAAtBD,IAAAA,EAAY,mBAAUC,IAAAA,EAAW,aACpEG,EAAOL,EAAMM,MAChBG,EAAOT,EAAMO,MACVF,EACHA,EAAKE,MAAQE,EACHlB,EAAOU,KAAeD,IAChCT,EAAOU,GAAaQ,GAEjBA,EACHA,EAAKH,MAAQD,EACHd,EAAOW,KAAcF,IAC/BT,EAAOW,GAAYG,GAEpBL,EAAMO,MAAQP,EAAMM,MAAQN,EAAMT,OAAS,KAExB,SAApBmB,GAAqBV,EAAOW,GAC3BX,EAAMT,UAAYoB,GAA6BX,EAAMT,OAAOqB,qBAAuBZ,EAAMT,OAAOsB,QAAUb,EAAMT,OAAOsB,OAAOb,GAC9HA,EAAMc,KAAO,EAEH,SAAXC,GAAYhD,EAAWiC,MAClBjC,KAAeiC,GAASA,EAAMgB,KAAOjD,EAAUkD,MAAQjB,EAAMkB,OAAS,WACrEzD,EAAIM,EACDN,GACNA,EAAE0D,OAAS,EACX1D,EAAIA,EAAE8B,cAGDxB,EAWS,SAAjBqD,GAAkB7D,EAAO8D,EAAWpD,EAAgBC,UAAUX,EAAMc,WAAaF,EAAaZ,EAAMc,SAASiD,OAAOC,IAAwBhE,EAAM+B,KAAKkC,kBAAoBjE,EAAM+B,KAAKmC,YAAelE,EAAMc,SAASR,OAAOwD,GAAW,EAAMnD,IAEpN,SAAxBwD,GAAwB3D,UAAaA,EAAU4D,QAAUC,GAAgB7D,EAAU8D,OAAS9D,EAAYA,EAAU+D,WAAa/D,EAAUgE,SAAYhE,EAAY,EAMvI,SAA1BiE,GAA2BC,EAAYjC,UAAWiC,EAAajC,EAAMkB,QAAUlB,EAAMkC,KAAoB,GAAblC,EAAMkC,IAAW,EAAKlC,EAAMmB,OAASnB,EAAMmC,gBAAkBnC,EAAMoC,OACrJ,SAAVC,GAAUtE,UAAcA,EAAUiD,KAAOvE,GAAcsB,EAAUmD,QAAWnD,EAAUqE,MAAQ7F,KAAK+F,IAAIvE,EAAUmE,KAAOnE,EAAUwE,MAAQC,IAAc,IACvI,SAAjBC,GAAkB1E,EAAWsD,OACxB9B,EAASxB,EAAU+B,WACnBP,GAAUA,EAAOmD,mBAAqB3E,EAAUmE,MACnDnE,EAAUmD,OAASzE,GAAc8C,EAAOoD,OAAyB,EAAhB5E,EAAUmE,IAAUb,EAAYtD,EAAUmE,MAAQnE,EAAUoD,OAASpD,EAAUoE,gBAAkBpE,EAAUqE,OAASf,IAActD,EAAUmE,MAC7LG,GAAQtE,GACRwB,EAAO4B,QAAUJ,GAASxB,EAAQxB,IAE5BA,EAYS,SAAjB6E,GAAkBC,EAAU7C,OACvBI,MACAJ,EAAM2C,QAAW3C,EAAMiB,MAAQjB,EAAM5B,UAAc4B,EAAMkB,OAAS2B,EAASF,QAAU3C,EAAMiB,OAASjB,EAAM8C,QAC7G1C,EAAI4B,GAAwBa,EAASE,UAAW/C,KAC3CA,EAAMiB,MAAQ+B,GAAO,EAAGhD,EAAMmC,gBAAiB/B,GAAKJ,EAAM6B,OAASW,IACvExC,EAAMnC,OAAOuC,GAAG,IAIdW,GAAS8B,EAAU7C,GAAOF,KAAO+C,EAASzE,UAAYyE,EAASF,OAASE,EAAS5B,MAAQ4B,EAASX,IAAK,IAEtGW,EAAS5B,KAAO4B,EAASf,eAC5B1B,EAAIyC,EACGzC,EAAEN,KACQ,GAAfM,EAAE2C,WAAmB3C,EAAEiB,UAAUjB,EAAEyB,QACpCzB,EAAIA,EAAEN,IAGR+C,EAASI,QAAUT,GAGJ,SAAjBU,GAAkBL,EAAU7C,EAAOmD,EAAUC,UAC5CpD,EAAMT,QAAUmB,GAAkBV,GAClCA,EAAMkB,OAASzE,IAAejD,EAAU2J,GAAYA,EAAWA,GAAYN,IAAarD,EAAkB6D,GAAeR,EAAUM,EAAUnD,GAAS6C,EAASF,OAAS3C,EAAMsD,QAC9KtD,EAAMgB,KAAOvE,GAAcuD,EAAMkB,QAAWlB,EAAMmC,gBAAkB5F,KAAK+F,IAAItC,EAAMuD,cAAiB,IACpGxD,GAAmB8C,EAAU7C,EAAO,SAAU,QAAS6C,EAASW,MAAQ,SAAW,GACnFC,GAAmBzD,KAAW6C,EAASa,QAAU1D,GACjDoD,GAAcR,GAAeC,EAAU7C,GACvC6C,EAASX,IAAM,GAAKO,GAAeI,EAAUA,EAAShB,QAC/CgB,EAES,SAAjBc,GAAkB5F,EAAW6F,UAAazJ,GAAS0J,eAAiBxJ,EAAe,gBAAiBuJ,KAAazJ,GAAS0J,cAAcC,OAAOF,EAAS7F,GACpI,SAApBgG,GAAqBxG,EAAOS,EAAME,EAAOD,EAAgB+F,UACxDC,GAAW1G,EAAOS,EAAMgG,GACnBzG,EAAMa,UAGNF,GAASX,EAAM2G,MAAQ/F,IAAgBZ,EAAM0D,OAA4B,IAApB1D,EAAM+B,KAAK6E,OAAqB5G,EAAM0D,MAAQ1D,EAAM+B,KAAK6E,OAAUC,IAAuBC,GAAQC,OAC3J9G,GAAY+G,KAAKhH,GACjBA,EAAMK,MAAQ,CAACoG,EAAO/F,GACf,UALA,EA2EM,SAAfuG,GAAgBzG,EAAW+D,EAAU2C,EAAaC,OAC7CC,EAAS5G,EAAU4D,QACtBiD,EAAMnI,GAAcqF,IAAa,EACjC+C,EAAgB9G,EAAU8D,OAAS9D,EAAUqE,aAC9CyC,IAAkBH,IAAkB3G,EAAU4E,OAASiC,EAAM7G,EAAUkD,MACvElD,EAAUkD,KAAO2D,EACjB7G,EAAUqE,MAASuC,EAAeA,EAAS,EAAI,KAAOlI,GAAcmI,GAAOD,EAAS,GAAM5G,EAAUgE,QAAU4C,GAAlFC,EACZ,EAAhBC,IAAsBH,GAAiBjC,GAAe1E,EAAYA,EAAU8D,OAAS9D,EAAUqE,MAAQyC,GACvG9G,EAAUwB,QAAU8C,GAAQtE,GAC5B0G,GAAe1D,GAAShD,EAAUwB,OAAQxB,GACnCA,EAEiB,SAAzB+G,GAAyB/G,UAAcA,aAAqBgH,GAAYhE,GAAShD,GAAayG,GAAazG,EAAWA,EAAUkD,MA2B7G,SAAnB+D,GAAoBC,EAAMC,EAAQrC,OAIhCsC,EAAQ5F,EAHL6F,EAAW5L,EAAU0L,EAAO,IAC/BG,GAAaD,EAAW,EAAI,IAAMH,EAAO,EAAI,EAAI,GACjD3F,EAAO4F,EAAOG,MAEfD,IAAa9F,EAAKwC,SAAWoD,EAAO,IACpC5F,EAAKC,OAASsD,EACVoC,EAAM,KACTE,EAAS7F,EACTC,EAASsD,EACFtD,KAAY,oBAAqB4F,IACvCA,EAAS5F,EAAOD,KAAKR,UAAY,GACjCS,EAAS5F,EAAY4F,EAAOD,KAAKO,UAAYN,EAAOA,OAErDD,EAAKkC,gBAAkB7H,EAAYwL,EAAO3D,iBAC1CyD,EAAO,EAAK3F,EAAKgG,aAAe,EAAMhG,EAAKiG,QAAUL,EAAOG,EAAY,UAElE,IAAIG,GAAMN,EAAO,GAAI5F,EAAM4F,EAAmB,EAAZG,IAErB,SAArBI,GAAsBnM,EAAO6C,UAAS7C,GAAmB,IAAVA,EAAc6C,EAAK7C,GAAS6C,EAEjE,SAAVuJ,GAAWpM,EAAOyC,UAAO1C,EAAUC,KAAYyC,EAAI4J,GAASC,KAAKtM,IAAeyC,EAAE,GAAP,GAG5D,SAAf8J,GAAgBvM,EAAOwM,UAAaxM,GAAUI,EAAUJ,IAAU,WAAYA,KAAYwM,IAAaxM,EAAMkC,QAAalC,EAAMkC,OAAS,KAAMlC,GAASI,EAAUJ,EAAM,OAAUA,EAAMyM,UAAYzM,IAAU0M,EAInM,SAAXC,GAAW3M,UACVA,EAAQuC,GAAQvC,GAAO,IAAMmB,EAAM,kBAAoB,GAChD,SAAAsB,OACFmK,EAAK5M,EAAM6M,SAAW7M,EAAM8M,eAAiB9M,SAC1CuC,GAAQE,EAAGmK,EAAGG,iBAAmBH,EAAKA,IAAO5M,EAAQmB,EAAM,kBAAoB6L,EAAKC,cAAc,OAASjN,IAG1G,SAAVkN,GAAU/I,UAAKA,EAAEgJ,KAAK,iBAAM,GAAKlK,KAAKmK,WAEzB,SAAbC,GAAa5K,MACRxC,EAAYwC,UACRA,MAEJuD,EAAO5F,EAAUqC,GAAKA,EAAI,CAAC6K,KAAK7K,GACnC8K,EAAOC,GAAWxH,EAAKuH,MACvBE,EAAOzH,EAAKyH,MAAQ,EACpB/H,EAAOjC,WAAWuC,EAAKN,OAAS,EAChCgI,EAAQ,GACRC,EAAoB,EAAPF,GAAYA,EAAO,EAChCG,EAASC,MAAMJ,IAASE,EACxBG,EAAO9H,EAAK8H,KACZC,EAASN,EACTO,EAASP,SACN1N,EAAU0N,GACbM,EAASC,EAAS,CAACC,OAAO,GAAIC,MAAM,GAAI1K,IAAI,GAAGiK,IAAS,GAC7CE,GAAaC,IACxBG,EAASN,EAAK,GACdO,EAASP,EAAK,IAER,SAAC5L,EAAGC,EAAQqC,OAGjBgK,EAASC,EAASC,EAAGC,EAAGC,EAAGC,EAAGC,EAAKC,EAAKC,EAFrC7K,GAAKK,GAAK6B,GAAM9D,OACnB0M,EAAYlB,EAAM5J,OAEd8K,EAAW,MACfD,EAAwB,SAAd3I,EAAK6I,KAAmB,GAAK7I,EAAK6I,MAAQ,CAAC,EAAGC,IAAU,IACrD,KACZL,GAAOK,EACAL,GAAOA,EAAMtK,EAAEwK,KAAUI,wBAAwBC,OAASL,EAAS7K,IAC1E6K,EAAS7K,GAAK6K,QAEfC,EAAYlB,EAAM5J,GAAK,GACvBqK,EAAUP,EAAU3K,KAAKyL,IAAIC,EAAQ7K,GAAKiK,EAAU,GAAKN,EAAOkB,EAChEP,EAAUO,IAAWG,EAAU,EAAIlB,EAAS9J,EAAIkK,EAASW,EAAS,GAAMlB,EAAOkB,EAAU,EAEzFD,EAAMI,EACDN,EAFLC,EAAM,EAEMD,EAAI1K,EAAG0K,IAClBH,EAAKG,EAAIG,EAAUR,EACnBG,EAAIF,GAAYI,EAAIG,EAAU,GAC9BC,EAAUJ,GAAKD,EAAKT,EAA8B7K,KAAK+F,IAAc,MAAT8E,EAAgBQ,EAAID,GAArDY,EAAMZ,EAAIA,EAAIC,EAAIA,GACxCG,EAAJF,IAAaE,EAAMF,GACnBA,EAAIG,IAASA,EAAMH,GAEX,WAATd,GAAsBP,GAAQ0B,GAC/BA,EAAUH,IAAMA,EAAMC,EACtBE,EAAUF,IAAMA,EAChBE,EAAUnM,EAAIqB,GAAKL,WAAWuC,EAAKkJ,SAAYzL,WAAWuC,EAAKsH,OAAkBxJ,EAAT6K,EAAa7K,EAAI,EAAKgK,EAA+C,MAATA,EAAehK,EAAI6K,EAASA,EAA3D1L,KAAKwL,IAAIE,EAAQ7K,EAAI6K,KAAkD,IAAe,UAATlB,GAAoB,EAAI,GAC1MmB,EAAUO,EAAKrL,EAAI,EAAK4B,EAAO5B,EAAI4B,EACnCkJ,EAAUQ,EAAIhD,GAAQpG,EAAKkJ,QAAUlJ,EAAKsH,OAAS,EACnDC,EAAQA,GAAQzJ,EAAI,EAAKuL,GAAY9B,GAAQA,SAE9CzJ,GAAM8K,EAAU/M,GAAK+M,EAAUF,KAAOE,EAAUH,KAAQ,EACjDtL,GAAcyL,EAAUO,GAAK5B,EAAOA,EAAKzJ,GAAKA,GAAK8K,EAAUnM,GAAKmM,EAAUQ,GAGpE,SAAjBE,GAAiB7M,OACZ6C,EAAIrC,KAAKsM,IAAI,KAAM9M,EAAI,IAAIK,MAAM,KAAK,IAAM,IAAIZ,eAC7C,SAAAsN,OACFvK,EAAI9B,GAAcF,KAAKC,MAAMO,WAAW+L,GAAO/M,GAAKA,EAAI6C,UACpDL,EAAIA,EAAI,GAAKK,GAAKpF,EAAUsP,GAAO,EAAIpD,GAAQoD,KAGlD,SAAPC,GAAQC,EAAQ1P,OAEd2P,EAAQC,EADLC,EAAUvJ,EAASoJ,UAElBG,GAAWzP,EAAUsP,KACzBC,EAASE,EAAUH,EAAOC,QAAUb,EAChCY,EAAOI,QACVJ,EAASnN,GAAQmN,EAAOI,SACnBF,GAAQ1P,EAAUwP,EAAO,OAC7BC,GAAUA,IAGXD,EAASJ,GAAeI,EAAOK,YAG1B5D,GAAmBnM,EAAQ6P,EAAmC5P,EAAYyP,GAAU,SAAAF,UAAQI,EAAOF,EAAOF,GAAavM,KAAK+F,IAAI4G,EAAOJ,IAAQG,EAASC,EAAOJ,GAAS,SAAAA,WAM7KQ,EAAIC,EALD5B,EAAI5K,WAAWmM,EAAOJ,EAAInB,EAAImB,GACjClB,EAAI7K,WAAWmM,EAAOJ,EAAIlB,EAAI,GAC9BI,EAAMI,EACNoB,EAAU,EACVrO,EAAI6N,EAAOxN,OAELL,MAILmO,EAHGJ,GACHI,EAAKN,EAAO7N,GAAGwM,EAAIA,GAET2B,GADVC,EAAKP,EAAO7N,GAAGyM,EAAIA,GACC2B,EAEfhN,KAAK+F,IAAI0G,EAAO7N,GAAKwM,IAElBK,IACRA,EAAMsB,EACNE,EAAUrO,UAGZqO,GAAYP,GAAUjB,GAAOiB,EAAUD,EAAOQ,GAAWV,EACjDI,GAAQM,IAAYV,GAAOtP,EAAUsP,GAAQU,EAAUA,EAAU9D,GAAQoD,IArBtCF,GAAeI,IAwBnD,SAATtC,GAAUsB,EAAKD,EAAK0B,EAAmBC,UAAmBjE,GAAmB7F,EAASoI,IAAQD,GAA4B,IAAtB0B,KAAgCA,EAAoB,IAAMC,EAAgB,kBAAM9J,EAASoI,GAAOA,KAAOzL,KAAKmK,SAAWsB,EAAIxM,UAAYiO,EAAoBA,GAAqB,QAAUC,EAAiBD,EAAoB,WAAI,IAAQA,EAAoB,IAAIjO,OAAS,GAAK,IAAOe,KAAKoN,MAAMpN,KAAKC,OAAOwL,EAAMyB,EAAoB,EAAIlN,KAAKmK,UAAYqB,EAAMC,EAA0B,IAApByB,IAA4BA,GAAqBA,EAAoBC,GAAkBA,IAIxhB,SAAbE,GAAcnM,EAAGoM,EAASvQ,UAAUmM,GAAmBnM,EAAO,SAAAwQ,UAASrM,IAAIoM,EAAQC,MAalE,SAAjBC,GAAiBzQ,WAGf6B,EAAG6O,EAAMlN,EAAKqM,EAFX9I,EAAO,EACV4J,EAAI,KAEI9O,EAAI7B,EAAM+D,QAAQ,UAAWgD,KACrCvD,EAAMxD,EAAM+D,QAAQ,IAAKlC,GACzBgO,EAAkC,MAAxB7P,EAAMuD,OAAO1B,EAAI,GAC3B6O,EAAO1Q,EAAM0D,OAAO7B,EAAI,EAAG2B,EAAM3B,EAAI,GAAGqD,MAAM2K,EAAU1K,GAAqByL,IAC7ED,GAAK3Q,EAAM0D,OAAOqD,EAAMlF,EAAIkF,GAAQqG,GAAOyC,EAAUa,GAAQA,EAAK,GAAIb,EAAU,GAAKa,EAAK,IAAKA,EAAK,IAAM,MAC1G3J,EAAOvD,EAAM,SAEPmN,EAAI3Q,EAAM0D,OAAOqD,EAAM/G,EAAMkC,OAAS6E,GA4CvB,SAAvB8J,GAAwBtH,EAAUuH,EAAUC,OAG1CzL,EAAG0L,EAAUC,EAFVC,EAAS3H,EAAS2H,OACrBxC,EAAMI,MAEFxJ,KAAK4L,GACTF,EAAWE,EAAO5L,GAAKwL,GACP,KAASC,GAAYC,GAAYtC,GAAOsC,EAAW/N,KAAK+F,IAAIgI,MAC3EC,EAAQ3L,EACRoJ,EAAMsC,UAGDC,EAmBK,SAAbE,GAAa1M,UACZ2C,GAAkB3C,GAClBA,EAAU2M,eAAiB3M,EAAU2M,cAAcC,OAAOxM,GAC1DJ,EAAU6M,WAAa,GAAKC,GAAU9M,EAAW,eAC1CA,EAIQ,SAAhB+M,GAAgBC,MACVA,KACLA,GAAWA,EAAOlQ,MAAQkQ,WAAmBA,EACzCnR,KAAmBmR,EAAOC,SAAU,KACnCnQ,EAAOkQ,EAAOlQ,KACjBoQ,EAAS1R,EAAYwR,GACrBG,EAAUrQ,IAASoQ,GAAUF,EAAOI,KAAQ,gBACtCC,OAAS,IACXL,EACJM,EAAmB,CAACF,KAAMpQ,EAAY8C,OAAQyN,GAAmBxI,IAAKyI,GAAeZ,KAAMa,GAAmBC,SAAUC,GAAoBC,QAAS,GACrJC,EAAU,CAACnQ,WAAY,EAAGoQ,IAAK,EAAGC,UAAWC,GAAYC,QAAS,GAAIC,SAAU,MACjFC,KACInB,IAAWG,EAAQ,IAClBiB,GAAStR,UAGbgE,GAAaqM,EAAQrM,GAAaK,GAAe6L,EAAQM,GAAmBO,IAC5E1R,GAAOgR,EAAOkB,UAAWlS,GAAOmR,EAAkBnM,GAAe6L,EAAQa,KACzEO,GAAUjB,EAAOmB,KAAOxR,GAASqQ,EAC7BH,EAAOtP,aACVF,GAAgBgJ,KAAK2G,GACrBoB,GAAezR,GAAQ,GAExBA,GAAiB,QAATA,EAAiB,MAAQA,EAAKgC,OAAO,GAAG0P,cAAgB1R,EAAKmC,OAAO,IAAM,SAEnFpC,EAAWC,EAAMqQ,GACjBH,EAAOkB,UAAYlB,EAAOkB,SAAS7R,GAAM8Q,EAAQsB,SAEjDC,GAAqBlI,KAAKwG,GAkDrB,SAAP2B,GAAQC,EAAGC,EAAIC,UAEC,GADfF,GAAKA,EAAI,EAAI,EAAQ,EAAJA,GAAS,EAAI,GACX,EAAKC,GAAMC,EAAKD,GAAMD,EAAI,EAAIA,EAAI,GAAKE,EAAU,EAAJF,EAAQ,EAAKC,GAAMC,EAAKD,IAAO,EAAI,EAAID,GAAK,EAAIC,GAAME,GAAQ,GAAM,EAExH,SAAbC,GAAchR,EAAGiR,EAAOC,OAEtBC,EAAGC,EAAG1E,EAAGkE,EAAG1C,EAAG7M,EAAG2K,EAAKC,EAAKH,EAAGuF,EAD5B3P,EAAK1B,EAAyBvC,EAAUuC,GAAK,CAACA,GAAK,GAAKA,GAAK,EAAK+Q,GAAM/Q,EAAI+Q,IAAQ,EAA3EO,GAAaC,UAErB7P,EAAG,IACc,MAAjB1B,EAAEiB,QAAQ,KACbjB,EAAIA,EAAEiB,OAAO,EAAGjB,EAAEP,OAAS,IAExB6R,GAAatR,GAChB0B,EAAI4P,GAAatR,QACX,GAAoB,MAAhBA,EAAEc,OAAO,GAAY,IAC3Bd,EAAEP,OAAS,IAIdO,EAAI,KAHJmR,EAAInR,EAAEc,OAAO,IAGCqQ,GAFdC,EAAIpR,EAAEc,OAAO,IAESsQ,GADtB1E,EAAI1M,EAAEc,OAAO,IACiB4L,GAAkB,IAAb1M,EAAEP,OAAeO,EAAEc,OAAO,GAAKd,EAAEc,OAAO,GAAK,KAEhE,IAAbd,EAAEP,aAEE,EADPiC,EAAI8P,SAASxR,EAAEiB,OAAO,EAAG,GAAI,MAChB,GAAKS,GAAK,EAAKqP,GAAMrP,EAAIqP,GAAMS,SAASxR,EAAEiB,OAAO,GAAI,IAAM,KAGzES,EAAI,EADJ1B,EAAIwR,SAASxR,EAAEiB,OAAO,GAAI,MAChB,GAAKjB,GAAK,EAAK+Q,GAAM/Q,EAAI+Q,SAC7B,GAAuB,QAAnB/Q,EAAEiB,OAAO,EAAG,MACtBS,EAAI2P,EAASrR,EAAEyC,MAAM0L,IAChB8C,GAUE,IAAKjR,EAAEsB,QAAQ,YACrBI,EAAI1B,EAAEyC,MAAMgP,IACZP,GAAcxP,EAAEjC,OAAS,IAAMiC,EAAE,GAAK,GAC/BA,OAZPkP,GAAMlP,EAAE,GAAK,IAAO,IACpBwM,EAAKxM,EAAE,GAAK,IAGZyP,EAAQ,GAFR9P,EAAKK,EAAE,GAAK,MACZ0P,EAAK/P,GAAK,GAAMA,GAAK6M,EAAI,GAAK7M,EAAI6M,EAAI7M,EAAI6M,GAE/B,EAAXxM,EAAEjC,SAAeiC,EAAE,IAAM,GACzBA,EAAE,GAAKiP,GAAKC,EAAI,EAAI,EAAGO,EAAGC,GAC1B1P,EAAE,GAAKiP,GAAKC,EAAGO,EAAGC,GAClB1P,EAAE,GAAKiP,GAAKC,EAAI,EAAI,EAAGO,EAAGC,QAO3B1P,EAAI1B,EAAEyC,MAAM0L,KAAkBmD,GAAaI,YAE5ChQ,EAAIA,EAAEiQ,IAAIC,eAEPX,IAAUI,IACbF,EAAIzP,EAAE,GAAKqP,GACXK,EAAI1P,EAAE,GAAKqP,GACXrE,EAAIhL,EAAE,GAAKqP,GAGX1P,IAFA2K,EAAMxL,KAAKwL,IAAImF,EAAGC,EAAG1E,KACrBT,EAAMzL,KAAKyL,IAAIkF,EAAGC,EAAG1E,KACH,EACdV,IAAQC,EACX2E,EAAI1C,EAAI,GAERpC,EAAIE,EAAMC,EACViC,EAAQ,GAAJ7M,EAAUyK,GAAK,EAAIE,EAAMC,GAAOH,GAAKE,EAAMC,GAC/C2E,EAAI5E,IAAQmF,GAAKC,EAAI1E,GAAKZ,GAAKsF,EAAI1E,EAAI,EAAI,GAAKV,IAAQoF,GAAK1E,EAAIyE,GAAKrF,EAAI,GAAKqF,EAAIC,GAAKtF,EAAI,EAC5F8E,GAAK,IAENlP,EAAE,MAAQkP,EAAI,IACdlP,EAAE,MAAY,IAAJwM,EAAU,IACpBxM,EAAE,MAAY,IAAJL,EAAU,KAErB6P,GAAcxP,EAAEjC,OAAS,IAAMiC,EAAE,GAAK,GAC/BA,EAEU,SAAlBmQ,GAAkB7R,OACbqN,EAAS,GACZyE,EAAI,GACJ1S,GAAK,SACNY,EAAEK,MAAM0R,IAAWzR,QAAQ,SAAAN,OACtB0B,EAAI1B,EAAEyC,MAAMuP,KAAoB,GACpC3E,EAAO7E,WAAP6E,EAAe3L,GACfoQ,EAAEtJ,KAAKpJ,GAAKsC,EAAEjC,OAAS,KAExB4N,EAAOyE,EAAIA,EACJzE,EAEQ,SAAhB4E,GAAiB/D,EAAG+C,EAAOiB,OAKzBJ,EAAGK,EAAOrG,EAAGzK,EAJV+Q,EAAS,GACZC,GAAUnE,EAAIkE,GAAQ3P,MAAMsP,IAC5B7I,EAAO+H,EAAQ,QAAU,QACzB7R,EAAI,MAEAiT,SACGnE,KAERmE,EAASA,EAAOV,IAAI,SAAAW,UAAUA,EAAQtB,GAAWsB,EAAOrB,EAAO,KAAO/H,GAAQ+H,EAAQqB,EAAM,GAAK,IAAMA,EAAM,GAAK,KAAOA,EAAM,GAAK,KAAOA,EAAM,GAAKA,EAAMC,KAAK,MAAQ,MACrKL,IACHpG,EAAI+F,GAAgB3D,IACpB4D,EAAII,EAAeJ,GACbS,KAAKH,KAAYtG,EAAEgG,EAAES,KAAKH,QAE/B/Q,GADA8Q,EAAQjE,EAAEsE,QAAQT,GAAW,KAAK1R,MAAM2R,KAC9BvS,OAAS,EACZL,EAAIiC,EAAGjC,IACbgT,GAAUD,EAAM/S,KAAO0S,EAAExQ,QAAQlC,GAAKiT,EAAOI,SAAWvJ,EAAO,YAAc4C,EAAErM,OAASqM,EAAIuG,EAAO5S,OAAS4S,EAASH,GAAgBO,aAInIN,MAEJ9Q,GADA8Q,EAAQjE,EAAE7N,MAAM0R,KACNtS,OAAS,EACZL,EAAIiC,EAAGjC,IACbgT,GAAUD,EAAM/S,GAAKiT,EAAOjT,UAGvBgT,EAASD,EAAM9Q,GAWF,SAArBqR,GAAqBhR,OAEnBuP,EADG0B,EAAWjR,EAAE6Q,KAAK,QAEtBR,GAAUa,UAAY,EAClBb,GAAUc,KAAKF,UAClB1B,EAAQ6B,GAAQD,KAAKF,GACrBjR,EAAE,GAAKuQ,GAAcvQ,EAAE,GAAIuP,GAC3BvP,EAAE,GAAKuQ,GAAcvQ,EAAE,GAAIuP,EAAOY,GAAgBnQ,EAAE,MAC7C,EA2Je,SAAxBqR,GAAwBjU,OACnBuB,GAASvB,EAAO,IAAIuB,MAAM,KAC7ByK,EAAOkI,GAAS3S,EAAM,WACfyK,GAAuB,EAAfzK,EAAMZ,QAAcqL,EAAKkE,OAAUlE,EAAKkE,OAAOiE,MAAM,MAAOnU,EAAKwC,QAAQ,KAAO,CAzB1E,SAAvB4R,qBAAuB3V,WAMrBwQ,EAAOoF,EAAKC,EALTrU,EAAM,GACTsB,EAAQ9C,EAAM0D,OAAO,EAAG1D,EAAMkC,OAAO,GAAGY,MAAM,KAC9CgT,EAAMhT,EAAM,GACZjB,EAAI,EACJiC,EAAIhB,EAAMZ,OAEJL,EAAIiC,EAAGjC,IACb+T,EAAM9S,EAAMjB,GACZ2O,EAAQ3O,IAAMiC,EAAE,EAAI8R,EAAIG,YAAY,KAAOH,EAAI1T,OAC/C2T,EAAYD,EAAIlS,OAAO,EAAG8M,GAC1BhP,EAAIsU,GAAOjI,MAAMgI,GAAaA,EAAUZ,QAAQe,GAAY,IAAI5Q,QAAUyQ,EAC1EC,EAAMF,EAAIlS,OAAO8M,EAAM,GAAGpL,cAEpB5D,EAW0FmU,CAAqB7S,EAAM,KATvG,SAAtBmT,oBAAsBjW,OACjBkW,EAAOlW,EAAM+D,QAAQ,KAAO,EAC/BoS,EAAQnW,EAAM+D,QAAQ,KACtBqS,EAASpW,EAAM+D,QAAQ,IAAKmS,UACtBlW,EAAMqW,UAAUH,GAAOE,GAAUA,EAASD,EAAQnW,EAAM+D,QAAQ,IAAKoS,EAAQ,GAAKA,GAK0CF,CAAoB1U,GAAMuB,MAAM,KAAKsR,IAAIpP,KAAwByQ,GAASa,KAAOC,GAAejB,KAAK/T,GAASkU,GAASa,IAAI,GAAI/U,GAAQgM,EAItP,SAArBiJ,GAAsBjN,EAAUkN,WACFlJ,EAAzB7G,EAAQ6C,EAASmN,OACdhQ,GACFA,aAAiB+E,GACpB+K,GAAmB9P,EAAO+P,IAChB/P,EAAMV,KAAK2Q,UAAcjQ,EAAMkQ,OAAUlQ,EAAM2B,SAAY3B,EAAMkQ,QAAUH,IACjF/P,EAAM6C,SACTiN,GAAmB9P,EAAM6C,SAAUkN,IAEnClJ,EAAO7G,EAAMmQ,MACbnQ,EAAMmQ,MAAQnQ,EAAMoQ,OACpBpQ,EAAMoQ,OAASvJ,EACf7G,EAAMkQ,MAAQH,IAGhB/P,EAAQA,EAAMO,MAIF,SAAd8P,GAAenU,EAAOoU,EAAQC,EAAkCC,YAAlCD,IAAAA,EAAU,iBAAA3R,UAAK,EAAI0R,EAAO,EAAI1R,cAAI4R,IAAAA,EAAa,mBAAA5R,UAAKA,EAAI,GAAK0R,EAAW,EAAJ1R,GAAS,EAAI,EAAI0R,EAAiB,GAAT,EAAI1R,IAAU,QAEvI6R,EADG5J,EAAO,CAACyJ,OAAAA,EAAQC,QAAAA,EAASC,UAAAA,UAE7BvU,GAAaC,EAAO,SAAArB,OAGd,IAAI+D,KAFTmQ,GAASlU,GAAQV,GAASU,GAAQgM,EAClCkI,GAAU0B,EAAgB5V,EAAK6V,eAAkBH,EACnC1J,EACbkI,GAAS0B,GAAuB,WAAN7R,EAAiB,MAAc,YAANA,EAAkB,OAAS,WAAamQ,GAASlU,EAAO,IAAM+D,GAAKiI,EAAKjI,KAGtHiI,EAEY,SAApB8J,GAAoBJ,UAAY,SAAA3R,UAAKA,EAAI,IAAM,EAAI2R,EAAQ,EAAS,EAAJ3R,IAAW,EAAI,GAAK2R,EAAmB,GAAV3R,EAAI,KAAW,GAC3F,SAAjBgS,GAAkB3L,EAAM4L,EAAWC,GAIvB,SAAVP,GAAU3R,UAAW,IAANA,EAAU,EAAImS,WAAM,GAAO,GAAKnS,GAAMoS,GAAMpS,EAAIqS,GAAMC,GAAM,MAHxEH,EAAmB,GAAbF,EAAkBA,EAAY,EACvCK,GAAMJ,IAAW7L,EAAO,GAAK,OAAS4L,EAAY,EAAIA,EAAY,GAClEI,EAAKC,EAAKC,GAAQ5U,KAAK6U,KAAK,EAAIL,IAAO,GAEvClK,EAAiB,QAAT5B,EAAkBsL,GAAoB,OAATtL,EAAiB,SAAArG,UAAK,EAAI2R,GAAQ,EAAI3R,IAAK+R,GAAkBJ,WACnGW,EAAKC,EAAOD,EACZrK,EAAKkE,OAAS,SAAC8F,EAAWC,UAAWF,GAAe3L,EAAM4L,EAAWC,IAC9DjK,EAEM,SAAdwK,GAAepM,EAAMqM,GACN,SAAVf,GAAU3R,UAAKA,IAAQA,EAAKA,IAAM0S,EAAY,GAAK1S,EAAI0S,GAAa,EAAK,WADzDA,IAAAA,EAAY,aAE/BzK,EAAgB,QAAT5B,EAAiBsL,GAAmB,OAATtL,EAAgB,SAAArG,UAAK,EAAI2R,GAAQ,EAAI3R,IAAK+R,GAAkBJ,WAC/F1J,EAAKkE,OAAS,SAAAuG,UAAaD,GAAYpM,EAAMqM,IACtCzK,EAviCT,IAWC0K,EACApT,EAAYqT,EA0BZhS,EAAiBwG,EAAMyL,EAAcnL,EAErCrM,EACAyX,EAYAtN,EAilBAuN,EAyOAC,EAUEC,EAAKC,EAAMC,EAAMC,EAAOC,EAAQC,EAR7BC,EACHC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EAqMDnU,EACGoU,EA9jCDC,EAAU,CACZC,UAAW,IACXC,QAAS,OACTC,eAAgB,EAChBC,MAAO,CAACC,WAAW,KAEpBC,EAAY,CACXpR,SAAU,GACVqR,WAAW,EACXC,MAAO,GAIRhL,EAAU,IACV5F,EAAW,EAAI4F,EACf+I,EAAiB,EAAV5U,KAAK8W,GACZC,EAAWnC,EAAO,EAClBoC,EAAQ,EACRhL,EAAQhM,KAAKiX,KACbC,EAAOlX,KAAKmX,IACZ1C,EAAOzU,KAAKoX,IASZC,EAAwC,mBAAhBC,aAA8BA,YAAYC,QAAW,aAC7ElU,EAAWmU,MAAM5K,QACjBe,GAAgB,oBAChBsD,GAAU,mCACVO,GAAkB,8BAClBiG,GAAuB,mCACvBC,GAAU,gBACVxV,GAAqB,kBACrBkH,GAAW,wCAEXxL,GAAW,GAQX+Z,GAAuB,CAACjW,gBAAgB,EAAMkW,SAAS,EAAMxJ,MAAM,GACnEpJ,GAAsB,CAACtD,gBAAgB,EAAM0M,MAAM,GACnDyJ,GAAgB,CAACnW,gBAAgB,GACjCqO,GAAiB,GACjB9O,GAAc,GACdG,GAAc,GAEdwO,GAAW,GACXkI,GAAW,GACXC,GAAe,GACf/Y,GAAkB,GAClBgZ,GAAiB,GAiEjBra,GAAS,SAATA,OAAU8E,EAAMC,OACV,IAAIL,KAAKK,EACbD,EAAKJ,GAAKK,EAAQL,UAEZI,GAoGR4C,GAAkB,SAAlBA,gBAAmBoC,EAAOwQ,OACrBC,EAAQlY,KAAKoN,MAAM3F,EAAQvH,GAAcuH,EAAQwQ,WAC9CxQ,GAAUyQ,IAAUzQ,EAASyQ,EAAQ,EAAIA,GAmEjDhR,GAAqB,SAArBA,0BAAuBiR,IAAAA,WAAmB,gBAATA,GAAmC,YAATA,GA+E3DC,GAAgB,CAACzT,OAAO,EAAG0T,QAAQ7Z,EAAYoH,cAAcpH,GAC7DsI,GAAiB,SAAjBA,eAAkBtF,EAAWoF,EAAU0R,OAIrC1Z,EAAG2Z,EAAQC,EAHRvK,EAASzM,EAAUyM,OACtBwK,EAASjX,EAAU2F,SAAWiR,GAC9BM,EAAkBlX,EAAU+D,YAAcsG,EAAU4M,EAAOJ,SAAQ,GAAS7W,EAAUkD,YAEnF5H,EAAU8J,KAAcgE,MAAMhE,IAAcA,KAAYqH,IAC3DsK,EAAS3R,EAAStG,OAAO,GACzBkY,EAAoC,MAAxB5R,EAASnG,QAAQ,GAC7B7B,EAAIgI,EAAS9F,QAAQ,KACN,MAAXyX,GAA6B,MAAXA,GAChB,GAAL3Z,IAAWgI,EAAWA,EAASoL,QAAQ,IAAK,MACzB,MAAXuG,EAAiBE,EAAO9T,OAAS8T,EAAOJ,QAA0B,GAAlBI,EAAOrT,WAAkB5E,WAAWoG,EAASnG,OAAO,KAAO,IAAM+X,GAAa5Z,EAAI,EAAI6Z,EAASH,GAAkB1S,gBAAkB,IAAM,IAE9LhH,EAAI,GACNgI,KAAYqH,IAAYA,EAAOrH,GAAY8R,GACrCzK,EAAOrH,KAEf2R,EAAS/X,WAAWoG,EAAStG,OAAO1B,EAAE,GAAKgI,EAASnG,OAAO7B,EAAE,IACzD4Z,GAAaF,IAChBC,EAASA,EAAS,KAAOlV,EAASiV,GAAoBA,EAAiB,GAAKA,GAAkB1S,iBAEnF,EAAJhH,EAASkI,eAAetF,EAAWoF,EAASnG,OAAO,EAAG7B,EAAE,GAAI0Z,GAAoBC,EAASG,EAAkBH,IAEhG,MAAZ3R,EAAoB8R,GAAmB9R,GAsBhDH,GAAS,SAATA,OAAUgF,EAAKD,EAAKzO,UAAUA,EAAQ0O,EAAMA,EAAcD,EAARzO,EAAcyO,EAAMzO,GAGtE4b,GAAS,GAAGxX,MAIZ7B,GAAU,SAAVA,QAAWvC,EAAOU,EAAOmb,UAAiB3D,IAAaxX,GAASwX,EAASvL,SAAWuL,EAASvL,SAAS3M,IAASD,EAAUC,IAAW6b,IAAiB1D,GAAiBvF,KAAqEtM,EAAStG,GAFzO,SAAX8b,SAAYC,EAAIF,EAAcG,mBAAAA,IAAAA,EAAc,IAAOD,EAAGhZ,QAAQ,SAAA/C,UAAUD,EAAUC,KAAW6b,GAAiBtP,GAAavM,EAAO,GAAKgc,EAAY/Q,WAAZ+Q,EAAoBzZ,GAAQvC,IAAUgc,EAAY/Q,KAAKjL,MAAWgc,EAEoDF,CAAS9b,EAAO6b,GAAgBtP,GAAavM,GAAS4b,GAAOK,KAAKjc,EAAO,GAAKA,EAAQ,CAACA,GAAS,GAA5K4b,GAAOK,MAAMvb,GAASsM,GAAMD,iBAAiB/M,GAAQ,IA4ItOkc,GAAW,SAAXA,SAAYC,EAAOC,EAAOC,EAAQC,EAAQtc,OACrCuc,EAAUH,EAAQD,EACrBK,EAAWF,EAASD,SACdlQ,GAAmBnM,EAAO,SAAAA,UAASqc,IAAarc,EAAQmc,GAASI,EAAWC,GAAa,MAoDjGjL,GAAY,SAAZA,UAAa9M,EAAWkH,EAAM8Q,OAK5B7Q,EAAQlL,EAAOmU,EAJZpS,EAAIgC,EAAUuB,KACjB0W,EAAWja,EAAEkJ,GACbgR,EAAczE,EACd0E,EAAUnY,EAAUoY,QAEhBH,SAGL9Q,EAASnJ,EAAEkJ,EAAO,UAClBjL,EAAQ+B,EAAEqa,eAAiBrY,EAC3BgY,GAAoBvY,GAAYhC,QAAU8B,KAC1C4Y,IAAY1E,EAAW0E,GACvB/H,EAASjJ,EAAS8Q,EAAShH,MAAMhV,EAAOkL,GAAU8Q,EAAST,KAAKvb,GAChEwX,EAAWyE,EACJ9H,GASR1B,GAAuB,GAsDvBK,GAAO,IACPO,GAAe,CACdgJ,KAAK,CAAC,EAAEvJ,GAAKA,IACbwJ,KAAK,CAAC,EAAExJ,GAAK,GACbyJ,OAAO,CAAC,IAAI,IAAI,KAChBjJ,MAAM,CAAC,EAAE,EAAE,GACXkJ,OAAO,CAAC,IAAI,EAAE,GACdC,KAAK,CAAC,EAAE,IAAI,KACZC,KAAK,CAAC,EAAE,EAAE5J,IACV6J,KAAK,CAAC,EAAE,EAAE,KACVC,MAAM,CAAC9J,GAAKA,GAAKA,IACjB+J,MAAM,CAAC,IAAI,IAAI,GACfC,OAAO,CAAChK,GAAKA,GAAK,GAClBiK,OAAO,CAACjK,GAAK,IAAI,GACjBkK,KAAK,CAAC,IAAI,IAAI,KACdC,OAAO,CAAC,IAAI,EAAE,KACdC,MAAM,CAAC,EAAE,IAAI,GACbC,IAAI,CAACrK,GAAK,EAAE,GACZsK,KAAK,CAACtK,GAAK,IAAI,KACfuK,KAAK,CAAC,EAAEvK,GAAKA,IACbW,YAAY,CAACX,GAAKA,GAAKA,GAAK,IAqH7BgB,GAAa,eAEXlP,EADGqL,EAAI,6EAEHrL,KAAKyO,GACTpD,GAAK,IAAMrL,EAAI,aAET,IAAI0Y,OAAOrN,EAAI,IAAK,MANf,GAQb4E,GAAU,YAkCVxK,IACK8N,EAAWoF,KAAKC,IACnBpF,EAAgB,IAChBC,EAAe,GACfC,EAAaH,IACbI,EAAcD,EAEdG,EADAD,EAAO,IAAO,IA0BfR,EAAQ,CACPhU,KAAK,EACLsG,MAAM,EACNmT,qBACCC,IAAM,IAEPC,+BAAWC,UACH3F,GAAU,KAAQ2F,GAAO,MAEjCC,qBACKnG,KACED,GAAgB7X,MACpBoM,EAAOyL,EAAe5X,OACtByM,EAAON,EAAK8R,UAAY,GACxB3d,GAASC,KAAOA,IACf4L,EAAK+R,eAAiB/R,EAAK+R,aAAe,KAAKxT,KAAKnK,GAAK4d,SAC1Dje,EAASE,GAAiB+L,EAAKiS,mBAAsBjS,EAAK5L,MAAQ4L,GAAS,IAC3EyG,GAAqBpQ,QAAQyO,KAE9BiH,EAAyC,oBAA3BmG,uBAA0CA,sBACxDrG,GAAOG,EAAMmG,QACbrG,EAAOC,GAAS,SAAAqG,UAAKC,WAAWD,EAAI3F,EAAyB,IAAbT,EAAMhU,KAAc,EAAK,IACzE4T,EAAgB,EAChB8F,GAAM,KAGRS,wBACEpG,EAAOuG,qBAAuBC,cAAc1G,GAC7CD,EAAgB,EAChBE,EAAO/W,GAERyd,mCAAaC,EAAWC,GACvBtG,EAAgBqG,GAAaE,EAAAA,EAC7BtG,EAAe9V,KAAKyL,IAAI0Q,GAAe,GAAItG,IAE5CwF,iBAAIA,GACHpF,EAAO,KAAQoF,GAAO,KACtBnF,EAAyB,IAAbT,EAAMhU,KAAcwU,GAEjC1P,iBAAIkT,EAAU4C,EAAMC,OACf1c,EAAOyc,EAAO,SAACxY,EAAGyH,EAAGuQ,EAAGrc,GAAOia,EAAS5V,EAAGyH,EAAGuQ,EAAGrc,GAAIiW,EAAMnR,OAAO1E,IAAU6Z,SAChFhE,EAAMnR,OAAOmV,GACbtD,EAAWmG,EAAa,UAAY,QAAQ1c,GAC5C+P,KACO/P,GAER0E,uBAAOmV,EAAU7a,KACdA,EAAIuX,EAAWrV,QAAQ2Y,KAActD,EAAW/W,OAAOR,EAAG,IAAYA,GAAN+W,GAAWA,KAE9EQ,WAzEAA,EAAa,KA6EfxG,GAAQ,SAARA,eAAe0F,GAAiBvN,GAAQwT,QAoBxC9I,GAAW,GACXc,GAAiB,sBACjBP,GAAa,QA4Bb3G,GAAc,SAAdA,YAAc9B,UAAQ,SAAAjI,UAAK,EAAIiI,EAAK,EAAIjI,KAoBxCkI,GAAa,SAAbA,WAAcD,EAAMiS,UAAiBjS,IAAsBtN,EAAYsN,GAAQA,EAAOkI,GAASlI,IAASiI,GAAsBjI,KAAlFiS,GAjJlC,SAARpB,GAAQ3b,OAGNgd,EAASC,EAAUhb,EAAMsG,EAFtB2U,EAAU9G,IAAaI,EAC1B2G,GAAe,IAANnd,MAECqW,EAAV6G,GAA2BA,EAAU,KAAO3G,GAAc2G,EAAU5G,IAIvD,GADd0G,GADA/a,GADAuU,GAAe0G,GACM3G,GACJG,IACEyG,KAClB5U,IAAU0N,EAAM1N,MAChB2N,EAASjU,EAAoB,IAAbgU,EAAMhU,KACtBgU,EAAMhU,KAAOA,GAAc,IAC3ByU,GAAasG,GAAsBvG,GAAXuG,EAAkB,EAAIvG,EAAOuG,GACrDC,EAAW,GAEZE,IAAWrH,EAAMC,EAAK4F,KAClBsB,MACE9G,EAAK,EAAGA,EAAKQ,EAAWlX,OAAQ0W,IACpCQ,EAAWR,GAAIlU,EAAMiU,EAAQ3N,EAAOvI,GAqL9B,SAAVwU,GAAU3R,UAAMA,EAAI+T,EAAMpU,EAAIK,EAAIA,EAAKA,EAFlC,kBAE4CL,WAAKK,EAAI,IAEjD,KAF6D,GAAI,IAAOA,EAD5E,kBACsFL,GAAKK,GAAK,KAE5F,MAFwGA,EAAI,MAAQL,WAAKK,EAAI,MAE7H,KAF2I,GAAI,QAV1J3C,GAAa,uCAAwC,SAACpB,EAAMM,OACvDge,EAAQhe,EAAI,EAAIA,EAAI,EAAIA,EAC5BkV,GAAYxV,EAAO,UAAYse,EAAQ,GAAIhe,EAAI,SAAAyD,mBAAKA,EAAKua,IAAQ,SAAAva,UAAKA,GAAG,SAAAA,UAAK,WAAK,EAAIA,EAAMua,IAAO,SAAAva,UAAKA,EAAI,GAAKrC,SAAK,EAAJqC,EAAUua,GAAQ,EAAI,EAAI5c,SAAW,GAAT,EAAIqC,GAAWua,GAAQ,MAEvKpK,GAASqK,OAAOC,SAAWtK,GAASuK,KAAOvK,GAASqK,OAAO9I,OAC3DD,GAAY,UAAWO,GAAe,MAAOA,GAAe,OAAQA,MAClErS,EAMC,OALEoU,EAAK,EAKC,KADVtC,GAAY,SAAU,SAAAzR,UAAK,EAAI2R,GAAQ,EAAI3R,IAAI2R,IAEhDF,GAAY,OAAQ,SAAAzR,UAAKrC,SAAC,EAAM,IAAMqC,EAAI,IAAOA,EAAIA,EAAIA,EAAIA,EAAIA,EAAIA,EAAIA,GAAK,EAAEA,KAChFyR,GAAY,OAAQ,SAAAzR,WAAO2J,EAAM,EAAK3J,EAAIA,GAAM,KAChDyR,GAAY,OAAQ,SAAAzR,UAAW,IAANA,EAAU,EAA0B,EAArB6U,EAAK7U,EAAI0U,KACjDjD,GAAY,OAAQgB,GAAY,MAAOA,GAAY,OAAQA,MAC3DtC,GAASwK,YAAcxK,GAASyK,MAAQrf,GAASof,YAAc,CAC9DxO,uBAAOyO,EAAWC,YAAXD,IAAAA,EAAQ,OACVzI,EAAK,EAAIyI,EACZtI,EAAKsI,GAASC,EAAiB,EAAI,GACnCxI,EAAKwI,EAAiB,EAAI,SAEpB,SAAA7a,WAAQsS,EAAKlO,GAAO,EADpB,UAC4BpE,GAAM,GAAKqS,GAAMF,KAGtDmC,EAAUrM,KAAOkI,GAAS,YAG1B9S,GAAa,qEAAsE,SAAApB,UAAQ0Z,IAAkB1Z,EAAO,IAAMA,EAAO,mBAoBpHa,GAEZ,iBAAYN,EAAQE,QACdoe,GAAKnG,KACVnY,EAAOC,MAAQse,MACVve,OAASA,OACTE,QAAUA,OACVuQ,IAAMvQ,EAAUA,EAAQuQ,IAAM/P,QAC9B8d,IAAMte,EAAUA,EAAQwQ,UAAYC,IAyB9B8N,6BAmBZzG,MAAA,eAAM9Z,UACDA,GAAmB,IAAVA,QACPiG,QAAUoa,KAAKpa,OAAOmD,mBAAsBiX,KAAKG,UAAUH,KAAKzY,OAAS5H,EAAQqgB,KAAKrW,aACtFA,OAAShK,EACPqgB,MAEDA,KAAKrW,WAGbxB,SAAA,kBAASxI,UACDygB,UAAUve,OAASme,KAAKxX,cAA6B,EAAfwX,KAAKhY,QAAcrI,GAASA,EAAQqgB,KAAK5X,SAAW4X,KAAKhY,QAAUrI,GAASqgB,KAAKxX,iBAAmBwX,KAAK1Y,SAGvJkB,cAAA,uBAAc7I,UACRygB,UAAUve,aAGV2F,OAAS,EACPqD,GAAamV,KAAMA,KAAKhY,QAAU,EAAIrI,GAASA,EAASqgB,KAAKhY,QAAUgY,KAAK5X,UAAa4X,KAAKhY,QAAU,KAHvGgY,KAAKvX,UAMdf,UAAA,mBAAUA,EAAWpD,MACpBiO,MACK6N,UAAUve,cACPme,KAAK9X,WAETtC,EAASoa,KAAK7Z,OACdP,GAAUA,EAAOmD,mBAAqBiX,KAAKzX,IAAK,KACnDO,GAAekX,KAAMtY,IACpB9B,EAAOO,KAAOP,EAAOA,QAAUqD,GAAerD,EAAQoa,MAEhDpa,GAAUA,EAAOA,QACnBA,EAAOA,OAAOoD,QAAUpD,EAAO2B,QAAwB,GAAd3B,EAAO2C,IAAW3C,EAAOsC,OAAStC,EAAO2C,KAAO3C,EAAO4C,gBAAkB5C,EAAOsC,SAAWtC,EAAO2C,MAC9I3C,EAAO8B,UAAU9B,EAAOsC,QAAQ,GAEjCtC,EAASA,EAAOA,QAEZoa,KAAKpa,QAAUoa,KAAK7Z,IAAIc,qBAAmC,EAAX+Y,KAAKzX,KAAWb,EAAYsY,KAAKvX,OAAWuX,KAAKzX,IAAM,GAAiB,EAAZb,IAAoBsY,KAAKvX,QAAUf,IACnJ6B,GAAeyW,KAAK7Z,IAAK6Z,KAAMA,KAAKzY,OAASyY,KAAKrW,eAG1CqW,KAAK9X,SAAWR,IAAesY,KAAK1Y,OAAShD,GAAoB0b,KAAKvb,UAAY7B,KAAK+F,IAAIqX,KAAK1W,UAAYT,IAAenB,IAAcsY,KAAKvb,WAAaub,KAAK7W,KAAO6W,KAAKK,mBAC1K9X,MAAQyX,KAAKM,OAAS5Y,GAG1BvD,GAAgB6b,KAAMtY,EAAWpD,IAIlC0b,SAGR3b,KAAA,cAAK1E,EAAO2E,UACJ8b,UAAUve,OAASme,KAAKtY,UAAW9E,KAAKyL,IAAI2R,KAAKxX,gBAAiB7I,EAAQoI,GAAsBiY,QAAUA,KAAK1Y,KAAO0Y,KAAK5X,WAAczI,EAAQqgB,KAAK1Y,KAAO,GAAIhD,GAAkB0b,KAAKhX,UAGhMkC,cAAA,uBAAcvL,EAAO2E,UACb8b,UAAUve,OAASme,KAAKtY,UAAWsY,KAAKxX,gBAAkB7I,EAAO2E,GAAkB0b,KAAKxX,gBAAkB5F,KAAKyL,IAAI,EAAG2R,KAAK9X,OAAS8X,KAAKvX,OAA2B,GAAlBuX,KAAK5W,WAAkB4W,KAAKvb,SAAW,EAAI,MAGrMwM,SAAA,kBAAStR,EAAO2E,UACR8b,UAAUve,OAASme,KAAKtY,UAAWsY,KAAK7X,aAAc6X,KAAKzJ,OAA8B,EAAnByJ,KAAKO,YAA+B5gB,EAAZ,EAAIA,GAAiBoI,GAAsBiY,MAAO1b,GAAmB0b,KAAK7X,WAAavF,KAAKyL,IAAI,EAAG2R,KAAKhX,MAAQgX,KAAK1Y,MAAyB,EAAjB0Y,KAAK5W,UAAgB,EAAI,MAG5PmX,UAAA,mBAAU5gB,EAAO2E,OACZuW,EAAgBmF,KAAK7X,WAAa6X,KAAK5X,eACpCgY,UAAUve,OAASme,KAAKtY,UAAUsY,KAAKhX,OAASrJ,EAAQ,GAAKkb,EAAevW,GAAkB0b,KAAKhY,QAAUC,GAAgB+X,KAAK9X,OAAQ2S,GAAiB,EAAI,MAcvKjR,UAAA,mBAAUjK,EAAO2E,OACX8b,UAAUve,cACPme,KAAKpX,QAAUC,EAAW,EAAImX,KAAKpX,QAEvCoX,KAAKpX,OAASjJ,SACVqgB,SAEJ3V,EAAQ2V,KAAKpa,QAAUoa,KAAKzX,IAAMF,GAAwB2X,KAAKpa,OAAOoD,MAAOgX,MAAQA,KAAK9X,mBAMzFU,MAAQjJ,GAAS,OACjB4I,IAAOyX,KAAKQ,KAAO7gB,KAAWkJ,EAAY,EAAImX,KAAKpX,UACnDlB,UAAU2B,IAAQzG,KAAK+F,IAAIqX,KAAKrW,QAASqW,KAAKvX,MAAO4B,IAA2B,IAAnB/F,GAClEoE,GAAQsX,MAtiCW,SAApBS,kBAAoBrc,WACfwB,EAASxB,EAAUwB,OAChBA,GAAUA,EAAOA,QACvBA,EAAO4B,OAAS,EAChB5B,EAAO4C,gBACP5C,EAASA,EAAOA,cAEVxB,EAgiCAqc,CAAkBT,UAG1BU,OAAA,gBAAO/gB,UACDygB,UAAUve,QAKXme,KAAKQ,MAAQ7gB,UACX6gB,IAAM7gB,SAEL2gB,OAASN,KAAK9X,QAAUtF,KAAKwL,KAAK4R,KAAKrW,OAAQqW,KAAK5W,gBACpDb,IAAMyX,KAAK7Y,KAAO,IAEvBoL,UACKhK,IAAMyX,KAAKpX,UAEXlB,UAAUsY,KAAKpa,SAAWoa,KAAKpa,OAAOmD,kBAAoBiX,KAAK5W,UAAY4W,KAAK9X,QAAU8X,KAAKM,OAA6B,IAApBN,KAAK/O,YAAqBrO,KAAK+F,IAAIqX,KAAK1W,UAAYT,IAAamX,KAAK9X,QAAUW,MAGxLmX,MAhBCA,KAAKQ,QAmBdL,UAAA,mBAAUxgB,MACLygB,UAAUve,OAAQ,MAChB0F,OAAS5H,MACViG,EAASoa,KAAKpa,QAAUoa,KAAK7Z,WACjCP,IAAWA,EAAOiE,OAAUmW,KAAKpa,QAAW2D,GAAe3D,EAAQoa,KAAMrgB,EAAQqgB,KAAKrW,QAC/EqW,YAEDA,KAAKzY,WAGb0T,QAAA,iBAAQ0F,UACAX,KAAKzY,QAAUvH,EAAY2gB,GAAkBX,KAAKxX,gBAAkBwX,KAAK7X,YAAcvF,KAAK+F,IAAIqX,KAAKzX,KAAO,OAGpHa,QAAA,iBAAQwX,OACHhb,EAASoa,KAAKpa,QAAUoa,KAAK7Z,WACzBP,EAAwBgb,KAAiBZ,KAAKzX,KAAQyX,KAAKhY,SAAWgY,KAAKhX,OAASgX,KAAK9U,gBAAkB,GAAO8U,KAAK9X,QAAU8X,KAAK1Y,KAAO0Y,KAAK5X,SAAY4X,KAAKzX,IAAoBF,GAAwBzC,EAAOwD,QAAQwX,GAAcZ,MAAnEA,KAAK9X,OAArK8X,KAAK9X,WAGvBP,OAAA,gBAAOyJ,YAAAA,IAAAA,EAAQqJ,QACVoG,EAAkBrc,SACtBA,EAAa4M,GACT4O,KAAKvb,UAAYub,KAAKtb,iBACpBwE,UAAY8W,KAAK9W,SAASvB,OAAOyJ,QACjC1J,WAAW,IAAM0J,EAAO9M,iBAEhB,gBAATyW,OAAqC,IAAhB3J,EAAOJ,MAAkBgP,KAAKhP,OACxDxM,EAAaqc,EACNb,SAGRc,WAAA,oBAAW1X,WACNhF,EAAY4b,KACf3b,EAAO+b,UAAUve,OAASuH,EAAUhF,EAAUgF,UACxChF,GACNC,EAAOD,EAAUmD,OAASlD,GAAQzB,KAAK+F,IAAIvE,EAAUmE,MAAQ,GAC7DnE,EAAYA,EAAU+B,WAEf6Z,KAAKpa,QAAUoa,KAAKe,KAAOf,KAAKe,KAAKD,WAAW1X,GAAW/E,MAGpE2G,OAAA,gBAAOrL,UACFygB,UAAUve,aACRmG,QAAUrI,IAAUqf,EAAAA,GAAY,EAAIrf,EAClCwL,GAAuB6U,QAEN,IAAlBA,KAAKhY,QAAiBgX,EAAAA,EAAWgB,KAAKhY,YAG9CgZ,YAAA,qBAAYrhB,MACPygB,UAAUve,OAAQ,KACjBwC,EAAO2b,KAAKhX,kBACXZ,QAAUzI,EACfwL,GAAuB6U,MAChB3b,EAAO2b,KAAK3b,KAAKA,GAAQ2b,YAE1BA,KAAK5X,YAGb6Y,KAAA,cAAKthB,UACAygB,UAAUve,aACR0U,MAAQ5W,EACNqgB,MAEDA,KAAKzJ,UAGb2K,KAAA,cAAK1X,EAAUlF,UACP0b,KAAKtY,UAAUgC,GAAesW,KAAMxW,GAAWxJ,EAAYsE,QAGnE6c,QAAA,iBAAQC,EAAc9c,eAChB+c,OAAO3Z,UAAU0Z,GAAgBpB,KAAKrW,OAAS,EAAG3J,EAAYsE,SAC9DgD,OAAS0Y,KAAK1W,QAAUT,GACtBmX,SAGRqB,KAAA,cAAKjU,EAAM9I,UACF,MAAR8I,GAAgB4S,KAAKkB,KAAK9T,EAAM9I,GACzB0b,KAAKsB,UAAS,GAAOZ,QAAO,OAGpCa,QAAA,iBAAQnU,EAAM9I,UACL,MAAR8I,GAAgB4S,KAAKkB,KAAK9T,GAAQ4S,KAAKxX,gBAAiBlE,GACjD0b,KAAKsB,UAAS,GAAMZ,QAAO,OAGnCc,MAAA,eAAMC,EAAQnd,UACH,MAAVmd,GAAkBzB,KAAKkB,KAAKO,EAAQnd,GAC7B0b,KAAKU,QAAO,OAGpBgB,OAAA,yBACQ1B,KAAKU,QAAO,OAGpBY,SAAA,kBAAS3hB,UACJygB,UAAUve,UACXlC,IAAUqgB,KAAKsB,YAActB,KAAKpW,WAAWoW,KAAKpX,OAASjJ,GAASkJ,EAAW,IAC1EmX,MAEDA,KAAKpX,KAAO,MAGpB+Y,WAAA,kCACMld,SAAWub,KAAK7Y,KAAO,OACvBmC,QAAUT,EACRmX,SAGR4B,SAAA,wBAGExY,EAFGxD,EAASoa,KAAKpa,QAAUoa,KAAK7Z,IAChCnD,EAAQgd,KAAKzY,eAEH3B,KAAWoa,KAAKzX,KAAOyX,KAAKvb,UAAYmB,EAAOgc,aAAexY,EAAUxD,EAAOwD,SAAQ,KAAUpG,GAASoG,EAAU4W,KAAK/E,SAAQ,GAAQpS,QAGrJgZ,cAAA,uBAAcvW,EAAM+Q,EAAU9Q,OACzB5F,EAAOqa,KAAKra,YACO,EAAnBya,UAAUve,QACRwa,GAGJ1W,EAAK2F,GAAQ+Q,EACb9Q,IAAW5F,EAAK2F,EAAO,UAAYC,GAC1B,aAATD,IAAwB0U,KAAK8B,UAAYzF,WAJlC1W,EAAK2F,GAMN0U,MAEDra,EAAK2F,OAGbyW,KAAA,cAAKC,OACAC,EAAOjC,YACJ,IAAIkC,QAAQ,SAAAC,GAEN,SAAXC,SACKC,EAAQJ,EAAKF,KACjBE,EAAKF,KAAO,KACZniB,EAAY6e,KAAOA,EAAIA,EAAEwD,MAAWxD,EAAEsD,MAAQtD,IAAMwD,KAAUA,EAAKF,KAAOM,GAC1EF,EAAQ1D,GACRwD,EAAKF,KAAOM,MANV5D,EAAI7e,EAAYoiB,GAAeA,EAAchd,GAQ7Cid,EAAKxd,UAAsC,IAAzBwd,EAAK/W,iBAAqC,GAAZ+W,EAAK1Z,MAAe0Z,EAAK/Z,QAAU+Z,EAAK1Z,IAAM,EACjG6Z,KAEAH,EAAKK,MAAQF,SAKhBpR,KAAA,gBACCF,GAAWkP,qCAlSAra,QACNA,KAAOA,OACPgE,QAAUhE,EAAK8T,OAAS,GACxBuG,KAAKhY,QAAUrC,EAAKqF,SAAWgU,EAAAA,GAAY,EAAIrZ,EAAKqF,QAAU,UAC7D5C,QAAUzC,EAAKqb,aAAe,OAC9BzK,QAAU5Q,EAAKsb,QAAUtb,EAAK2Q,eAE/B/N,IAAM,EACXsC,GAAamV,MAAOra,EAAKwC,SAAU,EAAG,QACjC4S,KAAOpV,EAAKoV,KACblD,SACE2E,KAAO3E,GACHkD,KAAKnQ,KAAKoV,MAEpB/H,GAAiBvN,GAAQwT,OAyR3BhZ,GAAagb,GAAUzN,UAAW,CAACzJ,MAAM,EAAGzB,OAAO,EAAGF,KAAK,EAAGa,OAAO,EAAGO,MAAM,EAAGjB,OAAO,EAAGQ,QAAQ,EAAGuO,OAAM,EAAO3Q,OAAO,KAAMnB,UAAS,EAAO2D,QAAQ,EAAGG,IAAI,EAAGpC,IAAI,EAAGoc,MAAM,EAAGjZ,QAAQT,EAAUyZ,MAAM,EAAG9B,KAAI,EAAO5X,KAAK,QAyBhNwC,iCAEAzF,EAAW6D,yBAAX7D,IAAAA,EAAO,mBACZA,UACDkL,OAAS,KACT9H,oBAAsBpD,EAAKoD,oBAC3B9B,qBAAuBtB,EAAKsB,qBAC5B4C,MAAQ7J,EAAY2F,EAAK6c,cAC9B3c,GAAmB0D,GAAe5D,EAAKC,QAAUC,4BAAuB2D,GACxE7D,EAAK2b,UAAYmB,EAAKlB,UACtB5b,EAAK+a,QAAU+B,EAAK/B,QAAO,GAC3B/a,EAAKoL,eAAiB/G,6BAAqBrE,EAAKoL,8EAGjD2R,GAAA,YAAGphB,EAASqE,EAAM6D,UACjB6B,GAAiB,EAAG+U,UAAWJ,MACxBA,QAGR5S,KAAA,cAAK9L,EAASqE,EAAM6D,UACnB6B,GAAiB,EAAG+U,UAAWJ,MACxBA,QAGR2C,OAAA,gBAAOrhB,EAASshB,EAAUC,EAAQrZ,UACjC6B,GAAiB,EAAG+U,UAAWJ,MACxBA,QAGRC,IAAA,aAAI3e,EAASqE,EAAM6D,UAClB7D,EAAKwC,SAAW,EAChBxC,EAAKC,OAASoa,KACdta,GAAiBC,GAAMqb,cAAgBrb,EAAKqF,OAAS,GACrDrF,EAAKkC,kBAAoBlC,EAAKkC,oBAC1BgE,GAAMvK,EAASqE,EAAM+D,GAAesW,KAAMxW,GAAW,GAClDwW,QAGRpE,KAAA,cAAKS,EAAU9Q,EAAQ/B,UACfD,GAAeyW,KAAMnU,GAAMiX,YAAY,EAAGzG,EAAU9Q,GAAS/B,MAIrEuZ,UAAA,mBAAUzhB,EAAS6G,EAAUxC,EAAMqd,EAASxZ,EAAUyZ,EAAeC,UACpEvd,EAAKwC,SAAWA,EAChBxC,EAAKqd,QAAUrd,EAAKqd,SAAWA,EAC/Brd,EAAKwd,WAAaF,EAClBtd,EAAKyd,iBAAmBF,EACxBvd,EAAKC,OAASoa,SACVnU,GAAMvK,EAASqE,EAAM+D,GAAesW,KAAMxW,IACvCwW,QAGRqD,YAAA,qBAAY/hB,EAAS6G,EAAUxC,EAAMqd,EAASxZ,EAAUyZ,EAAeC,UACtEvd,EAAKgG,aAAe,EACpBjG,GAAiBC,GAAMkC,gBAAkB7H,EAAY2F,EAAKkC,iBACnDmY,KAAK+C,UAAUzhB,EAAS6G,EAAUxC,EAAMqd,EAASxZ,EAAUyZ,EAAeC,MAGlFI,cAAA,uBAAchiB,EAAS6G,EAAUya,EAAUC,EAAQG,EAASxZ,EAAUyZ,EAAeC,UACpFL,EAAOjX,QAAUgX,EACjBld,GAAiBmd,GAAQhb,gBAAkB7H,EAAY6iB,EAAOhb,iBACvDmY,KAAK+C,UAAUzhB,EAAS6G,EAAU0a,EAAQG,EAASxZ,EAAUyZ,EAAeC,MAGpFhf,OAAA,gBAAOwD,EAAWpD,EAAgBC,OAMhCF,EAAMgC,EAAOS,EAAMyZ,EAAW1F,EAAe0I,EAAYC,EAAY5Z,EAAW6Z,EAAWC,EAAezC,EAAM7K,EAL7GuN,EAAW3D,KAAKhX,MACnB4a,EAAO5D,KAAKxY,OAASwY,KAAKxX,gBAAkBwX,KAAKvX,MACjDwC,EAAM+U,KAAK1Y,KACX+C,EAAQ3C,GAAa,EAAI,EAAI5E,GAAc4E,GAC3Cmc,EAAiB7D,KAAK1W,OAAS,GAAQ5B,EAAY,IAAOsY,KAAKvb,WAAawG,aAEpEpF,GAA2B+d,EAARvZ,GAA6B,GAAb3C,IAAmB2C,EAAQuZ,GACnEvZ,IAAU2V,KAAK9X,QAAU3D,GAASsf,EAAe,IAChDF,IAAa3D,KAAKhX,OAASiC,IAC9BZ,GAAS2V,KAAKhX,MAAQ2a,EACtBjc,GAAasY,KAAKhX,MAAQ2a,GAE3Btf,EAAOgG,EACPoZ,EAAYzD,KAAKzY,OAEjBgc,IADA3Z,EAAYoW,KAAKzX,KAEbsb,IACH5Y,IAAQ0Y,EAAW3D,KAAK1W,SAEvB5B,GAAcpD,IAAoB0b,KAAK1W,OAAS5B,IAE9CsY,KAAKhY,QAAS,IACjBiZ,EAAOjB,KAAKzJ,MACZsE,EAAgB5P,EAAM+U,KAAK5X,QACvB4X,KAAKhY,SAAW,GAAKN,EAAY,SAC7BsY,KAAKtY,UAA0B,IAAhBmT,EAAsBnT,EAAWpD,EAAgBC,MAExEF,EAAOvB,GAAcuH,EAAQwQ,GACzBxQ,IAAUuZ,GACbrD,EAAYP,KAAKhY,QACjB3D,EAAO4G,KAGPsV,KADAmD,EAAgB5gB,GAAcuH,EAAQwQ,MAErB0F,IAAcmD,IAC9Brf,EAAO4G,EACPsV,KAEMtV,EAAP5G,IAAeA,EAAO4G,IAEvByY,EAAgBzb,GAAgB+X,KAAK9X,OAAQ2S,IAC5C8I,GAAY3D,KAAK9X,QAAUwb,IAAkBnD,GAAaP,KAAK9X,OAASwb,EAAgB7I,EAAgBmF,KAAK1Y,MAAQ,IAAMoc,EAAgBnD,GACxIU,GAAqB,EAAZV,IACZlc,EAAO4G,EAAM5G,EACb+R,EAAS,GAUNmK,IAAcmD,IAAkB1D,KAAK8D,MAAO,KAC3CC,EAAa9C,GAAyB,EAAhByC,EACzBM,EAAYD,KAAe9C,GAAqB,EAAZV,MACrCA,EAAYmD,IAAkBK,GAAaA,GAC3CJ,EAAWI,EAAY,EAAI1Z,EAAQY,EAAMA,EAAMZ,OAC1CyZ,MAAQ,OACR5f,OAAOyf,IAAavN,EAAS,EAAItT,GAAcyd,EAAY1F,IAAiBvW,GAAiB2G,GAAK6Y,MAAQ,OAC1G5b,OAASmC,GACb/F,GAAkB0b,KAAKpa,QAAUsL,GAAU8O,KAAM,iBAC7Cra,KAAKse,gBAAkB7N,IAAW4J,KAAK2B,aAAamC,MAAQ,GAC5DH,GAAYA,IAAa3D,KAAKhX,OAAUua,IAAgBvD,KAAKzX,KAAQyX,KAAKra,KAAKue,WAAalE,KAAKpa,SAAWoa,KAAK7Y,YAC9G6Y,QAER/U,EAAM+U,KAAK1Y,KACXsc,EAAO5D,KAAKvX,MACRub,SACEF,MAAQ,EACbH,EAAWI,EAAY9Y,GAAO,UACzB/G,OAAOyf,GAAU,QACjBhe,KAAKse,gBAAkB7N,GAAU4J,KAAK2B,mBAEvCmC,MAAQ,GACR9D,KAAKzX,MAAQgb,SACVvD,KAGR7J,GAAmB6J,KAAM5J,OAGvB4J,KAAKmE,YAAcnE,KAAKoE,UAAYpE,KAAK8D,MAAQ,IACpDN,EA3wCmB,SAAtBa,oBAAuBjgB,EAAWuf,EAAUtf,OACvCgC,KACOsd,EAAPtf,MACHgC,EAAQjC,EAAUiS,OACXhQ,GAASA,EAAMkB,QAAUlD,GAAM,IAClB,YAAfgC,EAAM0U,MAAsB1U,EAAMkB,OAASoc,SACvCtd,EAERA,EAAQA,EAAMO,eAGfP,EAAQjC,EAAUkgB,MACXje,GAASA,EAAMkB,QAAUlD,GAAM,IAClB,YAAfgC,EAAM0U,MAAsB1U,EAAMkB,OAASoc,SACvCtd,EAERA,EAAQA,EAAMM,OA2vCD0d,CAAoBrE,KAAMld,GAAc6gB,GAAW7gB,GAAcuB,OAE7EgG,GAAShG,GAAQA,EAAOmf,EAAWjc,cAIhCW,OAASmC,OACTrB,MAAQ3E,OACR8C,MAAQyC,EAERoW,KAAKvb,gBACJqd,UAAY9B,KAAKra,KAAK4e,cACtB9f,SAAW,OACX6E,OAAS5B,EACdic,EAAW,IAEPA,GAAYtf,IAASC,IAAmBic,IAC5CrP,GAAU8O,KAAM,WACZA,KAAK9X,SAAWmC,UACZ2V,QAGG2D,GAARtf,GAAiC,GAAbqD,MACvBrB,EAAQ2Z,KAAK3J,OACNhQ,GAAO,IACbS,EAAOT,EAAMO,OACRP,EAAMc,MAAQ9C,GAAQgC,EAAMkB,SAAWlB,EAAMkC,KAAOib,IAAend,EAAO,IAC1EA,EAAMT,SAAWoa,YACbA,KAAK9b,OAAOwD,EAAWpD,EAAgBC,MAE/C8B,EAAMnC,OAAmB,EAAZmC,EAAMkC,KAAWlE,EAAOgC,EAAMkB,QAAUlB,EAAMkC,KAAOlC,EAAMmB,OAASnB,EAAMmC,gBAAkBnC,EAAMoC,QAAUpE,EAAOgC,EAAMkB,QAAUlB,EAAMkC,IAAKjE,EAAgBC,GACvKF,IAAS2b,KAAKhX,QAAWgX,KAAKzX,MAAQgb,EAAa,CACtDC,EAAa,EACb1c,IAASuD,GAAU2V,KAAK1W,QAAUT,UAIpCxC,EAAQS,MAEH,CACNT,EAAQ2Z,KAAKsE,cACTE,EAAe9c,EAAY,EAAIA,EAAYrD,EACxCgC,GAAO,IACbS,EAAOT,EAAMM,OACRN,EAAMc,MAAQqd,GAAgBne,EAAMgB,OAAShB,EAAMkC,KAAOib,IAAend,EAAO,IAChFA,EAAMT,SAAWoa,YACbA,KAAK9b,OAAOwD,EAAWpD,EAAgBC,MAE/C8B,EAAMnC,OAAmB,EAAZmC,EAAMkC,KAAWic,EAAene,EAAMkB,QAAUlB,EAAMkC,KAAOlC,EAAMmB,OAASnB,EAAMmC,gBAAkBnC,EAAMoC,QAAU+b,EAAene,EAAMkB,QAAUlB,EAAMkC,IAAKjE,EAAgBC,GAAUC,IAAe6B,EAAM5B,UAAY4B,EAAM3B,WACxOL,IAAS2b,KAAKhX,QAAWgX,KAAKzX,MAAQgb,EAAa,CACtDC,EAAa,EACb1c,IAASuD,GAAU2V,KAAK1W,OAASkb,GAAgB3b,EAAWA,UAI9DxC,EAAQS,MAGN0c,IAAelf,SACbkd,QACLgC,EAAWtf,OAAeyf,GAARtf,EAAmB,GAAKwE,GAAUS,OAAiBqa,GAARtf,EAAmB,GAAK,EACjF2b,KAAKzX,iBACHhB,OAASkc,EACd/a,GAAQsX,MACDA,KAAK9b,OAAOwD,EAAWpD,EAAgBC,QAG3Cud,YAAcxd,GAAkB4M,GAAU8O,KAAM,YAAY,IAC5D3V,IAAUuZ,GAAQ5D,KAAK9X,QAAU8X,KAAKxX,kBAAsB6B,GAASsZ,KAAeF,IAAczD,KAAKzY,QAAU3E,KAAK+F,IAAIiB,KAAehH,KAAK+F,IAAIqX,KAAKzX,MAAWyX,KAAK8D,SAC1Kpc,GAAcuD,KAAUZ,IAAUuZ,GAAmB,EAAX5D,KAAKzX,MAAc8B,GAAS2V,KAAKzX,IAAM,IAAOxB,GAAkBiZ,KAAM,GAC5G1b,GAAoBoD,EAAY,IAAMic,IAActZ,IAASsZ,GAAaC,IAC9E1S,GAAU8O,KAAO3V,IAAUuZ,GAAqB,GAAblc,EAAiB,aAAe,qBAAsB,SACpF4a,OAAWjY,EAAQuZ,GAA2B,EAAnB5D,KAAKpW,aAAoBoW,KAAKsC,kBAI1DtC,QAGR7W,IAAA,aAAI9C,EAAOmD,iBACV3J,EAAU2J,KAAcA,EAAWE,GAAesW,KAAMxW,EAAUnD,MAC5DA,aAAiB6Z,IAAY,IAC9Bja,EAASI,UACZA,EAAM3D,QAAQ,SAAAvB,UAAOsjB,EAAKtb,IAAIhI,EAAKqI,KAC5BwW,QAEJtgB,EAAU2G,UACN2Z,KAAK0E,SAASre,EAAOmD,OAEzB5J,EAAYyG,UAGR2Z,KAFP3Z,EAAQwF,GAAMiX,YAAY,EAAGzc,UAKxB2Z,OAAS3Z,EAAQkD,GAAeyW,KAAM3Z,EAAOmD,GAAYwW,QAGjE2E,YAAA,qBAAY5O,EAAe6O,EAAeC,EAAkBC,YAAhD/O,IAAAA,GAAS,YAAM6O,IAAAA,GAAS,YAAMC,IAAAA,GAAY,YAAMC,IAAAA,GAAoBrW,WAC3E3K,EAAI,GACPuC,EAAQ2Z,KAAK3J,OACPhQ,GACFA,EAAMkB,QAAUud,IACfze,aAAiBwF,GACpB+Y,GAAU9gB,EAAE8G,KAAKvE,IAEjBwe,GAAa/gB,EAAE8G,KAAKvE,GACpB0P,GAAUjS,EAAE8G,WAAF9G,EAAUuC,EAAMse,aAAY,EAAMC,EAAQC,MAGtDxe,EAAQA,EAAMO,aAER9C,KAGRihB,QAAA,iBAAQhF,WACHiF,EAAahF,KAAK2E,YAAY,EAAG,EAAG,GACvCnjB,EAAIwjB,EAAWnjB,OACVL,QACDwjB,EAAWxjB,GAAGmE,KAAKoa,KAAOA,SACtBiF,EAAWxjB,MAKrB0F,OAAA,gBAAOb,UACF3G,EAAU2G,GACN2Z,KAAKiF,YAAY5e,GAErBzG,EAAYyG,GACR2Z,KAAKkF,aAAa7e,IAE1BA,EAAMT,SAAWoa,MAAQnZ,GAAsBmZ,KAAM3Z,GACjDA,IAAU2Z,KAAKjW,eACbA,QAAUiW,KAAKsE,OAEdld,GAAS4Y,UAGjBtY,UAAA,mBAAUA,EAAWpD,UACf8b,UAAUve,aAGVuiB,SAAW,GACXpE,KAAK7Z,KAAO6Z,KAAKzX,WAChBhB,OAASzE,GAAc4H,GAAQrG,MAAmB,EAAX2b,KAAKzX,IAAUb,EAAYsY,KAAKzX,KAAOyX,KAAKxX,gBAAkBd,IAAcsY,KAAKzX,mBAExHb,oBAAUA,EAAWpD,QACtB8f,SAAW,EACTpE,MARCA,KAAK9X,UAWdwc,SAAA,kBAAS9T,EAAOpH,eACVqH,OAAOD,GAASlH,GAAesW,KAAMxW,GACnCwW,QAGRiF,YAAA,qBAAYrU,iBACJoP,KAAKnP,OAAOD,GACZoP,QAGRmF,SAAA,kBAAS3b,EAAU6S,EAAU9Q,OACxB9E,EAAIoF,GAAMiX,YAAY,EAAGzG,GAAYjb,EAAYmK,UACrD9E,EAAEsU,KAAO,eACJoJ,UAAY,EACV5a,GAAeyW,KAAMvZ,EAAGiD,GAAesW,KAAMxW,OAGrD4b,YAAA,qBAAY5b,OACPnD,EAAQ2Z,KAAK3J,WACjB7M,EAAWE,GAAesW,KAAMxW,GACzBnD,GACFA,EAAMkB,SAAWiC,GAA2B,YAAfnD,EAAM0U,MACtChU,GAAkBV,GAEnBA,EAAQA,EAAMO,SAIhBse,aAAA,sBAAa5jB,EAAS+jB,EAAOC,WACxBV,EAAS5E,KAAKuF,YAAYjkB,EAASgkB,GACtC9jB,EAAIojB,EAAO/iB,OACLL,KACLgkB,KAAsBZ,EAAOpjB,IAAOojB,EAAOpjB,GAAGwP,KAAK1P,EAAS+jB,UAEvDrF,QAGRuF,YAAA,qBAAYjkB,EAASgkB,WAKnBG,EAJG3hB,EAAI,GACP4hB,EAAgBxjB,GAAQZ,GACxB+E,EAAQ2Z,KAAK3J,OACbsP,EAAe9lB,EAAUylB,GAEnBjf,GACFA,aAAiBwF,GAChBvI,GAAkB+C,EAAMuf,SAAUF,KAAmBC,IAAiBH,IAAsBnf,EAAM5B,UAAY4B,EAAMkC,MAASlC,EAAMya,WAAW,IAAMwE,GAAcjf,EAAMya,WAAWza,EAAMmC,iBAAmB8c,GAAcA,GAAcjf,EAAMub,aACjP9d,EAAE8G,KAAKvE,IAEGof,EAAWpf,EAAMkf,YAAYG,EAAeJ,IAAazjB,QACpEiC,EAAE8G,WAAF9G,EAAU2hB,GAEXpf,EAAQA,EAAMO,aAER9C,KAUR+hB,QAAA,iBAAQrc,EAAU7D,GACjBA,EAAOA,GAAQ,OAIdmgB,EAHGC,EAAK/F,KACR/E,EAAUvR,GAAeqc,EAAIvc,GAC3BoC,EAAqDjG,EAArDiG,QAASoa,EAA4CrgB,EAA5CqgB,QAASC,EAAmCtgB,EAAnCsgB,cAAepe,EAAoBlC,EAApBkC,gBAEnCjE,EAAQiI,GAAM6W,GAAGqD,EAAI7gB,GAAa,CACjCgI,KAAMvH,EAAKuH,MAAQ,OACnB1C,MAAM,EACN3C,iBAAiB,EACjBxD,KAAM4W,EACNzB,UAAW,OACXrR,SAAUxC,EAAKwC,UAAavF,KAAK+F,KAAKsS,GAAYrP,GAAW,SAAUA,EAAWA,EAAQvH,KAAO0hB,EAAG/c,QAAU+c,EAAGnc,cAAiBf,EAClImd,QAAS,sBACRD,EAAGvE,SACEsE,EAAS,KACT3d,EAAWxC,EAAKwC,UAAYvF,KAAK+F,KAAKsS,GAAYrP,GAAW,SAAUA,EAAWA,EAAQvH,KAAO0hB,EAAG/c,QAAU+c,EAAGnc,aACpHhG,EAAM0D,OAASa,GAAa0C,GAAajH,EAAOuE,EAAU,EAAG,GAAGjE,OAAON,EAAMoF,OAAO,GAAM,GAC3F8c,EAAU,EAEXE,GAAWA,EAAQ3Q,MAAMzR,EAAOqiB,GAAiB,MAEhDtgB,WACGkC,EAAkBjE,EAAMM,OAAO,GAAKN,KAG5CsiB,YAAA,qBAAYC,EAAcC,EAAYzgB,UAC9Bqa,KAAK6F,QAAQO,EAAYlhB,GAAa,CAAC0G,QAAQ,CAACvH,KAAKqF,GAAesW,KAAMmG,KAAiBxgB,OAGnG0V,OAAA,yBACQ2E,KAAKjW,WAGbsc,UAAA,mBAAUC,mBAAAA,IAAAA,EAAYtG,KAAKhX,OACnBwH,GAAqBwP,KAAMtW,GAAesW,KAAMsG,OAGxDC,cAAA,uBAAcC,mBAAAA,IAAAA,EAAaxG,KAAKhX,OACxBwH,GAAqBwP,KAAMtW,GAAesW,KAAMwG,GAAa,MAGrEC,aAAA,sBAAa9mB,UACLygB,UAAUve,OAASme,KAAKkB,KAAKvhB,GAAO,GAAQqgB,KAAKuG,cAAcvG,KAAKhX,MAAQH,MAGpF6d,cAAA,uBAAc7X,EAAQ8X,EAAc7B,YAAAA,IAAAA,EAAmB,WAGrD7f,EAFGoB,EAAQ2Z,KAAK3J,OAChBxF,EAASmP,KAAKnP,OAERxK,GACFA,EAAMkB,QAAUud,IACnBze,EAAMkB,QAAUsH,EAChBxI,EAAMgB,MAAQwH,GAEfxI,EAAQA,EAAMO,SAEX+f,MACE1hB,KAAK4L,EACLA,EAAO5L,IAAM6f,IAChBjU,EAAO5L,IAAM4J,UAITzH,GAAS4Y,SAGjB2B,WAAA,oBAAWiF,OACNvgB,EAAQ2Z,KAAK3J,gBACZyN,MAAQ,EACNzd,GACNA,EAAMsb,WAAWiF,GACjBvgB,EAAQA,EAAMO,yBAEF+a,qBAAWiF,MAGzBC,MAAA,eAAMC,YAAAA,IAAAA,GAAgB,WAEpBhgB,EADGT,EAAQ2Z,KAAK3J,OAEVhQ,GACNS,EAAOT,EAAMO,WACRM,OAAOb,GACZA,EAAQS,cAEJX,MAAQ6Z,KAAKhX,MAAQgX,KAAK9X,OAAS8X,KAAKM,OAAS,GACtDwG,IAAkB9G,KAAKnP,OAAS,IACzBzJ,GAAS4Y,SAGjBxX,cAAA,uBAAc7I,OAKZ+G,EAAM1D,EAAO4C,EAJVwI,EAAM,EACT6T,EAAOjC,KACP3Z,EAAQ4b,EAAKqC,MACbb,EAAYhV,KAET2R,UAAUve,cACNogB,EAAKrY,WAAWqY,EAAKja,QAAU,EAAIia,EAAK9Z,WAAa8Z,EAAKzZ,kBAAoByZ,EAAKX,YAAc3hB,EAAQA,OAE7GsiB,EAAKza,OAAQ,KAChB5B,EAASqc,EAAKrc,OACPS,GACNK,EAAOL,EAAMM,MACbN,EAAMmB,QAAUnB,EAAMmC,gBAEVib,GADZzgB,EAAQqD,EAAMkB,SACW0a,EAAKpY,OAASxD,EAAMkC,MAAQ0Z,EAAK6B,OACzD7B,EAAK6B,MAAQ,EACbva,GAAe0Y,EAAM5b,EAAOrD,EAAQqD,EAAMsD,OAAQ,GAAGma,MAAQ,GAE7DL,EAAYzgB,EAETA,EAAQ,GAAKqD,EAAMkC,MACtB6F,GAAOpL,IACD4C,IAAWqc,EAAK9b,KAASP,GAAUA,EAAOmD,qBAC/CkZ,EAAK1a,QAAUvE,EAAQif,EAAK1Z,IAC5B0Z,EAAKjZ,OAAShG,EACdif,EAAK/Z,QAAUlF,GAEhBif,EAAKyE,eAAe1jB,GAAO,GAAQ,UACnCygB,EAAY,GAEbpd,EAAMgB,KAAO+G,GAAO/H,EAAMkC,MAAQ6F,EAAM/H,EAAMgB,MAC9ChB,EAAQK,EAETmE,GAAaoX,EAAOA,IAASpc,GAAmBoc,EAAKjZ,MAAQoF,EAAO6T,EAAKjZ,MAAQoF,EAAK,EAAG,GACzF6T,EAAKza,OAAS,SAERya,EAAKxZ,gBAGNse,WAAP,oBAAkB1iB,MACbwB,EAAgB0C,MACnBpE,GAAgB0B,EAAiBwC,GAAwBhE,EAAMwB,IAC/D4E,EAAqBC,GAAQC,OAE1BD,GAAQC,OAASgQ,GAAc,CAClCA,IAAgB1B,EAAQC,WAAa,QACjC7S,EAAQR,EAAgBwQ,YACvBhQ,IAAUA,EAAMkC,MAAS0Q,EAAQC,WAAaxO,GAAQqO,WAAWlX,OAAS,EAAG,MAC1EwE,IAAUA,EAAMkC,KACtBlC,EAAQA,EAAMO,MAEfP,GAASqE,GAAQ8T,qBA3fS0B,IAkgB9Bhb,GAAakG,GAASqH,UAAW,CAACqR,MAAM,EAAGK,UAAU,EAAGC,SAAS,IA8GjD,SAAf4C,GAAgBrmB,EAAUgF,EAAM/B,EAAOuM,EAAO1O,EAAQH,OACjD2lB,EAAQC,EAAIC,EAAU3lB,KACtBgR,GAAS7R,KAAwL,KAA1KsmB,EAAS,IAAIzU,GAAS7R,IAAa6Q,KAAK/P,EAAQwlB,EAAOjV,QAAUrM,EAAKhF,GAdnF,SAAfymB,aAAgBzhB,EAAMwK,EAAO1O,EAAQH,EAASsC,MAC7ChE,EAAY+F,KAAUA,EAAO0hB,GAAmB1hB,EAAM/B,EAAOuM,EAAO1O,EAAQH,KACvEvB,EAAU4F,IAAUA,EAAK2hB,OAAS3hB,EAAKyG,UAAanG,EAASN,IAASsU,EAActU,UACjFjG,EAAUiG,GAAQ0hB,GAAmB1hB,EAAM/B,EAAOuM,EAAO1O,EAAQH,GAAWqE,MAGnFV,EADGQ,EAAO,OAENR,KAAKU,EACTF,EAAKR,GAAKoiB,GAAmB1hB,EAAKV,GAAIrB,EAAOuM,EAAO1O,EAAQH,UAEtDmE,EAIsG2hB,CAAazhB,EAAKhF,GAAWwP,EAAO1O,EAAQH,EAASsC,GAAQA,EAAOuM,EAAO7O,KACvLsC,EAAM2G,IAAM2c,EAAK,IAAIrU,GAAUjP,EAAM2G,IAAK9I,EAAQd,EAAU,EAAG,EAAGsmB,EAAO/iB,OAAQ+iB,EAAQ,EAAGA,EAAOM,UAC/F3jB,IAAUoU,OACbmP,EAAWvjB,EAAMyc,UAAUzc,EAAMgiB,SAASliB,QAAQjC,IAClDD,EAAIylB,EAAOxV,OAAO5P,OACXL,KACN2lB,EAASF,EAAOxV,OAAOjQ,IAAM0lB,SAIzBD,EAsKS,SAAjBO,GAAkB9U,EAAMvR,EAAKsmB,EAAUC,OAErCziB,EAAGnB,EADAoJ,EAAO/L,EAAI+L,MAAQwa,GAAY,kBAE/BzhB,EAAS9E,GACZ2C,EAAI2jB,EAAS/U,KAAU+U,EAAS/U,GAAQ,IAExCvR,EAAIuB,QAAQ,SAAC/C,EAAO6B,UAAMsC,EAAE8G,KAAK,CAACnE,EAAGjF,GAAKL,EAAIU,OAAS,GAAK,IAAKO,EAAGzC,EAAOgoB,EAAGza,eAEzEjI,KAAK9D,EACT2C,EAAI2jB,EAASxiB,KAAOwiB,EAASxiB,GAAK,IAC5B,SAANA,GAAgBnB,EAAE8G,KAAK,CAACnE,EAAGrD,WAAWsP,GAAOtQ,EAAGjB,EAAI8D,GAAI0iB,EAAGza,IArR/D,IAuGCsY,GACAoC,GAxDAhW,GAAgB,SAAhBA,cAAyBnQ,EAAQiR,EAAM1P,EAAOG,EAAKgN,EAAO7O,EAASwQ,EAAU+V,EAAcC,EAAWC,GACrGnoB,EAAYuD,KAASA,EAAMA,EAAIgN,GAAS,EAAG1O,EAAQH,QAIlD4lB,EAHGc,EAAevmB,EAAOiR,GACzBuV,EAAyB,QAAVjlB,EAAmBA,EAASpD,EAAYooB,GAAgCF,EAAYrmB,EAAQiR,EAAKhP,QAAQ,SAAW9D,EAAY6B,EAAO,MAAQiR,EAAKrP,OAAO,KAAQqP,EAAO,MAAQA,EAAKrP,OAAO,IAAIykB,GAAarmB,EAAOiR,KAA9JsV,EACvEE,EAAUtoB,EAAYooB,GAA+BF,EAAYK,GAAuBC,GAAlDC,MAEnC3oB,EAAUyD,MACRA,EAAIO,QAAQ,aAChBP,EAAMiN,GAAejN,IAEA,MAAlBA,EAAID,OAAO,OACdgkB,EAAKnkB,GAAeklB,EAAa9kB,IAAQ4I,GAAQkc,IAAgB,KAChD,IAAPf,IACT/jB,EAAM+jB,MAIJa,GAAYE,IAAgB9kB,GAAOykB,UAClCpa,MAAMya,EAAc9kB,IAAgB,KAARA,GAMhC6kB,GAAkBtV,KAAQjR,GAAWf,EAAegS,EAAMvP,GAxE7B,SAA7BmlB,2BAAsC7mB,EAAQiR,EAAM1P,EAAOG,EAAK+kB,EAAQL,EAAcC,OAIvFtT,EAAQ+T,EAAW7T,EAAO8T,EAAQC,EAAOC,EAAUC,EAAW7kB,EAH3DojB,EAAK,IAAIrU,GAAUmN,KAAKzV,IAAK9I,EAAQiR,EAAM,EAAG,EAAGkW,GAAsB,KAAMV,GAChF/X,EAAQ,EACR0Y,EAAa,MAEd3B,EAAGpY,EAAI9L,EACPkkB,EAAGS,EAAIxkB,EACPH,GAAS,IAEJ2lB,IADLxlB,GAAO,IACeO,QAAQ,cAC7BP,EAAMiN,GAAejN,IAElB0kB,IAEHA,EADA/jB,EAAI,CAACd,EAAOG,GACI1B,EAAQiR,GACxB1P,EAAQc,EAAE,GACVX,EAAMW,EAAE,IAETykB,EAAYvlB,EAAM6B,MAAMwV,KAAyB,GACzC7F,EAAS6F,GAAqBpO,KAAK9I,IAC1CqlB,EAAShU,EAAO,GAChBiU,EAAQtlB,EAAI6S,UAAU7F,EAAOqE,EAAOrE,OAChCuE,EACHA,GAASA,EAAQ,GAAK,EACS,UAArB+T,EAAMplB,QAAQ,KACxBqR,EAAQ,GAEL8T,IAAWD,EAAUM,OACxBH,EAAWtlB,WAAWmlB,EAAUM,EAAW,KAAO,EAElD3B,EAAG3c,IAAM,CACR3D,MAAOsgB,EAAG3c,IACVtF,EAAIwjB,GAAwB,IAAfI,EAAoBJ,EAAQ,IACzCnY,EAAGoY,EACHxU,EAAwB,MAArBsU,EAAOtlB,OAAO,GAAaH,GAAe2lB,EAAUF,GAAUE,EAAWtlB,WAAWolB,GAAUE,EACjGI,EAAIpU,GAASA,EAAQ,EAAK9R,KAAKC,MAAQ,GAExCsN,EAAQkK,GAAqBrF,kBAG/BkS,EAAGhT,EAAK/D,EAAQhN,EAAItB,OAAUsB,EAAI6S,UAAU7F,EAAOhN,EAAItB,QAAU,GACjEqlB,EAAG6B,GAAKjB,GACJxN,GAAQrF,KAAK9R,IAAQwlB,KACxBzB,EAAGS,EAAI,QAEHpd,IAAM2c,GA4BwBtL,KAAKoE,KAAMve,EAAQiR,EAAMuV,EAAa9kB,EAAK+kB,EAAQL,GAAgB5O,EAAQ4O,aAAcC,KAN1HZ,EAAK,IAAIrU,GAAUmN,KAAKzV,IAAK9I,EAAQiR,GAAOuV,GAAe,EAAG9kB,GAAO8kB,GAAe,GAA6B,kBAAlBD,EAA8BgB,GAAiBC,GAAc,EAAGf,GAC/JJ,IAAcZ,EAAG6B,GAAKjB,GACtBhW,GAAYoV,EAAGpV,SAASA,EAAUkO,KAAMve,GAChCue,KAAKzV,IAAM2c,IAmCtB5c,GAAa,SAAbA,WAAc1G,EAAOS,EAAMgG,OAWzB6e,EAAW1nB,EAAGyD,EAAGiiB,EAAIzlB,EAAQ0nB,EAAaC,EAAQznB,EAASslB,EAAQE,EAAUhX,EAAOkZ,EAAaC,EAV9F3jB,EAAO/B,EAAM+B,KACduH,EAAkGvH,EAAlGuH,KAAMtB,EAA4FjG,EAA5FiG,QAAS/D,EAAmFlC,EAAnFkC,gBAAiB2C,EAAkE7E,EAAlE6E,KAAM+Z,EAA4D5e,EAA5D4e,SAAU5Y,EAAkDhG,EAAlDgG,aAAc2K,EAAoC3Q,EAApC2Q,SAAUxQ,EAA0BH,EAA1BG,UAAWgC,EAAenC,EAAfmC,WACrFmD,EAAMrH,EAAM0D,KACZiiB,EAAc3lB,EAAMc,SACpBpD,EAAUsC,EAAMgiB,SAChBhgB,EAAShC,EAAMgC,OAEf4jB,EAAe5jB,GAA0B,WAAhBA,EAAOmV,KAAqBnV,EAAOD,KAAKrE,QAAUA,EAC3EmoB,EAAsC,SAArB7lB,EAAM8lB,aAA2B9R,EAClDmO,EAAKniB,EAAMsF,aAEZ6c,GAAQjgB,GAAcoH,IAAUA,EAAO,QACvCtJ,EAAM4S,MAAQrJ,GAAWD,EAAMqM,EAAUrM,MACzCtJ,EAAM6S,OAASH,EAAWtH,GAAY7B,IAAwB,IAAbmJ,EAAoBpJ,EAAOoJ,EAAUiD,EAAUrM,OAAS,EACrGoJ,GAAY1S,EAAM2S,QAAU3S,EAAMoE,UACrCsO,EAAW1S,EAAM6S,OACjB7S,EAAM6S,OAAS7S,EAAM4S,MACrB5S,EAAM4S,MAAQF,GAEf1S,EAAM+lB,OAAS5D,KAAQpgB,EAAKgG,cACvBoa,GAAOjgB,IAAcH,EAAKqd,QAAU,IAExCqG,GADA1nB,EAAUL,EAAQ,GAAKW,GAAUX,EAAQ,IAAIK,QAAU,IAC9BgE,EAAKhE,EAAQ+Q,MACtCwW,EAAY3jB,GAAeI,EAAMgN,IAC7B4W,IACHA,EAAYjgB,OAAS,GAAKigB,EAAYtY,SAAS,GAC9C5M,EAAO,GAAKsH,GAAgB9D,IAAoBC,EAAcyhB,EAAYrlB,QAAQ,GAAG,GAAQqlB,EAAY5hB,OAAOgE,GAAgBV,EAAMrD,GAAsB2S,IAE7JgP,EAAYtlB,MAAQ,GAEjB2H,MACH7E,GAAkBnD,EAAMc,SAAWmH,GAAMoU,IAAI3e,EAAS4D,GAAa,CAAC6V,KAAM,UAAWvB,WAAW,EAAO5T,OAAQA,EAAQiC,iBAAiB,EAAM2C,MAAO+e,GAAevpB,EAAYwK,GAAOoB,QAAS,KAAM6N,MAAO,EAAG8K,SAAUA,GAAa,kBAAMrT,GAAUtN,EAAO,aAAcof,QAAS,GAAIpX,KACzRhI,EAAMc,SAASyB,IAAM,EACrBvC,EAAMc,SAASqc,KAAOnd,EACrBS,EAAO,IAAMG,IAAgBqD,IAAoBC,IAAiBlE,EAAMc,SAASiD,OAAOC,IACrFC,GACCoD,GAAO5G,GAAQ,GAAKgG,GAAS,cAChChG,IAAST,EAAM0F,OAASjF,SAIpB,GAAIsH,GAAgBV,IAErBse,KACJllB,IAASwD,GAAkB,GAC3B5C,EAAIC,GAAa,CAChBsU,WAAW,EACXuB,KAAM,cACNvQ,KAAM3C,IAAoB0hB,GAAevpB,EAAYwK,GACrD3C,gBAAiBA,EACjBmb,QAAS,EACTpd,OAAQA,GACNsjB,GACHG,IAAgBpkB,EAAEtD,EAAQ+Q,MAAQ2W,GAClCtiB,GAAkBnD,EAAMc,SAAWmH,GAAMoU,IAAI3e,EAAS2D,IACtDrB,EAAMc,SAASyB,IAAM,EACrBvC,EAAMc,SAASqc,KAAOnd,EACrBS,EAAO,IAAOG,EAAaZ,EAAMc,SAASiD,OAAOC,IAAuBhE,EAAMc,SAASR,QAAQ,GAAG,IACnGN,EAAM0F,OAASjF,EACVwD,GAEE,IAAKxD,cADXiG,WAAW1G,EAAMc,SAAUmE,EAAUA,OAMxCjF,EAAM2G,IAAM3G,EAAMgmB,SAAW,EAC7Bpf,EAAQS,GAAOjL,EAAYwK,IAAWA,IAASS,EAC1CzJ,EAAI,EAAGA,EAAIF,EAAQO,OAAQL,IAAK,IAEpC4nB,GADA3nB,EAASH,EAAQE,IACDE,OAASL,GAASC,GAASE,GAAGE,MAC9CkC,EAAMyc,UAAU7e,GAAK2lB,EAAW,GAChCnjB,GAAYolB,EAAOrJ,KAAOlc,GAAYhC,QAAU8B,KAChDwM,EAAQqZ,IAAgBloB,EAAUE,EAAIgoB,EAAY9lB,QAAQjC,GACtDE,IAA0G,KAA9FslB,EAAS,IAAItlB,GAAW6P,KAAK/P,EAAQ4nB,GAAeH,EAAWtlB,EAAOuM,EAAOqZ,KAC5F5lB,EAAM2G,IAAM2c,EAAK,IAAIrU,GAAUjP,EAAM2G,IAAK9I,EAAQwlB,EAAO/lB,KAAM,EAAG,EAAG+lB,EAAO/iB,OAAQ+iB,EAAQ,EAAGA,EAAOM,UACtGN,EAAOxV,OAAO/O,QAAQ,SAAAxB,GAASimB,EAASjmB,GAAQgmB,IAChDD,EAAOM,WAAa4B,EAAc,KAE9BxnB,GAAW0nB,MACVpkB,KAAKikB,EACL1W,GAASvN,KAAOgiB,EAASD,GAAa/hB,EAAGikB,EAAWtlB,EAAOuM,EAAO1O,EAAQ+nB,IAC7EvC,EAAOM,WAAa4B,EAAc,GAElChC,EAASliB,GAAKiiB,EAAKtV,GAAcgK,KAAKhY,EAAOnC,EAAQwD,EAAG,MAAOikB,EAAUjkB,GAAIkL,EAAOqZ,EAAa,EAAG7jB,EAAKkiB,cAI5GjkB,EAAMimB,KAAOjmB,EAAMimB,IAAIroB,IAAMoC,EAAMoN,KAAKvP,EAAQmC,EAAMimB,IAAIroB,IACtDioB,GAAiB7lB,EAAM2G,MAC1Bib,GAAoB5hB,EACpBiC,EAAgBqf,aAAazjB,EAAQ0lB,EAAUvjB,EAAMkd,WAAWzc,IAChEilB,GAAe1lB,EAAMgC,OACrB4f,GAAoB,GAErB5hB,EAAM2G,KAAOC,IAASxG,GAAYolB,EAAOrJ,IAAM,GAEhDoJ,GAAeW,GAA0BlmB,GACzCA,EAAMmmB,SAAWnmB,EAAMmmB,QAAQnmB,GAEhCA,EAAMke,UAAYyC,EAClB3gB,EAAMa,WAAab,EAAMimB,KAAOjmB,EAAM2G,OAAS+e,EAC9CxjB,GAAazB,GAAQ,GAAM0hB,EAAG7hB,OAAOuK,GAAS,GAAM,IAyEtD4Y,GAAqB,SAArBA,mBAAsB1nB,EAAOiE,EAAOpC,EAAGC,EAAQH,UAAa1B,EAAYD,GAASA,EAAMic,KAAKhY,EAAOpC,EAAGC,EAAQH,GAAY5B,EAAUC,KAAWA,EAAM+D,QAAQ,WAAc0M,GAAezQ,GAASA,GACnMqqB,GAAqBpP,GAAiB,4DACtCqP,GAAsB,GACvB3nB,GAAa0nB,GAAqB,kDAAmD,SAAA9oB,UAAQ+oB,GAAoB/oB,GAAQ,QA8B5G2K,8BAEAvK,EAASqE,EAAM6D,EAAU0gB,SACf,iBAAVvkB,IACV6D,EAASrB,SAAWxC,EACpBA,EAAO6D,EACPA,EAAW,UAMXuc,EAAIvkB,EAAGiE,EAAMhC,EAAGwB,EAAGklB,EAAWC,EAAaC,mBAJtCH,EAAcvkB,EAAOD,GAAiBC,WACsEA,KAA5GwC,IAAAA,SAAUsR,IAAAA,MAAO5R,IAAAA,gBAAiBmb,IAAAA,QAASxJ,IAAAA,UAAW1T,IAAAA,UAAWX,IAAAA,SAAU4L,IAAAA,cAAeuF,IAAAA,SAC/F1Q,EAASD,EAAKC,QAAUC,EACxB6f,GAAiBzf,EAAS3E,IAAY2Y,EAAc3Y,GAAWzB,EAAUyB,EAAQ,IAAO,WAAYqE,GAAS,CAACrE,GAAWY,GAAQZ,QAE7HskB,SAAWF,EAAc7jB,OAASR,GAASqkB,GAAiB5kB,EAAM,eAAiBQ,EAAU,gCAAiC2X,EAAQG,iBAAmB,KACzJiH,UAAY,KACZqJ,WAAalQ,EACd1T,GAAakd,GAAW7iB,EAAgBgI,IAAahI,EAAgBsZ,GAAQ,IAChF9T,EAAO2kB,EAAK3kB,MACZogB,EAAKuE,EAAKphB,SAAW,IAAIkC,GAAS,CAAC2P,KAAM,SAAU5V,SAAUA,GAAY,GAAI7D,QAASsE,GAA0B,WAAhBA,EAAOmV,KAAoBnV,EAAOD,KAAKrE,QAAUokB,KAC9I1U,OACH+U,EAAGngB,OAASmgB,EAAG5f,8BACf4f,EAAGxe,OAAS,EACRyb,GAAW7iB,EAAgBgI,IAAahI,EAAgBsZ,GAAQ,IACnEhW,EAAIiiB,EAAc7jB,OAClBuoB,EAAcpH,GAAWhW,GAAWgW,GAChCjjB,EAAUijB,OACR/d,KAAK+d,GACJgH,GAAmBtmB,QAAQuB,MACRolB,EAAvBA,GAA4C,IACzBplB,GAAK+d,EAAQ/d,QAI9BzD,EAAI,EAAGA,EAAIiC,EAAGjC,KAClBiE,EAAOF,GAAeI,EAAMskB,KACvBjH,QAAU,EACf1M,IAAa7Q,EAAK6Q,SAAWA,GAC7B+T,GAAsB9pB,GAAOkF,EAAM4kB,GACnCF,EAAYzE,EAAclkB,GAE1BiE,EAAK0C,UAAYkf,GAAmBlf,4BAAgB3G,EAAG2oB,EAAWzE,GAClEjgB,EAAKgU,QAAU4N,GAAmB5N,4BAAajY,EAAG2oB,EAAWzE,IAAkB,GAAK4E,EAAK3gB,QACpFqZ,GAAiB,IAANvf,GAAWgC,EAAKgU,UAC1B9P,OAAS8P,EAAQhU,EAAKgU,QACtBlS,QAAUkS,EACfhU,EAAKgU,MAAQ,GAEdsM,EAAGrD,GAAGyH,EAAW1kB,EAAM2kB,EAAcA,EAAY5oB,EAAG2oB,EAAWzE,GAAiB,GAChFK,EAAGvP,MAAQpB,GAASuK,KAErBoG,EAAG5d,WAAcA,EAAWsR,EAAQ,EAAM6Q,EAAKphB,SAAW,OACpD,GAAIpD,EAAW,CACrBJ,GAAiBR,GAAa6gB,EAAGpgB,KAAKR,SAAU,CAAC+H,KAAK,UACtD6Y,EAAGvP,MAAQrJ,GAAWrH,EAAUoH,MAAQvH,EAAKuH,MAAQ,YAEpDpJ,EAAGymB,EAAInoB,EADJiC,EAAO,KAEP4B,EAASH,GACZA,EAAUpD,QAAQ,SAAAiI,UAASob,EAAGrD,GAAGgD,EAAe/a,EAAO,OACvDob,EAAG5d,eACG,KAEDlD,KADLQ,EAAO,GACGK,EACH,SAANb,GAAsB,aAANA,GAAoBuiB,GAAeviB,EAAGa,EAAUb,GAAIQ,EAAMK,EAAU4hB,cAEhFziB,KAAKQ,MACT3B,EAAI2B,EAAKR,GAAG6H,KAAK,SAAChJ,EAAGgL,UAAMhL,EAAE2C,EAAIqI,EAAErI,IAE9BjF,EADL6C,EAAO,EACK7C,EAAIsC,EAAEjC,OAAQL,KAEzBY,EAAI,CAAC8K,MADLqd,EAAKzmB,EAAEtC,IACOmmB,EAAGxf,UAAWoiB,EAAG9jB,GAAKjF,EAAIsC,EAAEtC,EAAI,GAAGiF,EAAI,IAAM,IAAM0B,IAC/DlD,GAAKslB,EAAGnoB,EACV2jB,EAAGrD,GAAGgD,EAAetjB,EAAGiC,GACxBA,GAAQjC,EAAE+F,SAGZ4d,EAAG5d,WAAaA,GAAY4d,EAAGrD,GAAG,GAAI,CAACva,SAAUA,EAAW4d,EAAG5d,cAGjEA,GAAYmiB,EAAKniB,SAAUA,EAAW4d,EAAG5d,mBAGpCe,SAAW,SAGC,IAAdsQ,GAAuB5B,IAC1B4N,6BACA3f,EAAgBqf,aAAaQ,GAC7BF,GAAoB,GAErBjc,GAAe3D,4BAAc4D,GAC7B7D,EAAK2b,UAAYgJ,EAAK/I,UACtB5b,EAAK+a,QAAU4J,EAAK5J,QAAO,IACvB7Y,IAAqBM,IAAarC,GAAawkB,EAAK/iB,SAAWzE,GAAc8C,EAAOoD,QAAUhJ,EAAY6H,IAxpEvF,SAAxB2iB,sBAAwBpmB,UAAcA,GAAcA,EAAUmE,KAAOiiB,sBAAsBpmB,EAAUwB,QAwpE8B4kB,6BAA+C,WAAhB5kB,EAAOmV,UAClK7S,QAAUW,IACV3E,OAAOtB,KAAKwL,IAAI,GAAIqL,IAAU,IAEpC1I,GAAiB/G,6BAAqB+G,4DAGvC7M,OAAA,gBAAOwD,EAAWpD,EAAgBC,OAMhCF,EAAM6iB,EAAI3G,EAAW1F,EAAe6I,EAAetN,EAAQmM,EAAOrZ,EAAUoN,EALzEqN,EAAW3D,KAAKhX,MACnB4a,EAAO5D,KAAKvX,MACZwC,EAAM+U,KAAK1Y,KACXmjB,EAAa/iB,EAAY,EACzB2C,EAAqBuZ,EAAO/a,EAAnBnB,IAAgC+iB,EAAc7G,EAAQlc,EAAYmB,EAAY,EAAInB,KAEvFuD,GAEE,GAAIZ,IAAU2V,KAAK9X,SAAWR,GAAanD,IAAWyb,KAAKvb,UAAYub,KAAK9X,QAAY8X,KAAKtb,UAAasb,KAAK1W,OAAS,GAAOmhB,GAAezK,KAAK/b,MAAO,IAChKI,EAAOgG,EACPnB,EAAW8W,KAAK9W,SACZ8W,KAAKhY,QAAS,IACjB6S,EAAgB5P,EAAM+U,KAAK5X,QACvB4X,KAAKhY,SAAW,GAAKyiB,SACjBzK,KAAKtY,UAA0B,IAAhBmT,EAAsBnT,EAAWpD,EAAgBC,MAExEF,EAAOvB,GAAcuH,EAAQwQ,GACzBxQ,IAAUuZ,GACbrD,EAAYP,KAAKhY,QACjB3D,EAAO4G,IAGPsV,KADAmD,EAAgB5gB,GAAcuH,EAAQwQ,MAErB0F,IAAcmD,GAC9Brf,EAAO4G,EACPsV,KACiBtV,EAAP5G,IACVA,EAAO4G,IAGTmL,EAAS4J,KAAKzJ,OAAsB,EAAZgK,KAEvBjK,EAAW0J,KAAKvJ,OAChBpS,EAAO4G,EAAM5G,GAEdqf,EAAgBzb,GAAgB+X,KAAK9X,OAAQ2S,GACzCxW,IAASsf,IAAapf,GAASyb,KAAKvb,UAAY8b,IAAcmD,cAE5Dxb,OAASmC,EACP2V,KAEJO,IAAcmD,IACjBxa,GAAY8W,KAAKvJ,QAAUN,GAAmBjN,EAAUkN,GAEpD4J,KAAKra,KAAKse,gBAAkB7N,IAAW4J,KAAK8D,OAASzf,IAASwW,GAAiBmF,KAAKvb,gBAClFqf,MAAQvf,EAAQ,OAChBL,OAAOpB,GAAc+X,EAAgB0F,IAAY,GAAMoB,aAAamC,MAAQ,QAK/E9D,KAAKvb,SAAU,IACf2F,GAAkB4V,KAAMyK,EAAa/iB,EAAYrD,EAAME,EAAOD,EAAgB+F,eAC5EnC,OAAS,EACP8X,UAEJ2D,IAAa3D,KAAKhX,OAAWzE,GAASyb,KAAKra,KAAKse,eAAiB1D,IAAcmD,UAC3E1D,QAEJ/U,IAAQ+U,KAAK1Y,YACT0Y,KAAK9b,OAAOwD,EAAWpD,EAAgBC,WAI3C2D,OAASmC,OACTrB,MAAQ3E,GAER2b,KAAK7Y,MAAQ6Y,KAAKzX,WACjBpB,KAAO,OACPlD,MAAQ,QAGTse,MAAQA,GAASjM,GAAY0J,KAAKxJ,OAAOnS,EAAO4G,GACjD+U,KAAK2J,aACHpH,MAAQA,EAAQ,EAAIA,GAGtBle,IAASsf,IAAarf,IAAmBic,IAC5CrP,GAAU8O,KAAM,WACZA,KAAK9X,SAAWmC,UACZ2V,SAGTkH,EAAKlH,KAAKzV,IACH2c,GACNA,EAAG3T,EAAEgP,EAAO2E,EAAGhZ,GACfgZ,EAAKA,EAAGtgB,MAERsC,GAAYA,EAAShF,OAAOwD,EAAY,EAAIA,EAAYwB,EAAS5B,KAAO4B,EAASsN,MAAMnS,EAAO2b,KAAK1Y,MAAOhD,EAAgBC,IAAYyb,KAAKtb,WAAasb,KAAK1W,OAAS5B,GAEnKsY,KAAK8B,YAAcxd,IACtBmmB,GAAchjB,GAAeuY,KAAMtY,EAAWpD,EAAgBC,GAC9D2M,GAAU8O,KAAM,kBAGZhY,SAAWuY,IAAcmD,GAAiB1D,KAAKra,KAAKue,WAAa5f,GAAkB0b,KAAKpa,QAAUsL,GAAU8O,KAAM,YAElH3V,IAAU2V,KAAKvX,OAAU4B,GAAU2V,KAAK9X,SAAWmC,IACvDogB,IAAezK,KAAK8B,WAAara,GAAeuY,KAAMtY,EAAW,GAAM,IACtEA,GAAcuD,KAAUZ,IAAU2V,KAAKvX,OAAoB,EAAXuX,KAAKzX,MAAc8B,GAAS2V,KAAKzX,IAAM,IAAOxB,GAAkBiZ,KAAM,GAC/G1b,GAAoBmmB,IAAe9G,KAActZ,GAASsZ,GAAYvN,KAC7ElF,GAAU8O,KAAO3V,IAAUuZ,EAAO,aAAe,qBAAsB,SAClEtB,OAAWjY,EAAQuZ,GAA2B,EAAnB5D,KAAKpW,aAAoBoW,KAAKsC,gBA7rEvC,SAA3BoI,yBAA4B9mB,EAAO8D,EAAWpD,EAAgBC,OAK5D2iB,EAAI3G,EAAWmD,EAJZiH,EAAY/mB,EAAM2e,MACrBA,EAAQ7a,EAAY,IAAOA,KAAgB9D,EAAM2D,QAJpB,SAA/BqjB,oCAAiChlB,IAAAA,cAAYA,GAAUA,EAAO2C,KAAO3C,EAAOnB,WAAamB,EAAOke,QAAUle,EAAOwD,UAAY,GAAKwhB,6BAA6BhlB,IAIlGglB,CAA6BhnB,KAAaA,EAAMa,WAAYqF,GAAmBlG,MAAcA,EAAM2E,IAAM,GAAK3E,EAAMuC,IAAIoC,IAAM,KAAOuB,GAAmBlG,IAAY,EAAI,EACnOod,EAAcpd,EAAMwE,QACpBiC,EAAQ,KAEL2W,GAAepd,EAAMoE,UACxBqC,EAAQhB,GAAO,EAAGzF,EAAM6E,MAAOf,GAC/B6Y,EAAYtY,GAAgBoC,EAAO2W,GACnCpd,EAAM2S,OAAsB,EAAZgK,IAAmBgC,EAAQ,EAAIA,GAC3ChC,IAActY,GAAgBrE,EAAMsE,OAAQ8Y,KAC/C2J,EAAY,EAAIpI,EAChB3e,EAAM+B,KAAKse,eAAiBrgB,EAAMa,UAAYb,EAAM+d,eAGlDY,IAAUoI,GAAanmB,GAAcD,GAASX,EAAM0F,SAAWT,IAAcnB,GAAa9D,EAAM0F,OAAS,KACvG1F,EAAMa,UAAY2F,GAAkBxG,EAAO8D,EAAWnD,EAAOD,EAAgB+F,cAGlFqZ,EAAgB9f,EAAM0F,OACtB1F,EAAM0F,OAAS5B,IAAcpD,EAAiBuE,EAAW,GACtCvE,EAAnBA,GAAoCoD,IAAcgc,EAClD9f,EAAM2e,MAAQA,EACd3e,EAAM+lB,QAAUpH,EAAQ,EAAIA,GAC5B3e,EAAMoF,MAAQ,EACdpF,EAAMsE,OAASmC,EACf6c,EAAKtjB,EAAM2G,IACJ2c,GACNA,EAAG3T,EAAEgP,EAAO2E,EAAGhZ,GACfgZ,EAAKA,EAAGtgB,MAETc,EAAY,GAAKD,GAAe7D,EAAO8D,EAAWpD,GAAgB,GAClEV,EAAMke,YAAcxd,GAAkB4M,GAAUtN,EAAO,YACvDyG,GAASzG,EAAMoE,UAAY1D,GAAkBV,EAAMgC,QAAUsL,GAAUtN,EAAO,aACzE8D,GAAa9D,EAAM6E,OAASf,EAAY,IAAM9D,EAAM2e,QAAUA,IAClEA,GAASxb,GAAkBnD,EAAO,GAC7BU,GAAmBE,IACvB0M,GAAUtN,EAAQ2e,EAAQ,aAAe,qBAAsB,GAC/D3e,EAAM0e,OAAS1e,EAAM0e,eAGZ1e,EAAM0F,SACjB1F,EAAM0F,OAAS5B,GAojEfgjB,CAAyB1K,KAAMtY,EAAWpD,EAAgBC,UAoGpDyb,QAGR1e,QAAA,0BACQ0e,KAAK4F,YAGbjE,WAAA,oBAAWiF,UACRA,GAAS5G,KAAKra,KAAKgG,eAAkBqU,KAAKtb,SAAW,QAClD6F,IAAMyV,KAAK6J,IAAM7J,KAAK8B,UAAY9B,KAAK/b,MAAQ+b,KAAKuC,MAAQ,OAC5DlC,UAAY,QACZnX,UAAY8W,KAAK9W,SAASyY,WAAWiF,eAC7BjF,qBAAWiF,MAGzBiE,QAAA,iBAAQlqB,EAAUhB,EAAOqD,EAAO8nB,EAAiBC,GAChD9S,GAAiBvN,GAAQwT,YACpB3V,KAAOyX,KAAKqB,WAEhBkB,EADGle,EAAOzB,KAAKyL,IAAI2R,KAAK1Y,MAAO0Y,KAAK7Z,IAAI6C,MAAQgX,KAAKzY,QAAUyY,KAAKzX,iBAEhE9D,UAAY6F,GAAW0V,KAAM3b,GAClCke,EAAQvC,KAAKxJ,MAAMnS,EAAO2b,KAAK1Y,MA5UZ,SAApB0jB,kBAAqBpnB,EAAOjD,EAAUhB,EAAOqD,EAAO8nB,EAAiBvI,EAAOle,EAAM0mB,OAEhF7D,EAAI+D,EAAQC,EAAQ1pB,EADjB2pB,GAAYvnB,EAAM2G,KAAO3G,EAAMgmB,WAAchmB,EAAMgmB,SAAW,KAAKjpB,OAElEwqB,MACJA,EAAUvnB,EAAMgmB,SAASjpB,GAAY,GACrCuqB,EAAStnB,EAAMyc,UACf7e,EAAIoC,EAAMgiB,SAAS/jB,OACZL,KAAK,KACX0lB,EAAKgE,EAAO1pB,GAAGb,KACLumB,EAAGhZ,GAAKgZ,EAAGhZ,EAAE3D,QACtB2c,EAAKA,EAAGhZ,EAAE3D,IACH2c,GAAMA,EAAGjiB,IAAMtE,GAAYumB,EAAG6B,KAAOpoB,GAC3CumB,EAAKA,EAAGtgB,UAGLsgB,SAEJU,GAAsB,EACtBhkB,EAAM+B,KAAKhF,GAAY,MACvB2J,GAAW1G,EAAOS,GAClBujB,GAAsB,EACfmD,EAAgBjqB,EAAMH,EAAW,2BAA6B,EAEtEwqB,EAAQvgB,KAAKsc,OAGf1lB,EAAI2pB,EAAQtpB,OACLL,MAEN0lB,GADA+D,EAASE,EAAQ3pB,IACL+I,KAAO0gB,GAChB3a,GAAKtN,GAAmB,IAAVA,GAAiB8nB,EAA0B5D,EAAG5W,GAAKtN,GAAS,GAAKuf,EAAQ2E,EAAGhT,EAAzClR,EACpDkkB,EAAGhT,EAAIvU,EAAQunB,EAAG5W,EAClB2a,EAAOtD,IAAMsD,EAAOtD,EAAIhlB,GAAOhD,GAASoM,GAAQkf,EAAOtD,IACvDsD,EAAOnc,IAAMmc,EAAOnc,EAAIoY,EAAG5W,EAAIvE,GAAQkf,EAAOnc,IAoT1Ckc,CAAkBhL,KAAMrf,EAAUhB,EAAOqD,EAAO8nB,EAAiBvI,EAAOle,EAAM0mB,GAC1E/K,KAAK6K,QAAQlqB,EAAUhB,EAAOqD,EAAO8nB,EAAiB,IAG/DhiB,GAAekX,KAAM,QAChBpa,QAAUQ,GAAmB4Z,KAAK7Z,IAAK6Z,KAAM,SAAU,QAASA,KAAK7Z,IAAI0D,MAAQ,SAAW,GAC1FmW,KAAK9b,OAAO,OAGpB8M,KAAA,cAAK1P,EAASqE,eAAAA,IAAAA,EAAO,SACfrE,GAAaqE,GAAiB,QAATA,eACpB1B,MAAQ+b,KAAKzV,IAAM,OACnB3E,OAASkL,GAAWkP,MAAQA,KAAKjP,eAAiBiP,KAAKjP,cAAcC,OAAOxM,GAC1Ewb,QAEJA,KAAK9W,SAAU,KACd0a,EAAO5D,KAAK9W,SAASV,4BACpBU,SAASgc,aAAa5jB,EAASqE,EAAM6f,KAA0D,IAArCA,GAAkB7f,KAAK6T,WAAoBnD,QAAUvF,GAAWkP,WAC1Hpa,QAAUge,IAAS5D,KAAK9W,SAASV,iBAAmBqC,GAAamV,KAAMA,KAAK1Y,KAAO0Y,KAAK9W,SAAST,MAAQmb,EAAM,EAAG,GAChH5D,SAMPoL,EAAkBC,EAAWC,EAAmBjG,EAAOpgB,EAAGiiB,EAAI1lB,EAJ3DkkB,EAAgB1F,KAAK4F,SACxB2F,EAAiBjqB,EAAUY,GAAQZ,GAAWokB,EAC9C8F,EAAkBxL,KAAKK,UACvBoL,EAAUzL,KAAKzV,SAEV5E,GAAiB,QAATA,IAz4EA,SAAf+lB,aAAgBC,EAAIC,WACfpqB,EAAImqB,EAAG9pB,OACVgD,EAAQrD,IAAMoqB,EAAG/pB,OACXgD,GAASrD,KAAOmqB,EAAGnqB,KAAOoqB,EAAGpqB,YAC7BA,EAAI,EAq4EsBkqB,CAAahG,EAAe6F,SACnD,QAAT5lB,IAAmBqa,KAAKzV,IAAM,GACvBuG,GAAWkP,UAEnBoL,EAAmBpL,KAAK6J,IAAM7J,KAAK6J,KAAO,GAC7B,QAATlkB,IACCjG,EAAUiG,KACbV,EAAI,GACJ3C,GAAaqD,EAAM,SAAAzE,UAAQ+D,EAAE/D,GAAQ,IACrCyE,EAAOV,GAERU,EAtVkB,SAApBkmB,kBAAqBvqB,EAASqE,OAG5BF,EAAMR,EAAGzD,EAAG6Q,EAFT1Q,EAAUL,EAAQ,GAAKW,GAAUX,EAAQ,IAAIK,QAAU,EAC1DmqB,EAAmBnqB,GAAWA,EAAQ0Q,YAElCyZ,SACGnmB,MAGHV,KADLQ,EAAOlF,GAAO,GAAIoF,GACRmmB,KACL7mB,KAAKQ,MAERjE,GADA6Q,EAAUyZ,EAAgB7mB,GAAGxC,MAAM,MACvBZ,OACNL,KACLiE,EAAK4M,EAAQ7Q,IAAMiE,EAAKR,UAKpBQ,EAoUComB,CAAkBnG,EAAe/f,IAEzCnE,EAAIkkB,EAAc7jB,OACXL,SACD+pB,EAAe7nB,QAAQgiB,EAAclkB,QAUpCyD,KATLomB,EAAYG,EAAgBhqB,GACf,QAATmE,GACHylB,EAAiB5pB,GAAKmE,EACtB0f,EAAQgG,EACRC,EAAoB,KAEpBA,EAAoBF,EAAiB5pB,GAAK4pB,EAAiB5pB,IAAM,GACjE6jB,EAAQ1f,GAEC0f,GACT6B,EAAKmE,GAAaA,EAAUpmB,MAErB,SAAUiiB,EAAGhZ,IAAuB,IAAjBgZ,EAAGhZ,EAAE8C,KAAK/L,IAClC4B,GAAsBmZ,KAAMkH,EAAI,cAE1BmE,EAAUpmB,IAEQ,QAAtBqmB,IACHA,EAAkBrmB,GAAK,eAKtBR,WAAaub,KAAKzV,KAAOkhB,GAAW3a,GAAWkP,MAC7CA,YAID0C,GAAP,YAAUphB,EAASqE,EAAnB,UACQ,IAAIkG,MAAMvK,EAASqE,EAD3B,UAIOyH,KAAP,cAAY9L,EAASqE,UACb0F,GAAiB,EAAG+U,kBAGrB0C,YAAP,qBAAmBrJ,EAAO4C,EAAU9Q,EAAQlL,UACpC,IAAIwL,MAAMwQ,EAAU,EAAG,CAACxU,iBAAgB,EAAO2C,MAAK,EAAOgP,WAAU,EAAOC,MAAMA,EAAO0J,WAAW9G,EAAU0P,kBAAkB1P,EAAU+G,iBAAiB7X,EAAQygB,wBAAwBzgB,EAAQkR,cAAcpc,WAGlNsiB,OAAP,gBAAcrhB,EAASshB,EAAUC,UACzBxX,GAAiB,EAAG+U,kBAGrBH,IAAP,aAAW3e,EAASqE,UACnBA,EAAKwC,SAAW,EAChBxC,EAAKqb,cAAgBrb,EAAKqF,OAAS,GAC5B,IAAIa,MAAMvK,EAASqE,UAGpBuf,aAAP,sBAAoB5jB,EAAS+jB,EAAOC,UAC5Bzf,EAAgBqf,aAAa5jB,EAAS+jB,EAAOC,WA1U3BpF,IA8U3Bhb,GAAa2G,GAAM4G,UAAW,CAACmT,SAAS,GAAI3hB,MAAM,EAAGS,SAAS,EAAGmlB,IAAI,EAAGE,QAAQ,IAWhFznB,GAAa,sCAAuC,SAAApB,GACnD2K,GAAM3K,GAAQ,eACT6kB,EAAK,IAAI3a,GACZG,EAASgQ,GAAOK,KAAKwE,UAAW,UACjC7U,EAAOvJ,OAAgB,kBAATd,EAA2B,EAAI,EAAG,EAAG,GAC5C6kB,EAAG7kB,GAAMmU,MAAM0Q,EAAIxa,MA2BR,SAAnB0gB,GAAoBxqB,EAAQd,EAAUhB,UAAU8B,EAAOyqB,aAAavrB,EAAUhB,GAkDxD,SAAtBwsB,GAAuB1qB,EAAQd,EAAUhB,EAAOob,GAC/CA,EAAKqR,KAAK3qB,EAAQd,EAAUoa,EAAK+N,EAAElN,KAAKb,EAAKnX,MAAOjE,EAAOob,EAAKsR,IAAKtR,GAtDvE,IAAIsN,GAAe,SAAfA,aAAgB5mB,EAAQd,EAAUhB,UAAU8B,EAAOd,GAAYhB,GAClEyoB,GAAc,SAAdA,YAAe3mB,EAAQd,EAAUhB,UAAU8B,EAAOd,GAAUhB,IAC5DwoB,GAAuB,SAAvBA,qBAAwB1mB,EAAQd,EAAUhB,EAAOob,UAAStZ,EAAOd,GAAUoa,EAAKgO,GAAIppB,IAEpFyS,GAAa,SAAbA,WAAc3Q,EAAQd,UAAaf,EAAY6B,EAAOd,IAAaynB,GAActoB,EAAa2B,EAAOd,KAAcc,EAAOyqB,aAAeD,GAAmB5D,IAC5JY,GAAe,SAAfA,aAAgB1G,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAGrC,KAAKC,MAAkC,KAA3BkY,EAAKzK,EAAIyK,EAAK7G,EAAIqO,IAAoB,IAASxH,IACpHiO,GAAiB,SAAjBA,eAAkBzG,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,KAAM8V,EAAKzK,EAAIyK,EAAK7G,EAAIqO,GAAQxH,IACxF6N,GAAuB,SAAvBA,qBAAgCrG,EAAOxH,OAClCmM,EAAKnM,EAAKxQ,IACb+F,EAAI,OACAiS,GAASxH,EAAKjM,EAClBwB,EAAIyK,EAAKjM,OACH,GAAc,IAAVyT,GAAexH,EAAK4M,EAC9BrX,EAAIyK,EAAK4M,MACH,MACCT,GACN5W,EAAI4W,EAAGjiB,GAAKiiB,EAAG4B,EAAI5B,EAAG4B,EAAE5B,EAAG5W,EAAI4W,EAAGhT,EAAIqO,GAAU3f,KAAKC,MAA8B,KAAvBqkB,EAAG5W,EAAI4W,EAAGhT,EAAIqO,IAAkB,KAAUjS,EACtG4W,EAAKA,EAAGtgB,MAET0J,GAAKyK,EAAK7G,EAEX6G,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAGqL,EAAGyK,IAE7BpJ,GAAoB,SAApBA,kBAA6B4Q,EAAOxH,WAC/BmM,EAAKnM,EAAKxQ,IACP2c,GACNA,EAAG3T,EAAEgP,EAAO2E,EAAGhZ,GACfgZ,EAAKA,EAAGtgB,OAGVmL,GAAqB,SAArBA,mBAA8BD,EAAUlO,EAAOnC,EAAQd,WAErDmG,EADGogB,EAAKlH,KAAKzV,IAEP2c,GACNpgB,EAAOogB,EAAGtgB,MACVsgB,EAAGjiB,IAAMtE,GAAYumB,EAAGpV,SAASA,EAAUlO,EAAOnC,GAClDylB,EAAKpgB,GAGP+K,GAAoB,SAApBA,kBAA6BlR,WAE3B2rB,EAA0BxlB,EADvBogB,EAAKlH,KAAKzV,IAEP2c,GACNpgB,EAAOogB,EAAGtgB,MACLsgB,EAAGjiB,IAAMtE,IAAaumB,EAAGqF,IAAOrF,EAAGqF,KAAO5rB,EAC9CkG,GAAsBmZ,KAAMkH,EAAI,OACrBA,EAAGsF,MACdF,EAA2B,GAE5BpF,EAAKpgB,SAEEwlB,GAKTxC,GAA4B,SAA5BA,0BAA4BlkB,WAE1BkB,EAAM2lB,EAAKC,EAAOC,EADfzF,EAAKthB,EAAO2E,IAGT2c,GAAI,KACVpgB,EAAOogB,EAAGtgB,MACV6lB,EAAMC,EACCD,GAAOA,EAAIG,GAAK1F,EAAG0F,IACzBH,EAAMA,EAAI7lB,OAENsgB,EAAGvgB,MAAQ8lB,EAAMA,EAAI9lB,MAAQgmB,GACjCzF,EAAGvgB,MAAMC,MAAQsgB,EAEjBwF,EAAQxF,GAEJA,EAAGtgB,MAAQ6lB,GACfA,EAAI9lB,MAAQugB,EAEZyF,EAAOzF,EAERA,EAAKpgB,EAENlB,EAAO2E,IAAMmiB,GAIF7Z,wBAiBZf,SAAA,kBAAStP,EAAMoB,EAAOnC,QAChB2qB,KAAOpM,KAAKoM,MAAQpM,KAAKC,SACzBA,IAAMkM,QACNrD,EAAItmB,OACJ6pB,GAAK5qB,OACLmC,MAAQA,iCApBFkD,EAAMrF,EAAQiR,EAAM1P,EAAO6pB,EAAQC,EAAU/R,EAAMmN,EAAQX,QACjE9gB,EAAIhF,OACJ6O,EAAItN,OACJkR,EAAI2Y,OACJ5nB,EAAIyN,OACJa,EAAIuZ,GAAY7D,QAChB/a,EAAI6M,GAAQiF,UACZC,IAAMiI,GAAUG,QAChBuE,GAAKrF,GAAY,QACjB3gB,MAAQE,KAEZA,EAAKH,MAAQqZ,MAgBhB1d,GAAasY,GAAiB,sOAAuO,SAAA1Z,UAAQyR,GAAezR,GAAQ,IACpSV,GAASusB,SAAWvsB,GAASwsB,UAAYnhB,GACzCrL,GAASysB,aAAezsB,GAAS0sB,YAAc9hB,GAC/CvF,EAAkB,IAAIuF,GAAS,CAACoX,cAAc,EAAOrd,SAAUoU,EAAWtS,oBAAoB,EAAM8Y,GAAG,OAAQhX,mBAAmB,IAClIkQ,EAAQ4O,aAAe/S,GAoBV,SAAZqY,GAAY7hB,UAASyN,GAAWzN,IAAS8hB,IAAarZ,IAAI,SAAA0K,UAAKA,MAC9C,SAAjB4O,SACKhpB,EAAOuZ,KAAKC,MACfyP,EAAU,GACiB,EAAxBjpB,EAAOkpB,KACVJ,GAAU,kBACVK,GAAO9qB,QAAQ,SAAAwR,OAGbrP,EAAOI,EAAGwoB,EAAUC,EAFjBC,EAAUzZ,EAAEyZ,QACfC,EAAa1Z,EAAE0Z,eAEX3oB,KAAK0oB,GACT9oB,EAAQwH,EAAKwhB,WAAWF,EAAQ1oB,IAAIqoB,WAC1BG,EAAW,GACjB5oB,IAAU+oB,EAAW3oB,KACxB2oB,EAAW3oB,GAAKJ,EAChB6oB,EAAU,GAGRA,IACHxZ,EAAEvM,SACF8lB,GAAYH,EAAQ1iB,KAAKsJ,MAG3BiZ,GAAU,oBACVG,EAAQ5qB,QAAQ,SAAAwR,UAAKA,EAAE4Z,QAAQ5Z,EAAG,SAAA1R,UAAQ0R,EAAE/K,IAAI,KAAM3G,OACtD+qB,GAAiBlpB,EACjB8oB,GAAU,eA/Bb,OAAIK,GAAS,GACZzU,GAAa,GACbqU,GAAc,GACdG,GAAiB,EACjBQ,GAAa,EA+BRC,2BASL7kB,IAAA,aAAIjI,EAAMsB,EAAMnC,GAYV,SAAJoe,SAGEjK,EAFG9N,EAAOmR,EACVoW,EAAehM,EAAK3V,gBAErB5F,GAAQA,IAASub,GAAQvb,EAAKqU,KAAKnQ,KAAKqX,GACxC5hB,IAAU4hB,EAAK3V,SAAWA,GAASjM,IACnCwX,EAAWoK,EACXzN,EAAShS,EAAK6S,MAAM4M,EAAM7B,WAC1BxgB,EAAY4U,IAAWyN,EAAKiM,GAAGtjB,KAAK4J,GACpCqD,EAAWnR,EACXub,EAAK3V,SAAW2hB,EAChBhM,EAAKkM,YAAa,EACX3Z,EAlBL5U,EAAYsB,KACfb,EAAQmC,EACRA,EAAOtB,EACPA,EAAOtB,OAEJqiB,EAAOjC,YAeXiC,EAAK0K,KAAOlO,GACLvd,IAAStB,EAAc6e,GAAEwD,EAAM,SAAAzf,UAAQyf,EAAK9Y,IAAI,KAAM3G,KAAStB,EAAQ+gB,EAAK/gB,GAAQud,GAAKA,OAEjG2P,OAAA,gBAAO5rB,OACFkE,EAAOmR,EACXA,EAAW,KACXrV,EAAKwd,MACLnI,EAAWnR,MAEZ2nB,UAAA,yBACKvqB,EAAI,eACHiX,KAAKrY,QAAQ,SAAAilB,UAAMA,aAAaqG,QAAWlqB,EAAE8G,WAAF9G,EAAU6jB,EAAE0G,aAAgB1G,aAAa9b,MAAY8b,EAAE/hB,QAA4B,WAAlB+hB,EAAE/hB,OAAOmV,OAAsBjX,EAAE8G,KAAK+c,KAChJ7jB,MAER+iB,MAAA,sBACMqH,GAAGrsB,OAASme,KAAKjF,KAAKlZ,OAAS,MAErCmP,KAAA,cAAKrJ,EAAQkmB,iBACRlmB,qBAGFlB,EAFGme,EAAS0J,EAAKD,YACjB7sB,EAAI8sB,EAAKvT,KAAKlZ,OAERL,KAES,YADfiF,EAAI6nB,EAAKvT,KAAKvZ,IACRuZ,OACLtU,EAAEkB,SACFlB,EAAEke,aAAY,GAAM,GAAM,GAAOjiB,QAAQ,SAAAkB,UAASghB,EAAO5iB,OAAO4iB,EAAOlhB,QAAQE,GAAQ,UAIzFghB,EAAO7Q,IAAI,SAAAtN,SAAc,CAAC+M,EAAG/M,EAAEa,MAAQb,EAAEkD,QAAWlD,EAAEsa,OAASta,EAAEsa,KAAKpb,KAAKkC,gBAAmBpB,EAAEqa,WAAW,IAAK,EAAA,EAAWra,EAAAA,KAAKqG,KAAK,SAAChJ,EAAGgL,UAAMA,EAAE0E,EAAI1P,EAAE0P,IAAK,EAAA,IAAW9Q,QAAQ,SAAA6rB,UAAKA,EAAE9nB,EAAEkB,OAAOA,KAC/LnG,EAAI8sB,EAAKvT,KAAKlZ,OACPL,MACNiF,EAAI6nB,EAAKvT,KAAKvZ,cACG4J,GACD,WAAX3E,EAAEsU,OACLtU,EAAEsK,eAAiBtK,EAAEsK,cAAcpJ,SACnClB,EAAEuK,QAGDvK,aAAaoF,KAAUpF,EAAEkB,QAAUlB,EAAEkB,OAAOA,GAGhD2mB,EAAKJ,GAAGxrB,QAAQ,SAAA+b,UAAKA,EAAE9W,EAAQ2mB,KAC/BA,EAAKH,YAAa,UAEbpT,KAAKrY,QAAQ,SAAAilB,UAAKA,EAAE3W,MAAQ2W,EAAE3W,cAE/B6V,QACDgH,UACCrsB,EAAIgsB,GAAO3rB,OACRL,KACNgsB,GAAOhsB,GAAGue,KAAOC,KAAKD,IAAMyN,GAAOxrB,OAAOR,EAAG,OAUhDmG,OAAA,gBAAOyJ,QACDJ,KAAKI,GAAU,+BAjGT5O,EAAMnC,QACZiM,SAAWjM,GAASiM,GAASjM,QAC7B0a,KAAO,QACPmT,GAAK,QACLC,YAAa,OACbpO,GAAKgO,KACVvrB,GAAQwd,KAAK7W,IAAI3G,UAkGbgsB,8BAMLrlB,IAAA,aAAIykB,EAAYprB,EAAMnC,GACrBN,EAAU6tB,KAAgBA,EAAa,CAACN,QAASM,QAGhDa,EAAIxpB,EAAGypB,EAFJnS,EAAU,IAAIyR,GAAQ,EAAG3tB,GAAS2f,KAAK3f,OAC1CsuB,EAAOpS,EAAQqR,WAAa,OAMxB3oB,KAJL4S,IAAa0E,EAAQjQ,WAAaiQ,EAAQjQ,SAAWuL,EAASvL,eACzDsiB,SAAShkB,KAAK2R,GACnB/Z,EAAO+Z,EAAQpT,IAAI,UAAW3G,GAC9B+Z,EAAQoR,QAAUC,EAEP,QAAN3oB,EACHypB,EAAS,GAETD,EAAKpiB,EAAKwhB,WAAWD,EAAW3oB,OAE/BuoB,GAAO9pB,QAAQ6Y,GAAW,GAAKiR,GAAO5iB,KAAK2R,IAC1CoS,EAAK1pB,GAAKwpB,EAAGnB,WAAaoB,EAAS,GACpCD,EAAGI,YAAcJ,EAAGI,YAAYxB,IAAkBoB,EAAGK,iBAAiB,SAAUzB,YAInFqB,GAAUlsB,EAAK+Z,EAAS,SAAAkC,UAAKlC,EAAQpT,IAAI,KAAMsV,KACxCuB,SAWRrY,OAAA,gBAAOyJ,QACDJ,KAAKI,GAAU,QAErBJ,KAAA,cAAKrJ,QACCinB,SAASlsB,QAAQ,SAAAwR,UAAKA,EAAElD,KAAKrJ,GAAQ,sCA1C/BtH,QACNuuB,SAAW,QACXvuB,MAAQA,EACbwX,GAAYA,EAASkD,KAAKnQ,KAAKoV,MAkDjC,IAAMte,GAAQ,CACbqtB,oEAAkBC,2BAAAA,kBACjBA,EAAKtsB,QAAQ,SAAA0O,UAAUD,GAAcC,MAEtClI,2BAASvD,UACD,IAAIyF,GAASzF,IAErB4f,iCAAYjkB,EAASgkB,UACbzf,EAAgB0f,YAAYjkB,EAASgkB,IAE7C2J,iCAAYxtB,EAAQd,EAAUuuB,EAAMC,GACnCzvB,EAAU+B,KAAYA,EAASS,GAAQT,GAAQ,QAC3C2tB,EAASntB,GAAUR,GAAU,IAAIyQ,IACpCmd,EAASH,EAAOlqB,GAAeL,SACvB,WAATuqB,IAAsBA,EAAO,IACrBztB,EAAmBd,EAA8I0uB,GAAS7c,GAAS7R,IAAa6R,GAAS7R,GAAUuR,KAAQkd,GAAQ3tB,EAAQd,EAAUuuB,EAAMC,IAA7N,SAACxuB,EAAUuuB,EAAMC,UAAYE,GAAS7c,GAAS7R,IAAa6R,GAAS7R,GAAUuR,KAAQkd,GAAQ3tB,EAAQd,EAAUuuB,EAAMC,KAA5I1tB,GAElB6tB,iCAAY7tB,EAAQd,EAAUuuB,MAET,GADpBztB,EAASS,GAAQT,IACNI,OAAY,KAClB0tB,EAAU9tB,EAAOsS,IAAI,SAAAtN,UAAKhG,GAAK6uB,YAAY7oB,EAAG9F,EAAUuuB,KAC3DzrB,EAAI8rB,EAAQ1tB,cACN,SAAAlC,WACF6B,EAAIiC,EACFjC,KACL+tB,EAAQ/tB,GAAG7B,IAId8B,EAASA,EAAO,IAAM,OAClB8P,EAASiB,GAAS7R,GACrB0M,EAAQpL,GAAUR,GAClBwD,EAAKoI,EAAM1L,UAAY0L,EAAM1L,QAAQ0Q,SAAW,IAAI1R,IAAcA,EAClEunB,EAAS3W,EAAS,SAAA5R,OACbsF,EAAI,IAAIsM,EACZyG,EAAYzN,IAAM,EAClBtF,EAAEuM,KAAK/P,EAAQytB,EAAOvvB,EAAQuvB,EAAOvvB,EAAOqY,EAAa,EAAG,CAACvW,IAC7DwD,EAAEf,OAAO,EAAGe,GACZ+S,EAAYzN,KAAOoH,GAAkB,EAAGqG,IACrC3K,EAAM4S,IAAIxe,EAAQwD,UAChBsM,EAAS2W,EAAS,SAAAvoB,UAASuoB,EAAOzmB,EAAQwD,EAAGiqB,EAAOvvB,EAAQuvB,EAAOvvB,EAAO0N,EAAO,KAEzFmiB,yBAAQ/tB,EAAQd,EAAUgF,GAEjB,SAAPnD,GAAQ7C,EAAOqD,EAAO8nB,UAAoBlnB,EAAMinB,QAAQlqB,EAAUhB,EAAOqD,EAAO8nB,SAD7ElnB,EAAQnD,GAAKiiB,GAAGjhB,EAAQyD,WAAevE,GAAW,UAAS+f,QAAQ,IAAMsC,QAAS,KAAIrd,GAAQ,YAElGnD,GAAKoB,MAAQA,EACNpB,IAERitB,+BAAWnuB,UACiD,EAApDuE,EAAgB0f,YAAYjkB,GAAS,GAAMO,QAEnDsD,2BAASxF,UACRA,GAASA,EAAMuN,OAASvN,EAAMuN,KAAOC,GAAWxN,EAAMuN,KAAMqM,EAAUrM,OAC/D9H,GAAWmU,EAAW5Z,GAAS,KAEvCyR,uBAAOzR,UACCyF,GAAW6T,EAAStZ,GAAS,KAErC+vB,8CAAgBxuB,IAAAA,KAAMyuB,IAAAA,OAAQC,IAAAA,QAASzqB,IAAAA,SAAU0qB,IAAAA,gBAC/CD,GAAW,IAAIntB,MAAM,KAAKC,QAAQ,SAAAotB,UAAcA,IAAetd,GAASsd,KAAgBtvB,GAASsvB,IAAehvB,EAAMI,EAAO,oBAAsB4uB,EAAa,cACjKpV,GAASxZ,GAAQ,SAACI,EAASqE,EAAMogB,UAAO4J,EAAOztB,GAAQZ,GAAU4D,GAAaS,GAAQ,GAAIR,GAAW4gB,IACjG8J,IACHzkB,GAASqH,UAAUvR,GAAQ,SAASI,EAASqE,EAAM6D,UAC3CwW,KAAK7W,IAAIuR,GAASxZ,GAAMI,EAASvB,EAAU4F,GAAQA,GAAQ6D,EAAW7D,IAAS,GAAIqa,MAAOxW,MAIpGumB,mCAAa7uB,EAAMgM,GAClBkI,GAASlU,GAAQiM,GAAWD,IAE7B8iB,6BAAU9iB,EAAMiS,UACRiB,UAAUve,OAASsL,GAAWD,EAAMiS,GAAe/J,IAE3D2P,yBAAQhF,UACAla,EAAgBkf,QAAQhF,IAEhCkQ,+BAAWtqB,EAAWuqB,YAAXvqB,IAAAA,EAAO,QAEhBU,EAAOS,EADJif,EAAK,IAAI3a,GAASzF,OAEtBogB,EAAGhd,kBAAoB/I,EAAY2F,EAAKoD,mBACxClD,EAAgBqB,OAAO6e,GACvBA,EAAG5f,IAAM,EACT4f,EAAG/c,MAAQ+c,EAAG7d,OAASrC,EAAgBmD,MACvC3C,EAAQR,EAAgBwQ,OACjBhQ,GACNS,EAAOT,EAAMO,OACTspB,IAA0B7pB,EAAMiB,MAAQjB,aAAiBwF,IAASxF,EAAMV,KAAKwd,aAAe9c,EAAMuf,SAAS,IAC9Grc,GAAewc,EAAI1f,EAAOA,EAAMkB,OAASlB,EAAMsD,QAEhDtD,EAAQS,SAETyC,GAAe1D,EAAiBkgB,EAAI,GAC7BA,GAERxJ,QAAS,iBAAC/Z,EAAMnC,UAAUmC,EAAO,IAAIwrB,GAAQxrB,EAAMnC,GAASwX,GAC5DgW,WAAY,oBAAAxtB,UAAS,IAAImuB,GAAWnuB,IACpC8vB,kBAAmB,oCAAM3C,GAAO9qB,QAAQ,SAAAwR,OAEtCkc,EAAOnrB,EADJ0pB,EAAOza,EAAE0Z,eAER3oB,KAAK0pB,EACLA,EAAK1pB,KACR0pB,EAAK1pB,IAAK,EACVmrB,EAAQ,GAGVA,GAASlc,EAAEvM,YACN0lB,MACNyB,2CAAiBxjB,EAAM+Q,OAClBvY,EAAIiV,GAAWzN,KAAUyN,GAAWzN,GAAQ,KAC/CxH,EAAEJ,QAAQ2Y,IAAavY,EAAE8G,KAAKyR,IAEhCgU,iDAAoB/kB,EAAM+Q,OACrBvY,EAAIiV,GAAWzN,GAClB9J,EAAIsC,GAAKA,EAAEJ,QAAQ2Y,GACf,GAAL7a,GAAUsC,EAAE9B,OAAOR,EAAG,IAEvB8uB,MAAO,CAAEC,KA3iFF,SAAPA,KAAgBliB,EAAKD,EAAKzO,OACrB6wB,EAAQpiB,EAAMC,SACXpI,EAASoI,GAAO4B,GAAW5B,EAAKkiB,KAAK,EAAGliB,EAAIxM,QAASuM,GAAOtC,GAAmBnM,EAAO,SAAAA,UAAW6wB,GAAS7wB,EAAQ0O,GAAOmiB,GAASA,EAASniB,KAyiFpIoiB,SAviFJ,SAAXA,SAAYpiB,EAAKD,EAAKzO,OACjB6wB,EAAQpiB,EAAMC,EACjBqiB,EAAgB,EAARF,SACFvqB,EAASoI,GAAO4B,GAAW5B,EAAKoiB,SAAS,EAAGpiB,EAAIxM,OAAS,GAAIuM,GAAOtC,GAAmBnM,EAAO,SAAAA,UAE7F0O,GAAgBmiB,GADvB7wB,GAAS+wB,GAAS/wB,EAAQ0O,GAAOqiB,GAASA,GAAS,GAClBA,EAAQ/wB,EAASA,MAkiF3BqN,WAAAA,GAAYD,OAAAA,GAAQqC,KAAAA,GAAMuhB,UA7iFvC,SAAZA,UAAatiB,EAAKD,EAAKzO,UAAUkc,GAASxN,EAAKD,EAAK,EAAG,EAAGzO,IA6iFIoM,QAAAA,GAAS6kB,MAnqF/D,SAARA,MAASviB,EAAKD,EAAKzO,UAAUmM,GAAmBnM,EAAO,SAAAyC,UAAKiH,GAAOgF,EAAKD,EAAKhM,MAmqFCgR,WAAAA,GAAYlR,QAAAA,GAASoK,SAAAA,GAAUuP,SAAAA,GAAUgV,KA/iFhH,SAAPA,kCAAWC,2BAAAA,yBAAc,SAAAnxB,UAASmxB,EAAUC,OAAO,SAAC3uB,EAAGqc,UAAMA,EAAErc,IAAIzC,KA+iF0DqxB,QA9iFnH,SAAVA,QAAWxuB,EAAM0sB,UAAS,SAAAvvB,UAAS6C,EAAKY,WAAWzD,KAAWuvB,GAAQnjB,GAAQpM,MA8iFwDsxB,YA7gFxH,SAAdA,YAAejuB,EAAOG,EAAK8N,EAAUigB,OAChC1uB,EAAOgL,MAAMxK,EAAQG,GAAO,EAAI,SAAA8B,UAAM,EAAIA,GAAKjC,EAAQiC,EAAI9B,OAC1DX,EAAM,KAGTyC,EAAGzD,EAAG2vB,EAAe1tB,EAAG2tB,EAFrBC,EAAW3xB,EAAUsD,GACxBsuB,EAAS,OAEG,IAAbrgB,IAAsBigB,EAAS,KAAOjgB,EAAW,MAC7CogB,EACHruB,EAAQ,CAACiC,EAAGjC,GACZG,EAAM,CAAC8B,EAAG9B,QAEJ,GAAI8C,EAASjD,KAAWiD,EAAS9C,GAAM,KAC7CguB,EAAgB,GAChB1tB,EAAIT,EAAMnB,OACVuvB,EAAK3tB,EAAI,EACJjC,EAAI,EAAGA,EAAIiC,EAAGjC,IAClB2vB,EAAcvmB,KAAKqmB,YAAYjuB,EAAMxB,EAAE,GAAIwB,EAAMxB,KAElDiC,IACAjB,EAAO,cAAAyC,GACNA,GAAKxB,MACDjC,EAAIoB,KAAKyL,IAAI+iB,IAAMnsB,UAChBksB,EAAc3vB,GAAGyD,EAAIzD,IAE7ByP,EAAW9N,OACA+tB,IACXluB,EAAQzC,GAAO0F,EAASjD,GAAS,GAAK,GAAIA,QAEtCmuB,EAAe,KACdlsB,KAAK9B,EACTyO,GAAcgK,KAAK0V,EAAQtuB,EAAOiC,EAAG,MAAO9B,EAAI8B,IAEjDzC,EAAO,cAAAyC,UAAK0M,GAAkB1M,EAAGqsB,KAAYD,EAAWruB,EAAMiC,EAAIjC,YAG7D8I,GAAmBmF,EAAUzO,IA0+E8GqK,QAAAA,IACnJ0kB,QAASnxB,EACToxB,QAAS9W,GACT+W,OAAQ/mB,GACRqc,WAAY3b,GAAS2b,WACrB6I,QAASpd,GACTkf,eAAgB7rB,EAChB8rB,KAAM,CAAC9e,UAAAA,GAAW+e,QAAS3wB,EAAY4K,MAAAA,GAAOT,SAAAA,GAAU8U,UAAAA,GAAW2R,SAAU5vB,GAAW4E,sBAAAA,GAAuBirB,UAAW,4BAAMttB,GAAY+X,QAAS,iBAAAwV,UAAcA,GAASla,IAAYA,EAASkD,KAAKnQ,KAAKmnB,GAAQA,EAAMvV,KAAO3E,GAAiBA,GAAama,mBAAoB,4BAAAryB,UAASiY,EAAsBjY,KAGlT2C,GAAa,8CAA+C,SAAApB,UAAQQ,GAAMR,GAAQ2K,GAAM3K,KACxFwJ,GAAQvB,IAAIiC,GAAS2b,YACrB/O,EAActW,GAAMghB,GAAG,GAAI,CAACva,SAAS,IAQX,SAAtB8pB,GAAuBhL,EAAQvU,WAC7BwU,EAAKD,EAAO1c,IACT2c,GAAMA,EAAGjiB,IAAMyN,GAAQwU,EAAGqF,KAAO7Z,GAAQwU,EAAG6B,KAAOrW,GACzDwU,EAAKA,EAAGtgB,aAEFsgB,EAkBe,SAAvBgL,GAAwBhxB,EAAM4Q,SACtB,CACN5Q,KAAMA,EACN8Q,QAAS,EACTR,mBAAK/P,EAAQkE,EAAM/B,GAClBA,EAAMmmB,QAAU,SAAAnmB,OACXuuB,EAAMltB,KACNvF,EAAUiG,KACbwsB,EAAO,GACP7vB,GAAaqD,EAAM,SAAAzE,UAAQixB,EAAKjxB,GAAQ,IACxCyE,EAAOwsB,GAEJrgB,EAAU,KAER7M,KADLktB,EAAO,GACGxsB,EACTwsB,EAAKltB,GAAK6M,EAASnM,EAAKV,IAEzBU,EAAOwsB,GAjCI,SAAhBC,cAAiBxuB,EAAOyuB,OAErBptB,EAAGzD,EAAG0lB,EADH5lB,EAAUsC,EAAMgiB,aAEf3gB,KAAKotB,MACT7wB,EAAIF,EAAQO,OACLL,MAEK0lB,GADXA,EAAKtjB,EAAMyc,UAAU7e,GAAGyD,KACRiiB,EAAGhZ,KACdgZ,EAAG3c,MACN2c,EAAK+K,GAAoB/K,EAAIjiB,IAE9BiiB,GAAMA,EAAGpV,UAAYoV,EAAGpV,SAASugB,EAAUptB,GAAIrB,EAAOtC,EAAQE,GAAIyD,IAwBnEmtB,CAAcxuB,EAAO+B,MA1C1B,IAiDalF,GAAOiB,GAAMqtB,eAAe,CACvC7tB,KAAK,OACLsQ,mBAAK/P,EAAQkE,EAAM/B,EAAOuM,EAAO7O,OAC5B2D,EAAGiiB,EAAI9kB,MAEN6C,UADArB,MAAQA,EACH+B,EACTvD,EAAIX,EAAOY,aAAa4C,IAAM,IAC9BiiB,EAAKlH,KAAK7W,IAAI1H,EAAQ,gBAAiBW,GAAK,GAAK,GAAIuD,EAAKV,GAAIkL,EAAO7O,EAAS,EAAG,EAAG2D,IACjFsnB,GAAKtnB,EACRiiB,EAAGpY,EAAI1M,OACFqP,OAAO7G,KAAK3F,IAGnBf,uBAAOqe,EAAOxH,WACTmM,EAAKnM,EAAKxQ,IACP2c,GACN1iB,EAAa0iB,EAAGjH,IAAIiH,EAAGzgB,EAAGygB,EAAGjiB,EAAGiiB,EAAGpY,EAAGoY,GAAMA,EAAG3T,EAAEgP,EAAO2E,EAAGhZ,GAC3DgZ,EAAKA,EAAGtgB,QAGR,CACF1F,KAAK,WACLsQ,mBAAK/P,EAAQ9B,WACR6B,EAAI7B,EAAMkC,OACPL,UACD2H,IAAI1H,EAAQD,EAAGC,EAAOD,IAAM,EAAG7B,EAAM6B,GAAI,EAAG,EAAG,EAAG,EAAG,EAAG,KAIhE0wB,GAAqB,aAAcjjB,IACnCijB,GAAqB,aACrBA,GAAqB,OAAQ9iB,MACzB1N,GAELmK,GAAMwS,QAAUjT,GAASiT,QAAU5d,GAAK4d,QAAU,SAClDtG,EAAa,EACb9X,KAAmBsS,KCpqGD,SAAjB+f,GAAkB/P,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAIrC,KAAKC,MAAkC,KAA3BkY,EAAKzK,EAAIyK,EAAK7G,EAAIqO,IAAkB,IAASxH,EAAKhM,EAAGgM,GACxG,SAArBwX,GAAsBhQ,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAa,IAAVsd,EAAcxH,EAAK4M,EAAK/kB,KAAKC,MAAkC,KAA3BkY,EAAKzK,EAAIyK,EAAK7G,EAAIqO,IAAkB,IAASxH,EAAKhM,EAAGgM,GAC1H,SAA9ByX,GAA+BjQ,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAGsd,EAAS3f,KAAKC,MAAkC,KAA3BkY,EAAKzK,EAAIyK,EAAK7G,EAAIqO,IAAkB,IAASxH,EAAKhM,EAAIgM,EAAKjM,EAAGiM,GACnI,SAAxB0X,GAAyBlQ,EAAOxH,OAC3Bpb,EAAQob,EAAKzK,EAAIyK,EAAK7G,EAAIqO,EAC9BxH,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,KAAMtF,GAASA,EAAQ,GAAK,GAAK,KAAOob,EAAKhM,EAAGgM,GAE7C,SAA1B2X,GAA2BnQ,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAGsd,EAAQxH,EAAK4M,EAAI5M,EAAKjM,EAAGiM,GAC1D,SAAnC4X,GAAoCpQ,EAAOxH,UAASA,EAAKkF,IAAIlF,EAAKtU,EAAGsU,EAAK9V,EAAa,IAAVsd,EAAcxH,EAAKjM,EAAIiM,EAAK4M,EAAG5M,GAC1F,SAAlB6X,GAAmBnxB,EAAQd,EAAUhB,UAAU8B,EAAO6lB,MAAM3mB,GAAYhB,EACvD,SAAjBkzB,GAAkBpxB,EAAQd,EAAUhB,UAAU8B,EAAO6lB,MAAMwL,YAAYnyB,EAAUhB,GAC9D,SAAnBozB,GAAoBtxB,EAAQd,EAAUhB,UAAU8B,EAAOC,MAAMf,GAAYhB,EAC1D,SAAfqzB,GAAgBvxB,EAAQd,EAAUhB,UAAU8B,EAAOC,MAAMuxB,OAASxxB,EAAOC,MAAMwxB,OAASvzB,EAC/D,SAAzBwzB,GAA0B1xB,EAAQd,EAAUhB,EAAOob,EAAMwH,OACpDlV,EAAQ5L,EAAOC,MACnB2L,EAAM4lB,OAAS5lB,EAAM6lB,OAASvzB,EAC9B0N,EAAM+lB,gBAAgB7Q,EAAOlV,GAED,SAA7BgmB,GAA8B5xB,EAAQd,EAAUhB,EAAOob,EAAMwH,OACxDlV,EAAQ5L,EAAOC,MACnB2L,EAAM1M,GAAYhB,EAClB0N,EAAM+lB,gBAAgB7Q,EAAOlV,GAIjB,SAAbimB,GAAsB3yB,EAAU4yB,cAC3B9xB,EAASue,KAAKve,OACjB6lB,EAAQ7lB,EAAO6lB,MACfja,EAAQ5L,EAAOC,SACXf,KAAY6yB,IAAoBlM,EAAO,SACtCmM,IAAMzT,KAAKyT,KAAO,GACN,cAAb9yB,SAKI+yB,GAAiBC,UAAUlxB,MAAM,KAAKC,QAAQ,SAAAuC,UAAKquB,GAAW1X,KAAK6G,EAAMxd,EAAGsuB,UAJnF5yB,EAAW+yB,GAAiB/yB,IAAaA,GAC/B+C,QAAQ,KAAO/C,EAAS8B,MAAM,KAAKC,QAAQ,SAAAoB,UAAK2e,EAAKgR,IAAI3vB,GAAK8vB,GAAKnyB,EAAQqC,KAAOkc,KAAKyT,IAAI9yB,GAAY0M,EAAMW,EAAIX,EAAM1M,GAAYizB,GAAKnyB,EAAQd,GAC1JA,IAAakzB,KAAyB7T,KAAKyT,IAAIK,QAAUzmB,EAAMymB,SAItB,GAAtC9T,KAAKqF,MAAM3hB,QAAQqwB,WACnB1mB,EAAM2mB,WACJC,KAAOxyB,EAAOY,aAAa,wBAC3BgjB,MAAMza,KAAKipB,GAAsBN,EAAU,KAEjD5yB,EAAWozB,IAEXzM,GAASiM,IAAavT,KAAKqF,MAAMza,KAAKjK,EAAU4yB,EAAUjM,EAAM3mB,IAEnC,SAA/BuzB,GAA+B5M,GAC1BA,EAAM6M,YACT7M,EAAM8M,eAAe,aACrB9M,EAAM8M,eAAe,SACrB9M,EAAM8M,eAAe,WAGR,SAAfC,SAKE7yB,EAAGyD,EAJAogB,EAAQrF,KAAKqF,MAChB5jB,EAASue,KAAKve,OACd6lB,EAAQ7lB,EAAO6lB,MACfja,EAAQ5L,EAAOC,UAEXF,EAAI,EAAGA,EAAI6jB,EAAMxjB,OAAQL,GAAG,EAC3B6jB,EAAM7jB,EAAE,GAEa,IAAf6jB,EAAM7jB,EAAE,GAClBC,EAAO4jB,EAAM7jB,IAAI6jB,EAAM7jB,EAAE,IAEzBC,EAAO4jB,EAAM7jB,IAAM6jB,EAAM7jB,EAAE,GAJ3B6jB,EAAM7jB,EAAE,GAAM8lB,EAAMjC,EAAM7jB,IAAM6jB,EAAM7jB,EAAE,GAAM8lB,EAAM8M,eAAwC,OAAzB/O,EAAM7jB,GAAG6B,OAAO,EAAE,GAAcgiB,EAAM7jB,GAAK6jB,EAAM7jB,GAAGoT,QAAQ0f,GAAU,OAAOvd,kBAO9IiJ,KAAKyT,IAAK,KACRxuB,KAAK+a,KAAKyT,IACdpmB,EAAMpI,GAAK+a,KAAKyT,IAAIxuB,GAEjBoI,EAAM2mB,MACT3mB,EAAM+lB,kBACN3xB,EAAOyqB,aAAa,kBAAmBlM,KAAKiU,MAAQ,MAErDzyB,EAAIgD,OACQhD,EAAEgZ,SAAa8M,EAAMyM,MAChCG,GAA6B5M,GACzBja,EAAMymB,SAAWxM,EAAMuM,MAC1BvM,EAAMuM,KAAyB,IAAMxmB,EAAMymB,QAAU,KACrDzmB,EAAMymB,QAAU,EAChBzmB,EAAM+lB,mBAEP/lB,EAAM8hB,QAAU,IAIF,SAAjBoF,GAAkB9yB,EAAQ+yB,OACrBC,EAAQ,CACXhzB,OAAAA,EACA4jB,MAAO,GACP1d,OAAQ0sB,GACRK,KAAMpB,WAEP7xB,EAAOC,OAASjB,GAAKkxB,KAAKE,SAASpwB,GACnC+yB,GAAc/yB,EAAO6lB,OAAS7lB,EAAO2K,UAAYooB,EAAW/xB,MAAM,KAAKC,QAAQ,SAAAuC,UAAKwvB,EAAMC,KAAKzvB,KACxFwvB,EAGS,SAAjBE,GAAkBrpB,EAAMspB,OACnBjN,EAAIhb,GAAKkoB,gBAAkBloB,GAAKkoB,iBAAiBD,GAAM,gCAAgChgB,QAAQ,SAAU,QAAStJ,GAAQqB,GAAKC,cAActB,UAC1Iqc,GAAKA,EAAEL,MAAQK,EAAIhb,GAAKC,cAActB,GAEvB,SAAvBwpB,GAAwBrzB,EAAQd,EAAUo0B,OACrCC,EAAKC,iBAAiBxzB,UACnBuzB,EAAGr0B,IAAaq0B,EAAGE,iBAAiBv0B,EAASiU,QAAQ0f,GAAU,OAAOvd,gBAAkBie,EAAGE,iBAAiBv0B,KAAeo0B,GAAsBD,GAAqBrzB,EAAQ0zB,GAAiBx0B,IAAaA,EAAU,IAAO,GAczN,SAAZy0B,MAnIgB,SAAhBn1B,sBAAyC,oBAAZC,QAoIxBD,IAAmBC,OAAOie,WAC7B9R,GAAOnM,OACPyM,GAAON,GAAK8R,SACZkX,GAAc1oB,GAAK2oB,gBACnBC,GAAWZ,GAAe,QAAU,CAACrN,MAAM,IAC1BqN,GAAe,OAChCZ,GAAiBoB,GAAiBpB,IAClCF,GAAuBE,GAAiB,SACxCwB,GAASjO,MAAMkO,QAAU,2DACzBC,KAAgBN,GAAiB,eACjC3wB,GAAa/D,GAAKkxB,KAAKG,UACvB4D,GAAiB,GAGO,SAA1BC,GAA0Bl0B,OAIxBm0B,EAHGC,EAAQp0B,EAAOq0B,gBAClB9B,EAAMW,GAAe,MAAQkB,GAASA,EAAMxzB,aAAa,UAAa,8BACtE0zB,EAAQt0B,EAAOu0B,WAAU,GAE1BD,EAAMzO,MAAM2O,QAAU,QACtBjC,EAAIkC,YAAYH,GAChBV,GAAYa,YAAYlC,OAEvB4B,EAAOG,EAAMI,UACZ,MAAOxO,WACTqM,EAAIoC,YAAYL,GAChBV,GAAYe,YAAYpC,GACjB4B,EAEiB,SAAzBS,GAA0B50B,EAAQ60B,WAC7B90B,EAAI80B,EAAgBz0B,OACjBL,QACFC,EAAO80B,aAAaD,EAAgB90B,WAChCC,EAAOY,aAAai0B,EAAgB90B,IAInC,SAAXg1B,GAAW/0B,OACNg1B,EAAQC,MAEXD,EAASh1B,EAAO00B,UACf,MAAOQ,GACRF,EAASd,GAAwBl0B,GACjCi1B,EAAS,SAETD,IAAWA,EAAOG,OAASH,EAAOI,SAAYH,IAAWD,EAASd,GAAwBl0B,KAEnFg1B,GAAWA,EAAOG,OAAUH,EAAOzoB,GAAMyoB,EAAOxoB,EAA8IwoB,EAAzI,CAACzoB,GAAIqoB,GAAuB50B,EAAQ,CAAC,IAAI,KAAK,QAAU,EAAGwM,GAAGooB,GAAuB50B,EAAQ,CAAC,IAAI,KAAK,QAAU,EAAGm1B,MAAM,EAAGC,OAAO,GAEzL,SAATC,GAASnP,YAAQA,EAAEoP,QAAYpP,EAAEqP,aAAcrP,EAAEmO,kBAAoBU,GAAS7O,IAC5D,SAAlBsP,GAAmBx1B,EAAQd,MACtBA,EAAU,KAEZu2B,EADG5P,EAAQ7lB,EAAO6lB,MAEf3mB,KAAY6yB,IAAmB7yB,IAAakzB,KAC/ClzB,EAAWozB,IAERzM,EAAM8M,gBAEW,QADpB8C,EAAcv2B,EAAS0C,OAAO,EAAE,KACqB,WAAzB1C,EAAS0C,OAAO,EAAE,KAC7C1C,EAAW,IAAMA,GAElB2mB,EAAM8M,eAA+B,OAAhB8C,EAAuBv2B,EAAWA,EAASiU,QAAQ0f,GAAU,OAAOvd,gBAEzFuQ,EAAM6P,gBAAgBx2B,IAIL,SAApBy2B,GAAqBnQ,EAAQxlB,EAAQd,EAAU02B,EAAWl0B,EAAKm0B,OAC1DpQ,EAAK,IAAIrU,GAAUoU,EAAO1c,IAAK9I,EAAQd,EAAU,EAAG,EAAG22B,EAAe3E,GAAmCD,WAC7GzL,EAAO1c,IAAM2c,GACVpY,EAAIuoB,EACPnQ,EAAGS,EAAIxkB,EACP8jB,EAAOxV,OAAO7G,KAAKjK,GACZumB,EAKS,SAAjBqQ,GAAkB91B,EAAQd,EAAUhB,EAAOuvB,OAUzCsI,EAAI5xB,EAAQyH,EAAOoqB,EAThBC,EAAWt0B,WAAWzD,IAAU,EACnCg4B,GAAWh4B,EAAQ,IAAIoF,OAAO1B,QAAQq0B,EAAW,IAAI71B,SAAW,KAChEylB,EAAQiO,GAASjO,MACjBsQ,EAAaC,GAAe5iB,KAAKtU,GACjCm3B,EAA6C,QAAjCr2B,EAAOs2B,QAAQhhB,cAC3BihB,GAAmBF,EAAY,SAAW,WAAaF,EAAa,QAAU,UAE9EK,EAAoB,OAAT/I,EACXgJ,EAAqB,MAAThJ,KAETA,IAASyI,IAAYD,GAAYS,GAAqBjJ,IAASiJ,GAAqBR,UAChFD,KAEK,OAAZC,GAAqBM,IAAcP,EAAWH,GAAe91B,EAAQd,EAAUhB,EAAO,OACvF83B,EAAQh2B,EAAOs1B,QAAUD,GAAOr1B,IAC3By2B,GAAyB,MAAZP,KAAqBnE,GAAgB7yB,KAAcA,EAAS+C,QAAQ,iBACrF8zB,EAAKC,EAAQh2B,EAAO00B,UAAUyB,EAAa,QAAU,UAAYn2B,EAAOu2B,GACjEr1B,GAAOu1B,EAAYR,EAAWF,EAX5B,IAW0CE,EAAW,IAAMF,MAErElQ,EAAMsQ,EAAa,QAAU,UAbnB,KAayCK,EAAWN,EAAUzI,GACxEtpB,EAAoB,QAATspB,IAAmBvuB,EAAS+C,QAAQ,UAAuB,OAATwrB,GAAiBztB,EAAOy0B,cAAgB4B,EAAcr2B,EAASA,EAAOu1B,WAC/HS,IACH7xB,GAAUnE,EAAOq0B,iBAAmB,IAAIkB,YAEpCpxB,GAAUA,IAAW+G,IAAS/G,EAAOswB,cACzCtwB,EAAS+G,GAAKyrB,OAEf/qB,EAAQzH,EAAOlE,QACFw2B,GAAa7qB,EAAMupB,OAASgB,GAAcvqB,EAAMhJ,OAASqG,GAAQrG,OAASgJ,EAAM8hB,eACrFxsB,GAAO+0B,EAAWrqB,EAAMupB,MAvBtB,SAyBLsB,GAA2B,WAAbv3B,GAAsC,UAAbA,GAMzCu3B,GAAyB,MAAZP,GAAqBU,GAAoBvD,GAAqBlvB,EAAQ,cAAgB0hB,EAAM9d,SAAWsrB,GAAqBrzB,EAAQ,aACjJmE,IAAWnE,IAAY6lB,EAAM9d,SAAW,UACzC5D,EAAOswB,YAAYX,IACnBiC,EAAKjC,GAASyC,GACdpyB,EAAOwwB,YAAYb,IACnBjO,EAAM9d,SAAW,eAXgD,KAC7DpH,EAAIX,EAAO6lB,MAAM3mB,GACrBc,EAAO6lB,MAAM3mB,GA3BL,IA2B0BuuB,EAClCsI,EAAK/1B,EAAOu2B,GACZ51B,EAAKX,EAAO6lB,MAAM3mB,GAAYyB,EAAK60B,GAAgBx1B,EAAQd,UASxDi3B,GAAcM,KACjB7qB,EAAQpL,GAAU2D,IACZvB,KAAOqG,GAAQrG,KACrBgJ,EAAMupB,MAAQhxB,EAAOoyB,IAGhBr1B,GAAOs1B,EAAWT,EAAKE,EA5CpB,IA4CwCF,GAAME,EA5C9C,IA4CkEF,EAAKE,EAAW,GAuBpE,SAAzBY,GAAkC72B,EAAQiR,EAAM1P,EAAOG,OACjDH,GAAmB,SAAVA,EAAkB,KAC3BiC,EAAIkwB,GAAiBziB,EAAMjR,EAAQ,GACtC6O,EAAIrL,GAAK6vB,GAAqBrzB,EAAQwD,EAAG,GACtCqL,GAAKA,IAAMtN,GACd0P,EAAOzN,EACPjC,EAAQsN,GACW,gBAAToC,IACV1P,EAAQ8xB,GAAqBrzB,EAAQ,uBAMtCqC,EAAG0Q,EAAQ+jB,EAAa7P,EAAUhU,EAAO8jB,EAAYC,EAAUjQ,EAAQC,EAAOiQ,EAASC,EAHpFzR,EAAK,IAAIrU,GAAUmN,KAAKzV,IAAK9I,EAAO6lB,MAAO5U,EAAM,EAAG,EAAGkW,IAC1DzY,EAAQ,EACR0Y,EAAa,KAEd3B,EAAGpY,EAAI9L,EACPkkB,EAAGS,EAAIxkB,EACPH,GAAS,GAEG,UADZG,GAAO,MAENq1B,EAAa/2B,EAAO6lB,MAAM5U,GAC1BjR,EAAO6lB,MAAM5U,GAAQvP,EACrBA,EAAM2xB,GAAqBrzB,EAAQiR,IAASvP,EAC5Cq1B,EAAc/2B,EAAO6lB,MAAM5U,GAAQ8lB,EAAcvB,GAAgBx1B,EAAQiR,IAG1EoC,GADAhR,EAAI,CAACd,EAAOG,IAGZA,EAAMW,EAAE,GACRy0B,GAFAv1B,EAAQc,EAAE,IAEUe,MAAMuP,KAAoB,IAClCjR,EAAI0B,MAAMuP,KAAoB,IAC5BvS,OAAQ,MACb2S,EAASJ,GAAgBnI,KAAK9I,IACrCs1B,EAAWjkB,EAAO,GAClBiU,EAAQtlB,EAAI6S,UAAU7F,EAAOqE,EAAOrE,OAChCuE,EACHA,GAASA,EAAQ,GAAK,EACS,UAArB+T,EAAMplB,QAAQ,IAAuC,UAArBolB,EAAMplB,QAAQ,KACxDqR,EAAQ,GAEL+jB,KAAcD,EAAaD,EAAY1P,MAAiB,MAC3DH,EAAWtlB,WAAWo1B,IAAe,EACrCG,EAAYH,EAAWn1B,QAAQqlB,EAAW,IAAI7mB,QACtB,MAAvB42B,EAASv1B,OAAO,KAAgBu1B,EAAW11B,GAAe2lB,EAAU+P,GAAYE,GACjFnQ,EAASplB,WAAWq1B,GACpBC,EAAUD,EAASp1B,QAAQmlB,EAAS,IAAI3mB,QACxCsO,EAAQiE,GAAgBY,UAAY0jB,EAAQ72B,OACvC62B,IACJA,EAAUA,GAAWzf,EAAQI,MAAM3G,IAASimB,EACxCxoB,IAAUhN,EAAItB,SACjBsB,GAAOu1B,EACPxR,EAAGS,GAAK+Q,IAGNC,IAAcD,IACjBhQ,EAAW6O,GAAe91B,EAAQiR,EAAM8lB,EAAYE,IAAY,GAGjExR,EAAG3c,IAAM,CACR3D,MAAOsgB,EAAG3c,IACVtF,EAAIwjB,GAAyB,IAAfI,EAAqBJ,EAAQ,IAC3CnY,EAAGoY,EACHxU,EAAGsU,EAASE,EACZI,EAAIpU,GAASA,EAAQ,GAAe,WAAThC,EAAoB9P,KAAKC,MAAQ,IAI/DqkB,EAAGhT,EAAK/D,EAAQhN,EAAItB,OAAUsB,EAAI6S,UAAU7F,EAAOhN,EAAItB,QAAU,QAEjEqlB,EAAG3T,EAAa,YAATb,GAA8B,SAARvP,EAAiBwvB,GAAmCD,UAElFpY,GAAQrF,KAAK9R,KAAS+jB,EAAGS,EAAI,QACxBpd,IAAM2c,EAIoB,SAAhC0R,GAAgCj5B,OAC3B8C,EAAQ9C,EAAM8C,MAAM,KACvBuL,EAAIvL,EAAM,GACVwL,EAAIxL,EAAM,IAAM,YACP,QAANuL,GAAqB,WAANA,GAAwB,SAANC,GAAsB,UAANA,IACpDtO,EAAQqO,EACRA,EAAIC,EACJA,EAAItO,GAEL8C,EAAM,GAAKo2B,GAAkB7qB,IAAMA,EACnCvL,EAAM,GAAKo2B,GAAkB5qB,IAAMA,EAC5BxL,EAAMkS,KAAK,KAEC,SAApBmkB,GAAqBvW,EAAOxH,MACvBA,EAAKnX,OAASmX,EAAKnX,MAAMoF,QAAU+R,EAAKnX,MAAM0D,KAAM,KAKtDoL,EAAMqmB,EAAiBv3B,EAJpBC,EAASsZ,EAAKtU,EACjB6gB,EAAQ7lB,EAAO6lB,MACfjC,EAAQtK,EAAKhM,EACb1B,EAAQ5L,EAAOC,SAEF,QAAV2jB,IAA6B,IAAVA,EACtBiC,EAAMkO,QAAU,GAChBuD,EAAkB,WAGlBv3B,GADA6jB,EAAQA,EAAM5iB,MAAM,MACVZ,QACI,IAALL,GACRkR,EAAO2S,EAAM7jB,GACTgyB,GAAgB9gB,KACnBqmB,EAAkB,EAClBrmB,EAAiB,oBAATA,EAA8BmhB,GAAuBE,IAE9DkD,GAAgBx1B,EAAQiR,GAGtBqmB,IACH9B,GAAgBx1B,EAAQsyB,IACpB1mB,IACHA,EAAM2mB,KAAOvyB,EAAO01B,gBAAgB,aACpC7P,EAAM0R,MAAQ1R,EAAM2R,OAAS3R,EAAM6M,UAAY,OAC/C+E,GAAgBz3B,EAAQ,GACxB4L,EAAM8hB,QAAU,EAChB+E,GAA6B5M,MA6Fd,SAAnB6R,GAAmBx5B,SAAoB,6BAAVA,GAAkD,SAAVA,IAAqBA,EACrD,SAArCy5B,GAAqC33B,OAChC43B,EAAevE,GAAqBrzB,EAAQsyB,WACzCoF,GAAiBE,GAAgBC,GAAoBD,EAAah2B,OAAO,GAAGwB,MAAMgP,IAASE,IAAIpR,IAE1F,SAAb42B,GAAc93B,EAAQ+3B,OAIpB5zB,EAAQ6zB,EAAatH,EAAMuH,EAHxBrsB,EAAQ5L,EAAOC,OAASO,GAAUR,GACrC6lB,EAAQ7lB,EAAO6lB,MACfqS,EAASP,GAAmC33B,UAEzC4L,EAAM2mB,KAAOvyB,EAAOY,aAAa,aAGP,iBAD7Bs3B,EAAS,EADTxH,EAAO1wB,EAAOkyB,UAAUiG,QAAQC,cAAcF,QAC/B71B,EAAGquB,EAAKrjB,EAAGqjB,EAAKje,EAAGie,EAAKjkB,EAAGikB,EAAKxK,EAAGwK,EAAK1T,IACxC9J,KAAK,KAA0B2kB,GAAoBK,GACxDA,IAAWL,IAAsB73B,EAAOq4B,cAAgBr4B,IAAW4zB,IAAgBhoB,EAAM2mB,MAEnG7B,EAAO7K,EAAM2O,QACb3O,EAAM2O,QAAU,SAChBrwB,EAASnE,EAAOu1B,cACCv1B,EAAOq4B,cAAiBr4B,EAAOiN,wBAAwBkoB,SACvE8C,EAAa,EACbD,EAAch4B,EAAOs4B,mBACrB1E,GAAYa,YAAYz0B,IAEzBk4B,EAASP,GAAmC33B,GAC5C0wB,EAAQ7K,EAAM2O,QAAU9D,EAAQ8E,GAAgBx1B,EAAQ,WACpDi4B,IACHD,EAAc7zB,EAAOo0B,aAAav4B,EAAQg4B,GAAe7zB,EAASA,EAAOswB,YAAYz0B,GAAU4zB,GAAYe,YAAY30B,KAGjH+3B,GAA2B,EAAhBG,EAAO93B,OAAc,CAAC83B,EAAO,GAAIA,EAAO,GAAIA,EAAO,GAAIA,EAAO,GAAIA,EAAO,IAAKA,EAAO,KAAOA,GAE9F,SAAlBM,GAAmBx4B,EAAQy4B,EAAQC,EAAkBC,EAAQC,EAAaC,OAWxE7D,EAAQ8D,EAAgBtsB,EAVrBZ,EAAQ5L,EAAOC,MAClBi4B,EAASU,GAAed,GAAW93B,GAAQ,GAC3C+4B,EAAantB,EAAMotB,SAAW,EAC9BC,EAAartB,EAAMstB,SAAW,EAC9BC,EAAavtB,EAAMwtB,SAAW,EAC9BC,EAAaztB,EAAM0tB,SAAW,EAC7Bj3B,EAAsB61B,KAAnB7qB,EAAmB6qB,KAAhBzlB,EAAgBylB,KAAbzrB,EAAayrB,KAAVqB,EAAUrB,KAANsB,EAAMtB,KACvBuB,EAAchB,EAAOz3B,MAAM,KAC3Bg4B,EAAUr3B,WAAW83B,EAAY,KAAO,EACxCP,EAAUv3B,WAAW83B,EAAY,KAAO,EAEpCf,EAQMR,IAAWL,KAAsBiB,EAAez2B,EAAIoK,EAAIY,EAAIoF,KAEtEjG,EAAIwsB,IAAY3rB,EAAIyrB,GAAeI,GAAW72B,EAAIy2B,IAAiBz2B,EAAIm3B,EAAKnsB,EAAIksB,GAAMT,EACtFE,EAFIA,GAAWvsB,EAAIqsB,GAAeI,IAAYzmB,EAAIqmB,IAAiBrmB,EAAI+mB,EAAK/sB,EAAI8sB,GAAMT,EAGtFI,EAAU1sB,IAVVwsB,GADAhE,EAASD,GAAS/0B,IACDuM,IAAMktB,EAAY,GAAGx3B,QAAQ,KAAO+2B,EAAU,IAAMhE,EAAOG,MAAQ6D,GACpFE,EAAUlE,EAAOxoB,KAAQitB,EAAY,IAAMA,EAAY,IAAIx3B,QAAQ,KAAQi3B,EAAU,IAAMlE,EAAOI,OAAS8D,IAYxGP,IAAsB,IAAXA,GAAoB/sB,EAAM+sB,QACxCY,EAAKP,EAAUD,EACfS,EAAKN,EAAUD,EACfrtB,EAAMwtB,QAAUD,GAAcI,EAAKl3B,EAAIm3B,EAAK/mB,GAAK8mB,EACjD3tB,EAAM0tB,QAAUD,GAAcE,EAAKlsB,EAAImsB,EAAK/sB,GAAK+sB,GAEjD5tB,EAAMwtB,QAAUxtB,EAAM0tB,QAAU,EAEjC1tB,EAAMotB,QAAUA,EAChBptB,EAAMstB,QAAUA,EAChBttB,EAAM+sB,SAAWA,EACjB/sB,EAAM6sB,OAASA,EACf7sB,EAAM8sB,mBAAqBA,EAC3B14B,EAAO6lB,MAAMuM,IAAwB,UACjCyG,IACHlD,GAAkBkD,EAAyBjtB,EAAO,UAAWmtB,EAAYC,GACzErD,GAAkBkD,EAAyBjtB,EAAO,UAAWqtB,EAAYC,GACzEvD,GAAkBkD,EAAyBjtB,EAAO,UAAWutB,EAAYvtB,EAAMwtB,SAC/EzD,GAAkBkD,EAAyBjtB,EAAO,UAAWytB,EAAYztB,EAAM0tB,UAEhFt5B,EAAOyqB,aAAa,kBAAmBuO,EAAU,IAAME,GAsKtC,SAAlBQ,GAAmB15B,EAAQuB,EAAOrD,OAC7BuvB,EAAOnjB,GAAQ/I,UACZL,GAAOS,WAAWJ,GAASI,WAAWm0B,GAAe91B,EAAQ,IAAK9B,EAAQ,KAAMuvB,KAAUA,EAmHxE,SAA1BkM,GAAmCnU,EAAQxlB,EAAQd,EAAU+nB,EAAU+P,OAMrE4C,EAAWnU,EALRoU,EAAM,IACTjK,EAAW3xB,EAAU+4B,GAErB5L,EADSzpB,WAAWq1B,IAAcpH,IAAaoH,EAAS/0B,QAAQ,OAAU63B,GAAW,GACnE7S,EAClB8S,EAAc9S,EAAWmE,EAAU,aAEhCwE,IAEe,WADlBgK,EAAY5C,EAASh2B,MAAM,KAAK,MAE/BoqB,GAAUyO,KACKzO,QACdA,GAAWA,EAAS,EAAKyO,GAAOA,GAGhB,OAAdD,GAAsBxO,EAAS,EAClCA,GAAWA,EAASyO,MAAiBA,KAAUzO,EAASyO,GAAOA,EACvC,QAAdD,GAAgC,EAATxO,IACjCA,GAAWA,EAASyO,MAAiBA,KAAUzO,EAASyO,GAAOA,IAGjErU,EAAO1c,IAAM2c,EAAK,IAAIrU,GAAUoU,EAAO1c,IAAK9I,EAAQd,EAAU+nB,EAAUmE,EAAQ0F,IAChFrL,EAAGS,EAAI6T,EACPtU,EAAGnY,EAAI,MACPkY,EAAOxV,OAAO7G,KAAKjK,GACZumB,EAEE,SAAVuU,GAAWh6B,EAAQi6B,OACb,IAAIz2B,KAAKy2B,EACbj6B,EAAOwD,GAAKy2B,EAAOz2B,UAEbxD,EAEc,SAAtBk6B,GAAuB1U,EAAQ2U,EAAYn6B,OAIzCo6B,EAAU52B,EAAGuzB,EAAYC,EAAU/P,EAAUF,EAAmBkQ,EAH7DoD,EAAaL,GAAQ,GAAIh6B,EAAOC,OAEnC4lB,EAAQ7lB,EAAO6lB,UAeXriB,KAbD62B,EAAW9H,KACdwE,EAAa/2B,EAAOY,aAAa,aACjCZ,EAAOyqB,aAAa,YAAa,IACjC5E,EAAMyM,IAAkB6H,EACxBC,EAAW3C,GAAgBz3B,EAAQ,GACnCw1B,GAAgBx1B,EAAQsyB,IACxBtyB,EAAOyqB,aAAa,YAAasM,KAEjCA,EAAavD,iBAAiBxzB,GAAQsyB,IACtCzM,EAAMyM,IAAkB6H,EACxBC,EAAW3C,GAAgBz3B,EAAQ,GACnC6lB,EAAMyM,IAAkByE,GAEfhF,IACTgF,EAAasD,EAAW72B,OACxBwzB,EAAWoD,EAAS52B,KAlBV,gDAmB6BvB,QAAQuB,GAAK,IAGnDyjB,EAFY3c,GAAQysB,MACpBE,EAAU3sB,GAAQ0sB,IACmBlB,GAAe91B,EAAQwD,EAAGuzB,EAAYE,GAAWt1B,WAAWo1B,GACjGhQ,EAASplB,WAAWq1B,GACpBxR,EAAO1c,IAAM,IAAIsI,GAAUoU,EAAO1c,IAAKsxB,EAAU52B,EAAGyjB,EAAUF,EAASE,EAAU4J,IACjFrL,EAAO1c,IAAIwE,EAAI2pB,GAAW,EAC1BzR,EAAOxV,OAAO7G,KAAK3F,IAGrBw2B,GAAQI,EAAUC,OA35BhBzvB,GAAMM,GAAM0oB,GAAaK,GAAgBH,GAA0BwG,GAAqBv3B,GA+G3FixB,GDkkGcuG,GAA4I5mB,GAA5I4mB,OAAQC,GAAoI7mB,GAApI6mB,OAAQC,GAA4H9mB,GAA5H8mB,OAAQC,GAAoH/mB,GAApH+mB,OAAQC,GAA4GhnB,GAA5GgnB,OAAQ3c,GAAoGrK,GAApGqK,OAAQ4c,GAA4FjnB,GAA5FinB,KAAMC,GAAsFlnB,GAAtFknB,MAAOC,GAA+EnnB,GAA/EmnB,MAAOC,GAAwEpnB,GAAxEonB,MAAOC,GAAiErnB,GAAjEqnB,OAAQC,GAAyDtnB,GAAzDsnB,QAASC,GAAgDvnB,GAAhDunB,KAAM/c,GAA0CxK,GAA1CwK,YAAagd,GAA6BxnB,GAA7BwnB,OAAQC,GAAqBznB,GAArBynB,KAAMC,GAAe1nB,GAAf0nB,KAAMC,GAAS3nB,GAAT2nB,KC/qGjJvJ,GAAkB,GAClB+H,GAAW,IAAM34B,KAAK8W,GACtBsjB,GAAWp6B,KAAK8W,GAAK,IACrBujB,GAASr6B,KAAKs6B,MAEd5I,GAAW,WACXuD,GAAiB,uCACjBsF,GAAc,YACdzJ,GAAmB,CAAC0J,UAAU,qBAAsBpE,MAAM,gBAAiBqE,MAAM,WAwBjFtJ,GAAiB,YACjBF,GAAuBE,GAAiB,SAqFxCuJ,GAAY,qBAAqB76B,MAAM,KACvC0yB,GAAmB,SAAnBA,iBAAoBx0B,EAAU48B,EAASC,OAErCltB,GADOitB,GAAWhI,IACZjO,MACN9lB,EAAI,KACDb,KAAY2P,IAAMktB,SACd78B,MAERA,EAAWA,EAASuC,OAAO,GAAG0P,cAAgBjS,EAAS0C,OAAO,GACvD7B,OAAU87B,GAAU97B,GAAGb,KAAa2P,YACnC9O,EAAI,EAAK,MAAe,IAANA,EAAW,KAAa,GAALA,EAAU87B,GAAU97B,GAAK,IAAMb,GA+E7Ew3B,GAAuB,CAACsF,IAAI,EAAGC,IAAI,EAAGC,KAAK,GAC3CtF,GAAsB,CAAC7pB,KAAK,EAAGovB,KAAK,GAuDpChK,GAAO,SAAPA,KAAQnyB,EAAQd,EAAUuuB,EAAMC,OAC3BxvB,SACJ+1B,IAAkBN,KACbz0B,KAAY+yB,IAAkC,cAAb/yB,KACrCA,EAAW+yB,GAAiB/yB,IACd+C,QAAQ,OACrB/C,EAAWA,EAAS8B,MAAM,KAAK,IAG7B+wB,GAAgB7yB,IAA0B,cAAbA,GAChChB,EAAQu5B,GAAgBz3B,EAAQ0tB,GAChCxvB,EAAsB,oBAAbgB,EAAkChB,EAAMgB,GAAYhB,EAAMq0B,IAAMr0B,EAAMu6B,OAAS2D,GAAc/I,GAAqBrzB,EAAQoyB,KAAyB,IAAMl0B,EAAMm0B,QAAU,OAElLn0B,EAAQ8B,EAAO6lB,MAAM3mB,KACG,SAAVhB,IAAoBwvB,MAAaxvB,EAAQ,IAAI+D,QAAQ,WAClE/D,EAASm+B,GAAcn9B,IAAam9B,GAAcn9B,GAAUc,EAAQd,EAAUuuB,IAAU4F,GAAqBrzB,EAAQd,IAAawB,GAAaV,EAAQd,KAA2B,YAAbA,EAAyB,EAAI,IAG7LuuB,MAAWvvB,EAAQ,IAAIoF,OAAOrB,QAAQ,KAAO6zB,GAAe91B,EAAQd,EAAUhB,EAAOuvB,GAAQA,EAAOvvB,GA8E5Gk5B,GAAoB,CAACkF,IAAI,KAAMC,OAAO,OAAQrvB,KAAK,KAAMsvB,MAAM,OAAQrwB,OAAO,OAiD9EkwB,GAAgB,CACfI,+BAAWjX,EAAQxlB,EAAQd,EAAU83B,EAAU70B,MAC3B,gBAAfA,EAAMmX,KAAwB,KAC7BmM,EAAKD,EAAO1c,IAAM,IAAIsI,GAAUoU,EAAO1c,IAAK9I,EAAQd,EAAU,EAAG,EAAGm4B,WACxE5R,EAAGnY,EAAI0pB,EACPvR,EAAG0F,IAAM,GACT1F,EAAGtjB,MAAQA,EACXqjB,EAAOxV,OAAO7G,KAAKjK,GACZ,KA6EV24B,GAAoB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAC/B6E,GAAwB,GAkFxBjF,GAAkB,SAAlBA,gBAAmBz3B,EAAQ0tB,OACtB9hB,EAAQ5L,EAAOC,OAAS,IAAIK,GAAQN,MACpC,MAAO4L,IAAU8hB,IAAY9hB,EAAM8hB,eAC/B9hB,MAQPW,EAAGC,EAAGmwB,EAAGnL,EAAQC,EAAQmL,EAAUC,EAAWC,EAAWC,EAAOC,EAAOC,EAAajE,EAASE,EAC7FhB,EAAQgF,EAAO5kB,EAAKC,EAAKlW,EAAGgL,EAAGoF,EAAGhG,EAAG0wB,EAAKC,EAAKC,EAAIC,EAAIC,EAAIC,EAAKC,EAAKC,EAAKC,EAAKC,EAAKC,EAPjFhY,EAAQ7lB,EAAO6lB,MAClBiY,EAAiBlyB,EAAM4lB,OAAS,EAEhCwK,EAAM,MACNzI,EAAKC,iBAAiBxzB,GACtBy4B,EAASpF,GAAqBrzB,EAAQoyB,KAAyB,WAGhE7lB,EAAIC,EAAImwB,EAAIC,EAAWC,EAAYC,EAAYC,EAAQC,EAAQC,EAAc,EAC7EzL,EAASC,EAAS,EAClB7lB,EAAM2mB,OAASvyB,EAAOs1B,SAAUD,GAAOr1B,IAEnCuzB,EAAGb,YACe,SAAjBa,EAAGb,WAAqC,SAAba,EAAGgE,OAAkC,SAAdhE,EAAGiE,SACxD3R,EAAMyM,KAAoC,SAAjBiB,EAAGb,UAAuB,gBAAkBa,EAAGb,UAAY,QAAQ1xB,MAAM,KAAKsB,MAAM,EAAG,GAAG4Q,KAAK,MAAQ,KAAO,KAAqB,SAAdqgB,EAAGiE,OAAoB,UAAYjE,EAAGiE,OAAS,KAAO,KAAoB,SAAbjE,EAAGgE,MAAmB,SAAWhE,EAAGgE,MAAMv2B,MAAM,KAAKkS,KAAK,KAAO,KAAO,KAA8B,SAAvBqgB,EAAGjB,IAA6BiB,EAAGjB,IAAkB,KAEhVzM,EAAM0R,MAAQ1R,EAAM2R,OAAS3R,EAAM6M,UAAY,QAGhDwF,EAASJ,GAAW93B,EAAQ4L,EAAM2mB,KAC9B3mB,EAAM2mB,MAIR8K,EAHGzxB,EAAM8hB,SACT4P,EAAKt9B,EAAO00B,UACZ+D,EAAU7sB,EAAMotB,QAAUsE,EAAG/wB,EAAK,OAASX,EAAMstB,QAAUoE,EAAG9wB,GAAK,KAC9D,KAECkhB,GAAW1tB,EAAOY,aAAa,mBAEtC43B,GAAgBx4B,EAAQq9B,GAAM5E,IAAU4E,GAAMzxB,EAAM8sB,kBAAmC,IAAjB9sB,EAAM+sB,OAAkBT,IAE/Fc,EAAUptB,EAAMotB,SAAW,EAC3BE,EAAUttB,EAAMstB,SAAW,EACvBhB,IAAWL,KACdx1B,EAAI61B,EAAO,GACX7qB,EAAI6qB,EAAO,GACXzlB,EAAIylB,EAAO,GACXzrB,EAAIyrB,EAAO,GACX3rB,EAAI4wB,EAAMjF,EAAO,GACjB1rB,EAAI4wB,EAAMlF,EAAO,GAGK,IAAlBA,EAAO93B,QACVoxB,EAASrwB,KAAKiX,KAAK/V,EAAIA,EAAIgL,EAAIA,GAC/BokB,EAAStwB,KAAKiX,KAAK3L,EAAIA,EAAIgG,EAAIA,GAC/BmqB,EAAYv6B,GAAKgL,EAAKmuB,GAAOnuB,EAAGhL,GAAKy3B,GAAW,GAChDiD,EAAStqB,GAAKhG,EAAK+uB,GAAO/oB,EAAGhG,GAAKqtB,GAAW8C,EAAW,KAC9CnL,GAAUtwB,KAAK+F,IAAI/F,KAAKmX,IAAIykB,EAAQxB,MAC1C3vB,EAAM2mB,MACThmB,GAAKysB,GAAWA,EAAU32B,EAAI62B,EAAUzmB,GACxCjG,GAAK0sB,GAAWF,EAAU3rB,EAAI6rB,EAAUzsB,MAKzCoxB,EAAM3F,EAAO,GACbyF,EAAMzF,EAAO,GACbsF,EAAMtF,EAAO,GACbuF,EAAMvF,EAAO,GACbwF,EAAMxF,EAAO,IACb0F,EAAM1F,EAAO,IACb3rB,EAAI2rB,EAAO,IACX1rB,EAAI0rB,EAAO,IACXyE,EAAIzE,EAAO,IAGX2E,GADAK,EAAQ1B,GAAOqC,EAAKH,IACA5D,GAEhBoD,IAGHG,EAAKF,GAFL7kB,EAAMnX,KAAKmX,KAAK4kB,IAEHM,GADbjlB,EAAMpX,KAAKoX,KAAK2kB,IAEhBI,EAAKF,EAAI9kB,EAAImlB,EAAIllB,EACjBglB,EAAKM,EAAIvlB,EAAIolB,EAAInlB,EACjBilB,EAAML,GAAK5kB,EAAIilB,EAAIllB,EACnBmlB,EAAML,GAAK7kB,EAAIklB,EAAInlB,EACnBolB,EAAMG,GAAKtlB,EAAImlB,EAAIplB,EACnBslB,EAAMD,GAAKplB,EAAIqlB,EAAItlB,EACnB6kB,EAAME,EACND,EAAME,EACNO,EAAMN,GAIPT,GADAI,EAAQ1B,IAAQ/oB,EAAGirB,IACC5D,GAChBoD,IACH5kB,EAAMnX,KAAKmX,KAAK4kB,GAKhBU,EAAMnxB,GAJN8L,EAAMpX,KAAKoX,KAAK2kB,IAIJU,EAAItlB,EAChBjW,EAJAg7B,EAAKh7B,EAAEiW,EAAIklB,EAAIjlB,EAKflL,EAJAiwB,EAAKjwB,EAAEiL,EAAImlB,EAAIllB,EAKf9F,EAJA8qB,EAAK9qB,EAAE6F,EAAIolB,EAAInlB,GAQhBqkB,GADAM,EAAQ1B,GAAOnuB,EAAGhL,IACCy3B,GACfoD,IAGHG,EAAKh7B,GAFLiW,EAAMnX,KAAKmX,IAAI4kB,IAEJ7vB,GADXkL,EAAMpX,KAAKoX,IAAI2kB,IAEfI,EAAKH,EAAI7kB,EAAI8kB,EAAI7kB,EACjBlL,EAAIA,EAAEiL,EAAIjW,EAAEkW,EACZ6kB,EAAMA,EAAI9kB,EAAI6kB,EAAI5kB,EAClBlW,EAAIg7B,EACJF,EAAMG,GAGHT,GAAwD,MAA3C17B,KAAK+F,IAAI21B,GAAa17B,KAAK+F,IAAI01B,KAC/CC,EAAYD,EAAW,EACvBE,EAAY,IAAMA,GAEnBtL,EAAStwB,GAAOC,KAAKiX,KAAK/V,EAAIA,EAAIgL,EAAIA,EAAIoF,EAAIA,IAC9Cgf,EAASvwB,GAAOC,KAAKiX,KAAKglB,EAAMA,EAAMS,EAAMA,IAC5CX,EAAQ1B,GAAO2B,EAAKC,GACpBL,EAA2B,KAAlB57B,KAAK+F,IAAIg2B,GAAmBA,EAAQpD,GAAW,EACxDmD,EAAcW,EAAM,GAAMA,EAAM,GAAMA,EAAMA,GAAO,GAGhDhyB,EAAM2mB,MACT8K,EAAKr9B,EAAOY,aAAa,aACzBgL,EAAMmyB,SAAW/9B,EAAOyqB,aAAa,YAAa,MAASiN,GAAiBrE,GAAqBrzB,EAAQsyB,KACzG+K,GAAMr9B,EAAOyqB,aAAa,YAAa4S,KAInB,GAAlBl8B,KAAK+F,IAAI61B,IAAe57B,KAAK+F,IAAI61B,GAAS,MACzCe,GACHtM,IAAW,EACXuL,GAAUH,GAAY,EAAK,KAAO,IAClCA,GAAaA,GAAY,EAAK,KAAO,MAErCnL,IAAW,EACXsL,GAAUA,GAAS,EAAK,KAAO,MAGjCrP,EAAUA,GAAW9hB,EAAM8hB,QAC3B9hB,EAAMW,EAAIA,IAAMX,EAAMoyB,SAAWzxB,KAAQmhB,GAAW9hB,EAAMoyB,WAAc78B,KAAKC,MAAMpB,EAAOi+B,YAAc,KAAO98B,KAAKC,OAAOmL,IAAM,GAAK,KAAOvM,EAAOi+B,YAAcryB,EAAMoyB,SAAW,IAAM,GAxInL,KAyINpyB,EAAMY,EAAIA,IAAMZ,EAAMsyB,SAAW1xB,KAAQkhB,GAAW9hB,EAAMsyB,WAAc/8B,KAAKC,MAAMpB,EAAOm+B,aAAe,KAAOh9B,KAAKC,OAAOoL,IAAM,GAAK,KAAOxM,EAAOm+B,aAAevyB,EAAMsyB,SAAW,IAAM,GAzIrL,KA0INtyB,EAAM+wB,EAAIA,EA1IJ,KA2IN/wB,EAAM4lB,OAAStwB,GAAOswB,GACtB5lB,EAAM6lB,OAASvwB,GAAOuwB,GACtB7lB,EAAMgxB,SAAW17B,GAAO07B,GAAYZ,EACpCpwB,EAAMixB,UAAY37B,GAAO27B,GAAab,EACtCpwB,EAAMkxB,UAAY57B,GAAO47B,GAAad,EACtCpwB,EAAMmxB,MAAQA,EAAQf,EACtBpwB,EAAMoxB,MAAQA,EAAQhB,EACtBpwB,EAAMwyB,qBAAuBnB,EAlJvB,MAmJDrxB,EAAMymB,QAAU1wB,WAAW82B,EAAOz3B,MAAM,KAAK,MAAS0sB,GAAW9hB,EAAMymB,SAAY,KACvFxM,EAAMuM,IAAwBgK,GAAc3D,IAE7C7sB,EAAMwtB,QAAUxtB,EAAM0tB,QAAU,EAChC1tB,EAAM8L,QAAUF,EAAQE,QACxB9L,EAAM+lB,gBAAkB/lB,EAAM2mB,IAAM8L,GAAuBrK,GAAcsK,GAAuBC,GAChG3yB,EAAM8hB,QAAU,EACT9hB,GAERwwB,GAAgB,SAAhBA,cAAgBl+B,UAAUA,EAAQA,EAAM8C,MAAM,MAAM,GAAK,IAAM9C,EAAM,IAKrEqgC,GAAyB,SAAzBA,uBAA0Bzd,EAAOlV,GAChCA,EAAM+wB,EAAI,MACV/wB,EAAMkxB,UAAYlxB,EAAMixB,UAAY,OACpCjxB,EAAM8L,QAAU,EAChB4mB,GAAqBxd,EAAOlV,IAE7B4yB,GAAW,OACXC,GAAU,MACVC,GAAkB,KAClBJ,GAAuB,SAAvBA,qBAAgCxd,EAAOlV,SAC4GA,GAAS2S,KAAtJyf,IAAAA,SAAUE,IAAAA,SAAU3xB,IAAAA,EAAGC,IAAAA,EAAGmwB,IAAAA,EAAGC,IAAAA,SAAUE,IAAAA,UAAWD,IAAAA,UAAWE,IAAAA,MAAOC,IAAAA,MAAOxL,IAAAA,OAAQC,IAAAA,OAAQ2M,IAAAA,qBAAsB1mB,IAAAA,QAAS1X,IAAAA,OAAQqyB,IAAAA,QACtI8H,EAAa,GACbwE,EAAqB,SAAZjnB,GAAsBoJ,GAAmB,IAAVA,IAA4B,IAAZpJ,KAGrD2a,IAAYwK,IAAc2B,IAAY1B,IAAc0B,IAAW,KAIjElmB,EAHG4kB,EAAQv7B,WAAWm7B,GAAavB,GACnCiC,EAAMr8B,KAAKoX,IAAI2kB,GACfQ,EAAMv8B,KAAKmX,IAAI4kB,GAEhBA,EAAQv7B,WAAWk7B,GAAatB,GAChCjjB,EAAMnX,KAAKmX,IAAI4kB,GACf3wB,EAAImtB,GAAgB15B,EAAQuM,EAAGixB,EAAMllB,GAAO+Z,GAC5C7lB,EAAIktB,GAAgB15B,EAAQwM,GAAIrL,KAAKoX,IAAI2kB,IAAU7K,GACnDsK,EAAIjD,GAAgB15B,EAAQ28B,EAAGe,EAAMplB,GAAO+Z,EAAUA,GAGnD+L,IAAyBK,KAC5BtE,GAAc,eAAiBiE,EAAuBM,KAEnDV,GAAYE,KACf/D,GAAc,aAAe6D,EAAW,MAAQE,EAAW,QAExDS,GAASpyB,IAAMkyB,IAAWjyB,IAAMiyB,IAAW9B,IAAM8B,KACpDtE,GAAewC,IAAM8B,IAAWE,EAAS,eAAiBpyB,EAAI,KAAOC,EAAI,KAAOmwB,EAAI,KAAO,aAAepwB,EAAI,KAAOC,EAAIkyB,IAEtH9B,IAAa4B,KAChBrE,GAAc,UAAYyC,EAAW8B,IAElC5B,IAAc0B,KACjBrE,GAAc,WAAa2C,EAAY4B,IAEpC7B,IAAc2B,KACjBrE,GAAc,WAAa0C,EAAY6B,IAEpC3B,IAAUyB,IAAYxB,IAAUwB,KACnCrE,GAAc,QAAU4C,EAAQ,KAAOC,EAAQ0B,IAEjC,IAAXlN,GAA2B,IAAXC,IACnB0I,GAAc,SAAW3I,EAAS,KAAOC,EAASiN,IAEnD1+B,EAAO6lB,MAAMyM,IAAkB6H,GAAc,mBAE9CkE,GAAuB,SAAvBA,qBAAgCvd,EAAOlV,OAIrCgzB,EAAKC,EAAK1B,EAAKC,EAAK1M,IAH0G9kB,GAAS2S,KAAnIyf,IAAAA,SAAUE,IAAAA,SAAU3xB,IAAAA,EAAGC,IAAAA,EAAGowB,IAAAA,SAAUG,IAAAA,MAAOC,IAAAA,MAAOxL,IAAAA,OAAQC,IAAAA,OAAQzxB,IAAAA,OAAQg5B,IAAAA,QAASE,IAAAA,QAASE,IAAAA,QAASE,IAAAA,QAASyE,IAAAA,SAClHxE,EAAK53B,WAAW4K,GAChBitB,EAAK73B,WAAW6K,GAEjBowB,EAAWj7B,WAAWi7B,GACtBG,EAAQp7B,WAAWo7B,IACnBC,EAAQr7B,WAAWq7B,MAGlBD,GADAC,EAAQr7B,WAAWq7B,GAEnBJ,GAAYI,GAETJ,GAAYG,GACfH,GAAYrB,GACZwB,GAASxB,GACTqD,EAAMz9B,KAAKmX,IAAIskB,GAAYpL,EAC3BqN,EAAM19B,KAAKoX,IAAIqkB,GAAYpL,EAC3B2L,EAAMh8B,KAAKoX,IAAIqkB,EAAWG,IAAUtL,EACpC2L,EAAMj8B,KAAKmX,IAAIskB,EAAWG,GAAStL,EAC/BsL,IACHC,GAASzB,GACT7K,EAAOvvB,KAAK29B,IAAI/B,EAAQC,GAExBG,GADAzM,EAAOvvB,KAAKiX,KAAK,EAAIsY,EAAOA,GAE5B0M,GAAO1M,EACHsM,IACHtM,EAAOvvB,KAAK29B,IAAI9B,GAEhB4B,GADAlO,EAAOvvB,KAAKiX,KAAK,EAAIsY,EAAOA,GAE5BmO,GAAOnO,IAGTkO,EAAM19B,GAAO09B,GACbC,EAAM39B,GAAO29B,GACb1B,EAAMj8B,GAAOi8B,GACbC,EAAMl8B,GAAOk8B,KAEbwB,EAAMpN,EACN4L,EAAM3L,EACNoN,EAAM1B,EAAM,IAER5D,MAAShtB,EAAI,IAAItK,QAAQ,OAAWu3B,MAAShtB,EAAI,IAAIvK,QAAQ,SACjEs3B,EAAKzD,GAAe91B,EAAQ,IAAKuM,EAAG,MACpCitB,EAAK1D,GAAe91B,EAAQ,IAAKwM,EAAG,QAEjCwsB,GAAWE,GAAWE,GAAWE,KACpCC,EAAKr4B,GAAOq4B,EAAKP,GAAWA,EAAU4F,EAAM1F,EAAUiE,GAAO/D,GAC7DI,EAAKt4B,GAAOs4B,EAAKN,GAAWF,EAAU6F,EAAM3F,EAAUkE,GAAO9D,KAE1D0E,GAAYE,KAEfxN,EAAO1wB,EAAO00B,UACd6E,EAAKr4B,GAAOq4B,EAAKyE,EAAW,IAAMtN,EAAKyE,OACvCqE,EAAKt4B,GAAOs4B,EAAK0E,EAAW,IAAMxN,EAAK0E,SAExC1E,EAAO,UAAYkO,EAAM,IAAMC,EAAM,IAAM1B,EAAM,IAAMC,EAAM,IAAM7D,EAAK,IAAMC,EAAK,IACnFx5B,EAAOyqB,aAAa,YAAaiG,GACjCqN,IAAa/9B,EAAO6lB,MAAMyM,IAAkB5B,IAsE9C7vB,GAAa,8BAA+B,SAACpB,EAAMiP,OAEjDoD,EAAI,QACJzE,EAAI,SACJrL,EAAI,OACJ4hB,GAASlV,EAAQ,EAAI,CAJd,MAIiBoD,EAAEzE,EAAErL,GAAK,CAJ1B,MAI6BA,EAJ7B,MAIkC8P,EAAGzE,EAAEyE,EAAGzE,EAAErL,IAAIsQ,IAAI,SAAAysB,UAAQrwB,EAAQ,EAAIjP,EAAOs/B,EAAO,SAAWA,EAAOt/B,IAChH48B,GAAuB,EAAR3tB,EAAY,SAAWjP,EAAOA,GAAS,SAAS+lB,EAAQxlB,EAAQd,EAAU83B,EAAU70B,OAC9FE,EAAG6B,KACHya,UAAUve,OAAS,SACtBiC,EAAIuhB,EAAMtR,IAAI,SAAArB,UAAQkhB,GAAK3M,EAAQvU,EAAM/R,KAEN,KADnCgF,EAAO7B,EAAE6Q,KAAK,MACFlS,MAAMqB,EAAE,IAAIjC,OAAeiC,EAAE,GAAK6B,EAE/C7B,GAAK20B,EAAW,IAAIh2B,MAAM,KAC1BkD,EAAO,GACP0f,EAAM3iB,QAAQ,SAACgQ,EAAMlR,UAAMmE,EAAK+M,GAAQ5O,EAAEtC,GAAKsC,EAAEtC,IAAMsC,GAAKtC,EAAI,GAAK,EAAK,KAC1EylB,EAAOzV,KAAK/P,EAAQkE,EAAM/B,UAoLlB68B,GAAkBpC,GACvBqC,GAhLQC,GAAY,CACxBz/B,KAAM,MACNoR,SAAU8iB,GACVtzB,+BAAWL,UACHA,EAAO6lB,OAAS7lB,EAAO2K,UAE/BoF,mBAAK/P,EAAQkE,EAAM/B,EAAOuM,EAAO7O,OAI/Bk3B,EAAYC,EAAUjQ,EAAQE,EAAUpd,EAAMs1B,EAAa37B,EAAG0zB,EAAWD,EAASmI,EAAUC,EAAoBC,EAAoB1zB,EAAO+sB,EAAQjR,EAAa6X,EAH7J3b,EAAQrF,KAAKvO,OAChB6V,EAAQ7lB,EAAO6lB,MACf1b,EAAUhI,EAAM+B,KAAKiG,YAOjB3G,KALLywB,IAAkBN,UAEb6L,OAASjhB,KAAKihB,QAAU1M,GAAe9yB,GAC5Cu/B,EAAchhB,KAAKihB,OAAO5b,WACrBzhB,MAAQA,EACH+B,KACC,cAANV,IAGJwzB,EAAW9yB,EAAKV,IACZuN,GAASvN,KAAM+hB,GAAa/hB,EAAGU,EAAM/B,EAAOuM,EAAO1O,EAAQH,OAG/DgK,SAAcmtB,EACdmI,EAAc9C,GAAc74B,GACf,aAATqG,IAEHA,SADAmtB,EAAWA,EAAS7c,KAAKhY,EAAOuM,EAAO1O,EAAQH,KAGnC,WAATgK,IAAsBmtB,EAAS/0B,QAAQ,aAC1C+0B,EAAWroB,GAAeqoB,IAEvBmI,EACHA,EAAY5gB,KAAMve,EAAQwD,EAAGwzB,EAAU70B,KAAWulB,EAAc,QAC1D,GAAsB,OAAlBlkB,EAAE5B,OAAO,EAAE,GACrBm1B,GAAcvD,iBAAiBxzB,GAAQyzB,iBAAiBjwB,GAAK,IAAIF,OACjE0zB,GAAY,GACZtkB,GAAUa,UAAY,EACjBb,GAAUc,KAAKujB,KACnBG,EAAY5sB,GAAQysB,GACpBE,EAAU3sB,GAAQ0sB,IAEnBC,EAAUC,IAAcD,IAAYF,EAAajB,GAAe91B,EAAQwD,EAAGuzB,EAAYE,GAAWA,GAAWC,IAAcF,GAAYE,QAClIxvB,IAAIme,EAAO,cAAekR,EAAYC,EAAUtoB,EAAO7O,EAAS,EAAG,EAAG2D,GAC3EogB,EAAMza,KAAK3F,GACX+7B,EAAYp2B,KAAK3F,EAAG,EAAGqiB,EAAMriB,SACvB,GAAa,cAATqG,EAAsB,IAC5BM,GAAW3G,KAAK2G,GACnB4sB,EAAoC,mBAAhB5sB,EAAQ3G,GAAqB2G,EAAQ3G,GAAG2W,KAAKhY,EAAOuM,EAAO1O,EAAQH,GAAWsK,EAAQ3G,GAC1GvF,EAAU84B,KAAgBA,EAAW90B,QAAQ,aAAe80B,EAAapoB,GAAeooB,IACxFzsB,GAAQysB,EAAa,KAAsB,SAAfA,IAA0BA,GAAcvf,EAAQI,MAAMpU,IAAM8G,GAAQ6nB,GAAKnyB,EAAQwD,KAAO,IACpF,OAA/BuzB,EAAa,IAAIt1B,OAAO,KAAes1B,EAAa5E,GAAKnyB,EAAQwD,KAElEuzB,EAAa5E,GAAKnyB,EAAQwD,GAE3ByjB,EAAWtlB,WAAWo1B,IACtBqI,EAAqB,WAATv1B,GAA4C,MAAvBmtB,EAASv1B,OAAO,IAAeu1B,EAASp1B,OAAO,EAAG,MACtEo1B,EAAWA,EAASp1B,OAAO,IACxCmlB,EAASplB,WAAWq1B,GAChBxzB,KAAKyuB,KACE,cAANzuB,IACc,IAAbyjB,GAAiD,WAA/BkL,GAAKnyB,EAAQ,eAA8B+mB,IAChEE,EAAW,GAEZsY,EAAYp2B,KAAK,aAAc,EAAG0c,EAAM4Z,YACxC9J,GAAkBpX,KAAMsH,EAAO,aAAcoB,EAAW,UAAY,SAAUF,EAAS,UAAY,UAAWA,IAErG,UAANvjB,GAAuB,cAANA,KACpBA,EAAIyuB,GAAiBzuB,IAClBvB,QAAQ,OAASuB,EAAIA,EAAExC,MAAM,KAAK,KAIvCq+B,EAAsB77B,KAAKuuB,WAIrByN,OAAOvM,KAAKzvB,GACZ87B,KACJ1zB,EAAQ5L,EAAOC,OACR0xB,kBAAoBztB,EAAKw7B,gBAAmBjI,GAAgBz3B,EAAQkE,EAAKw7B,gBAChF/G,GAAgC,IAAtBz0B,EAAKy7B,cAA0B/zB,EAAM+sB,QAC/C2G,EAAqB/gB,KAAKzV,IAAM,IAAIsI,GAAUmN,KAAKzV,IAAK+c,EAAOyM,GAAgB,EAAG,EAAG1mB,EAAM+lB,gBAAiB/lB,EAAO,GAAI,IACpGmf,IAAM,GAEhB,UAANvnB,OACEsF,IAAM,IAAIsI,GAAUmN,KAAKzV,IAAK8C,EAAO,SAAUA,EAAM6lB,QAAU2N,EAAW99B,GAAesK,EAAM6lB,OAAQ2N,EAAWrY,GAAUA,GAAUnb,EAAM6lB,QAAW,EAAGZ,SAC1J/nB,IAAIwE,EAAI,EACbsW,EAAMza,KAAK,SAAU3F,GACrBA,GAAK,QACC,CAAA,GAAU,oBAANA,EAAyB,CACnC+7B,EAAYp2B,KAAKipB,GAAsB,EAAGvM,EAAMuM,KAChD4E,EAAWG,GAA8BH,GACrCprB,EAAM2mB,IACTiG,GAAgBx4B,EAAQg3B,EAAU,EAAG2B,EAAQ,EAAGpa,QAEhD0Y,EAAUt1B,WAAWq1B,EAASh2B,MAAM,KAAK,KAAO,KACpC4K,EAAMymB,SAAWsD,GAAkBpX,KAAM3S,EAAO,UAAWA,EAAMymB,QAAS4E,GACtFtB,GAAkBpX,KAAMsH,EAAOriB,EAAG44B,GAAcrF,GAAaqF,GAAcpF,cAGtE,GAAU,cAANxzB,EAAmB,CAC7Bg1B,GAAgBx4B,EAAQg3B,EAAU,EAAG2B,EAAQ,EAAGpa,eAE1C,GAAI/a,KAAKk5B,GAAuB,CACtC/C,GAAwBpb,KAAM3S,EAAOpI,EAAGyjB,EAAUmY,EAAW99B,GAAe2lB,EAAUmY,EAAWpI,GAAYA,YAGvG,GAAU,iBAANxzB,EAAsB,CAChCmyB,GAAkBpX,KAAM3S,EAAO,SAAUA,EAAM+sB,OAAQ3B,YAEjD,GAAU,YAANxzB,EAAiB,CAC3BoI,EAAMpI,GAAKwzB,WAEL,GAAU,cAANxzB,EAAmB,CAC7B02B,GAAoB3b,KAAMyY,EAAUh3B,kBAGzBwD,KAAKqiB,IACjBriB,EAAIkwB,GAAiBlwB,IAAMA,MAGxB67B,IAAwBtY,GAAqB,IAAXA,KAAkBE,GAAyB,IAAbA,KAAoByU,GAAYloB,KAAKwjB,IAAcxzB,KAAKqiB,EAEhHkB,EAAXA,GAAoB,GADpBmQ,GAAaH,EAAa,IAAIn1B,QAAQqlB,EAAW,IAAI7mB,YAErD62B,EAAU3sB,GAAQ0sB,KAAexzB,KAAKgU,EAAQI,MAASJ,EAAQI,MAAMpU,GAAK0zB,MAChDjQ,EAAW6O,GAAe91B,EAAQwD,EAAGuzB,EAAYE,SACtEnuB,IAAM,IAAIsI,GAAUmN,KAAKzV,IAAKu2B,EAAqBzzB,EAAQia,EAAOriB,EAAGyjB,GAAWmY,EAAW99B,GAAe2lB,EAAUmY,EAAWrY,GAAUA,GAAUE,EAAYoY,GAAmC,OAAZpI,GAA0B,WAANzzB,IAAsC,IAAnBU,EAAK07B,UAA+C/O,GAAxBG,SACzPloB,IAAIwE,EAAI2pB,GAAW,EACpBC,IAAcD,GAAuB,MAAZA,SACvBnuB,IAAIuE,EAAI0pB,OACRjuB,IAAIgJ,EAAIif,SAER,GAAMvtB,KAAKqiB,EAQjBgR,GAAuB1c,KAAKoE,KAAMve,EAAQwD,EAAGuzB,EAAYqI,EAAWA,EAAWpI,EAAWA,WAPtFxzB,KAAKxD,OACH0H,IAAI1H,EAAQwD,EAAGuzB,GAAc/2B,EAAOwD,GAAI47B,EAAWA,EAAWpI,EAAWA,EAAUtoB,EAAO7O,QACzF,GAAU,mBAAN2D,EAAwB,CAClCvE,EAAeuE,EAAGwzB,YAMpBqI,IAAuB77B,KAAKqiB,EAAQ0Z,EAAYp2B,KAAK3F,EAAG,EAAGqiB,EAAMriB,IAA4B,mBAAfxD,EAAOwD,GAAqB+7B,EAAYp2B,KAAK3F,EAAG,EAAGxD,EAAOwD,MAAQ+7B,EAAYp2B,KAAK3F,EAAG,EAAGuzB,GAAc/2B,EAAOwD,KAC5LogB,EAAMza,KAAK3F,GAGbkkB,GAAeW,GAA0B9J,OAG1C9b,uBAAOqe,EAAOxH,MACTA,EAAKnX,MAAMoF,QAAUxE,aACpB0iB,EAAKnM,EAAKxQ,IACP2c,GACNA,EAAG3T,EAAEgP,EAAO2E,EAAGhZ,GACfgZ,EAAKA,EAAGtgB,WAGTmU,EAAKkmB,OAAOt5B,UAGduK,IAAK0hB,GACLvhB,QAASqhB,GACTvhB,6BAAU1Q,EAAQd,EAAUsmB,OACvBhiB,EAAIyuB,GAAiB/yB,UACxBsE,GAAKA,EAAEvB,QAAQ,KAAO,IAAO/C,EAAWsE,GACjCtE,KAAY6yB,IAAmB7yB,IAAakzB,KAAyBpyB,EAAOC,MAAMsM,GAAK4lB,GAAKnyB,EAAQ,MAAUwlB,GAAU8U,KAAwB9U,EAAuB,UAAbtmB,EAAuBqyB,GAAeD,IAAqBgJ,GAAsB9U,GAAU,MAAqB,UAAbtmB,EAAuBwyB,GAAyBE,IAA+B5xB,EAAO6lB,QAAUxnB,EAAa2B,EAAO6lB,MAAM3mB,IAAaiyB,IAAmBjyB,EAAS+C,QAAQ,KAAOmvB,GAAiBzgB,GAAW3Q,EAAQd,IAE5dgxB,KAAM,CAAEsF,gBAAAA,GAAiBsC,WAAAA,KAI1B94B,GAAK6vB,MAAMgR,YAAcnM,GACzB10B,GAAKkxB,KAAK4P,cAAgBhN,GAErBmM,GAAMp+B,IADDm+B,GAQP,+CAPwC,KADfpC,GAQsB,4CAPU,iFAAc,SAAAn9B,GAASsyB,GAAgBtyB,GAAQ,IAC1GoB,GAAa+7B,GAAU,SAAAn9B,GAAS+X,EAAQI,MAAMnY,GAAQ,MAAOi9B,GAAsBj9B,GAAQ,IAC3FwyB,GAAiBgN,GAAI,KAAOD,GAAmB,IAAMpC,GACrD/7B,GAI8K,6FAJxJ,SAAApB,OACjBuB,EAAQvB,EAAKuB,MAAM,KACvBixB,GAAiBjxB,EAAM,IAAMi+B,GAAIj+B,EAAM,MAGzCH,GAAa,+EAAgF,SAAApB,GAAS+X,EAAQI,MAAMnY,GAAQ,OAE5HT,GAAKsuB,eAAe4R,QC1nCda,GAAc/gC,GAAKsuB,eAAe4R,KAAclgC,GACrDghC,GAAkBD,GAAY7P,KAAK9lB"} \ No newline at end of file diff --git a/dot-line-system/public/images/0_2.png b/dot-line-system/public/images/0_2.png deleted file mode 100644 index 008cbfa..0000000 Binary files a/dot-line-system/public/images/0_2.png and /dev/null differ diff --git a/dot-line-system/public/images/0_3.png b/dot-line-system/public/images/0_3.png deleted file mode 100644 index 6abd17a..0000000 Binary files a/dot-line-system/public/images/0_3.png and /dev/null differ diff --git a/dot-line-system/public/images/disco.png b/dot-line-system/public/images/disco.png deleted file mode 100644 index 8588d2a..0000000 Binary files a/dot-line-system/public/images/disco.png and /dev/null differ diff --git a/dot-line-system/public/images/entspannung.png b/dot-line-system/public/images/entspannung.png deleted file mode 100644 index 8673fea..0000000 Binary files a/dot-line-system/public/images/entspannung.png and /dev/null differ diff --git a/dot-line-system/public/images/familie.png b/dot-line-system/public/images/familie.png deleted file mode 100644 index e6c5420..0000000 Binary files a/dot-line-system/public/images/familie.png and /dev/null differ diff --git a/dot-line-system/public/images/familie2.png b/dot-line-system/public/images/familie2.png deleted file mode 100644 index dbfd161..0000000 Binary files a/dot-line-system/public/images/familie2.png and /dev/null differ diff --git a/dot-line-system/public/images/feier.png b/dot-line-system/public/images/feier.png deleted file mode 100644 index d849e60..0000000 Binary files a/dot-line-system/public/images/feier.png and /dev/null differ diff --git a/dot-line-system/public/images/gpt.png b/dot-line-system/public/images/gpt.png deleted file mode 100644 index ea252e5..0000000 Binary files a/dot-line-system/public/images/gpt.png and /dev/null differ diff --git a/dot-line-system/public/images/grosseltern.png b/dot-line-system/public/images/grosseltern.png deleted file mode 100644 index 6572a1c..0000000 Binary files a/dot-line-system/public/images/grosseltern.png and /dev/null differ diff --git a/dot-line-system/public/images/hochzeit.png b/dot-line-system/public/images/hochzeit.png deleted file mode 100644 index ce61760..0000000 Binary files a/dot-line-system/public/images/hochzeit.png and /dev/null differ diff --git a/dot-line-system/public/images/kindergeburtstag.png b/dot-line-system/public/images/kindergeburtstag.png deleted file mode 100644 index 47a1a7b..0000000 Binary files a/dot-line-system/public/images/kindergeburtstag.png and /dev/null differ diff --git a/dot-line-system/public/images/kinobesuch.png b/dot-line-system/public/images/kinobesuch.png deleted file mode 100644 index 6bc2472..0000000 Binary files a/dot-line-system/public/images/kinobesuch.png and /dev/null differ diff --git a/dot-line-system/public/images/klasse.png b/dot-line-system/public/images/klasse.png deleted file mode 100644 index 91124b8..0000000 Binary files a/dot-line-system/public/images/klasse.png and /dev/null differ diff --git a/dot-line-system/public/images/oma.png b/dot-line-system/public/images/oma.png deleted file mode 100644 index 941dbda..0000000 Binary files a/dot-line-system/public/images/oma.png and /dev/null differ diff --git a/dot-line-system/public/images/pferd.png b/dot-line-system/public/images/pferd.png deleted file mode 100644 index 5992d19..0000000 Binary files a/dot-line-system/public/images/pferd.png and /dev/null differ diff --git a/dot-line-system/public/images/see.png b/dot-line-system/public/images/see.png deleted file mode 100644 index 59d79f9..0000000 Binary files a/dot-line-system/public/images/see.png and /dev/null differ diff --git a/dot-line-system/public/images/sonntag.png b/dot-line-system/public/images/sonntag.png deleted file mode 100644 index 3d5d677..0000000 Binary files a/dot-line-system/public/images/sonntag.png and /dev/null differ diff --git a/dot-line-system/public/images/work.png b/dot-line-system/public/images/work.png deleted file mode 100644 index 8943c4f..0000000 Binary files a/dot-line-system/public/images/work.png and /dev/null differ diff --git a/dot-line-system/public/vite.svg b/dot-line-system/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/dot-line-system/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dot-line-system/readme.md b/dot-line-system/readme.md deleted file mode 100644 index 2d357b2..0000000 --- a/dot-line-system/readme.md +++ /dev/null @@ -1,8 +0,0 @@ -**Prepare the project** -npm install - -**Start the project** -npm start - -**Aufrufen** -http://localhost:5173/ \ No newline at end of file diff --git a/dot-line-system/src/ConnectedDotsVisualization.ts b/dot-line-system/src/ConnectedDotsVisualization.ts deleted file mode 100644 index 090a043..0000000 --- a/dot-line-system/src/ConnectedDotsVisualization.ts +++ /dev/null @@ -1,519 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 80; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.625; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.7); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 30; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link) { - const link = document.createElement("a"); - link.href = dot.link; - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation - if (dot.link) { - circle.addEventListener("click", () => { - if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link"); - throw new Error("Dot has no link"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); - } - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - this.config.height = window.innerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/dot-line-system/src/main.ts b/dot-line-system/src/main.ts deleted file mode 100644 index cac6f1b..0000000 --- a/dot-line-system/src/main.ts +++ /dev/null @@ -1,320 +0,0 @@ -import { - ConnectedDotsVisualization, - type DotConfig, -} from "./ConnectedDotsVisualization"; - -import '../src/style.css'; - -/* - * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output. - * - * For Vite: - * - Place your images in the `public/images` directory instead of `src/images`. - * - Reference them as `/images/filename.png` in your code. - * - * For Webpack: - * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory. - * - * For static hosting (e.g., GitHub Pages, Netlify): - * - Make sure the images are in the output directory (e.g., `dist/images`) after build. - * - * Example for Vite: - * Move images to `public/images` and update imageUrl paths to `/images/filename.png`. - */ - -// Sample dot configurations -const sampleDots: DotConfig[] = [ - { - id: 1, - value: -1.8, - x: -2, - imageUrl: - "/images/0_3.png", - title: "Beginn des neuen Abenteuers", - description: "01.10.2024", - link: "/page1", - }, - { - id: 2, - value: 1.2, - x: 0, - imageUrl: - "/images/0_2.png", - title: "Omas Annis Geburtstag", - description: "02.10.2024", - link: "/page2", - }, - { - id: 3, - value: -0.6, - x: 2, - imageUrl: - "/images/disco.png", - title: "Konzertbesuch mit Freunden", - description: "03.10.2024", - link: "/page3", - }, - { - id: 4, - value:3, - x: 4, - imageUrl: - "/images/pferd.png", - title: "Wanderreiten in den Bergen", - description: "04.10.2024", - link: "/page4", - }, - { - id: 5, - value: 1, - x: 6, - imageUrl: - "/images/gpt.png", - title: "Ruhiger Tag zu Hause", - description: "05.10.2024", - link: "/page5", - }, - { - id: 6, - value: -3, - x: 8, - imageUrl: - "/images/oma.png", - title: "Oma Erna verstorben", - description: "06.10.2024", - link: "/page6", - }, - { - id: 7, - value: 1.5, - x: 10, - imageUrl: - "/images/see.png", - title: "Erholungsausflug zum See", - description: "07.10.2024", - link: "/page7", - }, - { - id: 8, - value: 0, - x: 12, - imageUrl: - "/images/feier.png", - title: "Kleine Wochenendsfeier", - description: "08.10.2024", - link: "/page8", - }, - { - id: 9, - value: 3, - x: 14, - imageUrl: - "/images/hochzeit.png", - title: "Hochzeit von Cousine Tatjana", - description: "09.10.2024", - link: "/page9", - }, - { - id: 10, - value: 1, - x: 16, - imageUrl: - "/images/work.png", - title: "Erster Tag im neuen Job", - description: "10.10.2024", - link: "/page10", - }, - { - id: 11, - value: -1.2, - x: 18, - imageUrl: - "/images/klasse.png", - title: "Klassentreffen nach vielen Jahren", - description: "11.10.2024", - link: "/page11", - }, - { - id: 12, - value: -0.6, - x: 20, - imageUrl: - "/images/familie.png", - title: "Familienabendessen", - description: "12.10.2024", - link: "/page12", - }, - { - id: 13, - value: 2.7, - x: 22, - imageUrl: - "/images/kinobesuch.png", - title: "Kinobesuch mit der ganzen Familie", - description: "13.10.2024", - link: "/page13", - }, - { - id: 14, - value: 0, - x: 24, - imageUrl: - "/images/entspannung.png", - title: "Entspannung", - description: "14.10.2024", - link: "/page14", - }, - { - id: 15, - value: -2.9, - x: 26, - imageUrl: "/images/sonntag.png", - title: "Geruhsamer Sonntag", - description: "15.10.2024", - link: "/page15", - }, - { - id: 16, - value: 1.5, - x: 28, - imageUrl: - "/images/kindergeburtstag.png", - title: "Kindergeburtstag", - description: "16.10.2024", - link: "/page16", - }, - { - id: 17, - value: 0, - x: 30, - imageUrl: - "/images/familie2.png", - title: "Spaziergang mit der Familie", - description: "17.10.2024", - link: "/page17", - }, - { - id: 18, - value: 2.1, - x: 32, - imageUrl: - "/images/grosseltern.png", - title: "Familienfeier bei den Großeltern", - description: "18.10.2024", - link: "/page18", - }, -]; - -// Wait for DOM to be fully loaded -document.addEventListener("DOMContentLoaded", () => { - // Initialize the visualization with the sample dots - const visualization = new ConnectedDotsVisualization( - "scroll-container", - sampleDots, - { - // Optional custom configuration - dotRadius: 8, - // tooltipWidth: 100, - // tooltipHeight: 100, - } - ); - - // Handle window resize - window.addEventListener("resize", () => { - visualization.resize(); - }); - - // Example of updating dots dynamically (if needed) - /* - const updateButton = document.createElement('button'); - updateButton.textContent = 'Update Data'; - updateButton.classList.add('button'); - updateButton.style.marginTop = '10px'; - document.body.appendChild(updateButton); - - updateButton.addEventListener('click', () => { - // Generate some new random data with image tooltips - const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({ - id: i + 1, - value: Math.random() * 6 - 3, // Random value between -3 and 3 - x: i - 3, - imageUrl: `https://picsum.photos/200/150?random=${i+10}`, - title: `Point ${i+1}`, - description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}` - })); - visualization.updateDots(newDots); - }); - */ - - const scrollContainer = document.querySelector(".scroll-container") as HTMLElement; - - let isDown = false; - let startX: number; - let scrollLeft: number; - - - // Mouse events - scrollContainer.addEventListener("mousedown", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - - // Remove smooth scrolling while dragging - scrollContainer.classList.remove("smooth-scroll"); - }); - - scrollContainer.addEventListener("mouseleave", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("mouseup", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("mousemove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling - scrollContainer.scrollLeft = scrollLeft - walk; - }); - - // Touch events - scrollContainer.addEventListener("touchstart", (e) => { - isDown = true; - scrollContainer.classList.add("active"); - startX = e.touches[0].pageX - scrollContainer.offsetLeft; - scrollLeft = scrollContainer.scrollLeft; - - // Remove smooth scrolling while dragging - scrollContainer.classList.remove("smooth-scroll"); - }); - - scrollContainer.addEventListener("touchend", () => { - if (!isDown) return; - isDown = false; - scrollContainer.classList.remove("active"); - - // Add smooth scrolling after dragging - scrollContainer.classList.add("smooth-scroll"); - }); - - scrollContainer.addEventListener("touchmove", (e) => { - if (!isDown) return; - e.preventDefault(); - const x = e.touches[0].pageX - scrollContainer.offsetLeft; - const walk = (x - startX) * 3; - scrollContainer.scrollLeft = scrollLeft - walk; - }); -}); diff --git a/dot-line-system/src/style.css b/dot-line-system/src/style.css deleted file mode 100644 index 9d13415..0000000 --- a/dot-line-system/src/style.css +++ /dev/null @@ -1,203 +0,0 @@ - body { - font-family: "Barlow Condensed", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .controls { - display: flex; - justify-content: space-between; - width: 100%; - max-width: 500px; - margin-bottom: 10px; - } - - .button { - padding: 6px 12px; - background-color: #4f46e5; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .visualization-container { - position: absolute; - width: 100vw; - height: 100vh; - left: 0; - right: 0; - margin-left: calc(-50vw + 50%); - } - - .gradient-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - min-width: 100%; - z-index: -1; - background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); - background-size: 200% 200%; - animation: gradientAnimation 20s ease infinite; - } - - @keyframes gradientAnimation { - 0% { - background-position: 0% 0%; - } - - 25% { - background-position: 100% 0%; - } - - 50% { - background-position: 100% 100%; - } - - 75% { - background-position: 0% 100%; - } - - 100% { - background-position: 0% 0%; - } - } - - .median { - position: fixed; - top: 61.5%; - left: 0; - height: 1px; - border-top: 1px dashed rgba(255, 255, 255, 0.2); - width: 100%; - z-index: -1; - /* background-color: rgba(255, 255, 255, 0.2); */ - } - - .scroll-container { - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - scroll-behavior: smooth; - box-sizing: border-box; - } - - .scroll-container:active { - cursor: grabbing; - /* Change cursor when active */ - } - - .smooth-scroll { - transition: scroll-left 0.5s ease-out; /* Add easing on scroll-left */ -} - - .spacer { - height: 100vh; - } - - .dot-tooltip .tooltip-background { - fill: rgba(0, 0, 0, 0.0); - } - - .dot-tooltip .tooltip-content { - display: flex; - flex-direction: column; - justify-content: center; - /* Center vertically */ - align-items: center; - /* Center horizontally */ - width: 100%; - height: 100%; - color: white; - /* Text color */ - } - - .dot-tooltip .image_container { - margin-top: 8px; - /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); */ - box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); - transition: box-shadow 0.25s ease-in-out; - } - - .dot-tooltip .image_container:hover { - - box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); - /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); */ - transition: box-shadow 0.25s ease-in-out; - - } - - .dot-tooltip .tooltip-image { - width: 100%; - height: auto; - display: block; - pointer-events: auto; - - } - - .dot-tooltip .tooltip-title { - font-size: 14px; - font-weight: 400; - margin-bottom: 2px; - text-align: center; - text-wrap: balance; - hyphens: auto; - line-height: 1.1; - } - - .dot-tooltip .tooltip-description { - font-size: 12px; - font-weight: 300; - } - - .dot-tooltip .image_container { - width: 80px; - height: 80px; - overflow: hidden; - border-radius: 50%; - border: 2px solid white; - display: flex; - justify-content: center; - } - - .dot-tooltip .tooltip-arrow { - width: 1px; - height: 30px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); - } - - .dot { - transition: r 0.2s ease, fill 0.2s ease; - cursor: pointer; - } - - .dot:hover { - fill: rgba(255, 255, 255, 0.9); - filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); - } - - .dot-tooltip { - pointer-events: none; - opacity: 1; - /* Always visible */ - } - - .tooltip-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 4px; - } \ No newline at end of file diff --git a/dot-line-system/src/typescript.svg b/dot-line-system/src/typescript.svg deleted file mode 100644 index d91c910..0000000 --- a/dot-line-system/src/typescript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dot-line-system/src/vite-env.d.ts b/dot-line-system/src/vite-env.d.ts deleted file mode 100644 index 11f02fe..0000000 --- a/dot-line-system/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/dot-line-system/tsconfig.json b/dot-line-system/tsconfig.json deleted file mode 100644 index a4883f2..0000000 --- a/dot-line-system/tsconfig.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["src"] -} diff --git a/frontend/.gitignore b/frontend/.gitignore index 1360c61..f1d913c 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -16,8 +16,6 @@ node_modules # Capacitor related directories and files /src-capacitor/www /src-capacitor/node_modules -/src-capacitor/ios -/src-capacitor/android # Log files npm-debug.log* diff --git a/frontend/MOBILE-APPS.md b/frontend/MOBILE-APPS.md deleted file mode 100644 index 835fca1..0000000 --- a/frontend/MOBILE-APPS.md +++ /dev/null @@ -1,226 +0,0 @@ -# Mobile Apps – iOS & Android - -Die "Thats Me" App wird mit **Capacitor** (v7) als native iOS- und Android-App verpackt. Capacitor bündelt die Quasar Web-App in eine WebView innerhalb einer nativen App-Shell. - ---- - -## Wichtig: Zwei Umgebungen - -| Umgebung | Zweck | -| --------------------- | ---------------------------------------------------------------------- | -| **Docker-Container** | Quasar Dev-Server, Vue-Code bearbeiten, `npm install`, Web-Entwicklung | -| **Mac Server / Host** | Xcode, CocoaPods, Capacitor-Builds, iOS Simulator | - -Xcode und CocoaPods laufen **ausschließlich auf dem Mac** (außerhalb Docker). Die installierten Tools auf dem Mac-Host beeinflussen den Docker-Container **nicht** – beide Umgebungen sind vollständig isoliert. - ---- - -## Projektstruktur - -``` -frontend/ -├── src/ # Quasar Quellcode (Vue.js) -├── src-capacitor/ # Capacitor nativer Wrapper -│ ├── ios/ # Xcode-Projekt (lokal, nicht im Git) -│ ├── android/ # Android Studio Projekt (lokal, nicht im Git) -│ ├── www/ # Kompilierte Web-Assets (nicht im Git) -│ ├── capacitor.config.json # App-Konfiguration -│ └── package.json # Capacitor Dependencies -└── quasar.config.js # Quasar Config -``` - -## App-Konfiguration - -| Eigenschaft | Wert | -| ----------- | ----------------------- | -| App ID | `media.adametz.thatsme` | -| App Name | `Thats Me` | - ---- - -## Einmaliges Setup auf dem Mac - -### 1. Voraussetzungen installieren - -```bash -# Homebrew (falls nicht vorhanden) -/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" - -# Node.js -brew install node - -# CocoaPods (iOS Dependency Manager) -brew install cocoapods -# oder: sudo gem install cocoapods - -# Prüfen: -node --version # z.B. v25.x -pod --version # z.B. 1.16.2 -``` - -### 2. Xcode einrichten - -- Xcode aus dem **Mac App Store** installieren (~15 GB, etwas Geduld) -- Nach der Installation Xcode **einmal öffnen** und License akzeptieren -- Developer Directory auf Xcode setzen: - -```bash -sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer -sudo xcodebuild -license accept -``` - -Prüfen: - -```bash -xcode-select -p -# Ausgabe: /Applications/Xcode.app/Contents/Developer -``` - -### 3. Capacitor Dependencies installieren - -```bash -cd ~/Sites/thats-me.local/frontend/src-capacitor -npm install -``` - -> ⚠️ **Wichtig:** `npm install` immer nur im `src-capacitor/`-Unterordner ausführen, **niemals** direkt im `frontend/`-Ordner vom Mac-Host. Der `frontend/`-Ordner ist per Volume in den Docker-Container gemountet. Ein `npm install` dort überschreibt die Linux-Binaries mit macOS-Binaries und der Dev-Container funktioniert nicht mehr. -> -> Falls das passiert, im Dev-Container reparieren: -> ```bash -> cd /workspace/frontend -> rm -rf node_modules package-lock.json && npm install -> ``` - -### 4. iOS-Plattform hinzufügen (nur wenn `ios/`-Ordner fehlt) - -```bash -cd ~/Sites/thats-me.local/frontend/src-capacitor -npx cap add ios -``` - -### 5. CocoaPods für iOS-Projekt initialisieren - -```bash -cd ~/Sites/thats-me.local/frontend/src-capacitor/ios/App -pod install -``` - ---- - -## Build & Simulator starten (regulärer Workflow) - -### Schritt 1 – App bauen - -```bash -cd ~/Sites/thats-me.local/frontend -npx quasar build -m capacitor -T ios -``` - -Das kompiliert den Vue/Quasar-Code und synchronisiert die Assets in das Xcode-Projekt. - -### Schritt 2 – In Xcode öffnen - -```bash -cd src-capacitor -npx cap open ios -``` - -### Schritt 3 – Im Simulator ausführen - -In Xcode: - -1. Oben links das **Zielgerät** auf einen **Simulator** setzen (z.B. "iPhone 17") -2. **▶ Play** klicken - -> **Hinweis:** Für den Simulator wird **kein** Apple Developer Account / Signing benötigt. Signing ist nur für echte Geräte und den App Store erforderlich. - ---- - -## Nach Code-Änderungen - -Wenn Änderungen am Vue/Quasar-Code gemacht wurden, immer wieder: - -```bash -cd ~/Sites/thats-me.local/frontend -npx quasar build -m capacitor -T ios -cd src-capacitor && npx cap open ios -``` - -In Xcode dann erneut auf ▶ klicken. - ---- - -## Production Build (App Store) - -### iOS (App Store / TestFlight) - -```bash -npx quasar build -m capacitor -T ios -cd src-capacitor && npx cap open ios -``` - -In Xcode: - -- **Signing & Capabilities** → Apple Developer Account eintragen (kostenpflichtig, $99/Jahr) -- Zielgerät auf **"Any iOS Device (arm64)"** setzen -- **Product → Archive → Distribute App** - -### Android (Google Play) - -```bash -npx quasar build -m capacitor -T android -cd src-capacitor && npx cap open android -``` - -In Android Studio: - -- **Build → Generate Signed Bundle / APK** -- Keystore erstellen/auswählen - ---- - -## Native APIs / Plugins - -Capacitor-Plugins ermöglichen Zugriff auf native Funktionen: - -```bash -# Beispiele (im src-capacitor Ordner): -npm install @capacitor/camera -npm install @capacitor/geolocation -npm install @capacitor/push-notifications - -# Nach jedem neuen Plugin: -npx cap sync -``` - ---- - -## Git-Hinweise - -Folgende Ordner sind in `.gitignore` und werden **nicht** commitet: - -``` -src-capacitor/node_modules/ # Lokal neu installieren mit: npm install -src-capacitor/www/ # Wird vom Build befüllt -src-capacitor/ios/ # Lokal generiert mit: npx cap add ios -src-capacitor/android/ # Lokal generiert mit: npx cap add android -``` - -**Was commitet wird:** - -- `src-capacitor/capacitor.config.json` – App-Konfiguration -- `src-capacitor/package.json` – Capacitor Dependencies - ---- - -## Troubleshooting - -| Fehler | Lösung | -| ------------------------------------------------ | ----------------------------------------------------------------------------------------- | -| `spawn pod ENOENT` | `brew install cocoapods` | -| `xcodebuild requires Xcode` | `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` | -| `Cannot find module @rollup/rollup-darwin-arm64` | `rm -rf node_modules package-lock.json && npm install` im `frontend/`-Ordner | -| `Signing requires a development team` | Für Simulator: ignorieren. Für echtes Gerät: Apple Developer Account in Xcode hinterlegen | -| `ios platform already exists` | Normal – `npx cap add ios` überspringen, Ordner ist bereits vorhanden | -| Weißer Bildschirm im Simulator | `npx cap sync` im `src-capacitor`-Ordner, dann neu bauen | -| Pod-Fehler | `cd src-capacitor/ios/App && pod install --repo-update` | diff --git a/frontend/README.md b/frontend/README.md index 83105c4..1c77bf6 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -10,13 +10,6 @@ yarn npm install ``` -## erste installation -npm i -g @quasar/cli -npm init quasar@latest - -## Now, do you want to be able to run Quasar CLI commands directly (eg. $ quasar dev/build) - npm i -g @quasar/cli - ### Start the app in development mode (hot-code reloading, error reporting, etc.) ```bash diff --git a/frontend/_src/App.vue b/frontend/_src/App.vue deleted file mode 100644 index b22f395..0000000 --- a/frontend/_src/App.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/frontend/_src/assets/quasar-logo-vertical.svg b/frontend/_src/assets/quasar-logo-vertical.svg deleted file mode 100644 index 8210831..0000000 --- a/frontend/_src/assets/quasar-logo-vertical.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/frontend/_src/boot/.gitkeep b/frontend/_src/boot/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/_src/components/AddEventButton.vue b/frontend/_src/components/AddEventButton.vue deleted file mode 100644 index 2a58325..0000000 --- a/frontend/_src/components/AddEventButton.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - diff --git a/frontend/_src/components/AppSettingsModal.vue b/frontend/_src/components/AppSettingsModal.vue deleted file mode 100644 index 09ab13b..0000000 --- a/frontend/_src/components/AppSettingsModal.vue +++ /dev/null @@ -1,322 +0,0 @@ - - - - - diff --git a/frontend/_src/components/EssentialLink.vue b/frontend/_src/components/EssentialLink.vue deleted file mode 100644 index 54afb06..0000000 --- a/frontend/_src/components/EssentialLink.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/frontend/_src/components/EventPanel.vue b/frontend/_src/components/EventPanel.vue deleted file mode 100644 index ea0d2de..0000000 --- a/frontend/_src/components/EventPanel.vue +++ /dev/null @@ -1,546 +0,0 @@ - - - - - diff --git a/frontend/_src/components/FloatingLines.vue b/frontend/_src/components/FloatingLines.vue deleted file mode 100644 index 054bdd3..0000000 --- a/frontend/_src/components/FloatingLines.vue +++ /dev/null @@ -1,571 +0,0 @@ - - - - - diff --git a/frontend/_src/components/GlowDot.vue b/frontend/_src/components/GlowDot.vue deleted file mode 100644 index 627de28..0000000 --- a/frontend/_src/components/GlowDot.vue +++ /dev/null @@ -1,200 +0,0 @@ - - - - - diff --git a/frontend/_src/components/LifeWaveSettings.vue b/frontend/_src/components/LifeWaveSettings.vue deleted file mode 100644 index c36579a..0000000 --- a/frontend/_src/components/LifeWaveSettings.vue +++ /dev/null @@ -1,482 +0,0 @@ - - - - - diff --git a/frontend/_src/components/ModalCard.vue b/frontend/_src/components/ModalCard.vue deleted file mode 100644 index d722160..0000000 --- a/frontend/_src/components/ModalCard.vue +++ /dev/null @@ -1,171 +0,0 @@ - - - - - diff --git a/frontend/_src/components/TimelineView.vue b/frontend/_src/components/TimelineView.vue deleted file mode 100644 index 1101565..0000000 --- a/frontend/_src/components/TimelineView.vue +++ /dev/null @@ -1,547 +0,0 @@ - - - - - diff --git a/frontend/_src/components/UserMenu.vue b/frontend/_src/components/UserMenu.vue deleted file mode 100644 index d78d130..0000000 --- a/frontend/_src/components/UserMenu.vue +++ /dev/null @@ -1,278 +0,0 @@ - - - - - diff --git a/frontend/_src/components/UserMenuButton.vue b/frontend/_src/components/UserMenuButton.vue deleted file mode 100644 index da96753..0000000 --- a/frontend/_src/components/UserMenuButton.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/frontend/_src/components/ZoomControl.vue b/frontend/_src/components/ZoomControl.vue deleted file mode 100644 index c53bb45..0000000 --- a/frontend/_src/components/ZoomControl.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - - - diff --git a/frontend/_src/composables/useImageCache.js b/frontend/_src/composables/useImageCache.js deleted file mode 100644 index 8685a28..0000000 --- a/frontend/_src/composables/useImageCache.js +++ /dev/null @@ -1,175 +0,0 @@ -import { ref } from 'vue' -import { db } from 'src/db' - -const THUMB_SIZE = 200 - -// In-memory URL cache: avoids repeated IndexedDB reads and blob URL creation -// Shared across all component instances -const memoryCache = new Map() - -/** - * Create a thumbnail (THUMB_SIZE x THUMB_SIZE) from a source image blob. - * Returns a new Blob (JPEG, quality 0.8). - */ -function createThumbnail(blob) { - return new Promise((resolve, reject) => { - const img = new Image() - const url = URL.createObjectURL(blob) - img.onload = () => { - const canvas = document.createElement('canvas') - canvas.width = THUMB_SIZE - canvas.height = THUMB_SIZE - - const ctx = canvas.getContext('2d') - // Cover crop: center the image - const scale = Math.max(THUMB_SIZE / img.width, THUMB_SIZE / img.height) - const w = img.width * scale - const h = img.height * scale - const x = (THUMB_SIZE - w) / 2 - const y = (THUMB_SIZE - h) / 2 - ctx.drawImage(img, x, y, w, h) - - canvas.toBlob( - (thumbBlob) => { - URL.revokeObjectURL(url) - if (thumbBlob) resolve(thumbBlob) - else reject(new Error('Canvas toBlob failed')) - }, - 'image/jpeg', - 0.8 - ) - } - img.onerror = () => { - URL.revokeObjectURL(url) - reject(new Error('Image load failed')) - } - img.src = url - }) -} - -/** - * Fetch an image from URL, cache thumbnail in IndexedDB, return blob URL. - */ -async function fetchAndCache(imageUrl, eventId) { - const response = await fetch(imageUrl) - if (!response.ok) throw new Error(`Fetch failed: ${response.status}`) - const blob = await response.blob() - - // Create thumbnail - const thumbBlob = await createThumbnail(blob) - - // Store in IndexedDB - await db.imageCache.put({ - url: imageUrl, - eventId, - type: 'thumbnail', - blob: thumbBlob, - cachedAt: Date.now() - }) - - const blobUrl = URL.createObjectURL(thumbBlob) - memoryCache.set(imageUrl, blobUrl) - return blobUrl -} - -/** - * Get a cached thumbnail blob URL from IndexedDB. - * Returns null if not cached. - */ -async function getCachedImage(imageUrl) { - // Check memory first - if (memoryCache.has(imageUrl)) return memoryCache.get(imageUrl) - - try { - const entry = await db.imageCache.get(imageUrl) - if (entry?.blob) { - const blobUrl = URL.createObjectURL(entry.blob) - memoryCache.set(imageUrl, blobUrl) - return blobUrl - } - } catch (e) { - console.warn('Image cache read failed:', e) - } - return null -} - -/** - * Composable: resolves an event's image to a displayable src. - * - Checks memory cache → IndexedDB cache → fetches & caches thumbnail. - * - Returns reactive `resolvedSrc` ref. - */ -export function useImageCache(imageUrl, eventId) { - const resolvedSrc = ref(null) - const loading = ref(false) - - async function resolve() { - if (!imageUrl) { - resolvedSrc.value = null - return - } - - // 1. Memory cache (instant) - if (memoryCache.has(imageUrl)) { - resolvedSrc.value = memoryCache.get(imageUrl) - return - } - - // 2. IndexedDB cache - const cached = await getCachedImage(imageUrl) - if (cached) { - resolvedSrc.value = cached - return - } - - // 3. Fetch, create thumbnail, cache - loading.value = true - try { - const blobUrl = await fetchAndCache(imageUrl, eventId) - resolvedSrc.value = blobUrl - } catch (e) { - // Fallback: use original URL directly (works when online) - console.warn('Image cache failed, using direct URL:', e) - resolvedSrc.value = imageUrl - } finally { - loading.value = false - } - } - - resolve() - - return { resolvedSrc, loading } -} - -/** - * Resolve full-res image for EventPanel (no thumbnail, just cache check). - * Returns the original URL — browser Cache-Control handles caching. - * When offline, falls back to cached thumbnail. - */ -export async function resolveFullRes(imageUrl) { - if (!imageUrl) return null - - // If online, return original URL (browser caches via HTTP headers) - if (navigator.onLine) return imageUrl - - // Offline: try cached thumbnail as fallback - const cached = await getCachedImage(imageUrl) - return cached || imageUrl -} - -/** - * Clear all cached images for a specific event. - */ -export async function clearEventImages(eventId) { - try { - const entries = await db.imageCache.where('eventId').equals(eventId).toArray() - for (const entry of entries) { - if (memoryCache.has(entry.url)) { - URL.revokeObjectURL(memoryCache.get(entry.url)) - memoryCache.delete(entry.url) - } - } - await db.imageCache.where('eventId').equals(eventId).delete() - } catch (e) { - console.warn('Clear event images failed:', e) - } -} diff --git a/frontend/_src/composables/usePanelDrag.js b/frontend/_src/composables/usePanelDrag.js deleted file mode 100644 index 98a6896..0000000 --- a/frontend/_src/composables/usePanelDrag.js +++ /dev/null @@ -1,137 +0,0 @@ -import { ref, onBeforeUnmount } from 'vue' - -/** - * Composable for draggable bottom-sheet panels with snap points. - * - * Snap stops (in dvh): 100, 75, 50 - * Close threshold: below 25dvh - * - * @param {Function} onClose - called when panel is dragged below threshold - * @returns {{ panelHeight, handleListeners, resetHeight }} - */ -export function usePanelDrag(onClose) { - const SNAP_POINTS = [100, 75, 50, 25] // dvh values - const CLOSE_THRESHOLD = 15 // below this → close - - // Current panel height in dvh (null = use CSS default) - const panelHeight = ref(null) - const isDragging = ref(false) - - let dragging = false - let startY = 0 - let startHeight = 0 - - function getViewportHeight() { - return window.innerHeight - } - - function pxToDvh(px) { - return (px / getViewportHeight()) * 100 - } - - function findNearestSnap(dvh) { - let nearest = SNAP_POINTS[0] - let minDist = Infinity - for (const snap of SNAP_POINTS) { - const dist = Math.abs(dvh - snap) - if (dist < minDist) { - minDist = dist - nearest = snap - } - } - return nearest - } - - function onPointerDown(e) { - // Only primary button / single touch - if (e.button && e.button !== 0) return - dragging = true - isDragging.value = true - - const clientY = e.touches ? e.touches[0].clientY : e.clientY - startY = clientY - - // Current height: if panelHeight is set use it, else measure from CSS - const currentDvh = panelHeight.value ?? 75 - startHeight = currentDvh - - document.addEventListener('pointermove', onPointerMove, { passive: false }) - document.addEventListener('pointerup', onPointerUp) - document.addEventListener('touchmove', onTouchMove, { passive: false }) - document.addEventListener('touchend', onTouchEnd) - - // Prevent text selection - e.preventDefault() - } - - function onPointerMove(e) { - if (!dragging) return - const clientY = e.clientY - handleMove(clientY) - } - - function onTouchMove(e) { - if (!dragging) return - if (e.touches.length !== 1) return - handleMove(e.touches[0].clientY) - e.preventDefault() - } - - function handleMove(clientY) { - const deltaY = clientY - startY - const deltaDvh = pxToDvh(deltaY) - const newHeight = Math.max(10, Math.min(100, startHeight - deltaDvh)) - panelHeight.value = newHeight - } - - function onPointerUp() { - finishDrag() - } - - function onTouchEnd() { - finishDrag() - } - - function finishDrag() { - if (!dragging) return - dragging = false - isDragging.value = false - - cleanup() - - const currentHeight = panelHeight.value ?? 75 - if (currentHeight < CLOSE_THRESHOLD) { - panelHeight.value = null - onClose() - } else { - // Snap to nearest point - panelHeight.value = findNearestSnap(currentHeight) - } - } - - function cleanup() { - document.removeEventListener('pointermove', onPointerMove) - document.removeEventListener('pointerup', onPointerUp) - document.removeEventListener('touchmove', onTouchMove) - document.removeEventListener('touchend', onTouchEnd) - } - - function resetHeight() { - panelHeight.value = null - } - - onBeforeUnmount(cleanup) - - // Event listeners to bind on the handle element - const handleListeners = { - pointerdown: onPointerDown, - touchstart: onPointerDown, - } - - return { - panelHeight, - isDragging, - handleListeners, - resetHeight, - } -} diff --git a/frontend/_src/css/app.css b/frontend/_src/css/app.css deleted file mode 100644 index 1d8d514..0000000 --- a/frontend/_src/css/app.css +++ /dev/null @@ -1 +0,0 @@ -.controls{display:flex;justify-content:space-between;width:100%;max-width:500px;margin-bottom:10px}.button{padding:6px 12px;background-color:#4f46e5;color:#fff;border:none;border-radius:4px;cursor:pointer}.visualization-container{position:relative;width:100%;height:calc(100vh - 86px);overflow:hidden}.gradient-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);background-size:200% 200%;animation:gradientAnimation 20s ease infinite}@keyframes gradientAnimation{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}100%{background-position:0% 0%}}.median{position:absolute;top:51.2%;left:0;right:0;height:1px;background-color:rgba(255,255,255,.3);z-index:1}.scroll-container{position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;min-height:400px;z-index:2;-ms-overflow-style:none;scrollbar-width:none}.scroll-container::-webkit-scrollbar{display:none}.smooth-scroll{scroll-behavior:smooth}.active{cursor:grabbing}.spacer{height:100vh}.dot-tooltip{pointer-events:none;opacity:1}.dot-tooltip .tooltip-background{fill:rgba(0,0,0,0)}.dot-tooltip .tooltip-content{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;color:#fff}.dot-tooltip .image_container{margin-top:8px;box-shadow:0 0 20px 0 rgba(255,255,255,.25);transition:box-shadow .25s ease-in-out;width:80px;height:80px;overflow:hidden;border-radius:50%;border:2px solid #fff;display:flex;justify-content:center}.dot-tooltip .image_container:hover{box-shadow:0 0 30px 0 rgba(255,255,255,.8)}.dot-tooltip .tooltip-image{width:100%;height:auto;display:block;pointer-events:auto}.dot-tooltip .tooltip-title{font-size:14px;font-weight:400;margin-bottom:2px;text-align:center;text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;line-height:1.1}.dot-tooltip .tooltip-description{font-size:12px;font-weight:300}.dot-tooltip .tooltip-arrow{width:1px;height:30px;background:linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent)}.dot{transition:r .2s ease,fill .2s ease;cursor:pointer}.dot:hover{fill:rgba(255,255,255,.9);filter:drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))}.tooltip-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:4px}.q-card{box-shadow:none !important}.q-card--bordered{box-shadow:none !important}.q-card--flat{box-shadow:none !important}.bg-white,.q-layout__section--marginal{background:rgba(0,0,0,0) !important}footer .text-primary,footer .text-grey{color:#fff !important} \ No newline at end of file diff --git a/frontend/_src/css/app.scss b/frontend/_src/css/app.scss deleted file mode 100644 index 2342f87..0000000 --- a/frontend/_src/css/app.scss +++ /dev/null @@ -1,54 +0,0 @@ -// Glass button style -.glass--button { - background: rgba(128, 128, 128, 0.1); - border: 1px solid rgba(128, 128, 128, 0.15); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - transition: background 0.2s ease; - - &:hover { - background: rgba(128, 128, 128, 0.18); - } - - &:active { - transform: scale(0.95); - } -} - -// Glass panel style — strong blur for slide-up panels -.glass--panel { - background: rgba(255, 255, 255, 0.7); - border-top: 1px solid rgba(255, 255, 255, 0.3); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - color: #1a1a1a; - - .body--dark & { - background: rgba(30, 30, 30, 0.7); - border-top-color: rgba(255, 255, 255, 0.08); - color: #f5f5f5; - } -} - -// GlowDot animations — soft opacity pulse on the glow aura -@keyframes glowPulse { - 0%, 100% { - opacity: 0.85; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.06); - } -} - -@keyframes ghostPulse { - 0%, 100% { - opacity: 0.5; - transform: scale(1); - } - 50% { - opacity: 0.9; - transform: scale(1.12); - } -} diff --git a/frontend/_src/css/quasar.variables.scss b/frontend/_src/css/quasar.variables.scss deleted file mode 100644 index 12caa3d..0000000 --- a/frontend/_src/css/quasar.variables.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Quasar SCSS (& Sass) Variables -// -------------------------------------------------- -// To customize the look and feel of this app, you can override -// the Sass/SCSS variables found in Quasar's source Sass/SCSS files. - -// Check documentation for full list of Quasar variables - -// Your own variables (that are declared here) and Quasar's own -// ones will be available out of the box in your .vue/.scss/.sass files - -// It's highly recommended to change the default colors -// to match your app's branding. -// Tip: Use the "Theme Builder" on Quasar's documentation website. - -$primary : #d946ef; -$secondary : #a855f7; -$accent : #ec4899; - -$dark : #1D1D1D; -$dark-page : #121212; - -$positive : #21BA45; -$negative : #C10015; -$info : #31CCEC; -$warning : #F2C037; diff --git a/frontend/_src/db/index.js b/frontend/_src/db/index.js deleted file mode 100644 index 85e7dbe..0000000 --- a/frontend/_src/db/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import Dexie from 'dexie' - -export const db = new Dexie('thatsMeDB') - -db.version(1).stores({ - // Events: indexed by id (PK), date for sorted queries, syncStatus for dirty tracking - events: 'id, date, updatedAt, syncStatus', - - // Sync queue: outbound mutations waiting to be pushed to server - syncQueue: '++queueId, eventId, action, createdAt', - - // Image cache: offline blob storage for thumbnails - imageCache: 'url, eventId, type, cachedAt', - - // Metadata: key-value pairs (lastSyncCursor, userId, etc.) - meta: 'key' -}) diff --git a/frontend/_src/layouts/LifeWaveLayout.vue b/frontend/_src/layouts/LifeWaveLayout.vue deleted file mode 100644 index de8fa40..0000000 --- a/frontend/_src/layouts/LifeWaveLayout.vue +++ /dev/null @@ -1,471 +0,0 @@ - - - - - diff --git a/frontend/_src/layouts/MainLayout.vue b/frontend/_src/layouts/MainLayout.vue deleted file mode 100644 index 529290a..0000000 --- a/frontend/_src/layouts/MainLayout.vue +++ /dev/null @@ -1,741 +0,0 @@ - - - - - diff --git a/frontend/_src/pages/ErrorNotFound.vue b/frontend/_src/pages/ErrorNotFound.vue deleted file mode 100644 index 4b53e5a..0000000 --- a/frontend/_src/pages/ErrorNotFound.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/frontend/_src/pages/IndexPage.vue b/frontend/_src/pages/IndexPage.vue deleted file mode 100644 index e74e263..0000000 --- a/frontend/_src/pages/IndexPage.vue +++ /dev/null @@ -1,71 +0,0 @@ - - - diff --git a/frontend/_src/pages/LifeWavePage.vue b/frontend/_src/pages/LifeWavePage.vue deleted file mode 100644 index 107ce06..0000000 --- a/frontend/_src/pages/LifeWavePage.vue +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/frontend/_src/pages/LoginPage.vue b/frontend/_src/pages/LoginPage.vue deleted file mode 100644 index d9983dc..0000000 --- a/frontend/_src/pages/LoginPage.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/_src/pages/PasswordResetPage.vue b/frontend/_src/pages/PasswordResetPage.vue deleted file mode 100644 index 316abb7..0000000 --- a/frontend/_src/pages/PasswordResetPage.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/_src/pages/SignUpPage.vue b/frontend/_src/pages/SignUpPage.vue deleted file mode 100644 index 9979b90..0000000 --- a/frontend/_src/pages/SignUpPage.vue +++ /dev/null @@ -1,138 +0,0 @@ - - \ No newline at end of file diff --git a/frontend/_src/router/index.js b/frontend/_src/router/index.js deleted file mode 100644 index 226eb50..0000000 --- a/frontend/_src/router/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import { defineRouter } from '#q-app/wrappers' -import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router' -import routes from './routes' - -/* - * If not building with SSR mode, you can - * directly export the Router instantiation; - * - * The function below can be async too; either use - * async/await or return a Promise which resolves - * with the Router instance. - */ - -export default defineRouter(function (/* { store, ssrContext } */) { - const createHistory = process.env.SERVER - ? createMemoryHistory - : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) - - const Router = createRouter({ - scrollBehavior: () => ({ left: 0, top: 0 }), - routes, - - // Leave this as is and make changes in quasar.conf.js instead! - // quasar.conf.js -> build -> vueRouterMode - // quasar.conf.js -> build -> publicPath - history: createHistory(process.env.VUE_ROUTER_BASE) - }) - - return Router -}) diff --git a/frontend/_src/router/routes.js b/frontend/_src/router/routes.js deleted file mode 100644 index ccc6533..0000000 --- a/frontend/_src/router/routes.js +++ /dev/null @@ -1,17 +0,0 @@ -const routes = [ - { - path: '/', - component: () => import('layouts/LifeWaveLayout.vue'), - children: [ - { path: '', component: () => import('pages/LifeWavePage.vue') } - ] - }, - - // Always leave this as last one - { - path: '/:catchAll(.*)*', - component: () => import('pages/ErrorNotFound.vue'), - }, -] - -export default routes diff --git a/frontend/_src/services/syncService.js b/frontend/_src/services/syncService.js deleted file mode 100644 index f360f61..0000000 --- a/frontend/_src/services/syncService.js +++ /dev/null @@ -1,253 +0,0 @@ -import { ref } from 'vue' -import { db } from 'src/db' - -// API base URL — configured per environment -const API_BASE = import.meta.env.VITE_API_BASE || '/api' - -const isSyncing = ref(false) -const isOnline = ref(navigator.onLine) -const lastSyncAt = ref(null) - -// Track online status -window.addEventListener('online', () => { - isOnline.value = true - processSyncQueue() -}) -window.addEventListener('offline', () => { - isOnline.value = false -}) - -/** - * Get the stored OAuth access token. - */ -async function getToken() { - try { - const meta = await db.meta.get('accessToken') - return meta?.value || null - } catch { - return null - } -} - -/** - * Store an OAuth access token. - */ -async function setToken(token) { - await db.meta.put({ key: 'accessToken', value: token }) -} - -/** - * Authenticated fetch wrapper. - */ -async function apiFetch(path, options = {}) { - const token = await getToken() - if (!token) throw new Error('Not authenticated') - - const response = await fetch(`${API_BASE}${path}`, { - ...options, - headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', - Authorization: `Bearer ${token}`, - ...options.headers, - }, - }) - - if (response.status === 401) { - // Token expired — clear it - await db.meta.delete('accessToken') - throw new Error('Unauthorized') - } - - return response -} - -/** - * Process the outbound sync queue (FIFO). - * Called on app start, every 30s when online, and on reconnect. - */ -async function processSyncQueue() { - if (!isOnline.value || isSyncing.value) return - - const token = await getToken() - if (!token) return - - isSyncing.value = true - - try { - const queue = await db.syncQueue.orderBy('queueId').toArray() - if (queue.length === 0) { - isSyncing.value = false - return - } - - // Batch sync: send up to 100 mutations at once - const batch = queue.slice(0, 100) - const mutations = batch.map((item) => ({ - action: item.action, - eventId: item.eventId, - payload: item.payload, - })) - - const response = await apiFetch('/events/sync', { - method: 'POST', - body: JSON.stringify({ mutations }), - }) - - if (response.ok) { - const data = await response.json() - - // Remove successfully processed items from queue - const processedIds = [] - data.results.forEach((result, i) => { - if (result.status === 'ok') { - processedIds.push(batch[i].queueId) - } - }) - - if (processedIds.length > 0) { - await db.syncQueue.bulkDelete(processedIds) - } - - // Update syncStatus on local events - for (const result of data.results) { - if (result.status === 'ok') { - const event = await db.events.get(result.eventId) - if (event && event.syncStatus !== 'local') { - await db.events.update(result.eventId, { syncStatus: 'synced' }) - } - } - } - - lastSyncAt.value = Date.now() - - // If there are more items, process next batch - if (queue.length > 100) { - await processSyncQueue() - } - } - } catch (e) { - console.warn('Sync queue processing failed:', e) - } finally { - isSyncing.value = false - } -} - -/** - * Pull remote changes since last sync cursor. - * Merges with local data using "last write wins" on updatedAt. - */ -async function pullRemoteChanges() { - if (!isOnline.value) return - - const token = await getToken() - if (!token) return - - try { - const lastSync = await db.meta.get('lastSyncCursor') - const since = lastSync?.value || null - - let url = '/events?limit=200' - if (since) { - url += `&since=${since}` - } - - const response = await apiFetch(url) - if (!response.ok) return - - const data = await response.json() - const remoteEvents = data.data || [] - - for (const remote of remoteEvents) { - const local = await db.events.get(remote.id) - - if (!local) { - // New event from server - await db.events.put({ - id: remote.id, - title: remote.title, - date: remote.date, - emotion: remote.emotion, - customColor: remote.customColor, - gradientPreset: remote.gradientPreset, - image: remote.image, - note: remote.note, - syncStatus: 'synced', - createdAt: remote.createdAt, - updatedAt: remote.updatedAt, - }) - } else if (remote.updatedAt > local.updatedAt && local.syncStatus === 'synced') { - // Remote is newer and local hasn't been modified — update - await db.events.update(remote.id, { - title: remote.title, - date: remote.date, - emotion: remote.emotion, - customColor: remote.customColor, - gradientPreset: remote.gradientPreset, - image: remote.image, - note: remote.note, - syncStatus: 'synced', - updatedAt: remote.updatedAt, - }) - } - // If local is modified, skip — local changes will be pushed via sync queue - } - - // Update sync cursor - await db.meta.put({ key: 'lastSyncCursor', value: new Date().toISOString() }) - - // Handle pagination (cursor-based) - if (data.next_cursor) { - // There are more pages — but for now we only pull one batch - // Future: iterate through pages - } - - lastSyncAt.value = Date.now() - } catch (e) { - console.warn('Pull remote changes failed:', e) - } -} - -/** - * Full sync: push local changes, then pull remote. - */ -async function fullSync() { - await processSyncQueue() - await pullRemoteChanges() -} - -// Auto-sync interval (30s) -let syncInterval = null - -function startAutoSync() { - if (syncInterval) return - syncInterval = setInterval(() => { - if (isOnline.value) { - fullSync() - } - }, 30000) - - // Initial sync - fullSync() -} - -function stopAutoSync() { - if (syncInterval) { - clearInterval(syncInterval) - syncInterval = null - } -} - -export { - isOnline, - isSyncing, - lastSyncAt, - getToken, - setToken, - apiFetch, - processSyncQueue, - pullRemoteChanges, - fullSync, - startAutoSync, - stopAutoSync, -} diff --git a/frontend/_src/stores/events.js b/frontend/_src/stores/events.js deleted file mode 100644 index ab4eb55..0000000 --- a/frontend/_src/stores/events.js +++ /dev/null @@ -1,355 +0,0 @@ -import { defineStore } from 'pinia' -import { ref, computed, watch } from 'vue' -import { db } from 'src/db' -import { startAutoSync, getToken } from 'src/services/syncService' - -// Color interpolation -function lerpColor(a, b, t) { - const ar = parseInt(a.slice(1, 3), 16) - const ag = parseInt(a.slice(3, 5), 16) - const ab = parseInt(a.slice(5, 7), 16) - const br = parseInt(b.slice(1, 3), 16) - const bg = parseInt(b.slice(3, 5), 16) - const bb = parseInt(b.slice(5, 7), 16) - const r = Math.round(ar + (br - ar) * t) - const g = Math.round(ag + (bg - ag) * t) - const blue = Math.round(ab + (bb - ab) * t) - return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}` -} - -// Gradient presets: [negative, neutral, positive] -const GRADIENT_PRESETS = [ - { name: 'Standard', colors: ['#E91E63', '#FFD700', '#4CAF50'] }, - { name: 'Sunset', colors: ['#FD1D1D', '#FCB045', '#833AB4'] }, - { name: 'Earth', colors: ['#ED8153', '#ED8153', '#217B9E'] }, - { name: 'Ocean', colors: ['#00D4FF', '#164173', '#440559'] }, - { name: 'Spring', colors: ['#FDBB2D', '#96BE74', '#22C1C3'] }, - { name: 'Neon', colors: ['#FC466B', '#9A52B6', '#3F5EFB'] }, - { name: 'Pastel', colors: ['#EEAECA', '#C2B4D9', '#94BBE9'] }, - { name: 'Aurora', colors: ['#FF6B6B', '#C084FC', '#67E8F9'] }, - { name: 'Forest', colors: ['#DC2626', '#A3A830', '#059669'] }, - { name: 'Berry', colors: ['#F472B6', '#FB923C', '#A78BFA'] } -] - -// Glow color logic: emotion value → color, with optional gradient preset -function emotionToColor(emotion, gradientIdx = null) { - const preset = gradientIdx !== null ? GRADIENT_PRESETS[gradientIdx] : null - if (preset) { - const [neg, mid, pos] = preset.colors - if (emotion >= 0) { - return lerpColor(mid, pos, emotion) - } else { - return lerpColor(mid, neg, Math.abs(emotion)) - } - } - if (emotion >= 0) { - if (emotion < 0.5) { - return lerpColor('#FF6B35', '#FFD700', emotion / 0.5) - } - return lerpColor('#FFD700', '#4CAF50', (emotion - 0.5) / 0.5) - } else { - const abs = Math.abs(emotion) - if (abs < 0.5) { - return lerpColor('#2196F3', '#9C27B0', abs / 0.5) - } - return lerpColor('#9C27B0', '#E91E63', (abs - 0.5) / 0.5) - } -} - -// Demo seed data -const demoEvents = [ - { id: crypto.randomUUID(), title: 'Erster Schultag', date: '1995-09-01', emotion: 0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Abiball', date: '2004-06-25', emotion: 0.85, customColor: null, gradientPreset: 1, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Was für eine Party!', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Trennung', date: '2010-03-15', emotion: -0.7, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Bergwanderung', date: '2014-08-12', emotion: 0.75, customColor: null, gradientPreset: 4, image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg', note: 'Unvergesslicher Ausblick', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Jobverlust', date: '2016-11-03', emotion: -0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Hochzeit', date: '2018-07-20', emotion: 0.95, customColor: null, gradientPreset: 5, image: 'demo/photo-1506905925346-21bda4d32df4.jpeg', note: 'Der schönste Tag', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Umzug', date: '2021-04-01', emotion: -0.3, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }, - { id: crypto.randomUUID(), title: 'Neuer Job', date: '2023-01-10', emotion: 0.5, customColor: null, gradientPreset: null, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Neues Kapitel', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() } -] - -// Generate realistic demo events for testing at scale -function generateManyEvents(count = 500) { - // Realistic life event categories with emotion ranges - const categories = [ - // Positive events - { titles: ['Geburtstag', 'Geburtstagsfeier', 'Überraschungsparty'], emotionRange: [0.3, 0.8], noteChance: 0.4, notes: ['Tolles Fest!', 'Viele Geschenke', 'Schöner Tag mit Freunden', 'Alles Gute!'] }, - { titles: ['Urlaub', 'Strandurlaub', 'Städtereise', 'Roadtrip', 'Backpacking'], emotionRange: [0.4, 0.95], noteChance: 0.6, notes: ['Unvergesslich', 'Wunderschöne Landschaft', 'Endlich Erholung', 'Muss ich wiederholen'] }, - { titles: ['Hochzeit', 'Verlobung', 'Jahrestag'], emotionRange: [0.7, 1.0], noteChance: 0.8, notes: ['Der schönste Tag', 'Für immer', 'Tränen der Freude', 'Unbeschreiblich'] }, - { titles: ['Beförderung', 'Neuer Job', 'Gehaltserhöhung', 'Jobangebot'], emotionRange: [0.5, 0.9], noteChance: 0.5, notes: ['Endlich!', 'Harte Arbeit zahlt sich aus', 'Neues Kapitel', 'Verdient'] }, - { titles: ['Konzert', 'Festival', 'Theaterbesuch', 'Oper'], emotionRange: [0.3, 0.85], noteChance: 0.5, notes: ['Gänsehaut', 'Beste Band ever', 'Geniale Atmosphäre', 'Nächstes Jahr wieder'] }, - { titles: ['Geburt', 'Baby da!', 'Nachwuchs'], emotionRange: [0.85, 1.0], noteChance: 0.9, notes: ['Das größte Wunder', 'Willkommen auf der Welt', 'Unbeschreibliches Glück'] }, - { titles: ['Abschluss', 'Prüfung bestanden', 'Diplom', 'Master geschafft'], emotionRange: [0.6, 0.95], noteChance: 0.6, notes: ['Geschafft!', 'Jahre harter Arbeit', 'Stolz', 'Endlich vorbei'] }, - { titles: ['Bergwanderung', 'Gipfel erreicht', 'Marathon geschafft', 'Triathlon'], emotionRange: [0.5, 0.9], noteChance: 0.5, notes: ['Was für ein Ausblick!', 'Körperliche Grenzen überwunden', 'Nie aufgeben'] }, - { titles: ['Hauskauf', 'Wohnungseinweihung', 'Renovierung fertig'], emotionRange: [0.4, 0.8], noteChance: 0.5, notes: ['Endlich eigene vier Wände', 'Traum wird wahr', 'Viel Arbeit, aber es lohnt sich'] }, - { titles: ['Erstes Date', 'Zusammengekommen', 'Liebeserklärung'], emotionRange: [0.5, 0.95], noteChance: 0.6, notes: ['Schmetterlinge', 'Liebe auf den ersten Blick', 'Endlich getraut'] }, - // Neutral events - { titles: ['Umzug', 'Neue Stadt', 'Wohnungswechsel'], emotionRange: [-0.2, 0.3], noteChance: 0.4, notes: ['Neuanfang', 'Alles anders', 'Spannend und stressig zugleich'] }, - { titles: ['Arztbesuch', 'Vorsorge', 'Check-up'], emotionRange: [-0.1, 0.1], noteChance: 0.2, notes: ['Alles okay', 'Routine'] }, - { titles: ['Meeting', 'Präsentation', 'Workshop'], emotionRange: [-0.1, 0.4], noteChance: 0.3, notes: ['Gut gelaufen', 'Viel gelernt', 'Anstrengend'] }, - { titles: ['Friseur', 'Shopping', 'Einkauf'], emotionRange: [0.0, 0.3], noteChance: 0.1, notes: ['Neuer Look', 'Guter Fund'] }, - // Negative events - { titles: ['Trennung', 'Beziehungsende', 'Scheidung'], emotionRange: [-1.0, -0.5], noteChance: 0.5, notes: ['Schmerzhaft', 'Warum?', 'Es ist besser so', 'Brauche Zeit'] }, - { titles: ['Jobverlust', 'Kündigung', 'Firma pleite'], emotionRange: [-0.9, -0.4], noteChance: 0.5, notes: ['Schock', 'Wie geht es weiter?', 'Unverdient'] }, - { titles: ['Krankheit', 'OP', 'Krankenhaus'], emotionRange: [-0.8, -0.3], noteChance: 0.6, notes: ['Wird schon', 'Hauptsache gesund werden', 'Lange Genesung'] }, - { titles: ['Abschied', 'Verlust', 'Trauer'], emotionRange: [-1.0, -0.6], noteChance: 0.7, notes: ['Ruhe in Frieden', 'Fehlt mir', 'Unvergessen', 'Schwerer Tag'] }, - { titles: ['Streit', 'Konflikt', 'Auseinandersetzung'], emotionRange: [-0.7, -0.2], noteChance: 0.3, notes: ['Muss nicht sein', 'Hoffe auf Klärung'] }, - { titles: ['Unfall', 'Panne', 'Autopanne'], emotionRange: [-0.6, -0.2], noteChance: 0.4, notes: ['Zum Glück nichts Schlimmes', 'Ärgerlich', 'Hätte schlimmer sein können'] }, - { titles: ['Prüfung nicht bestanden', 'Absage', 'Ablehnung'], emotionRange: [-0.7, -0.3], noteChance: 0.4, notes: ['Nächstes Mal', 'Nicht aufgeben', 'Enttäuschend'] }, - ] - - const demoImages = [ - 'demo/photo-1530103862676-de8c9debad1d.jpeg', - 'demo/photo-1534067783941-51c9c23ecefd.jpeg', - 'demo/photo-1506905925346-21bda4d32df4.jpeg' - ] - - // Seeded random for reproducibility - let seed = 42 - function rand() { - seed = (seed * 16807 + 0) % 2147483647 - return (seed - 1) / 2147483646 - } - - function randInt(min, max) { - return Math.floor(rand() * (max - min + 1)) + min - } - - function pick(arr) { - return arr[Math.floor(rand() * arr.length)] - } - - function randFloat(min, max) { - return Math.round((min + rand() * (max - min)) * 100) / 100 - } - - const evts = [] - const startYear = 1985 - const endYear = 2026 - - // Generate events with realistic distribution (more events in recent years) - for (let i = 0; i < count; i++) { - // Weight towards recent years: cube root distribution - const t = rand() - const yearFloat = startYear + (endYear - startYear) * (t * t * 0.4 + t * 0.6) - const year = Math.floor(yearFloat) - const month = randInt(1, 12) - const day = randInt(1, 28) // safe for all months - const date = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}` - - const cat = pick(categories) - const title = pick(cat.titles) - const emotion = randFloat(cat.emotionRange[0], cat.emotionRange[1]) - const hasNote = rand() < cat.noteChance - const note = hasNote ? pick(cat.notes) : '' - const hasImage = rand() < 0.15 // 15% chance - const image = hasImage ? pick(demoImages) : null - const hasPreset = rand() < 0.25 // 25% chance - const gradientPreset = hasPreset ? randInt(0, 9) : null - - evts.push({ - id: crypto.randomUUID(), - title, - date, - emotion, - customColor: null, - gradientPreset, - image, - note, - syncStatus: 'local', - createdAt: Date.now(), - updatedAt: Date.now() - }) - } - - // Sort by date - evts.sort((a, b) => a.date.localeCompare(b.date)) - return evts -} - -export { emotionToColor, GRADIENT_PRESETS, demoEvents, generateManyEvents } - -export const useEventsStore = defineStore('events', () => { - const events = ref([]) - const isLoaded = ref(false) - const selectedEventId = ref(null) - const panelOpen = ref(false) - const editingEventId = ref(null) - - // Load events from IndexedDB; seed demo data on first launch - async function init() { - try { - let stored = await db.events.orderBy('date').toArray() - if (stored.length === 0) { - const seed = generateManyEvents(500) - await db.events.bulkPut(seed) - stored = seed - } - events.value = stored - } catch (e) { - console.warn('Dexie load failed, using demo data:', e) - events.value = [...demoEvents] - } - isLoaded.value = true - - // Start auto-sync if authenticated - getToken().then((token) => { - if (token) startAutoSync() - }) - } - - // Fire-and-forget DB write (UI already updated via ref) - function dbPut(event) { - db.events.put(event).catch(e => console.warn('Dexie put failed:', e)) - } - - function dbDelete(id) { - db.events.delete(id).catch(e => console.warn('Dexie delete failed:', e)) - } - - function dbQueueSync(eventId, action, payload) { - db.syncQueue.add({ eventId, action, payload, createdAt: Date.now() }) - .catch(e => console.warn('Dexie sync queue failed:', e)) - } - - // Ghost event for live preview while creating/editing - const ghostEmotion = ref(0) - const ghostCustomColor = ref(null) - const ghostGradientPreset = ref(null) - const ghostTitle = ref('') - const ghostDate = ref(new Date().toISOString().slice(0, 10)) - const ghostNote = ref('') - const ghostImage = ref(null) - - const ghostEvent = computed(() => ({ - id: '__ghost__', - title: ghostTitle.value || 'New Event', - date: ghostDate.value, - emotion: ghostEmotion.value, - customColor: ghostCustomColor.value, - gradientPreset: ghostGradientPreset.value, - image: ghostImage.value, - note: ghostNote.value - })) - - const sortedEvents = computed(() => { - return [...events.value].sort((a, b) => new Date(a.date) - new Date(b.date)) - }) - - function selectEvent(id) { - selectedEventId.value = id - } - - function openPanel(eventId = null) { - if (eventId) { - editingEventId.value = eventId - const event = events.value.find((e) => e.id === eventId) - if (event) { - ghostTitle.value = event.title - ghostDate.value = event.date - ghostEmotion.value = event.emotion - ghostCustomColor.value = event.customColor - ghostGradientPreset.value = event.gradientPreset ?? null - ghostImage.value = event.image || null - ghostNote.value = event.note - } - } else { - editingEventId.value = null - ghostTitle.value = '' - ghostDate.value = new Date().toISOString().slice(0, 10) - ghostEmotion.value = 0 - ghostCustomColor.value = null - ghostGradientPreset.value = null - ghostImage.value = null - ghostNote.value = '' - } - panelOpen.value = true - } - - // Auto-save: persist ghost → event in edit mode - function persistToEvent() { - if (!editingEventId.value) return - const idx = events.value.findIndex((e) => e.id === editingEventId.value) - if (idx === -1) return - const updated = { - ...events.value[idx], - title: ghostTitle.value, - date: ghostDate.value, - emotion: ghostEmotion.value, - customColor: ghostCustomColor.value, - gradientPreset: ghostGradientPreset.value, - image: ghostImage.value, - note: ghostNote.value, - syncStatus: 'modified', - updatedAt: Date.now() - } - events.value[idx] = updated - dbPut(updated) - } - - watch( - [ghostTitle, ghostDate, ghostEmotion, ghostCustomColor, ghostGradientPreset, ghostImage, ghostNote], - () => { persistToEvent() } - ) - - function closePanel() { - if (!editingEventId.value && ghostTitle.value.trim()) { - const newEvent = { - id: crypto.randomUUID(), - title: ghostTitle.value, - date: ghostDate.value, - emotion: ghostEmotion.value, - customColor: ghostCustomColor.value, - gradientPreset: ghostGradientPreset.value, - image: ghostImage.value, - note: ghostNote.value, - syncStatus: 'local', - createdAt: Date.now(), - updatedAt: Date.now() - } - events.value.push(newEvent) - dbPut(newEvent) - dbQueueSync(newEvent.id, 'create', { ...newEvent }) - } - panelOpen.value = false - editingEventId.value = null - selectedEventId.value = null - } - - function deleteEvent(id) { - events.value = events.value.filter((e) => e.id !== id) - dbDelete(id) - dbQueueSync(id, 'delete', null) - closePanel() - } - - function getGlowColor(event) { - if (event.customColor) return event.customColor - return emotionToColor(event.emotion, event.gradientPreset ?? null) - } - - // Auto-init on store creation - init() - - return { - events, - isLoaded, - selectedEventId, - panelOpen, - editingEventId, - ghostEmotion, - ghostCustomColor, - ghostGradientPreset, - ghostTitle, - ghostDate, - ghostNote, - ghostImage, - ghostEvent, - sortedEvents, - selectEvent, - openPanel, - closePanel, - deleteEvent, - getGlowColor - } -}) diff --git a/frontend/_src/stores/example-store.js b/frontend/_src/stores/example-store.js deleted file mode 100644 index 041324e..0000000 --- a/frontend/_src/stores/example-store.js +++ /dev/null @@ -1,21 +0,0 @@ -import { defineStore, acceptHMRUpdate } from 'pinia' - -export const useCounterStore = defineStore('counter', { - state: () => ({ - counter: 0 - }), - - getters: { - doubleCount: (state) => state.counter * 2 - }, - - actions: { - increment() { - this.counter++ - } - } -}) - -if (import.meta.hot) { - import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot)) -} diff --git a/frontend/_src/stores/images/photo-1506905925346-21bda4d32df4.jpeg b/frontend/_src/stores/images/photo-1506905925346-21bda4d32df4.jpeg deleted file mode 100644 index de7378e..0000000 Binary files a/frontend/_src/stores/images/photo-1506905925346-21bda4d32df4.jpeg and /dev/null differ diff --git a/frontend/_src/stores/images/photo-1530103862676-de8c9debad1d.jpeg b/frontend/_src/stores/images/photo-1530103862676-de8c9debad1d.jpeg deleted file mode 100644 index 1d998da..0000000 Binary files a/frontend/_src/stores/images/photo-1530103862676-de8c9debad1d.jpeg and /dev/null differ diff --git a/frontend/_src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg b/frontend/_src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg deleted file mode 100644 index 1ac70a7..0000000 Binary files a/frontend/_src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg and /dev/null differ diff --git a/frontend/_src/stores/index.js b/frontend/_src/stores/index.js deleted file mode 100644 index a260a8c..0000000 --- a/frontend/_src/stores/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import { defineStore } from '#q-app/wrappers' -import { createPinia } from 'pinia' - -/* - * If not building with SSR mode, you can - * directly export the Store instantiation; - * - * The function below can be async too; either use - * async/await or return a Promise which resolves - * with the Store instance. - */ - -export default defineStore((/* { ssrContext } */) => { - const pinia = createPinia() - - // You can add Pinia plugins here - // pinia.use(SomePiniaPlugin) - - return pinia -}) diff --git a/frontend/_src/stores/settings.js b/frontend/_src/stores/settings.js deleted file mode 100644 index bea0137..0000000 --- a/frontend/_src/stores/settings.js +++ /dev/null @@ -1,107 +0,0 @@ -import { defineStore } from 'pinia' -import { ref, watch } from 'vue' - -const STORAGE_KEY = 'thatsme-settings' - -export const ACCENT_COLORS = [ - { label: 'Standard', value: 'default', hex: '#9e9e9e' }, - { label: 'Blau', value: 'blue', hex: '#2196F3' }, - { label: 'Grün', value: 'green', hex: '#4CAF50' }, - { label: 'Gelb', value: 'yellow', hex: '#FFC107' }, - { label: 'Rosa', value: 'pink', hex: '#E91E63' }, - { label: 'Orange', value: 'orange', hex: '#FF9800' } -] - -export const LANGUAGES = [ - { label: 'Deutsch', value: 'de' }, - { label: 'English', value: 'en' } -] - -const FLOATING_LINES_DEFAULTS = { - // Linien - speed: 1.0, - lineCount: 10, - spread: 0.05, - fanSpread: 0.05, - lineSharpness: 8.0, - waveFrequency: 7.0, - bezierCurvature: 0.2, - circleRadius: 75, - glowSize: 18, - glowStrength: 1.5, - lineBrightness: 1.0, - // Hintergrund - bgCenter: '#0a0514', - bgEdge: '#000000', - gradientStops: '#e947f5\n#2f4ba2\n#0a0a12', - backgroundImage: '', - // Labels - labelSize: 'small', // 'small' | 'medium' | 'large' - labelColor: '#ffffff' -} - -function loadFromStorage() { - try { - const stored = localStorage.getItem(STORAGE_KEY) - return stored ? JSON.parse(stored) : null - } catch { - return null - } -} - -export { FLOATING_LINES_DEFAULTS } - -export const useSettingsStore = defineStore('settings', () => { - const stored = loadFromStorage() - - const theme = ref(stored?.theme ?? 'light') - const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS }) - - // App preferences - const appearance = ref(stored?.appearance ?? 'system') // 'system' | 'light' | 'dark' - const accentColor = ref(stored?.accentColor ?? 'default') - const language = ref(stored?.language ?? 'de') - - // Developer / debug - const showFps = ref(stored?.showFps ?? false) - - function persist() { - localStorage.setItem( - STORAGE_KEY, - JSON.stringify({ - theme: theme.value, - floatingLines: floatingLines.value, - appearance: appearance.value, - accentColor: accentColor.value, - language: language.value, - showFps: showFps.value - }) - ) - } - - watch([theme, floatingLines, appearance, accentColor, language, showFps], persist, { deep: true }) - - function toggleTheme() { - theme.value = theme.value === 'light' ? 'dark' : 'light' - } - - function updateFloatingLines(updates) { - floatingLines.value = { ...floatingLines.value, ...updates } - } - - function resetFloatingLines() { - floatingLines.value = { ...FLOATING_LINES_DEFAULTS } - } - - return { - theme, - floatingLines, - appearance, - accentColor, - language, - showFps, - toggleTheme, - updateFloatingLines, - resetFloatingLines - } -}) diff --git a/frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg b/frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg deleted file mode 100644 index e7e8469..0000000 Binary files a/frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 10.29.01.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 10.29.01.png deleted file mode 100644 index 7c9955e..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 10.29.01.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 11.34.03.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 11.34.03.png deleted file mode 100644 index 1158c37..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 11.34.03.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.04.56.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.04.56.png deleted file mode 100644 index 252866f..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.04.56.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.24.12.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.24.12.png deleted file mode 100644 index 65d8c63..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.24.12.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.44.48.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.44.48.png deleted file mode 100644 index 38592dd..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.44.48.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.47.21.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.47.21.png deleted file mode 100644 index 2542beb..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 15.47.21.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.48.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.48.png deleted file mode 100644 index 483b2ca..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.48.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.58.png b/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.58.png deleted file mode 100644 index 0534e0b..0000000 Binary files a/frontend/dev/19-02-2026/Bildschirmfoto 2026-02-24 um 16.11.58.png and /dev/null differ diff --git a/frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg b/frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg deleted file mode 100644 index dac07e0..0000000 Binary files a/frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg and /dev/null differ diff --git a/frontend/dev/19-02-2026/dependency-check.md b/frontend/dev/19-02-2026/dependency-check.md deleted file mode 100644 index 55ab0e8..0000000 --- a/frontend/dev/19-02-2026/dependency-check.md +++ /dev/null @@ -1,59 +0,0 @@ -# Dependency Check — 19.02.2026 - -## Umgebung - -- **Node.js:** v22.20.0 -- **npm:** 11.6.2 - -## Versionsvergleich - -| Paket | package.json (Range) | Installiert | Latest | Status | -|-------------------------------|----------------------|-------------|---------|----------------| -| **quasar** | ^2.16.0 | 2.18.1 | 2.18.6 | Update möglich | -| **@quasar/app-vite** | ^2.1.0 | 2.2.0 | 2.4.1 | Update möglich | -| **@quasar/extras** | ^1.16.4 | 1.16.17 | 1.17.0 | Update möglich | -| **vue** | ^3.4.18 | 3.5.13 | 3.5.28 | Update möglich | -| **vue-router** | ^4.0.0 | 4.5.0 | 5.0.2 | Major verfügbar (Breaking!) | -| **pinia** | ^3.0.1 | 3.0.1 | 3.0.4 | Update möglich | -| **eslint** | ^9.14.0 | 9.37.0 | 10.0.0 | Major verfügbar | -| **@eslint/js** | ^9.14.0 | 9.37.0 | 10.0.1 | Major verfügbar | -| **eslint-plugin-vue** | ^9.30.0 | 9.33.0 | 10.8.0 | Major verfügbar | -| **prettier** | ^3.3.3 | 3.5.3 | 3.8.1 | Update möglich | -| **vite-plugin-checker** | ^0.9.0 | 0.9.1 | 0.12.0 | Update möglich | -| **@vue/eslint-config-prettier** | ^10.1.0 | 10.2.0 | 10.2.0 | Aktuell | -| **globals** | ^15.12.0 | 15.15.0 | 17.3.0 | Major verfügbar | -| **autoprefixer** | ^10.4.2 | 10.4.21 | 10.4.24 | Update möglich | -| **postcss** | ^8.4.14 | 8.5.3 | 8.5.6 | Update möglich | - -## Bewertung - -### Sichere Minor/Patch-Updates (empfohlen) - -Diese Updates sind innerhalb der bestehenden semver-Ranges und sollten problemlos funktionieren: - -```bash -npm update -``` - -Das aktualisiert: quasar, vue, pinia, prettier, autoprefixer, postcss, @quasar/extras, vite-plugin-checker - -### Updates mit Range-Anpassung (empfohlen) - -Diese erfordern eine Änderung in `package.json`, sind aber Minor-Updates ohne Breaking Changes: - -- `@quasar/app-vite`: ^2.1.0 → ^2.4.1 (signifikante Verbesserungen im Build-Tooling) - -### Major-Updates (Vorsicht!) - -Diese haben potenziell Breaking Changes und sollten einzeln getestet werden: - -- **vue-router 5.0.2** — Major-Release, erfordert Migrations-Arbeit -- **eslint 10.0.0 / @eslint/js 10.0.1** — Neue Major, Config-Änderungen möglich -- **eslint-plugin-vue 10.x** — Abgestimmt auf eslint 10 -- **globals 17.x** — Major-Sprung von 15.x - -## Empfehlung - -1. Zuerst `npm update` ausführen für sichere Patch/Minor-Updates -2. `@quasar/app-vite` manuell auf ^2.4.1 anheben -3. Major-Updates (vue-router 5, eslint 10) separat evaluieren — nicht zusammen upgraden diff --git a/frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg b/frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg deleted file mode 100644 index 972ddef..0000000 Binary files a/frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg and /dev/null differ diff --git a/frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg b/frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg deleted file mode 100644 index 5fa66ce..0000000 Binary files a/frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg and /dev/null differ diff --git a/frontend/dev/19-02-2026/konzept.md b/frontend/dev/19-02-2026/konzept.md deleted file mode 100644 index 5c575bc..0000000 --- a/frontend/dev/19-02-2026/konzept.md +++ /dev/null @@ -1,48 +0,0 @@ -### **Der "Thats Me" Wow-Prototyp** - -**1. Die Kernphilosophie: "Funktionale Eleganz"** - -Unser Design ist nicht nur Dekoration; es ist eine Form der Datenvisualisierung. Jedes visuelle Element hat eine Funktion und leitet sich direkt aus den Emotionen und der Persönlichkeit des Nutzers ab. Wir schaffen eine minimalistische "Bühne", auf der die Erinnerungen des Nutzers die leuchtenden Hauptdarsteller sind. - -**2. Visuelle Säule 1: Das UI-Grundgerüst (Die Bühne)** - -- **Look & Feel:** Minimalistisch, modern, aufgeräumt. Der Fokus liegt zu 100% auf der LifeWave. -- **Hintergrund:** Ein reiner, neutraler Hintergrund (Hell: Weiß/Beige, Dunkel: Tiefes Grau/Schwarz) - Hell- und Dunkel Modus. -- **Interaktive Elemente (Menüs & Panels):** Wir verwenden einen "Glassmorphism" / "Frosted Glass"-Look, genau wie in den Bildern /workspace/frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg und frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg - - Alle Menüs (das User-Menü) und der von unten kommende Slide-Up-Panel (zur Event-Eingabe) nutzen diesen Effekt. - - **Der "Wow-Effekt" hierbei:** Wenn das Panel hochfährt, bleibt die LifeWave im Hintergrund sichtbar, wird aber durch das "Glas" wunderschön diffus und unscharf. Das schafft Tiefe und erhält den Kontext. -- **Navigation:** Extrem reduziert. - - **Oben:** Ein User-Icon (dient als Menü-Button und Login-Status). - - **Unten:** Ein einzelner, schwebender "+" Button (ebenfalls im "Glass-Look"), um ein Event zu starten. - -**3. Visuelle Säule 2: Die Events (Die "Glow-Punkte")** - -Hier kodieren wir die Emotionen und die Persönlichkeit. - -- **Form:** Jedes Event ist ein minimalistischer Kreis. -- **Farbe & Emotion (Das Kernkonzept):** Die Farbe eines Events wird durch einen leuchtenden "Glow" (eine Aura) dargestellt, nicht durch eine flächige Füllung. - - Die Bilder frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg (warm/positiv) und frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg (kühl/negativ) sind hierfür die perfekte Referenz. -- **Die "Default + Custom"-Logik:** - 1. **Default (Der Automatismus):** Die Emotion (Positiv/Negativ) steuert ZWEI Dinge: die **Y-Achse** (Höhe auf der Welle) und die **Farbe des Glows** (z.B. Positiv = Warmes Grün/Gelb, Negativ = Kühles Blau/Rot). - 2. **Custom (Der Stempel):** Der Nutzer kann die Default-Farbe JEDERZEIT über einen Color-Picker mit seiner persönlichen "Wunschfarbe" überschreiben. Die Y-Position (Emotion) bleibt davon unberührt. - -**4. Visuelle Säule 3: Die LifeWave (Der "Energiestrom")** - -Das ist das Bindeglied, das die Geschichte erzählt. - -- **Form:** Die Welle ist kein einfacher Strich. Sie ist ein organischer, dynamischer "Energiestrom", der aus vielen feinen Linien besteht, Sie muss sich lebendig und fließend anfühlen. Sie muss Einstellungen haben, indem der User seine Wave selbst anpassen kann mit Krümmung, Farben, Vielfalt dazu habe ich ein super Beispiel gefunden, welches in React umgesetzt ist und welches ich fast genauso adaptieren würde, lokal untner frontend/dev/floating-lines.js, frontend/dev/init-fl.html -- **Farbe (Der "Emotionale Fluss"):** Die Welle ist ein **Verlauf**. Sie nimmt die finale "Glow"-Farbe des Start-Events auf und verläuft fließend zur "Glow"-Farbe des nächsten Events. - - **Beispiel:** Geht ein "Positiv (Grüner Glow)"-Event in ein "Custom (Pinker Glow)"-Event über, erzeugt die Welle dazwischen einen wunderschönen Verlauf von Grün nach Pink. - -**5. Das Zusammenspiel (Der Prototyp-Flow)** - -Das "Wow"-Erlebnis des Prototyps wird wie folgt visualisiert: - -1. **Die Szene:** Der Nutzer sieht eine minimalistische, weiße Leinwand. Darauf schweben 3-4 "Glow-Punkte", verbunden durch die dynamische, farbverlaufende Welle. -2. **Die Interaktion:** Der Nutzer tippt auf den "Glass Look" `+`Button. -3. **Das Panel:** Der "Frosted Glass"-Panel fährt von unten hoch. Die "Glow-Punkte" und die Welle im Hintergrund werden sanft unscharf. -4. **Die Magie:** Der Nutzer füllt die Felder aus. Er bewegt den **Emotions-Regler** auf "Positiv". -5. **Das Live-Feedback:** Im Hintergrund (über dem Panel) sieht der Nutzer _in Echtzeit_, wie ein neuer "Glow-Punkt" entsteht, auf der Y-Achse nach oben wandert und einen warmen, grünen Glow bekommt. Die Welle verbindet sich dynamisch mit dem neuen Punkt. -6. **Der Stempel:** Der Nutzer tippt auf "Farbe anpassen", wählt ein "Lila oder Lila Verlauf". Der Glow des Punktes ändert sich _sofort_ von Grün zu Lila. Die Welle passt ihren Verlauf an. - -Dieses Konzept liefert einen klaren visuellen Haken, ist extrem modern und setzt unsere Kernidee – Emotion in Design zu verwandeln – perfekt um. diff --git a/frontend/dev/19-02-2026/umsetzungskonzept.md b/frontend/dev/19-02-2026/umsetzungskonzept.md deleted file mode 100644 index dce803a..0000000 --- a/frontend/dev/19-02-2026/umsetzungskonzept.md +++ /dev/null @@ -1,372 +0,0 @@ -# Umsetzungskonzept — "That's Me" Wow-Prototyp - -Dieses Dokument beschreibt die schrittweise Umsetzung des Prototyps. Jeder Schritt baut auf dem vorherigen auf und ist einzeln testbar. - ---- - -## Phase 1: Viewport & Grundgerüst - -### 1.1 — Neues App-Layout (`LifeWaveLayout.vue`) - -**Ziel:** Minimalistisches Fullscreen-Layout als "Bühne" — ersetzt das bestehende MainLayout für die LifeWave-Ansicht. - -**Umsetzung:** - -- Neues Layout `src/layouts/LifeWaveLayout.vue` erstellen -- Fullscreen-Viewport (`100dvh`) ohne Quasar-Header/Footer/Drawer -- Neutraler Hintergrund: Hell-Modus `#FAFAFA`, Dunkel-Modus `#0A0A0A` -- CSS Custom Properties für Theme-Switching (`--bg-primary`, `--bg-glass`, `--text-primary`) -- Slot-basiert: `` füllt den gesamten Viewport -- Kein Scrolling auf der Hauptebene — alles innerhalb des Viewports - -**Struktur:** - -``` -┌──────────────────────────────┐ -│ [User-Icon] top │ ← fixed, z-30 -│ │ -│ │ -│ LifeWave Canvas │ ← absolute, z-0, fullscreen -│ + Glow-Punkte │ -│ │ -│ │ -│ [+] bot │ ← fixed, z-30 -└──────────────────────────────┘ -``` - -### 1.2 — Glassmorphism CSS-System - -**Ziel:** Wiederverwendbare Glass-Styles als CSS-Klassen (Referenz: die beiden Glassmorphism-Bilder). - -**Umsetzung:** - -- In `src/css/app.scss` definieren: - - `.glass` — Basis-Glaseffekt (`backdrop-filter: blur(20px)`, halbtransparenter Hintergrund, subtiler Border) - - `.glass--panel` — Variante für das Slide-Up-Panel (stärkerer Blur, ~40px) - - `.glass--button` — Variante für den schwebenden +-Button -- Light/Dark-Mode Varianten über CSS Custom Properties -- Subtiler `box-shadow` für Tiefe -- 1px Border mit `rgba(255,255,255,0.15)` für den "Glas-Rand" - ---- - -## Phase 2: Header & Navigation - -### 2.1 — Header-Leiste - -**Ziel:** Minimalistischer Header mit Logo links und User-Icon rechts. - -**Umsetzung:** - -- Direkt im `LifeWaveLayout.vue` als `
` Element (fixed, z-20) -- **Links:** "ThatsMe" als Text-Logo (wird später durch echtes Logo ersetzt). Klick = Dark/Light Mode Toggle (temporär). -- **Rechts:** Runder User-Button (40px), `person_outline` Icon, `.glass--button` Styling - - Klick öffnet Off-Canvas-Drawer (rechte Seite) - - Später: Eingeloggt = Avatar/Initialen mit Glow-Ring - -### 2.2 — Floating Action Button "+" (Bottom-Center) - -**Ziel:** Einzelner schwebender Button zum Erstellen eines neuen Events. - -**Umsetzung:** - -- Komponente `src/components/AddEventButton.vue` -- Runder Button (56px), positioniert `bottom: 32px; left: 50%; transform: translateX(-50%); position: fixed` -- `.glass--button` Styling mit leichtem Glow-Effekt -- Material Icon `add` (weiß/grau je nach Theme) -- Klick-Animation: leichter Scale-Pulse -- Klick öffnet das Event-Panel (Phase 4) - ---- - -## Phase 3: Timeline & Event-Dots - -### 3.1 — FloatingLines als optionaler Hintergrund - -**Ziel:** FloatingLines bleibt als optionales Feature erhalten, ist aber standardmäßig deaktiviert. - -**Umsetzung:** - -- FloatingLines im Layout eingebunden mit `v-if="showFloatingLines"` (default: `false`) -- Zuschaltbar über Toggle im Off-Canvas-Drawer -- Konfiguration: `enabledWaves: ['middle']`, `linesGradient: ['#E94FF5', '#2F4BA2']`, `lineCount: [12]`, `animationSpeed: 0.6` -- Dient als Inspiration für die spätere Verbindungslinie (Phase 3.3) - -### 3.2 — Scrollbare Timeline mit Glow-Dots - -**Ziel:** Events als leuchtende Kreise auf einer horizontal scrollbaren Zeitachse darstellen — wie ein visuelles Tagebuch. -Referenz: `Bildschirmfoto 2026-02-20 um 10.29.01.png` - -**Konzept:** - -- Der Viewport zeigt immer nur einen **Ausschnitt** der Timeline -- Die Timeline-Breite berechnet sich aus der Zeitspanne aller Events -- Horizontal scrollen (Touch-Swipe / Maus) navigiert durch die Zeit -- Unten werden **Monat und Jahr** eingeblendet (aktuell sichtbarer Bereich hervorgehoben) - -**Umsetzung:** - -- Neue Komponente `src/components/TimelineView.vue` — der scrollbare Container -- Timeline-Container: `overflow-x: auto; overflow-y: hidden; height: 100%` -- Innerer Container: Breite berechnet aus Datumsbereich (z.B. 120px pro Monat) -- **X-Achse (horizontal):** Datum-basierte Position — jedes Event wird auf seinen exakten Zeitpunkt positioniert -- **Y-Achse (vertikal):** Emotionswert (-1 bis +1 → unten bis oben, Mitte = unsichtbare Nulllinie = neutral) -- **Monats-Labels:** Am unteren Rand der Timeline, der aktuelle Monat groß/fett, Nachbarmonate kleiner -- **Jahres-Label:** Unter den Monaten, wechselt beim Scrollen - -**GlowDot-Komponente** (`src/components/GlowDot.vue`): - -- Jeder Punkt ist ein `
` mit radialem CSS-Gradient als "Glow" -- Größe: 20-28px Kern -- Glow-Farbe durch Emotion ODER Custom-Farbe -- Glow-Farblogik: - - **Positiv** (> 0): `#FF6B35` (Orange) → `#FFD700` (Gold) → `#4CAF50` (Grün) - - **Negativ** (< 0): `#2196F3` (Blau) → `#9C27B0` (Violett) → `#E91E63` (Pink) - - **Custom:** User-Farbe überschreibt den Glow, Y-Position bleibt -- Klick auf Punkt → öffnet Event-Detail (Phase 5) - -### 3.4 — Timeline-Zoom - -**Ziel:** Der User kann in die Timeline rein- und rauszoomen. Events und Abstände skalieren, Monats-/Jahres-Schriftgrößen bleiben konstant. - -**Umsetzung:** - -- `zoomLevel` (0.4–3.0, Default 1.0) multipliziert das `EVENT_SPACING` -- GlowDots skalieren via CSS `transform: scale(var(--dot-scale))` über das `zoom`-Prop -- **Desktop:** Ctrl+Mausrad oder Trackpad-Pinch (beides feuert `wheel` mit `ctrlKey`) -- **Touch:** Zwei-Finger-Pinch-Geste -- Scroll-Position bleibt stabil: Der Punkt unter dem Cursor/Pinch-Zentrum bleibt fixiert -- Monats- und Jahres-Labels behalten ihre feste Schriftgröße - -### 3.3 — Verbindungslinien zwischen Dots - -**Ziel:** Eine farbverlaufende Linie verbindet die Glow-Punkte und bildet die "LifeWave". Visuell inspiriert durch die FloatingLines-Ästhetik. - -**Umsetzung:** - -- SVG-Overlay innerhalb des scrollbaren Timeline-Containers -- Cubic Bezier Pfade (``) zwischen den Dots -- Gradient entlang des Pfades: Start-Farbe = Glow des linken Dots, End-Farbe = Glow des rechten Dots -- Strichbreite: 2-3px, mit `filter: blur(2px)` für weichen Glow -- Organisches Feeling: Bezier-Kontrollpunkte leicht versetzt - ---- - -## Phase 4: Neues Event anlegen (Slide-Up Panel) - -### 4.1 — Event-Panel Komponente - -**Ziel:** Glassmorphes Panel fährt von unten hoch. LifeWave bleibt sichtbar und wird durch das "Glas" diffus. - -**Umsetzung:** - -- Neue Komponente `src/components/EventPanel.vue` -- Positionierung: `position: fixed; bottom: 0; left: 0; right: 0; z-index: 20` -- Höhe: ~65% des Viewports (variabel, Drag-Handle zum Resizen optional) -- `.glass--panel` Styling (starker Backdrop-Blur ~40px) -- Abgerundete obere Ecken (`border-radius: 24px 24px 0 0`) -- Slide-Up Animation: `transform: translateY(100%)` → `translateY(0)` mit `transition` oder Vue `` -- Kleiner Drag-Handle-Balken oben (visueller Indikator, 40px breit, 4px hoch, zentriert) -- **Wichtig:** Hintergrund-LifeWave wird NICHT ausgeblendet — der Glaseffekt erzeugt die Unschärfe - -### 4.2 — Event-Formular (Felder im Panel) - -**Ziel:** Minimalistisches Formular mit Live-Feedback. - -**Felder:** - -1. **Titel** — Textfeld, Placeholder "Was ist passiert?" -2. **Datum** — Date-Picker, Default = heute -3. **Emotions-Regler** — Custom Slider von -1.0 (negativ) bis +1.0 (positiv) - - Visuelles Feedback: Slider-Track ändert Farbe (Blau/Kühl ← → Warm/Grün) - - Thumb-Farbe passt sich an -4. **Farbe anpassen** (optional) — Toggle + Color-Picker - - Default: aus (Emotion bestimmt Farbe) - - Es gibt vorgefertigte Farbverläufe für den emotions Leiter hier zum Beispiel Farbkombinationen - Verläufe - Nagativ -> neutral -> Positiv - #FD1D1D -> #FCB045 -> #833AB4 - #ED8153 -> #ED8153 -> #217B9E - #00D4FF -> #164173 -> #440559 - #FDBB2D -> #96BE74 -> #22C1C3 - #FC466B -> #9A52B6 -> #3F5EFB - #EEAECA -> #C2B4D9 -> #94BBE9 - -5. **Notiz** — Textarea, optional, 3 Zeilen -6. **Speichern-Button** — Glass-Style, auffällig - -### 4.3 — Live-Feedback (Der Wow-Moment) - -**Ziel:** Während der User das Formular ausfüllt, erscheint in Echtzeit ein neuer Glow-Punkt im Hintergrund. - -**Umsetzung:** - -- Sobald das Panel geöffnet wird: ein "Ghost-Dot" (halbtransparent, pulsierend) erscheint auf der Wave -- **Emotions-Regler bewegen:** Ghost-Dot wandert auf der Y-Achse nach oben/unten, Glow-Farbe ändert sich live -- **Custom-Farbe wählen:** Glow-Farbe ändert sich sofort -- **Speichern:** Ghost-Dot wird zum festen Dot (Opacity 1.0, Puls-Animation → statisch), Verbindungslinie animiert sich zum neuen Punkt -- Ghost-Dot hat stärkere Puls-Animation als reguläre Dots - ---- - -## Phase 5: Event bearbeiten & Detail-Ansicht - -### 5.1 — Event-Detail (Tap auf Glow-Dot) - -**Ziel:** Tap auf einen Glow-Dot öffnet eine kompakte Detail-Ansicht. - -**Umsetzung:** - -- Wiederverwendung des `EventPanel.vue` im "Edit-Modus" -- Panel fährt hoch, vorbelegt mit den Event-Daten -- Gleiche Felder wie beim Anlegen -- Zusätzlich: "Löschen"-Button (dezent, unten im Panel) -- Live-Feedback: Änderungen am Emotions-Regler / Farbe ändern den existierenden Dot in Echtzeit - -### 5.2 — Dot-Selection-State - -**Ziel:** Visuelles Feedback welcher Dot ausgewählt ist. - -**Umsetzung:** - -- Ausgewählter Dot bekommt: - - Vergrößerter Glow (Scale 1.3 mit Transition) - - Pulsierender Ring-Effekt (CSS Animation) - - Alle anderen Dots werden leicht gedimmt (Opacity 0.5) - ---- - -## Phase 6: Smart-Panel & Einstellungen - -### 6.1 — LifeWave-Einstellungen (User-Personalisierung) - -**Ziel:** Der User kann seine Wave anpassen — das macht die App persönlich. - -**Umsetzung:** - -- Im User-Menü (Off-Canvas rechts) unter "Life Wave": - - **Wellen-Farben:** Gradient-Picker (2-4 Farben auswählen) - - **Wellen-Intensität:** Slider (lineCount: 4-20) - - **Wellen-Geschwindigkeit:** Slider (animationSpeed: 0.2-2.0) - - **Wellen-Stil:** Auswahl welche Waves aktiv sind (top/middle/bottom) -- Änderungen werden live auf die FloatingLines-Props angewendet -- Einstellungen im Pinia Store + localStorage persistiert - -### 6.2 — Dark/Light Mode Toggle - -**Ziel:** Nahtloser Wechsel zwischen Hell- und Dunkel-Modus. - -**Umsetzung:** - -- Toggle im User-Menü oder als kleines Icon neben dem User-Button -- Quasar Dark-Mode Plugin aktivieren (`$q.dark.toggle()`) -- CSS Custom Properties wechseln alle Farben -- FloatingLines `mixBlendMode` wechselt automatisch -- Hintergrundfarbe animiert den Übergang (300ms Transition) - ---- - -## Datenmodell (Pinia Store) - -### `src/stores/events.js` - -```js -{ - events: [ - { - id: 'uuid', - title: 'Hochzeit von Lisa', - date: '2024-06-15', - emotion: 0.8, // -1.0 bis +1.0 - customColor: null, // null = auto, '#FF00FF' = custom - note: 'Wunderschöner Tag im Garten...', - createdAt: timestamp, - updatedAt: timestamp, - }, - ] -} -``` - -### `src/stores/settings.js` - -```js -{ - theme: 'light', // 'light' | 'dark' - wave: { - gradient: ['#E94FF5', '#2F4BA2'], - lineCount: 12, - speed: 0.6, - enabledWaves: ['middle'] - } -} -``` - ---- - -## Umsetzungsreihenfolge (Arbeitspakete) - -| # | Paket | Abhängigkeit | Geschätzt | -| --- | --------------------------------------- | ------------ | ---------- | -| 1 | Phase 1.1 — LifeWaveLayout + Routing | — | Grundlage | -| 2 | Phase 1.2 — Glassmorphism CSS | — | Grundlage | -| 3 | Phase 3.1 — FloatingLines Fullscreen | #1 | Wow-Basis | -| 4 | Phase 2.1 — UserMenuButton | #1, #2 | Navigation | -| 5 | Phase 2.2 — AddEventButton | #1, #2 | Navigation | -| 6 | Phase 4.1 — EventPanel (Slide-Up, leer) | #2 | Panel | -| 7 | Datenmodell — Pinia Stores | — | Daten | -| 8 | Phase 3.2 — GlowDots | #3, #7 | Events | -| 9 | Phase 3.3 — LifeWavePath (Verbindungen) | #8 | Wave | -| 10 | Phase 4.2 — Event-Formular | #6, #7 | Eingabe | -| 11 | Phase 4.3 — Live-Feedback (Ghost-Dot) | #8, #10 | Wow! | -| 12 | Phase 5 — Event bearbeiten & Detail | #10, #8 | Edit | -| 13 | Phase 6.1 — LifeWave-Einstellungen | #3, #7 | Settings | -| 14 | Phase 6.2 — Dark/Light Mode | #1 | Theme | - ---- - -## Demo-Daten für den Prototyp - -8 Events vorbelegt — 4 mit Bildern, 4 ohne. Bilder liegen in `public/demo/`. - -```js -;[ - { title: 'Erster Schultag', date: '1995-09-01', emotion: 0.6, image: null }, - { - title: 'Abiball', - date: '2004-06-25', - emotion: 0.85, - image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', - }, - { title: 'Trennung', date: '2010-03-15', emotion: -0.7, image: null }, - { - title: 'Bergwanderung', - date: '2014-08-12', - emotion: 0.75, - image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg', - }, - { title: 'Jobverlust', date: '2016-11-03', emotion: -0.6, image: null }, - { - title: 'Hochzeit', - date: '2018-07-20', - emotion: 0.95, - customColor: '#E94FF5', - image: 'demo/photo-1506905925346-21bda4d32df4.jpeg', - }, - { title: 'Umzug', date: '2021-04-01', emotion: -0.3, image: null }, - { - title: 'Neuer Job', - date: '2023-01-10', - emotion: 0.5, - image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', - }, -] -``` - ---- - -## Technische Hinweise - -- **Three.js** ist bereits als Dependency vorhanden (über FloatingLines.vue) -- **Keine neuen Dependencies** nötig für Phase 1-5 (alles mit Quasar + CSS + SVG + Three.js machbar) -- **Performance:** GlowDots und LifeWavePath als separate Schicht ÜBER dem WebGL-Canvas (DOM, nicht WebGL) — einfacher zu implementieren, gute Performance bei <50 Events -- **Mobile-First:** Alle Maße in `dvh`/`dvw`, Touch-Events für Slider, Panel-Swipe diff --git a/frontend/dev/IMPROVEMENTS-floating-lines.md b/frontend/dev/IMPROVEMENTS-floating-lines.md deleted file mode 100644 index 39b422d..0000000 --- a/frontend/dev/IMPROVEMENTS-floating-lines.md +++ /dev/null @@ -1,200 +0,0 @@ -# Verbesserungsvorschläge: floating-lines.js - -Analyse von `floating-lines.js` (Dev-Klasse) im Vergleich zur produktiven `FloatingLines.vue`. -**Stand: April 2026 — alle wesentlichen Punkte umgesetzt.** - ---- - -## Was der Code macht (Kurzübersicht) - -Ein WebGL-Fullscreen-Shader via Three.js mit drei visuellen Schichten: - -- **Top/Bottom**: Einfache Sinus-Wellen mit Rotation (`wave()`) -- **Middle**: Bézier-Kurven zwischen Kontrollpunkten mit animierten Fächer-Linien (`waveFocal()`) + Kreise an den Punkten -- **Hintergrund**: Radialer Verlauf von Mitte → Rand (oder Horizont-Split bei Modus „Trennung") - ---- - -## Fehler / Bugs - -### 1. Totes Uniform `bgColor` ✅ Umgesetzt -**Datei:** `floating-lines.js`, Zeile 508 -Das tote `bgColor`-Uniform wurde entfernt. Der Shader nutzt ausschließlich `bgColorCenter` + `bgColorEdge`. - -```js -// Entfernt: -bgColor: { value: new Vector3(0, 0, 0) }, -``` - -### 2. Konstruktor-Parameter `middleWavePosition` wird ignoriert ✅ Umgesetzt -Der ungenutzte Parameter wurde aus der Konstruktorsignatur entfernt. - -### 3. Kein Konstruktor-Interface für `bgColorCenter` / `bgColorEdge` ✅ Umgesetzt -Beide Uniforms sind jetzt als Konstruktor-Parameter verfügbar und werden korrekt initialisiert: - -```js -constructor({ ..., bgColorCenter = '#0a0514', bgColorEdge = '#000000', ... }) -``` - -Die Uniforms werden beim Konstruktoraufruf aus den Hex-Strings in `Vector3`-Werte konvertiert. - ---- - -## Performance-Problem - -### 4. `bezierClosestT` wird pro Linie neu berechnet (kritisch) ✅ Umgesetzt -`bezierClosestT` wird jetzt **einmal pro Segment** berechnet. Die Ergebnisse (`bt`, `bPos`, `bNorm`) werden als Parameter an `waveFocal()` übergeben: - -```glsl -// Neue waveFocal()-Signatur (precomputed values): -float waveFocal(vec2 uv, float fi, float totalLines, float t, vec2 bPos, vec2 bNorm) - -// Im Segment-Loop (einmal pro Segment, nicht pro Linie): -float bt = bezierClosestT(baseUv, sp, pc, ep); -vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep; -vec2 bTang = normalize(2.0*bmt*(pc - sp) + 2.0*bt*(ep - pc)); -vec2 bNorm = vec2(-bTang.y, bTang.x); -// → alle middleLineCount Aufrufe nutzen dieselben Werte -``` - -Reduktion von O(Segmente × Linien) auf O(Segmente) `bezierClosestT`-Aufrufe pro Pixel. - ---- - -## Fehlende Features (in `.vue` vorhanden, in `.js` nicht) - -### 5. `lineBrightness` Uniform fehlt ✅ Umgesetzt -`lineBrightness` ist jetzt als Konstruktor-Parameter und Uniform vorhanden. Im Shader: - -```glsl -col *= lineBrightness; // vor Background-Composite -``` - -### 6. Kein Pause bei verstecktem Tab ✅ Umgesetzt -Der `requestAnimationFrame`-Loop pausiert jetzt bei `document.hidden`: - -```js -this._handleVisibility = () => { - if (document.hidden) { - cancelAnimationFrame(this.raf) - this.raf = 0 - } else if (!this.raf) { - renderLoop() - } -} -document.addEventListener('visibilitychange', this._handleVisibility) -// destroy() ruft removeEventListener auf -``` - -### 7. Kein adaptives DPR ⏭️ Offen / Optional -Die Vue-Version misst FPS live und reduziert `devicePixelRatio` bei schlechter Performance (vor allem Mobile). Die Dev-Klasse ist ein Test-Tool und nicht für Mobile ausgelegt — diese Komplexität lohnt sich hier nicht. - ---- - -## Code-Qualität - -### 8. Legacy-Code: `background_color()`, `BLACK`, `PINK`, `BLUE` ✅ Umgesetzt -Die Shader-Konstanten `BLACK`, `PINK`, `BLUE` und die Funktion `background_color()` wurden entfernt. Der Hintergrund wird immer über `bgColorCenter`/`bgColorEdge` gesteuert. - -### 9. Redundante `enabledWaves.includes()` Checks ✅ Umgesetzt -Die doppelten Prüfungen in den Hilfsfunktionen wurden entfernt. Die äußere Prüfung im Aufrufer ist die einzige Guard. - -### 10. Hardcoded `* 0.5` in `getLineColor()` ✅ Umgesetzt -Der feste `* 0.5`-Faktor wurde entfernt. `getLineColor()` gibt jetzt die volle Gradient-Farbe zurück. Die Kompensation mit `* 2.5` an den Kreisen wurde auf `* 1.5` angepasst. Die Helligkeit wird über das `lineBrightness`-Uniform gesteuert (→ Punkt 5). - ---- - -## Optionale Verbesserungen / Ideen - -### 11. Glättere Kreise bei höherem DPR ⏭️ Offen / Optional -Der AA-Radius passt sich durch `iResolution` (physische Pixel bei gesetztem DPR) bereits implizit an. Keine Änderung nötig. - -### 12. `pointSpacingX` + `pointsOffsetX` vs. explizite X-Koordinaten ⏭️ Offen / Optional -Die Dev-Klasse behält das Auto-Spacing-Modell für einfache Testzwecke. Die Vue-Komponente nutzt explizite X-Koordinaten für die Lebenszeitlinie. Beide Ansätze sind intentional verschieden. - -### 13. GLSL `precision highp` → `mediump` ✅ Umgesetzt -Fragment-Shader nutzt jetzt `precision mediump float` — ausreichend für diese Visualisierung, effizienter auf Mobile/Low-End. - ---- - -## Neue Punkte (nachträglich ergänzt) - -### 14. Resize-Bug: Kreise und Linien desynchronisieren sich ✅ Umgesetzt -**Betrifft:** `LifeWaveLayout.vue` - -**Ursache:** `layoutResizeObserver` aktualisierte `layoutWidth/Height` sofort, während `TimelineView`s `@view-update` (mit den neuen CSS-Event-Positionen) erst im nächsten Frame kam — führte zu 1-Frame UV-Desync. - -**Fix:** `requestAnimationFrame`-Wrapper im Callback: - -```js -layoutResizeObserver = new ResizeObserver(() => { - requestAnimationFrame(() => { - if (!layoutRef.value) return - layoutWidth.value = layoutRef.value.clientWidth - layoutHeight.value = layoutRef.value.clientHeight - }) -}) -``` - -### 15. Feature: Horizont ✅ Umgesetzt (erweitert) -Statt einer einzelnen Linie wurden **drei wählbare Horizont-Modi** implementiert: - -| Modus | Wert | Beschreibung | -|-------|------|--------------| -| Aus | `'off'` | Kein Horizont-Effekt | -| Nebel | `'fog'` | Leuchtender Band-Effekt auf Y=0, Farbe aus Gradient | -| Trennung | `'split'` | Hintergrund wird vertikal geteilt: `bgColorCenter` oben, `bgColorEdge` unten — mit einstellbarer Blend-Breite | -| Glow | `'glow'` | Weiches + hartes Leuchten auf dem Horizont, Farbe aus Gradient | - -**Shader (alle Modi):** -```glsl -uniform int horizonMode; // 0=off 1=fog 2=split 3=glow -uniform float horizonOpacity; -uniform float horizonBlend; - -if (horizonMode == 1) { - float band = exp(-baseUv.y * baseUv.y * 5.0); - vec3 fogColor = getLineColor(0.5, bg) * 2.0; - col += fogColor * band * horizonOpacity; -} else if (horizonMode == 2) { - float blendW = max(horizonBlend * 0.7, 0.001); - float t = smoothstep(-blendW, blendW, baseUv.y); - bg = mix(bgColorEdge, bgColorCenter, t); -} else if (horizonMode == 3) { - float d2 = baseUv.y * baseUv.y; - float softGlow = exp(-d2 * 10.0); - float coreGlow = exp(-d2 * 70.0) * 0.7; - vec3 glowColor = getLineColor(0.5, bg) * 3.0; - col += glowColor * (softGlow + coreGlow) * horizonOpacity; -} -``` - -**Umgesetzt in:** -- `floating-lines.js` — Shader + Konstruktor-Parameter + Uniforms -- `FloatingLines.vue` — Shader (mit `gradientMid()` Hilfsfunktion) + Props + Uniforms + Watches -- `settings.js` — `horizonMode: 'off'`, `horizonOpacity: 0.5`, `horizonBlend: 0.2` -- `LifeWaveSettings.vue` — Segmented Control + bedingte Slider (Deckkraft / Übergang) -- `LifeWaveLayout.vue` — Props weitergeleitet -- `init-fl.html` — 4 Modus-Buttons + bedingte Slider-Sichtbarkeit - ---- - -## Zusammenfassung Prioritäten - -| # | Typ | Priorität | Aufwand | Status | -|---|-----|-----------|---------|--------| -| 4 | Performance: `bezierClosestT` Hoisting | **Hoch** | Mittel | ✅ | -| 14 | Bug: Resize-Desync (LifeWaveLayout) | **Hoch** | Minimal | ✅ | -| 1 | Bug: totes `bgColor` Uniform | Mittel | Minimal | ✅ | -| 3 | Bug: `bgColorCenter/Edge` nicht setzbar | Mittel | Klein | ✅ | -| 5 | Feature: `lineBrightness` | Mittel | Klein | ✅ | -| 10 | Qualität: hardcoded `* 0.5` | Mittel | Klein | ✅ | -| 15 | Feature: Horizont (3 Modi) | Mittel | Mittel | ✅ | -| 8 | Qualität: Legacy-Code entfernen | Niedrig | Klein | ✅ | -| 6 | Feature: Tab-Pause | Niedrig | Klein | ✅ | -| 2 | Bug: ignorierter Parameter | Niedrig | Minimal | ✅ | -| 9 | Qualität: redundante Checks | Niedrig | Minimal | ✅ | -| 13 | Perf: `mediump` Precision | Optional | Minimal | ✅ | -| 7 | Feature: adaptives DPR | Optional | Groß | ⏭️ | -| 11 | Qualität: AA-Radius explizit | Optional | Minimal | ⏭️ | -| 12 | API: explizite X-Koordinaten | Optional | Mittel | ⏭️ | diff --git a/frontend/dev/UMSETZUNG-FLOATING-LINES.md b/frontend/dev/UMSETZUNG-FLOATING-LINES.md deleted file mode 100644 index 9a35f00..0000000 --- a/frontend/dev/UMSETZUNG-FLOATING-LINES.md +++ /dev/null @@ -1,408 +0,0 @@ -# FloatingLines Migration & Event-Integration - -**Stand:** 20. Februar 2026 -**Bereich:** Frontend (Quasar/Vue.js 3) - ---- - -## 1. Zusammenfassung - -Die alte LifeWave-Visualisierung (zwei Versionen: Spline + Glow) wurde komplett durch eine einzige **FloatingLines**-Implementierung ersetzt. Diese basiert auf einem WebGL-Fragment-Shader (Three.js), der animierte Bezier-Linien zwischen Event-Punkten zeichnet, inklusive farbiger Glow-Kreise pro Event. - -### Was wurde gemacht - -1. **Shader aus `dev/floating-lines.js` migriert** → `FloatingLines.vue` -2. **Settings aus `dev/init-fl.html` migriert** → `LifeWaveSettings.vue` + `settings.js` Store -3. **Event-Punkte mit Shader synchronisiert** — Shader-Kreise sitzen exakt auf den GlowDots -4. **Per-Event-Farben** — Jeder Shader-Kreis und jedes Liniensegment nutzt die Emotion-Farbe des Events -5. **GlowDot vereinfacht** — Nur noch weißer Kreis + Bild als Klick-Target, Glow kommt vom Shader -6. **Kreisgröße synchronisiert** — Settings-Slider steuert Shader-Kreis UND DOM-Dot -7. **Zoom entkoppelt** — Zoom ändert Abstände, nicht Kreisgrößen - -### Gelöschte Dateien - -- `LifeWavePath.vue` — Alte SVG-Pfad-Visualisierung -- `LifeWaveSpline.vue` — Alte Spline-Kurven-Variante -- `LifeWaveGlow.vue` — Alte Glow-Effekt-Variante -- `WaveSettings.vue` — Alte Settings (ersetzt durch `LifeWaveSettings.vue`) - ---- - -## 2. Architektur-Übersicht - -``` -┌─────────────────────────────────────────────────────────┐ -│ LifeWaveLayout.vue │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ FloatingLines.vue (WebGL Fullscreen) │ │ -│ │ - Fragment Shader (GLSL) │ │ -│ │ - Bezier-Linien zwischen Events │ │ -│ │ - Glow-Kreise pro Event (pointColor[]) │ │ -│ │ - Animierte Wellen │ │ -│ │ - Background Gradient + optionales Bild │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ TimelineView.vue (scrollbar, z-index: 5) │ │ -│ │ - Horizontales Scroll-Container │ │ -│ │ - GlowDot pro Event (Klick-Target) │ │ -│ │ - Monat/Jahr-Labels │ │ -│ │ - Pinch-to-Zoom │ │ -│ │ - Emittiert @view-update an Layout │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ Header | AddEventButton | EventPanel | LifeWaveSettings│ -└─────────────────────────────────────────────────────────┘ -``` - ---- - -## 3. Datenfluss - -### 3.1 Event-Positionen → Shader - -``` -TimelineView LifeWaveLayout FloatingLines -───────────── ────────────── ────────────── -displayEvents ──@viewUpdate──► onViewUpdate() -(emotion, x, color) │ - ├─ shaderNumPoints (computed) - ├─ shaderPointX[] (computed) ──► pointX[8] uniform - ├─ shaderPointY[] (computed) ──► pointY[8] uniform - └─ shaderPointColors[] (comp.) ──► pointColor[8] uniform -``` - -**Koordinaten-Konvertierung (Screen → Shader UV):** - -```js -// Layout: screenToUV(sx, sy) -// sx, sy = CSS-Pixel vom oberen linken Viewport-Rand -function screenToUV(sx, sy) { - const w = layoutWidth // = 100dvh Breite - const h = layoutHeight // = 100dvh Höhe - return { - x: (2 * sx - w) / h, - y: (2 * sy - h) / h, - } -} -``` - -```glsl -// Shader: gleiche Formel -vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; -baseUv.y *= -1.0; // Y-Flip (CSS: top→bottom, GL: bottom→top) -``` - -**GlowDot Y-Position:** - -``` -yPercent = 50 - emotion * 35 - emotion +1.0 → top (15%) - emotion 0.0 → mitte (50%) - emotion -1.0 → unten (85%) -``` - -**Screen Y für Shader:** - -``` -TIMELINE_TOP = 60px (CSS: .timeline { top: 60px }) -screenY = TIMELINE_TOP + (yPercent / 100) * containerHeight -``` - -### 3.2 Emotion-Slider → Live-Update - -``` -EventPanel Events Store TimelineView Shader -────────── ──────────── ──────────── ────── -v-model="ghostEmotion" ──► ghostEmotion (ref) - │ - ├─ watch → persistToEvent() - │ (updates events[]) - │ - └─ sortedEvents (computed) ──► displayEvents - │ - └─ watch → emitViewState() - │ - Layout: shaderPointY[] - Layout: shaderPointColors[] - │ - FloatingLines: watch → uniform update -``` - -### 3.3 Event-Farben - -Jeder Event hat eine Glow-Farbe basierend auf: - -1. `event.customColor` (falls gesetzt, hat Priorität) -2. `emotionToColor(emotion, gradientPreset)` — interpoliert zwischen 3 Farben - -``` -events.js: getGlowColor(event) - → customColor || emotionToColor(emotion, gradientPreset) - -10 Gradient-Presets: Standard, Sunset, Earth, Ocean, Spring, - Neon, Pastel, Aurora, Forest, Berry -``` - -Die Farbe fließt als `pointColor[8]` Uniform in den Shader: - -- **Kreise:** `vec3 circCol = pointColor[p]` -- **Liniensegmente:** `vec3 lineCol = mix(pointColor[s], pointColor[s+1], t_seg)` - ---- - -## 4. Komponenten-Referenz - -### 4.1 FloatingLines.vue - -**Zweck:** Fullscreen WebGL-Hintergrund mit animierten Bezier-Linien und Glow-Kreisen. - -**Technologie:** Three.js mit custom Fragment Shader (GLSL). - -**Props:** - -| Prop | Typ | Default | Beschreibung | -| -------------------- | ------------ | --------- | ------------------------------------- | -| `numPoints` | Number | 0 | Anzahl aktiver Punkte (max 8) | -| `pointXValues` | Array | [] | X-UV-Koordinaten der Punkte | -| `pointYValues` | Array | [] | Y-UV-Koordinaten der Punkte | -| `pointColors` | Array | [] | Hex-Farben pro Punkt (z.B. '#ff0000') | -| `lineCount` | Array/Number | [10] | Anzahl Wellenlinien | -| `animationSpeed` | Number | 1 | Geschwindigkeit der Wellenanimation | -| `lineSpread` | Number | 0.05 | Wellenamplitude | -| `fanSpread` | Number | 0.05 | Fächerbreite der Linien | -| `lineSharpness` | Number | 8.0 | Feinheit/Schärfe der Linien | -| `waveFrequency` | Number | 7.0 | Welligkeit | -| `bezierCurvature` | Number | 0.2 | Kurvenstärke der Bezier-Verbindungen | -| `circleRadiusPx` | Number | 75 | Kreisradius in Pixeln | -| `circleGlowSize` | Number | 18 | Glow-Ausdehnung um den Kreis | -| `circleGlowStrength` | Number | 1.5 | Glow-Intensität | -| `linesGradient` | Array | [...] | Hex-Farbwerte für Linien-Gradient | -| `bgColorCenter` | String | '#0a0514' | Hintergrundfarbe Mitte | -| `bgColorEdge` | String | '#000000' | Hintergrundfarbe Rand | -| `backgroundImage` | String | '' | URL für Hintergrundbild | -| `mixBlendMode` | String | 'screen' | CSS Blend-Mode des Canvas | - -**Shader-Architektur:** - -- `drawCircle()` — Zeichnet weißen Kern + farbigen Glow + Fog -- `waveFocal()` — Berechnet Wellenlinien entlang Bezier-Segmenten -- `bezierClosestT()` — Findet nächsten Punkt auf quadratischer Bezier-Kurve -- `mainImage()` — Compositing: Background + Segmente + Kreise - -### 4.2 GlowDot.vue - -**Zweck:** Klickbarer DOM-Overlay pro Event (weißer Kreis + optionales Bild). - -**Größe:** Dynamisch aus `settingsStore.floatingLines.circleRadius`: - -```js -const dpr = Math.min(window.devicePixelRatio || 1, 2) -const dotSize = (2 * circleRadius) / dpr // Matches shader circle -``` - -**Kein Zoom-Scaling** — Größe ist konstant, unabhängig vom Zoom-Level. - -**Props:** `event`, `x`, `isGhost`, `selected` - -### 4.3 TimelineView.vue - -**Zweck:** Horizontal scrollbarer Container mit GlowDots und Labels. - -**CSS-Position:** `top: 60px; bottom: 70px` (unterhalb Header, oberhalb AddButton) - -**Features:** - -- Pinch-to-Zoom (Touch + Ctrl+Wheel) -- Zoom-Range: 0.4x – 3.0x -- Scroll-to-center beim Mount (letztes Event) -- Ghost-Event-Insertion bei Panel-Open (Create-Mode) - -**Emits:** - -- `@dotSelect(eventId)` — Event angeklickt -- `@viewUpdate({ scrollLeft, viewportWidth, containerHeight, events[] })` — Bei jedem Scroll/Zoom/Resize/Event-Change - -### 4.4 LifeWaveLayout.vue - -**Zweck:** Haupt-Layout, orchestriert alle Komponenten. - -**Verantwortlichkeiten:** - -- Empfängt `@view-update` von TimelineView -- Konvertiert Screen-Pixel → Shader-UV-Koordinaten -- Berechnet `shaderNumPoints`, `shaderPointX[]`, `shaderPointY[]`, `shaderPointColors[]` -- Reicht Settings-Store-Werte an FloatingLines weiter -- Parsed Gradient-Stops aus dem Textarea-String - -**Wichtige Konstante:** `TIMELINE_TOP = 60` (muss mit `.timeline { top: 60px }` übereinstimmen) - -### 4.5 LifeWaveSettings.vue - -**Zweck:** Einstellungs-Panel (Slide-Up, 75dvh). - -**Sektionen:** - -1. **Linien** — Speed, Anzahl, Wellen-Amp, Fächerbreite, Feinheit, Welligkeit, Kurve, Kreis, Glow Größe, Glow Stärke -2. **Hintergrundbild** — 10 vordefinierte Bilder (`/images/bg-image-1.jpg` bis `10.jpg`) -3. **Hintergrundfarbe** — BG Mitte + BG Rand (Color Picker) -4. **Farbverlauf** — Textarea mit Hex-Werten (eine pro Zeile) -5. **Extras** — Dark/Light-Mode Toggle -6. **Reset** — Setzt alle Werte auf Defaults zurück - -### 4.6 EventPanel.vue - -**Zweck:** Event-Erstellung und -Bearbeitung (Slide-Up, 75dvh). - -**Features:** - -- Key Image Upload (Platzhalter) -- Titel-Input (inline, groß) -- Datum-Picker (QDate mit deutscher Locale) -- Emotion-Slider (-1 bis +1) mit Gradient-Track -- 10 Gradient-Presets + "Standard"-Option -- Beschreibungs-Textarea -- Weitere Medien (Platzhalter) -- Event löschen (nur Edit-Mode) -- Auto-Save: Änderungen werden sofort auf das Event persistiert - ---- - -## 5. Stores - -### 5.1 events.js - -```js -// State -events // Array aller Events -selectedEventId // Aktuell ausgewählter Event (oder null) -panelOpen // Ob EventPanel offen ist -editingEventId // ID des Events im Edit-Mode (null = Create) -ghost* // Temporäre Felder für Live-Preview (ghostEmotion, ghostTitle, ...) - -// Computed -ghostEvent // Computed Event-Objekt aus ghost-Feldern -sortedEvents // Nach Datum sortierte Events - -// Methods -selectEvent(id), openPanel(eventId?), closePanel(), deleteEvent(id) -getGlowColor(event) // → Hex-Farbe basierend auf Emotion + Preset -``` - -**Demo-Daten:** 8 Events (1995–2023) mit verschiedenen Emotionen, Presets und Bildern. - -### 5.2 settings.js - -```js -// State -theme // 'light' | 'dark' -floatingLines // Objekt mit allen Shader-Parametern - -// Methods -toggleTheme(), updateFloatingLines(changes), resetFloatingLines() - -// Persistence -localStorage.setItem('thatsme-settings', JSON.stringify({...})) -``` - -**Defaults:** Siehe `FLOATING_LINES_DEFAULTS` in `settings.js`. - ---- - -## 6. CSS-Architektur - -### 6.1 Globale Styles (`app.scss`) - -- `.glass--button` — Glasmorphismus für Buttons (blur + transparenter Hintergrund) -- `.glass--panel` — Glasmorphismus für Slide-Up-Panels - - Light: `background: rgba(255,255,255,0.7); color: #1a1a1a` - - Dark: `background: rgba(30,30,30,0.7); color: #f5f5f5` - -### 6.2 Quasar Theme (`quasar.variables.scss`) - -```scss -$primary: #d946ef; // Fuchsia — Slider, Toggles, aktive States -$secondary: #a855f7; // Purple -$accent: #ec4899; // Pink -``` - -### 6.3 Wichtige CSS-Hinweise - -**Timeline-Positionierung:** - -```css -/* TimelineView.vue — eigene Positionierung */ -.timeline { - position: absolute; - top: 60px; - bottom: 70px; -} - -/* LifeWaveLayout.vue — NUR z-index, KEIN inset: 0! */ -/* inset: 0 würde top/bottom der Timeline überschreiben (CSS Cascade) */ -.lifewave-layout__timeline { - z-index: 5; -} -``` - -**GlowDot — kein Zoom-Scaling:** - -```css -.glow-dot { - transform: translate(-50%, -50%); -} -/* Breite/Höhe kommt dynamisch aus dem Settings-Store */ -``` - ---- - -## 7. Bekannte Einschränkungen - -1. **Max 8 Events im Shader** — `pointX[8]`, `pointY[8]`, `pointColor[8]` sind fest auf 8 begrenzt. Bei mehr als 8 Events werden nur die ersten 8 als Shader-Punkte dargestellt. -2. **Bilder nur als Demo** — Key-Image-Upload und Medien-Upload sind Platzhalter (TODO). -3. **Kein Backend-Sync** — Alle Daten liegen nur lokal (Demo-Events + localStorage für Settings). -4. **DPR-Abhängigkeit** — Die GlowDot-Größe wird einmalig beim Mount aus `window.devicePixelRatio` berechnet. Bei Wechsel zwischen Displays (z.B. Retina → Nicht-Retina) stimmt die Größe nicht mehr exakt. -5. **Hintergrundbilder** — Müssen unter `/images/bg-image-{1-10}.jpg` auf dem Webspace liegen. - ---- - -## 8. Entwicklung fortsetzen - -### Dev-Server starten - -```bash -# Im Docker-Container quasar.app: -npm run dev -# → http://app.thats-me.test:9000 -``` - -### Produktions-Build - -```bash -npm run build -# → Output: frontend/dist/spa/ -# Statisches SPA, einfach hochladen -``` - -### Dateien für die Weiterentwicklung - -| Was | Wo | -| ------------------ | --------------------------------------------------------------------- | -| Shader-Code (GLSL) | `FloatingLines.vue` (Zeile ~67–366) | -| UV-Konvertierung | `LifeWaveLayout.vue` → `screenToUV()` | -| Event-Farben | `events.js` → `emotionToColor()`, `getGlowColor()` | -| Settings-Defaults | `settings.js` → `FLOATING_LINES_DEFAULTS` | -| Slider-Ranges | `LifeWaveSettings.vue` (`:min`, `:max`, `:step` auf jedem `q-slider`) | -| Quasar-Theme | `quasar.variables.scss` | -| Glass-Styles | `app.scss` → `.glass--panel`, `.glass--button` | -| Dev-Referenz | `dev/init-fl.html`, `dev/floating-lines.js` (Original-Prototyp) | - -### Nächste Schritte (offen) - -- [ ] Key-Image-Upload implementieren (Camera/File-Picker → IndexedDB/S3) -- [ ] Medien-Gallery pro Event -- [ ] Backend-Sync über Laravel REST API -- [ ] Mehr als 8 Events im Shader unterstützen (dynamisches Chunking oder LOD) -- [ ] Touch-Gesten: Long-Press auf GlowDot für Kontextmenü -- [ ] Onboarding / Leer-Zustand wenn keine Events vorhanden diff --git a/frontend/dev/UMSETZUNG-VIRTUALISIERUNG-OFFLINE.md b/frontend/dev/UMSETZUNG-VIRTUALISIERUNG-OFFLINE.md deleted file mode 100644 index 52574e4..0000000 --- a/frontend/dev/UMSETZUNG-VIRTUALISIERUNG-OFFLINE.md +++ /dev/null @@ -1,456 +0,0 @@ -# Virtualisierung & Offline-First Architektur - -**Stand:** 24. Februar 2026 -**Bereich:** Frontend (Quasar/Vue.js 3) + Backend (Laravel 12) - ---- - -## 1. Zusammenfassung - -Die Timeline-App wurde um eine skalierbare Architektur erweitert, die hunderte bis tausende Events performant darstellt und offline-fähig macht. Die Umsetzung erfolgte in 4 Phasen: - -1. **DOM-Virtualisierung** — Nur sichtbare Events werden gerendert -2. **IndexedDB-Persistenz** — Events überleben Page Reload (Dexie.js) -3. **Image Caching** — Thumbnails offline verfügbar -4. **Backend API + Sync** — Laravel REST API mit Passport OAuth2, bidirektionaler Sync - -### Ergebnis - -- Timeline scrollt flüssig mit 200+ Events (vorher: alle DOM-Nodes gleichzeitig) -- Events, Einstellungen und Thumbnails persistent in IndexedDB -- Sync Queue puffert Änderungen offline, synct automatisch bei Reconnect -- REST API mit Batch-Sync (bis 100 Mutationen/Request) -- 12 Backend-Tests (Pest v3) bestanden - ---- - -## 2. Phase 1: DOM-Virtualisierung - -### Problem - -Alle Events wurden als DOM-Nodes (`v-for displayEvents → GlowDot`) gerendert. Bei 200+ Events: zu viele DOM-Nodes, O(n) Label-Berechnung, unnötiger Render-Overhead. - -### Lösung - -**Visible Range Computation** in `TimelineView.vue`: - -``` -scrollLeft + viewportWidth → visibleRange { start, end } -→ nur visibleEvents rendern (+ 2 Buffer Events pro Seite) -``` - -#### Geänderte Dateien - -| Datei | Änderung | -| --------------------------------- | -------------------------------------------------------------------------------- | -| `src/components/TimelineView.vue` | `visibleRange`, `visibleEvents`, `visibleLabels`, `visibleYearMarkers` Computeds | -| `src/layouts/LifeWaveLayout.vue` | Smart 8-Punkt Shader-Selektion | - -#### TimelineView.vue — Kern-Logik - -```javascript -const VIS_BUFFER = 2 - -const visibleRange = computed(() => { - const start = Math.max(0, Math.floor((scrollLeft - PADDING) / EVENT_SPACING) - VIS_BUFFER) - const end = Math.min( - total - 1, - Math.ceil((scrollLeft + viewportWidth - PADDING) / EVENT_SPACING) + VIS_BUFFER, - ) - return { start, end } -}) - -const visibleEvents = computed(() => { - return displayEvents.slice(start, end + 1).map((event, i) => ({ - event, - globalIndex: start + i, - })) -}) -``` - -- `v-for` iteriert nur `visibleEvents` statt `displayEvents` -- `trackWidth` bleibt unverändert (Scrollbar korrekt) -- Labels und Year Markers ebenfalls gefiltert -- `activeLabel` optimiert von O(n) Scan auf O(1): `Math.round((centerX - PADDING) / EVENT_SPACING)` - -#### LifeWaveLayout.vue — Shader-Punkt-Selektion - -Der Shader akzeptiert max. 8 Punkte. Statt immer die ersten 8 Events zu nehmen, werden jetzt die sichtbaren Events + 1 Boundary auf jeder Seite gewählt: - -```javascript -const shaderSelection = computed(() => { - const rangeStart = Math.max(0, visibleStart - 1) - const rangeEnd = Math.min(events.length - 1, visibleEnd + 1) - let candidates = events.slice(rangeStart, rangeEnd + 1) - - if (candidates.length > 8) { - // Gleichmäßig subsamplen, first + last behalten - const sampled = [candidates[0]] - const step = (candidates.length - 1) / 7 - for (let i = 1; i < 7; i++) sampled.push(candidates[Math.round(i * step)]) - sampled.push(candidates[candidates.length - 1]) - candidates = sampled - } - return candidates -}) -``` - ---- - -## 3. Phase 2: IndexedDB-Persistenz (Dexie.js) - -### Problem - -Events existierten nur im Memory (Pinia ref). Page Reload = alles weg. - -### Lösung - -**Dexie.js v4.3** als IndexedDB-Wrapper. Events werden lokal persistent gespeichert. - -#### Neue Dateien - -| Datei | Zweck | -| ----------------- | ----------------------- | -| `src/db/index.js` | Dexie-Schema Definition | - -#### Geänderte Dateien - -| Datei | Änderung | -| ---------------------- | ---------------------------------------- | -| `src/stores/events.js` | Komplett refactored für Dexie-Persistenz | -| `package.json` | `dexie: ^4.3.0` hinzugefügt | - -#### DB-Schema (`src/db/index.js`) - -```javascript -import Dexie from 'dexie' - -export const db = new Dexie('thatsMeDB') - -db.version(1).stores({ - events: 'id, date, updatedAt, syncStatus', - syncQueue: '++queueId, eventId, action, createdAt', - imageCache: 'url, eventId, type, cachedAt', - meta: 'key', -}) -``` - -| Tabelle | Zweck | -| ------------ | ------------------------------------------ | -| `events` | Alle Events (PK: client-side UUID) | -| `syncQueue` | Outbound-Mutationen (FIFO) für API-Sync | -| `imageCache` | Offline-Thumbnails als Blobs | -| `meta` | Key-Value Store (Token, Sync-Cursor, etc.) | - -#### Events Store — Fire-and-Forget Pattern - -``` -User-Aktion → Vue ref sofort updaten (UI flüssig) → Dexie async schreiben (Background) -``` - -- `init()`: Lädt Events aus IndexedDB, seeded Demo-Daten wenn leer -- `dbPut(event)`: Fire-and-forget `db.events.put()` -- `dbDelete(id)`: Fire-and-forget `db.events.delete()` -- `dbQueueSync(eventId, action, payload)`: Mutation in Sync Queue -- Jedes Event hat `syncStatus`: `'local'` | `'synced'` | `'modified'` - ---- - -## 4. Phase 3: Image Caching - -### Problem - -Bilder in GlowDots und EventPanel laden nur mit Netzwerk. Offline = keine Bilder. - -### Lösung - -Thumbnails (200x200 JPEG) werden beim ersten Laden in IndexedDB gecacht. - -#### Neue Dateien - -| Datei | Zweck | -| ---------------------------------- | --------------------------- | -| `src/composables/useImageCache.js` | Composable für Bild-Caching | - -#### Geänderte Dateien - -| Datei | Änderung | -| ------------------------------- | --------------------------------------- | -| `src/components/GlowDot.vue` | Nutzt `useImageCache` für Thumbnail-Src | -| `src/components/EventPanel.vue` | Nutzt `resolveFullRes` für Key Image | - -#### Ablauf - -``` -1. Memory-Cache prüfen (Map, instant) - ↓ miss -2. IndexedDB prüfen (db.imageCache.get(url)) - ↓ miss -3. Fetch → Canvas 200x200 Thumbnail → toBlob('image/jpeg', 0.8) - → IndexedDB speichern → Blob URL zurückgeben -``` - -#### API - -```javascript -// In GlowDot.vue — reaktives Thumbnail -const { resolvedSrc: imageSrc } = useImageCache(event.image, event.id) - -// In EventPanel.vue — Full-Res (online) oder Thumbnail-Fallback (offline) -const src = await resolveFullRes(imageUrl) - -// Cleanup bei Event-Löschung -await clearEventImages(eventId) -``` - -**Strategie:** - -- **Thumbnails** (200x200, ~20KB): Immer lokal gecacht in IndexedDB -- **Full-Res**: On-Demand wenn EventPanel öffnet, Browser-Cache via HTTP Headers -- Durch Virtualisierung werden nur sichtbare GlowDots gerendert → Image Loading ist inherent lazy - ---- - -## 5. Phase 4: Backend API + Sync Service - -### 5.1 Backend (Laravel 12) - -#### Neue/Geänderte Dateien - -| Datei | Zweck | -| ----------------------------------------------- | ----------------------------------------- | -| `app/Models/Event.php` | Eloquent Model | -| `app/Models/User.php` | `HasApiTokens` Trait, `events()` Relation | -| `database/migrations/*_create_events_table.php` | DB-Schema | -| `database/factories/EventFactory.php` | Test-Factory | -| `app/Http/Controllers/Api/EventController.php` | REST Controller | -| `app/Http/Resources/EventResource.php` | JSON-Transformation | -| `app/Http/Requests/StoreEventRequest.php` | Validierung (Create) | -| `app/Http/Requests/UpdateEventRequest.php` | Validierung (Update) | -| `routes/api.php` | API-Routen | -| `config/auth.php` | Passport `api` Guard | -| `tests/Feature/Api/EventTest.php` | 12 Pest-Tests | - -#### Events-Tabelle - -```sql -events: - id BIGINT (PK, auto-increment) - client_id UUID (unique) — vom Frontend generiert - user_id BIGINT (FK → users) - title VARCHAR(255) - date DATE - emotion DECIMAL(4,3) — -1.000 bis +1.000 - custom_color VARCHAR(20) nullable - gradient_preset TINYINT nullable — 0-9 - image VARCHAR(500) nullable - note TEXT nullable - created_at TIMESTAMP - updated_at TIMESTAMP - - INDEX: (user_id, date) - INDEX: (user_id, updated_at) -``` - -#### API-Endpunkte - -| Method | Route | Beschreibung | -| -------- | ------------------------ | -------------------------------------------------------------------- | -| `GET` | `/api/events` | Alle Events (Cursor-Pagination, `?since=` für Delta-Sync, `?limit=`) | -| `POST` | `/api/events` | Neues Event erstellen | -| `GET` | `/api/events/{clientId}` | Einzelnes Event | -| `PUT` | `/api/events/{clientId}` | Event aktualisieren | -| `DELETE` | `/api/events/{clientId}` | Event löschen | -| `POST` | `/api/events/sync` | **Batch-Sync** — bis 100 Mutationen auf einmal | - -#### Batch-Sync Endpoint - -Der Kern des Sync-Systems. Verarbeitet create/update/delete in einem Request: - -```json -POST /api/events/sync -{ - "mutations": [ - { "action": "create", "eventId": "uuid", "payload": { "title": "...", ... } }, - { "action": "update", "eventId": "uuid", "payload": { "title": "Neu" } }, - { "action": "delete", "eventId": "uuid", "payload": null } - ] -} - -Response: -{ - "results": [ - { "eventId": "uuid", "status": "ok" }, - { "eventId": "uuid", "status": "ok" }, - { "eventId": "uuid", "status": "ok" } - ] -} -``` - -- **Idempotent**: Doppelte Creates werden ignoriert (kein Fehler) -- **Max 100 Mutationen** pro Request -- **Alle Operationen** sind user-scoped (kein Zugriff auf fremde Events) - -#### JSON-Mapping (EventResource) - -Backend (snake_case) → Frontend (camelCase): - -``` -client_id → id -custom_color → customColor -gradient_preset → gradientPreset -syncStatus → immer 'synced' (vom Server) -created_at → createdAt (Millisekunden) -updated_at → updatedAt (Millisekunden) -``` - -#### Authentifizierung - -- **Laravel Passport v13.5** (OAuth2) -- Guard: `auth:api` auf allen API-Routen -- Token wird im Frontend in IndexedDB `meta` Tabelle gespeichert - -#### Tests - -12 Pest-Tests in `tests/Feature/Api/EventTest.php`: - -| Test | Was | -| -------------------------------------- | ----------------------------------------- | -| can list events | GET /api/events gibt eigene Events zurück | -| list only returns own events | Keine fremden Events sichtbar | -| can filter events by since | Delta-Sync Filter funktioniert | -| can create an event | POST mit UUID → 201 Created | -| create validates required fields | Fehler bei fehlenden Pflichtfeldern | -| can show a single event | GET /api/events/{id} | -| cannot show another users event | 404 bei fremdem Event | -| can update an event | PUT mit Partial-Update | -| can delete an event | DELETE → 204 No Content | -| cannot delete another users event | 404 bei fremdem Event | -| batch sync creates updates and deletes | Alle 3 Aktionen in einem Request | -| sync is idempotent for creates | Doppelter Create = kein Fehler | - -### 5.2 Frontend Sync Service - -#### Neue Dateien - -| Datei | Zweck | -| ----------------------------- | ----------- | -| `src/services/syncService.js` | Sync-Engine | - -#### Geänderte Dateien - -| Datei | Änderung | -| ---------------------- | ----------------------------------------------- | -| `src/stores/events.js` | `startAutoSync()` bei Init wenn Token vorhanden | - -#### Sync-Ablauf - -``` -App Start - ↓ -Events aus IndexedDB laden - ↓ -Token vorhanden? → startAutoSync() - ↓ -┌─────────────────────────────────────┐ -│ fullSync() — alle 30s + reconnect │ -│ │ -│ 1. processSyncQueue() │ -│ → Sync Queue lesen (FIFO) │ -│ → POST /api/events/sync │ -│ → Erfolgreiche Items löschen │ -│ → syncStatus → 'synced' │ -│ │ -│ 2. pullRemoteChanges() │ -│ → GET /api/events?since=... │ -│ → Last-Write-Wins Merge │ -│ → Neue Events → IndexedDB │ -│ → Sync Cursor updaten │ -└─────────────────────────────────────┘ -``` - -#### Conflict Resolution - -**Last-Write-Wins** basierend auf `updatedAt`: - -- Remote neuer UND lokal `synced` → Remote übernehmen -- Lokal `modified` → Lokale Änderung behalten, wird via Sync Queue gepusht -- Neues Remote Event (nicht lokal vorhanden) → Einfügen - -#### Netzwerk-Erkennung - -```javascript -window.addEventListener('online', () => { - isOnline.value = true - processSyncQueue() // Sofort pushen bei Reconnect -}) -window.addEventListener('offline', () => { - isOnline.value = false -}) -``` - -#### Exports - -```javascript -import { - isOnline, // ref — Netzwerkstatus - isSyncing, // ref — Sync läuft gerade - lastSyncAt, // ref — Timestamp letzter Sync - getToken, // () → Promise - setToken, // (token) → Promise - apiFetch, // (path, options) → Promise - processSyncQueue, // () → Promise - pullRemoteChanges, // () → Promise - fullSync, // () → Promise - startAutoSync, // () → void — Startet 30s Intervall - stopAutoSync, // () → void — Stoppt Intervall -} from 'src/services/syncService' -``` - ---- - -## 6. Datenfluss-Übersicht - -``` -┌─────────────────────────────────────────────────────────────┐ -│ FRONTEND │ -│ │ -│ User → Vue Component → Pinia Store (ref sofort updaten) │ -│ ↓ │ -│ IndexedDB (Dexie.js) │ -│ ┌──────────────────┐ │ -│ │ events │ ← Alle Events │ -│ │ syncQueue │ ← Outbound Queue │ -│ │ imageCache │ ← Thumbnails │ -│ │ meta │ ← Token, Cursor │ -│ └──────────────────┘ │ -│ ↓ │ -│ Sync Service (30s) │ -│ Push Queue → Pull Changes │ -└──────────────────────────────┬──────────────────────────────┘ - │ - POST /api/events/sync - GET /api/events?since= - │ -┌──────────────────────────────┴──────────────────────────────┐ -│ BACKEND │ -│ │ -│ Laravel 12 + Passport OAuth2 │ -│ EventController → Event Model → MySQL │ -│ │ -│ events: id, client_id, user_id, title, date, emotion, ... │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## 7. Noch offen (Phase 5) - -**Chunked Loading** — Erst bei 500+ Events relevant: - -- `src/services/chunkLoader.js` — Scroll-triggered Loading -- Nur 100 Events um aktuelle Scroll-Position laden -- Bei Scroll an Boundary: nächsten Chunk nachladen (200ms Debounce) -- API Cursor-Pagination für initiales Laden großer Datasets - -Wird erst implementiert wenn die Datenmenge es erfordert. diff --git a/frontend/dev/floating-lines copy 2.js b/frontend/dev/floating-lines copy 2.js deleted file mode 100644 index 74da289..0000000 --- a/frontend/dev/floating-lines copy 2.js +++ /dev/null @@ -1,457 +0,0 @@ -import { - Scene, - OrthographicCamera, - WebGLRenderer, - PlaneGeometry, - Mesh, - ShaderMaterial, - Vector3, - Vector2, - Clock, -} from 'three' - -const vertexShader = ` -precision highp float; - -void main() { - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); -} -` - -const fragmentShader = ` -precision highp float; - -uniform float iTime; -uniform vec3 iResolution; -uniform float animationSpeed; - -uniform bool enableTop; -uniform bool enableMiddle; -uniform bool enableBottom; - -uniform int topLineCount; -uniform int middleLineCount; -uniform int bottomLineCount; - -uniform float topLineDistance; -uniform float middleLineDistance; -uniform float bottomLineDistance; - -uniform vec3 topWavePosition; -uniform vec3 middleWavePosition; -uniform vec3 bottomWavePosition; - -uniform vec2 iMouse; -uniform bool interactive; -uniform float bendRadius; -uniform float bendStrength; -uniform float bendInfluence; - -uniform bool parallax; -uniform float parallaxStrength; -uniform vec2 parallaxOffset; - -uniform vec3 lineGradient[8]; -uniform int lineGradientCount; - -const vec3 BLACK = vec3(0.0); -const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0; -const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0; - -mat2 rotate(float r) { - return mat2(cos(r), sin(r), -sin(r), cos(r)); -} - -vec3 background_color(vec2 uv) { - vec3 col = vec3(0.0); - - float y = sin(uv.x - 0.2) * 0.3 - 0.1; - float m = uv.y - y; - - col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m))); - col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8))); - return col * 0.5; -} - -vec3 getLineColor(float t, vec3 baseColor) { - if (lineGradientCount <= 0) { - return baseColor; - } - - vec3 gradientColor; - - if (lineGradientCount == 1) { - gradientColor = lineGradient[0]; - } else { - float clampedT = clamp(t, 0.0, 0.9999); - float scaled = clampedT * float(lineGradientCount - 1); - int idx = int(floor(scaled)); - float f = fract(scaled); - int idx2 = min(idx + 1, lineGradientCount - 1); - - vec3 c1 = lineGradient[idx]; - vec3 c2 = lineGradient[idx2]; - - gradientColor = mix(c1, c2, f); - } - - return gradientColor * 0.5; -} - -float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) { - float time = iTime * animationSpeed; - - float x_offset = offset; - float x_movement = time * 0.1; - float amp = sin(offset + time * 0.2) * 0.3; - float y = sin(uv.x + x_offset + x_movement) * amp; - - if (shouldBend) { - vec2 d = screenUv - mouseUv; - float influence = exp(-dot(d, d) * bendRadius); - float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence; - y += bendOffset; - } - - float m = uv.y - y; - return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01; -} - -void mainImage(out vec4 fragColor, in vec2 fragCoord) { - vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; - baseUv.y *= -1.0; - - if (parallax) { - baseUv += parallaxOffset; - } - - vec3 col = vec3(0.0); - - vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv); - - vec2 mouseUv = vec2(0.0); - if (interactive) { - mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y; - mouseUv.y *= -1.0; - } - - if (enableBottom) { - for (int i = 0; i < bottomLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(bottomLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = bottomWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - col += lineCol * wave( - ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y), - 1.5 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.2; - } - } - - if (enableMiddle) { - for (int i = 0; i < middleLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(middleLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = middleWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - col += lineCol * wave( - ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y), - 2.0 + 0.15 * fi, - baseUv, - mouseUv, - interactive - ); - } - } - - if (enableTop) { - for (int i = 0; i < topLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(topLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = topWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - ruv.x *= -1.0; - col += lineCol * wave( - ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y), - 1.0 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.1; - } - } - - fragColor = vec4(col, 1.0); -} - -void main() { - vec4 color = vec4(0.0); - mainImage(color, gl_FragCoord.xy); - gl_FragColor = color; -} -` - -const MAX_GRADIENT_STOPS = 8 - -function hexToVec3(hex) { - let value = hex.trim() - - if (value.startsWith('#')) { - value = value.slice(1) - } - - let r = 255 - let g = 255 - let b = 255 - - if (value.length === 3) { - r = parseInt(value[0] + value[0], 16) - g = parseInt(value[1] + value[1], 16) - b = parseInt(value[2] + value[2], 16) - } else if (value.length === 6) { - r = parseInt(value.slice(0, 2), 16) - g = parseInt(value.slice(2, 4), 16) - b = parseInt(value.slice(4, 6), 16) - } - - return new Vector3(r / 255, g / 255, b / 255) -} - -export default class FloatingLines { - constructor( - container, - { - linesGradient, - enabledWaves = ['top', 'middle', 'bottom'], - lineCount = [6], - lineDistance = [5], - topWavePosition, - middleWavePosition, - bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 }, - animationSpeed = 1, - interactive = true, - bendRadius = 5.0, - bendStrength = -0.5, - mouseDamping = 0.05, - parallax = true, - parallaxStrength = 0.2, - mixBlendMode = 'screen', - } = {}, - ) { - this.container = container - this.interactive = interactive - this.parallax = parallax - this.mouseDamping = mouseDamping - this.parallaxStrength = parallaxStrength - - this.targetMouse = new Vector2(-1000, -1000) - this.currentMouse = new Vector2(-1000, -1000) - this.targetInfluence = 0 - this.currentInfluence = 0 - this.targetParallax = new Vector2(0, 0) - this.currentParallax = new Vector2(0, 0) - - const getLineCount = (waveType) => { - if (typeof lineCount === 'number') return lineCount - if (!enabledWaves.includes(waveType)) return 0 - const index = enabledWaves.indexOf(waveType) - return lineCount[index] ?? 6 - } - - const getLineDistance = (waveType) => { - if (typeof lineDistance === 'number') return lineDistance - if (!enabledWaves.includes(waveType)) return 0.1 - const index = enabledWaves.indexOf(waveType) - return lineDistance[index] ?? 0.1 - } - - const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0 - const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0 - const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0 - - const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01 - const middleLineDistance = enabledWaves.includes('middle') - ? getLineDistance('middle') * 0.01 - : 0.01 - const bottomLineDistance = enabledWaves.includes('bottom') - ? getLineDistance('bottom') * 0.01 - : 0.01 - - this.scene = new Scene() - this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1) - this.camera.position.z = 1 - - this.renderer = new WebGLRenderer({ antialias: true, alpha: false }) - this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)) - this.renderer.domElement.style.width = '100%' - this.renderer.domElement.style.height = '100%' - this.renderer.domElement.style.mixBlendMode = mixBlendMode - container.appendChild(this.renderer.domElement) - - this.uniforms = { - iTime: { value: 0 }, - iResolution: { value: new Vector3(1, 1, 1) }, - animationSpeed: { value: animationSpeed }, - - enableTop: { value: enabledWaves.includes('top') }, - enableMiddle: { value: enabledWaves.includes('middle') }, - enableBottom: { value: enabledWaves.includes('bottom') }, - - topLineCount: { value: topLineCount }, - middleLineCount: { value: middleLineCount }, - bottomLineCount: { value: bottomLineCount }, - - topLineDistance: { value: topLineDistance }, - middleLineDistance: { value: middleLineDistance }, - bottomLineDistance: { value: bottomLineDistance }, - - topWavePosition: { - value: new Vector3( - topWavePosition?.x ?? 10.0, - topWavePosition?.y ?? 0.5, - topWavePosition?.rotate ?? -0.4, - ), - }, - middleWavePosition: { - value: new Vector3( - middleWavePosition?.x ?? 5.0, - middleWavePosition?.y ?? 0.0, - middleWavePosition?.rotate ?? 0.2, - ), - }, - bottomWavePosition: { - value: new Vector3( - bottomWavePosition?.x ?? 2.0, - bottomWavePosition?.y ?? -0.7, - bottomWavePosition?.rotate ?? 0.4, - ), - }, - - iMouse: { value: new Vector2(-1000, -1000) }, - interactive: { value: interactive }, - bendRadius: { value: bendRadius }, - bendStrength: { value: bendStrength }, - bendInfluence: { value: 0 }, - - parallax: { value: parallax }, - parallaxStrength: { value: parallaxStrength }, - parallaxOffset: { value: new Vector2(0, 0) }, - - lineGradient: { - value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)), - }, - lineGradientCount: { value: 0 }, - } - - if (linesGradient && linesGradient.length > 0) { - const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS) - this.uniforms.lineGradientCount.value = stops.length - stops.forEach((hex, i) => { - const color = hexToVec3(hex) - this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z) - }) - } - - const material = new ShaderMaterial({ - uniforms: this.uniforms, - vertexShader, - fragmentShader, - }) - - const geometry = new PlaneGeometry(2, 2) - this.mesh = new Mesh(geometry, material) - this.scene.add(this.mesh) - - this.geometry = geometry - this.material = material - this.clock = new Clock() - - this._setSize = () => { - const width = container.clientWidth || 1 - const height = container.clientHeight || 1 - this.renderer.setSize(width, height, false) - const canvasWidth = this.renderer.domElement.width - const canvasHeight = this.renderer.domElement.height - this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1) - } - this._setSize() - - this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null - if (this.ro) this.ro.observe(container) - - this._handlePointerMove = (event) => { - const rect = this.renderer.domElement.getBoundingClientRect() - const x = event.clientX - rect.left - const y = event.clientY - rect.top - const dpr = this.renderer.getPixelRatio() - - this.targetMouse.set(x * dpr, (rect.height - y) * dpr) - this.targetInfluence = 1.0 - - if (this.parallax) { - const centerX = rect.width / 2 - const centerY = rect.height / 2 - const offsetX = (x - centerX) / rect.width - const offsetY = -(y - centerY) / rect.height - this.targetParallax.set( - offsetX * this.parallaxStrength, - offsetY * this.parallaxStrength, - ) - } - } - - this._handlePointerLeave = () => { - this.targetInfluence = 0.0 - } - - this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave) - - this.raf = 0 - const renderLoop = () => { - this.uniforms.iTime.value = this.clock.getElapsedTime() - - if (this.interactive) { - this.currentMouse.lerp(this.targetMouse, this.mouseDamping) - this.uniforms.iMouse.value.copy(this.currentMouse) - - this.currentInfluence += (this.targetInfluence - this.currentInfluence) * this.mouseDamping - this.uniforms.bendInfluence.value = this.currentInfluence - } - - if (this.parallax) { - this.currentParallax.lerp(this.targetParallax, this.mouseDamping) - this.uniforms.parallaxOffset.value.copy(this.currentParallax) - } - - this.renderer.render(this.scene, this.camera) - this.raf = requestAnimationFrame(renderLoop) - } - renderLoop() - } - - destroy() { - cancelAnimationFrame(this.raf) - if (this.ro) this.ro.disconnect() - - this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave) - - this.geometry.dispose() - this.material.dispose() - this.renderer.dispose() - - if (this.renderer.domElement.parentElement) { - this.renderer.domElement.parentElement.removeChild(this.renderer.domElement) - } - } -} diff --git a/frontend/dev/floating-lines copy.js b/frontend/dev/floating-lines copy.js deleted file mode 100644 index 50c246b..0000000 --- a/frontend/dev/floating-lines copy.js +++ /dev/null @@ -1,457 +0,0 @@ -import { - Scene, - OrthographicCamera, - WebGLRenderer, - PlaneGeometry, - Mesh, - ShaderMaterial, - Vector3, - Vector2, - Clock, -} from 'three' - -const vertexShader = ` -precision highp float; - -void main() { - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); -} -` - -const fragmentShader = ` -precision highp float; - -uniform float iTime; -uniform vec3 iResolution; -uniform float animationSpeed; - -uniform bool enableTop; -uniform bool enableMiddle; -uniform bool enableBottom; - -uniform int topLineCount; -uniform int middleLineCount; -uniform int bottomLineCount; - -uniform float topLineDistance; -uniform float middleLineDistance; -uniform float bottomLineDistance; - -uniform vec3 topWavePosition; -uniform vec3 middleWavePosition; -uniform vec3 bottomWavePosition; - -uniform vec2 iMouse; -uniform bool interactive; -uniform float bendRadius; -uniform float bendStrength; -uniform float bendInfluence; - -uniform bool parallax; -uniform float parallaxStrength; -uniform vec2 parallaxOffset; - -uniform vec3 lineGradient[8]; -uniform int lineGradientCount; - -const vec3 BLACK = vec3(0.0); -const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0; -const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0; - -mat2 rotate(float r) { - return mat2(cos(r), sin(r), -sin(r), cos(r)); -} - -vec3 background_color(vec2 uv) { - vec3 col = vec3(0.0); - - float y = sin(uv.x - 0.2) * 0.3 - 0.1; - float m = uv.y - y; - - col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m))); - col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8))); - return col * 0.5; -} - -vec3 getLineColor(float t, vec3 baseColor) { - if (lineGradientCount <= 0) { - return baseColor; - } - - vec3 gradientColor; - - if (lineGradientCount == 1) { - gradientColor = lineGradient[0]; - } else { - float clampedT = clamp(t, 0.0, 0.9999); - float scaled = clampedT * float(lineGradientCount - 1); - int idx = int(floor(scaled)); - float f = fract(scaled); - int idx2 = min(idx + 1, lineGradientCount - 1); - - vec3 c1 = lineGradient[idx]; - vec3 c2 = lineGradient[idx2]; - - gradientColor = mix(c1, c2, f); - } - - return gradientColor * 0.5; -} - -float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) { - float time = iTime * animationSpeed; - - float x_offset = offset; - float x_movement = time * 0.1; - float amp = sin(offset + time * 0.2) * 0.3; - float y = sin(uv.x + x_offset + x_movement) * amp; - - if (shouldBend) { - vec2 d = screenUv - mouseUv; - float influence = exp(-dot(d, d) * bendRadius); - float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence; - y += bendOffset; - } - - float m = uv.y - y; - return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01; -} - -void mainImage(out vec4 fragColor, in vec2 fragCoord) { - vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; - baseUv.y *= -1.0; - - if (parallax) { - baseUv += parallaxOffset; - } - - vec3 col = vec3(0.0); - - vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv); - - vec2 mouseUv = vec2(0.0); - if (interactive) { - mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y; - mouseUv.y *= -1.0; - } - - if (enableBottom) { - for (int i = 0; i < bottomLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(bottomLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = bottomWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - col += lineCol * wave( - ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y), - 1.5 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.2; - } - } - - if (enableMiddle) { - for (int i = 0; i < middleLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(middleLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = middleWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - col += lineCol * wave( - ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y), - 2.0 + 0.15 * fi, - baseUv, - mouseUv, - interactive - ); - } - } - - if (enableTop) { - for (int i = 0; i < topLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(topLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = topWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - ruv.x *= -1.0; - col += lineCol * wave( - ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y), - 1.0 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.1; - } - } - - fragColor = vec4(col, 1.0); -} - -void main() { - vec4 color = vec4(0.0); - mainImage(color, gl_FragCoord.xy); - gl_FragColor = color; -} -` - -const MAX_GRADIENT_STOPS = 8 - -function hexToVec3(hex) { - let value = hex.trim() - - if (value.startsWith('#')) { - value = value.slice(1) - } - - let r = 255 - let g = 255 - let b = 255 - - if (value.length === 3) { - r = parseInt(value[0] + value[0], 16) - g = parseInt(value[1] + value[1], 16) - b = parseInt(value[2] + value[2], 16) - } else if (value.length === 6) { - r = parseInt(value.slice(0, 2), 16) - g = parseInt(value.slice(2, 4), 16) - b = parseInt(value.slice(4, 6), 16) - } - - return new Vector3(r / 255, g / 255, b / 255) -} - -export default class FloatingLines { - constructor( - container, - { - linesGradient, - enabledWaves = ['top', 'middle', 'bottom'], - lineCount = [6], - lineDistance = [5], - topWavePosition, - middleWavePosition, - bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 }, - animationSpeed = 1, - interactive = true, - bendRadius = 5.0, - bendStrength = -0.5, - mouseDamping = 0.05, - parallax = true, - parallaxStrength = 0.2, - mixBlendMode = 'screen', - } = {}, - ) { - this.container = container - this.interactive = interactive - this.parallax = parallax - this.mouseDamping = mouseDamping - - this.targetMouse = new Vector2(-1000, -1000) - this.currentMouse = new Vector2(-1000, -1000) - this.targetInfluence = 0 - this.currentInfluence = 0 - this.targetParallax = new Vector2(0, 0) - this.currentParallax = new Vector2(0, 0) - - const getLineCount = (waveType) => { - if (typeof lineCount === 'number') return lineCount - if (!enabledWaves.includes(waveType)) return 0 - const index = enabledWaves.indexOf(waveType) - return lineCount[index] ?? 6 - } - - const getLineDistance = (waveType) => { - if (typeof lineDistance === 'number') return lineDistance - if (!enabledWaves.includes(waveType)) return 0.1 - const index = enabledWaves.indexOf(waveType) - return lineDistance[index] ?? 0.1 - } - - const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0 - const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0 - const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0 - - const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01 - const middleLineDistance = enabledWaves.includes('middle') - ? getLineDistance('middle') * 0.01 - : 0.01 - const bottomLineDistance = enabledWaves.includes('bottom') - ? getLineDistance('bottom') * 0.01 - : 0.01 - - this.scene = new Scene() - this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1) - this.camera.position.z = 1 - - this.renderer = new WebGLRenderer({ antialias: true, alpha: false }) - this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)) - this.renderer.domElement.style.width = '100%' - this.renderer.domElement.style.height = '100%' - this.renderer.domElement.style.mixBlendMode = mixBlendMode - container.appendChild(this.renderer.domElement) - - this.uniforms = { - iTime: { value: 0 }, - iResolution: { value: new Vector3(1, 1, 1) }, - animationSpeed: { value: animationSpeed }, - - enableTop: { value: enabledWaves.includes('top') }, - enableMiddle: { value: enabledWaves.includes('middle') }, - enableBottom: { value: enabledWaves.includes('bottom') }, - - topLineCount: { value: topLineCount }, - middleLineCount: { value: middleLineCount }, - bottomLineCount: { value: bottomLineCount }, - - topLineDistance: { value: topLineDistance }, - middleLineDistance: { value: middleLineDistance }, - bottomLineDistance: { value: bottomLineDistance }, - - topWavePosition: { - value: new Vector3( - topWavePosition?.x ?? 10.0, - topWavePosition?.y ?? 0.5, - topWavePosition?.rotate ?? -0.4, - ), - }, - middleWavePosition: { - value: new Vector3( - middleWavePosition?.x ?? 5.0, - middleWavePosition?.y ?? 0.0, - middleWavePosition?.rotate ?? 0.2, - ), - }, - bottomWavePosition: { - value: new Vector3( - bottomWavePosition?.x ?? 2.0, - bottomWavePosition?.y ?? -0.7, - bottomWavePosition?.rotate ?? 0.4, - ), - }, - - iMouse: { value: new Vector2(-1000, -1000) }, - interactive: { value: interactive }, - bendRadius: { value: bendRadius }, - bendStrength: { value: bendStrength }, - bendInfluence: { value: 0 }, - - parallax: { value: parallax }, - parallaxStrength: { value: parallaxStrength }, - parallaxOffset: { value: new Vector2(0, 0) }, - - lineGradient: { - value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)), - }, - lineGradientCount: { value: 0 }, - } - - if (linesGradient && linesGradient.length > 0) { - const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS) - this.uniforms.lineGradientCount.value = stops.length - stops.forEach((hex, i) => { - const color = hexToVec3(hex) - this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z) - }) - } - - const material = new ShaderMaterial({ - uniforms: this.uniforms, - vertexShader, - fragmentShader, - }) - - const geometry = new PlaneGeometry(2, 2) - this.mesh = new Mesh(geometry, material) - this.scene.add(this.mesh) - - this.geometry = geometry - this.material = material - this.clock = new Clock() - - this._setSize = () => { - const width = container.clientWidth || 1 - const height = container.clientHeight || 1 - this.renderer.setSize(width, height, false) - const canvasWidth = this.renderer.domElement.width - const canvasHeight = this.renderer.domElement.height - this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1) - } - this._setSize() - - this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null - if (this.ro) this.ro.observe(container) - - this._handlePointerMove = (event) => { - const rect = this.renderer.domElement.getBoundingClientRect() - const x = event.clientX - rect.left - const y = event.clientY - rect.top - const dpr = this.renderer.getPixelRatio() - - this.targetMouse.set(x * dpr, (rect.height - y) * dpr) - this.targetInfluence = 1.0 - - if (parallax) { - const centerX = rect.width / 2 - const centerY = rect.height / 2 - const offsetX = (x - centerX) / rect.width - const offsetY = -(y - centerY) / rect.height - this.targetParallax.set(offsetX * parallaxStrength, offsetY * parallaxStrength) - } - } - - this._handlePointerLeave = () => { - this.targetInfluence = 0.0 - } - - if (interactive) { - this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave) - } - - this.raf = 0 - const renderLoop = () => { - this.uniforms.iTime.value = this.clock.getElapsedTime() - - if (interactive) { - this.currentMouse.lerp(this.targetMouse, mouseDamping) - this.uniforms.iMouse.value.copy(this.currentMouse) - - this.currentInfluence += (this.targetInfluence - this.currentInfluence) * mouseDamping - this.uniforms.bendInfluence.value = this.currentInfluence - } - - if (parallax) { - this.currentParallax.lerp(this.targetParallax, mouseDamping) - this.uniforms.parallaxOffset.value.copy(this.currentParallax) - } - - this.renderer.render(this.scene, this.camera) - this.raf = requestAnimationFrame(renderLoop) - } - renderLoop() - } - - destroy() { - cancelAnimationFrame(this.raf) - if (this.ro) this.ro.disconnect() - - if (this.interactive) { - this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave) - } - - this.geometry.dispose() - this.material.dispose() - this.renderer.dispose() - - if (this.renderer.domElement.parentElement) { - this.renderer.domElement.parentElement.removeChild(this.renderer.domElement) - } - } -} diff --git a/frontend/dev/floating-lines.js b/frontend/dev/floating-lines.js deleted file mode 100644 index f0be204..0000000 --- a/frontend/dev/floating-lines.js +++ /dev/null @@ -1,634 +0,0 @@ -import { - Scene, - OrthographicCamera, - WebGLRenderer, - PlaneGeometry, - Mesh, - ShaderMaterial, - Vector3, - Vector2, -} from 'three' - -const vertexShader = ` -precision highp float; - -void main() { - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); -} -` - -const fragmentShader = ` -precision mediump float; - -uniform float iTime; -uniform vec3 iResolution; -uniform float animationSpeed; - -uniform bool enableTop; -uniform bool enableMiddle; -uniform bool enableBottom; - -uniform int topLineCount; -uniform int middleLineCount; -uniform int bottomLineCount; - -uniform float topLineDistance; -uniform float bottomLineDistance; - -uniform vec3 topWavePosition; -uniform vec3 bottomWavePosition; - -uniform int numPoints; -uniform float pointSpacingX; -uniform float pointsOffsetX; -uniform float pointY[8]; -uniform float lineSpread; -uniform float fanSpread; -uniform float lineSharpness; -uniform float waveFrequency; -uniform float bezierCurvature; -uniform float circleRadiusPx; -uniform float circleGlowSize; -uniform float circleGlowStrength; - -uniform vec2 iMouse; -uniform bool interactive; -uniform float bendRadius; -uniform float bendStrength; -uniform float bendInfluence; - -uniform int horizonMode; // 0=off 1=fog 2=split 3=glow -uniform float horizonOpacity; // Nebel + Glow: Helligkeit/Dichte -uniform float horizonBlend; // Trennung: 0=scharf, 1=weicher Übergang - -uniform bool parallax; -uniform float parallaxStrength; -uniform vec2 parallaxOffset; - -uniform float lineBrightness; -uniform vec3 lineGradient[8]; -uniform int lineGradientCount; -uniform vec3 bgColorCenter; -uniform vec3 bgColorEdge; - -mat2 rotate(float r) { - return mat2(cos(r), sin(r), -sin(r), cos(r)); -} - -vec3 getLineColor(float t, vec3 baseColor) { - if (lineGradientCount <= 0) { - return baseColor; - } - - vec3 gradientColor; - - if (lineGradientCount == 1) { - gradientColor = lineGradient[0]; - } else { - float clampedT = clamp(t, 0.0, 0.9999); - float scaled = clampedT * float(lineGradientCount - 1); - int idx = int(floor(scaled)); - float f = fract(scaled); - int idx2 = min(idx + 1, lineGradientCount - 1); - - vec3 c1 = lineGradient[idx]; - vec3 c2 = lineGradient[idx2]; - - gradientColor = mix(c1, c2, f); - } - - return gradientColor; -} - -vec3 drawCircle(vec2 uv, vec2 center, float r, vec3 color) { - float d = length(uv - center); - - // Glow: Größe und Stärke per Uniform steuerbar - float glowW = circleGlowSize / iResolution.y * 2.0; - float glow = exp(-pow(max(d - r, 0.0) / glowW, 2.0)) * circleGlowStrength; - float fog = 0.008 / max(d * d * 3.0 + 0.016, 0.001); - - // Weißer Kreis: harte Kante, 1px Antialiasing - float aa = 1.5 / iResolution.y; - float core = 1.0 - smoothstep(r - aa, r + aa, d); - - // Glow nur außerhalb des weißen Kreises - vec3 result = color * (glow + fog) * (1.0 - core); - result += vec3(core); - return result; -} - -// Nächsten t-Parameter auf quadratischer Bézier (Newton + Coarse-Search) -float bezierClosestT(vec2 q, vec2 p0, vec2 pc, vec2 p1) { - // Grobe Suche über 8 Samples für guten Startwert - float bestT = 0.0; - float bestD = 1e9; - for (int k = 0; k <= 8; ++k) { - float t = float(k) / 8.0; - float mt = 1.0 - t; - vec2 b = mt*mt*p0 + 2.0*mt*t*pc + t*t*p1; - float d = dot(q - b, q - b); - if (d < bestD) { bestD = d; bestT = t; } - } - - // Newton-Verfahren: minimiert |B(t)-q|² - // f(t) = a·t³ + b·t² + c·t + d, f'(t) = 3a·t² + 2b·t + c - vec2 A = pc - p0; - vec2 B = p0 - 2.0*pc + p1; - vec2 D = p0 - q; - float a = 2.0*dot(B,B); - float bco = 6.0*dot(A,B); - float c = 4.0*dot(A,A) + 2.0*dot(D,B); - float dco = 2.0*dot(D,A); - - // Etwas breiterer Bereich erlaubt leichten Überlauf in benachbarte Segmente - float t = clamp(bestT, 0.001, 0.999); - for (int k = 0; k < 4; ++k) { - float f = a*t*t*t + bco*t*t + c*t + dco; - float fp = 3.0*a*t*t + 2.0*bco*t + c; - if (abs(fp) > 1e-8) t -= f / fp; - t = clamp(t, -0.08, 1.08); - } - return t; -} - -// Accepts precomputed bezier values (bt, bPos, bNorm) — computed once per segment -float waveFocal(vec2 uv, float fi, float totalLines, float t, vec2 bPos, vec2 bNorm) { - float s = dot(uv - bPos, bNorm); - - float time = iTime * animationSpeed; - float normalizedI = totalLines > 1.0 ? fi / (totalLines - 1.0) : 0.5; - - float envelope = sin(t * 3.14159265359); - float linePos = (normalizedI - 0.5) * fanSpread * envelope; - float amp = lineSpread * 0.3 * envelope; - float waveDisp = sin(t * waveFrequency + fi * 1.3 + time * 0.4) * amp - * sin(fi * 0.9 + time * 0.18); - - float dist = s - linePos - waveDisp; - float fade = smoothstep(-0.06, 0.04, t) * smoothstep(1.06, 0.96, t); - - return fade * (0.013 / max(abs(dist) * lineSharpness + 0.004, 1e-4) + 0.003); -} - -float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) { - float time = iTime * animationSpeed; - - float x_offset = offset; - float x_movement = time * 0.1; - float amp = sin(offset + time * 0.2) * 0.3; - float y = sin(uv.x + x_offset + x_movement) * amp; - - if (shouldBend) { - vec2 d = screenUv - mouseUv; - float influence = exp(-dot(d, d) * bendRadius); - float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence; - y += bendOffset; - } - - float m = uv.y - y; - return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01; -} - -void mainImage(out vec4 fragColor, in vec2 fragCoord) { - vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; - baseUv.y *= -1.0; - - if (parallax) { - baseUv += parallaxOffset; - } - - vec3 col = vec3(0.0); - - vec3 b = bgColorCenter; - - vec2 mouseUv = vec2(0.0); - if (interactive) { - mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y; - mouseUv.y *= -1.0; - } - - if (enableBottom) { - for (int i = 0; i < bottomLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(bottomLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = bottomWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - col += lineCol * wave( - ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y), - 1.5 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.2; - } - } - - if (enableMiddle) { - const int MAX_PTS = 8; - const int MAX_SEGS = 7; - float r = circleRadiusPx / iResolution.y * 2.0; - float tScale = numPoints > 1 ? 1.0 / float(numPoints - 1) : 1.0; - - // Segmente: Punkt s → Punkt s+1 - for (int s = 0; s < MAX_SEGS; ++s) { - if (s >= numPoints - 1) break; - - float x0 = pointsOffsetX + (float(s) - float(numPoints - 1) * 0.5) * pointSpacingX; - float x1 = pointsOffsetX + (float(s + 1) - float(numPoints - 1) * 0.5) * pointSpacingX; - - vec2 sp = vec2(x0, pointY[s]); - vec2 ep = vec2(x1, pointY[s + 1]); - - // Segment-Geometrie (einmalig berechnet, von Gradient + Bézier genutzt) - vec2 seg = ep - sp; - float segL = length(seg); - vec2 segDir = segL > 0.001 ? seg / segL : vec2(1.0, 0.0); - vec2 sPerp = vec2(-segDir.y, segDir.x); - vec2 pc = (sp + ep) * 0.5 + sPerp * segL * bezierCurvature; - - // Gradient - float t_seg = clamp(dot(baseUv - sp, segDir) / segL, 0.0, 1.0); - float t_global = (float(s) + t_seg) * tScale; - vec3 lineCol = getLineColor(t_global, b); - - // Bézier einmal pro Segment — geteilt von Nebel + allen Linien - float bt = bezierClosestT(baseUv, sp, pc, ep); - float bmt = 1.0 - bt; - vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep; - vec2 bTang = normalize(2.0*bmt*(pc - sp) + 2.0*bt*(ep - pc)); - vec2 bNorm = vec2(-bTang.y, bTang.x); - - // Weicher Nebel entlang der Kurve - float bDist = length(baseUv - bPos); - float fogFade = smoothstep(-0.06, 0.05, bt) * smoothstep(1.06, 0.95, bt); - float fogEnv = sin(bt * 3.14159265359); - float segFog = fogFade * fogEnv * 0.0018 / max(bDist * bDist * 4.0 + 0.012, 0.001); - col += lineCol * segFog; - - for (int i = 0; i < middleLineCount; ++i) { - col += lineCol * waveFocal(baseUv, float(i), float(middleLineCount), bt, bPos, bNorm); - } - } - - // Kreise an jedem Punkt - for (int p = 0; p < MAX_PTS; ++p) { - if (p >= numPoints) break; - float px = pointsOffsetX + (float(p) - float(numPoints - 1) * 0.5) * pointSpacingX; - float t_pt = numPoints > 1 ? float(p) * tScale : 0.0; - vec3 circCol = getLineColor(t_pt, b) * 1.5; - col += drawCircle(baseUv, vec2(px, pointY[p]), r, circCol); - } - } - - if (enableTop) { - for (int i = 0; i < topLineCount; ++i) { - float fi = float(i); - float t = fi / max(float(topLineCount - 1), 1.0); - vec3 lineCol = getLineColor(t, b); - - float angle = topWavePosition.z * log(length(baseUv) + 1.0); - vec2 ruv = baseUv * rotate(angle); - ruv.x *= -1.0; - col += lineCol * wave( - ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y), - 1.0 + 0.2 * fi, - baseUv, - mouseUv, - interactive - ) * 0.1; - } - } - - col *= lineBrightness; - - // Hintergrundverlauf: radial von bgColorCenter (Mitte) nach bgColorEdge (Rand) - float dist = length(baseUv) / 1.8; - vec3 bg = mix(bgColorCenter, bgColorEdge, clamp(dist, 0.0, 1.0)); - - if (horizonMode == 1) { - // Nebel: breites weiches Gaussband in Gradient-Mittelfarbe - float band = exp(-baseUv.y * baseUv.y * 5.0); - vec3 fogColor = getLineColor(0.5, bg) * 2.0; - col += fogColor * band * horizonOpacity; - } else if (horizonMode == 2) { - // Farbtrennung: vertikaler Split an Y=0 - // bgColorCenter → oben (positives UV-Y), bgColorEdge → unten - // horizonBlend: 0=harter Schnitt, 1=sehr weicher Übergang - float blendW = max(horizonBlend * 0.7, 0.001); - float t = smoothstep(-blendW, blendW, baseUv.y); - bg = mix(bgColorEdge, bgColorCenter, t); - } else if (horizonMode == 3) { - // Glow: konzentriertes Leuchten in Gradient-Mittelfarbe - float d2 = baseUv.y * baseUv.y; - float softGlow = exp(-d2 * 10.0); - float coreGlow = exp(-d2 * 70.0) * 0.7; - vec3 glowColor = getLineColor(0.5, bg) * 3.0; - col += glowColor * (softGlow + coreGlow) * horizonOpacity; - } - - fragColor = vec4(clamp(bg + col, 0.0, 1.0), 1.0); -} - -void main() { - vec4 color = vec4(0.0); - mainImage(color, gl_FragCoord.xy); - gl_FragColor = color; -} -` - -const MAX_GRADIENT_STOPS = 8 - -function hexToVec3(hex) { - let value = hex.trim() - - if (value.startsWith('#')) { - value = value.slice(1) - } - - let r = 255 - let g = 255 - let b = 255 - - if (value.length === 3) { - r = parseInt(value[0] + value[0], 16) - g = parseInt(value[1] + value[1], 16) - b = parseInt(value[2] + value[2], 16) - } else if (value.length === 6) { - r = parseInt(value.slice(0, 2), 16) - g = parseInt(value.slice(2, 4), 16) - b = parseInt(value.slice(4, 6), 16) - } - - return new Vector3(r / 255, g / 255, b / 255) -} - -export default class FloatingLines { - constructor( - container, - { - linesGradient, - enabledWaves = ['top', 'middle', 'bottom'], - lineCount = [6], - lineDistance = [5], - topWavePosition, - bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 }, - numPoints = 4, - pointSpacingX = 0.8, - pointsOffsetX = 0.0, - pointYValues = [0.75, -0.5, 0.3, -0.75, 0.6, -0.4, 0.5, -0.6], - lineSpread = 0.6, - fanSpread = 0.25, - lineSharpness = 1.0, - waveFrequency = 8.0, - bezierCurvature = 0.3, - circleRadiusPx = 50, - animationSpeed = 1, - lineBrightness = 1.0, - interactive = true, - bendRadius = 5.0, - bendStrength = -0.5, - mouseDamping = 0.05, - parallax = true, - parallaxStrength = 0.2, - circleGlowSize = 18.0, - circleGlowStrength = 1.5, - horizonMode = 'off', - horizonOpacity = 0.5, - horizonBlend = 0.2, - bgColorCenter = '#0a0514', - bgColorEdge = '#000000', - mixBlendMode = 'screen', - } = {}, - ) { - this.container = container - this.interactive = interactive - this.parallax = parallax - this.mouseDamping = mouseDamping - this.parallaxStrength = parallaxStrength - - this.targetMouse = new Vector2(-1000, -1000) - this.currentMouse = new Vector2(-1000, -1000) - this.targetInfluence = 0 - this.currentInfluence = 0 - this.targetParallax = new Vector2(0, 0) - this.currentParallax = new Vector2(0, 0) - - const getLineCount = (waveType) => { - if (typeof lineCount === 'number') return lineCount - if (!enabledWaves.includes(waveType)) return 0 - const index = enabledWaves.indexOf(waveType) - return lineCount[index] ?? 6 - } - - const getLineDistance = (waveType) => { - if (typeof lineDistance === 'number') return lineDistance - if (!enabledWaves.includes(waveType)) return 0.1 - const index = enabledWaves.indexOf(waveType) - return lineDistance[index] ?? 0.1 - } - - const topLineCount = getLineCount('top') - const middleLineCount = getLineCount('middle') - const bottomLineCount = getLineCount('bottom') - - const topLineDistance = getLineDistance('top') * 0.01 - const bottomLineDistance = getLineDistance('bottom') * 0.01 - - this.scene = new Scene() - this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1) - this.camera.position.z = 1 - - this.renderer = new WebGLRenderer({ antialias: true, alpha: false }) - this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)) - this.renderer.domElement.style.width = '100%' - this.renderer.domElement.style.height = '100%' - this.renderer.domElement.style.mixBlendMode = mixBlendMode - container.appendChild(this.renderer.domElement) - - this.uniforms = { - iTime: { value: 0 }, - iResolution: { value: new Vector3(1, 1, 1) }, - animationSpeed: { value: animationSpeed }, - lineBrightness: { value: lineBrightness }, - - enableTop: { value: enabledWaves.includes('top') }, - enableMiddle: { value: enabledWaves.includes('middle') }, - enableBottom: { value: enabledWaves.includes('bottom') }, - - topLineCount: { value: topLineCount }, - middleLineCount: { value: middleLineCount }, - bottomLineCount: { value: bottomLineCount }, - - topLineDistance: { value: topLineDistance }, - bottomLineDistance: { value: bottomLineDistance }, - - topWavePosition: { - value: new Vector3( - topWavePosition?.x ?? 10.0, - topWavePosition?.y ?? 0.5, - topWavePosition?.rotate ?? -0.4, - ), - }, - bottomWavePosition: { - value: new Vector3( - bottomWavePosition?.x ?? 2.0, - bottomWavePosition?.y ?? -0.7, - bottomWavePosition?.rotate ?? 0.4, - ), - }, - - numPoints: { value: numPoints }, - pointSpacingX: { value: pointSpacingX }, - pointsOffsetX: { value: pointsOffsetX }, - pointY: { value: [...pointYValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8) }, - lineSpread: { value: lineSpread }, - fanSpread: { value: fanSpread }, - lineSharpness: { value: lineSharpness }, - waveFrequency: { value: waveFrequency }, - bezierCurvature: { value: bezierCurvature }, - circleRadiusPx: { value: circleRadiusPx }, - circleGlowSize: { value: circleGlowSize }, - circleGlowStrength: { value: circleGlowStrength }, - - iMouse: { value: new Vector2(-1000, -1000) }, - interactive: { value: interactive }, - bendRadius: { value: bendRadius }, - bendStrength: { value: bendStrength }, - bendInfluence: { value: 0 }, - - horizonMode: { value: { off: 0, fog: 1, split: 2, glow: 3 }[horizonMode] ?? 0 }, - horizonOpacity: { value: horizonOpacity }, - horizonBlend: { value: horizonBlend }, - - parallax: { value: parallax }, - parallaxStrength: { value: parallaxStrength }, - parallaxOffset: { value: new Vector2(0, 0) }, - - lineGradient: { - value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)), - }, - lineGradientCount: { value: 0 }, - bgColorCenter: { value: new Vector3(0, 0, 0) }, - bgColorEdge: { value: new Vector3(0, 0, 0) }, - } - - if (linesGradient && linesGradient.length > 0) { - const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS) - this.uniforms.lineGradientCount.value = stops.length - stops.forEach((hex, i) => { - const color = hexToVec3(hex) - this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z) - }) - } - - const center = hexToVec3(bgColorCenter) - this.uniforms.bgColorCenter.value.set(center.x, center.y, center.z) - const edge = hexToVec3(bgColorEdge) - this.uniforms.bgColorEdge.value.set(edge.x, edge.y, edge.z) - - const material = new ShaderMaterial({ - uniforms: this.uniforms, - vertexShader, - fragmentShader, - }) - - const geometry = new PlaneGeometry(2, 2) - this.mesh = new Mesh(geometry, material) - this.scene.add(this.mesh) - - this.geometry = geometry - this.material = material - this._startTime = performance.now() - - this._setSize = () => { - const width = container.clientWidth || 1 - const height = container.clientHeight || 1 - this.renderer.setSize(width, height, false) - const canvasWidth = this.renderer.domElement.width - const canvasHeight = this.renderer.domElement.height - this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1) - } - this._setSize() - - this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null - if (this.ro) this.ro.observe(container) - - this._handlePointerMove = (event) => { - const rect = this.renderer.domElement.getBoundingClientRect() - const x = event.clientX - rect.left - const y = event.clientY - rect.top - const dpr = this.renderer.getPixelRatio() - - this.targetMouse.set(x * dpr, (rect.height - y) * dpr) - this.targetInfluence = 1.0 - - if (this.parallax) { - const centerX = rect.width / 2 - const centerY = rect.height / 2 - const offsetX = (x - centerX) / rect.width - const offsetY = -(y - centerY) / rect.height - this.targetParallax.set(offsetX * this.parallaxStrength, offsetY * this.parallaxStrength) - } - } - - this._handlePointerLeave = () => { - this.targetInfluence = 0.0 - } - - this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave) - - this.raf = 0 - const renderLoop = () => { - this.uniforms.iTime.value = (performance.now() - this._startTime) * 0.001 - - if (this.interactive) { - this.currentMouse.lerp(this.targetMouse, this.mouseDamping) - this.uniforms.iMouse.value.copy(this.currentMouse) - - this.currentInfluence += (this.targetInfluence - this.currentInfluence) * this.mouseDamping - this.uniforms.bendInfluence.value = this.currentInfluence - } - - if (this.parallax) { - this.currentParallax.lerp(this.targetParallax, this.mouseDamping) - this.uniforms.parallaxOffset.value.copy(this.currentParallax) - } - - this.renderer.render(this.scene, this.camera) - this.raf = requestAnimationFrame(renderLoop) - } - - this._handleVisibility = () => { - if (document.hidden) { - cancelAnimationFrame(this.raf) - this.raf = 0 - } else if (!this.raf) { - renderLoop() - } - } - document.addEventListener('visibilitychange', this._handleVisibility) - - renderLoop() - } - - destroy() { - cancelAnimationFrame(this.raf) - if (this.ro) this.ro.disconnect() - document.removeEventListener('visibilitychange', this._handleVisibility) - - this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove) - this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave) - - this.geometry.dispose() - this.material.dispose() - this.renderer.dispose() - - if (this.renderer.domElement.parentElement) { - this.renderer.domElement.parentElement.removeChild(this.renderer.domElement) - } - } -} diff --git a/frontend/dev/init-fl copy.html b/frontend/dev/init-fl copy.html deleted file mode 100644 index bd752b4..0000000 --- a/frontend/dev/init-fl copy.html +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - FloatingLines Dev - - - - -
-
- -
- -
-

Allgemein

-
- - - 1.00 -
-
- - -
-

Middle Wave

-
- - - 10 -
-
- - - 6.0 -
-
- - - 5.0 -
-
- - - 0.00 -
-
- - - 0.20 -
-
- - -
-

Gradient

-
- - - -
-
- - -
-
-
-
- - - - diff --git a/frontend/dev/init-fl.html b/frontend/dev/init-fl.html deleted file mode 100644 index ba0171a..0000000 --- a/frontend/dev/init-fl.html +++ /dev/null @@ -1,564 +0,0 @@ - - - - - - FloatingLines Dev - - - - -
-
- -
- -
-

Linien

-
- - - 1.00 -
-
- - - 10 -
-
- - - 0.05 -
-
- - - 0.5 -
-
- - - 8.0 -
-
- - - 7.0 -
-
- - - 0.20 -
-
- - - 75px -
-
- - - 18px -
-
- - - 1.5 -
-
- - -
-

Raster

-
- - - 4 -
-
- - - 0.80 -
-
- - - 0.00 -
-
- - -
-

Punkt-Höhen

-
- -
- - - -0.75 -
-
- - - 0.50 -
-
- - - -0.30 -
-
- - - 0.75 -
-
- - - -0.60 -
-
- - - 0.40 -
-
- - - -0.20 -
-
- - - 0.80 -
-
-
- - -
-

Horizont

-
- - - - -
-
- - - 0.50 -
- -
- - -
-

Hintergrundbild

-
- - - - - - - - - - - -
-

Hintergrundfarbe

-
- - -
-
- - -
-
- - - -
-
-
-
- - - - diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 51ca807..3db3b25 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,10 +10,9 @@ "hasInstallScript": true, "dependencies": { "@quasar/extras": "^1.16.4", - "dexie": "^4.3.0", + "gsap": "^3.13.0", "pinia": "^3.0.1", "quasar": "^2.16.0", - "three": "^0.183.0", "vue": "^3.4.18", "vue-router": "^4.0.0", "vue-select": "^4.0.0-beta.6" @@ -34,21 +33,16 @@ "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" - }, - "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "^4.0.0", - "@rollup/rollup-linux-arm64-gnu": "^4.0.0", - "@rollup/rollup-linux-x64-gnu": "^4.0.0" } }, "node_modules/@babel/code-frame": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", - "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.28.5", + "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -66,21 +60,21 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz", - "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==", + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", + "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.28.4" }, "bin": { "parser": "bin/babel-parser.js" @@ -90,29 +84,29 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", + "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@bufbuild/protobuf": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.11.0.tgz", - "integrity": "sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==", + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.8.0.tgz", + "integrity": "sha512-r1/0w5C9dkbcdjyxY8ZHsC5AOWg4Pnzhm2zu7LO4UHSounp2tMm6Y+oioV9zlGbLveE7YaWRDUk48WLxRDgoqg==", "dev": true, "license": "(Apache-2.0 AND BSD-3-Clause)" }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", - "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz", + "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==", "cpu": [ "ppc64" ], @@ -127,9 +121,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz", - "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz", + "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==", "cpu": [ "arm" ], @@ -144,9 +138,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz", - "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz", + "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==", "cpu": [ "arm64" ], @@ -161,9 +155,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz", - "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz", + "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==", "cpu": [ "x64" ], @@ -178,9 +172,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz", - "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz", + "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==", "cpu": [ "arm64" ], @@ -195,9 +189,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz", - "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz", + "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==", "cpu": [ "x64" ], @@ -212,9 +206,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz", - "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz", + "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==", "cpu": [ "arm64" ], @@ -229,9 +223,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz", - "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz", + "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==", "cpu": [ "x64" ], @@ -246,9 +240,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz", - "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz", + "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==", "cpu": [ "arm" ], @@ -263,9 +257,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz", - "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz", + "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==", "cpu": [ "arm64" ], @@ -280,9 +274,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz", - "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz", + "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==", "cpu": [ "ia32" ], @@ -297,9 +291,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz", - "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz", + "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==", "cpu": [ "loong64" ], @@ -314,9 +308,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz", - "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz", + "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==", "cpu": [ "mips64el" ], @@ -331,9 +325,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz", - "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz", + "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==", "cpu": [ "ppc64" ], @@ -348,9 +342,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz", - "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz", + "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==", "cpu": [ "riscv64" ], @@ -365,9 +359,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz", - "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz", + "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==", "cpu": [ "s390x" ], @@ -382,9 +376,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz", - "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz", + "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==", "cpu": [ "x64" ], @@ -399,9 +393,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz", - "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz", + "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==", "cpu": [ "arm64" ], @@ -416,9 +410,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz", - "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz", + "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==", "cpu": [ "x64" ], @@ -433,9 +427,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz", - "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz", + "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==", "cpu": [ "arm64" ], @@ -450,9 +444,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz", - "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz", + "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==", "cpu": [ "x64" ], @@ -467,9 +461,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz", - "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz", + "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==", "cpu": [ "arm64" ], @@ -484,9 +478,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz", - "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz", + "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==", "cpu": [ "x64" ], @@ -501,9 +495,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz", - "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz", + "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==", "cpu": [ "arm64" ], @@ -518,9 +512,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz", - "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz", + "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==", "cpu": [ "ia32" ], @@ -535,9 +529,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", - "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz", + "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==", "cpu": [ "x64" ], @@ -552,9 +546,9 @@ } }, "node_modules/@eslint-community/eslint-utils": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz", - "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz", + "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==", "dev": true, "license": "MIT", "dependencies": { @@ -584,9 +578,9 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz", - "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz", + "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==", "dev": true, "license": "MIT", "engines": { @@ -594,13 +588,13 @@ } }, "node_modules/@eslint/config-array": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz", - "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz", + "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@eslint/object-schema": "^2.1.7", + "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" }, @@ -634,22 +628,19 @@ "license": "MIT" }, "node_modules/@eslint/config-helpers": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz", - "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz", + "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==", "dev": true, "license": "Apache-2.0", - "dependencies": { - "@eslint/core": "^0.17.0" - }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, "node_modules/@eslint/core": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz", - "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==", + "version": "0.15.2", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz", + "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -660,20 +651,20 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.4.tgz", - "integrity": "sha512-4h4MVF8pmBsncB60r0wSJiIeUKTSD4m7FmTFThG8RHlsg9ajqckLm9OraguFGZE4vVdpiI1Q4+hFnisopmG6gQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz", + "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==", "dev": true, "license": "MIT", "dependencies": { - "ajv": "^6.14.0", + "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", - "js-yaml": "^4.1.1", - "minimatch": "^3.1.3", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" }, "engines": { @@ -722,9 +713,9 @@ "license": "MIT" }, "node_modules/@eslint/js": { - "version": "9.39.3", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz", - "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==", + "version": "9.35.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.35.0.tgz", + "integrity": "sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==", "dev": true, "license": "MIT", "engines": { @@ -735,9 +726,9 @@ } }, "node_modules/@eslint/object-schema": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz", - "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz", + "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==", "dev": true, "license": "Apache-2.0", "engines": { @@ -745,13 +736,13 @@ } }, "node_modules/@eslint/plugin-kit": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz", - "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz", + "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@eslint/core": "^0.17.0", + "@eslint/core": "^0.15.2", "levn": "^0.4.1" }, "engines": { @@ -811,13 +802,13 @@ } }, "node_modules/@inquirer/external-editor": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz", - "integrity": "sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.2.tgz", + "integrity": "sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==", "dev": true, "license": "MIT", "dependencies": { - "chardet": "^2.1.1", + "chardet": "^2.1.0", "iconv-lite": "^0.7.0" }, "engines": { @@ -833,9 +824,9 @@ } }, "node_modules/@inquirer/external-editor/node_modules/iconv-lite": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz", - "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz", + "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==", "dev": true, "license": "MIT", "dependencies": { @@ -850,9 +841,9 @@ } }, "node_modules/@inquirer/figures": { - "version": "1.0.15", - "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.15.tgz", - "integrity": "sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.13.tgz", + "integrity": "sha512-lGPVU3yO9ZNqA7vTYz26jny41lE7yoQansmqdMLBEfqaGsmdg7V3W9mK9Pvb5IL4EVZ9GnSDGMO/cJXud5dMaw==", "dev": true, "license": "MIT", "engines": { @@ -1012,18 +1003,18 @@ } }, "node_modules/@parcel/watcher": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", - "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz", + "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==", "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, "dependencies": { - "detect-libc": "^2.0.3", + "detect-libc": "^1.0.3", "is-glob": "^4.0.3", - "node-addon-api": "^7.0.0", - "picomatch": "^4.0.3" + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" }, "engines": { "node": ">= 10.0.0" @@ -1033,25 +1024,25 @@ "url": "https://opencollective.com/parcel" }, "optionalDependencies": { - "@parcel/watcher-android-arm64": "2.5.6", - "@parcel/watcher-darwin-arm64": "2.5.6", - "@parcel/watcher-darwin-x64": "2.5.6", - "@parcel/watcher-freebsd-x64": "2.5.6", - "@parcel/watcher-linux-arm-glibc": "2.5.6", - "@parcel/watcher-linux-arm-musl": "2.5.6", - "@parcel/watcher-linux-arm64-glibc": "2.5.6", - "@parcel/watcher-linux-arm64-musl": "2.5.6", - "@parcel/watcher-linux-x64-glibc": "2.5.6", - "@parcel/watcher-linux-x64-musl": "2.5.6", - "@parcel/watcher-win32-arm64": "2.5.6", - "@parcel/watcher-win32-ia32": "2.5.6", - "@parcel/watcher-win32-x64": "2.5.6" + "@parcel/watcher-android-arm64": "2.5.1", + "@parcel/watcher-darwin-arm64": "2.5.1", + "@parcel/watcher-darwin-x64": "2.5.1", + "@parcel/watcher-freebsd-x64": "2.5.1", + "@parcel/watcher-linux-arm-glibc": "2.5.1", + "@parcel/watcher-linux-arm-musl": "2.5.1", + "@parcel/watcher-linux-arm64-glibc": "2.5.1", + "@parcel/watcher-linux-arm64-musl": "2.5.1", + "@parcel/watcher-linux-x64-glibc": "2.5.1", + "@parcel/watcher-linux-x64-musl": "2.5.1", + "@parcel/watcher-win32-arm64": "2.5.1", + "@parcel/watcher-win32-ia32": "2.5.1", + "@parcel/watcher-win32-x64": "2.5.1" } }, "node_modules/@parcel/watcher-android-arm64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", - "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", + "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", "cpu": [ "arm64" ], @@ -1070,9 +1061,9 @@ } }, "node_modules/@parcel/watcher-darwin-arm64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", - "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", + "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", "cpu": [ "arm64" ], @@ -1091,9 +1082,9 @@ } }, "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", - "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", + "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", "cpu": [ "x64" ], @@ -1112,9 +1103,9 @@ } }, "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", - "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", + "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", "cpu": [ "x64" ], @@ -1133,9 +1124,9 @@ } }, "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", - "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", + "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", "cpu": [ "arm" ], @@ -1154,9 +1145,9 @@ } }, "node_modules/@parcel/watcher-linux-arm-musl": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", - "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", + "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", "cpu": [ "arm" ], @@ -1175,9 +1166,9 @@ } }, "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", - "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", + "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", "cpu": [ "arm64" ], @@ -1196,9 +1187,9 @@ } }, "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", - "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", + "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", "cpu": [ "arm64" ], @@ -1217,9 +1208,9 @@ } }, "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", - "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", + "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", "cpu": [ "x64" ], @@ -1238,9 +1229,9 @@ } }, "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", - "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", + "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", "cpu": [ "x64" ], @@ -1259,9 +1250,9 @@ } }, "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", - "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", + "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", "cpu": [ "arm64" ], @@ -1280,9 +1271,9 @@ } }, "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", - "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", + "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", "cpu": [ "ia32" ], @@ -1301,9 +1292,9 @@ } }, "node_modules/@parcel/watcher-win32-x64": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", - "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", + "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==", "cpu": [ "x64" ], @@ -1321,20 +1312,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/watcher/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -1360,9 +1337,9 @@ } }, "node_modules/@quasar/app-vite": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-2.4.1.tgz", - "integrity": "sha512-JLRXHKjZCZM9qQlxyjtinusVh+UMBQqM5TEc+Zo3i5y+dBffZiyUcdYN2DCmL0U/eoVulc2n5ve7qR0JwaQu6g==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-2.4.0.tgz", + "integrity": "sha512-nfdcfERQ1bdUFsgXfYexgUAGBrsRHuzlik5p58cKGpYXiwUZZN6mJhN8VxU/zGT0GYHHiNIZlb67N+R52NYd6Q==", "dev": true, "license": "MIT", "dependencies": { @@ -1396,12 +1373,12 @@ "mlly": "^1.7.4", "open": "^10.1.0", "rollup-plugin-visualizer": "^5.13.1", - "sass-embedded": "^1.93.2", + "sass-embedded": "^1.83.0", "semver": "^7.6.3", "serialize-javascript": "^6.0.2", "tinyglobby": "^0.2.10", "ts-essentials": "^9.4.2", - "vite": "^7.1.6", + "vite": "^7.0.3", "webpack-merge": "^6.0.1" }, "bin": { @@ -1423,7 +1400,7 @@ "quasar": "^2.16.0", "typescript": ">= 5.4", "vue": "^3.2.29", - "vue-router": "^4.0.12 || ^5.0.0", + "vue-router": "^4.0.12", "workbox-build": ">= 6" }, "peerDependenciesMeta": { @@ -1513,16 +1490,16 @@ } }, "node_modules/@rolldown/pluginutils": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz", - "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==", + "version": "1.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz", + "integrity": "sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==", "dev": true, "license": "MIT" }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz", - "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.1.tgz", + "integrity": "sha512-HJXwzoZN4eYTdD8bVV22DN8gsPCAj3V20NHKOs8ezfXanGpmVPR7kalUHd+Y31IJp9stdB87VKPFbsGY3H/2ag==", "cpu": [ "arm" ], @@ -1534,9 +1511,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz", - "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.1.tgz", + "integrity": "sha512-PZlsJVcjHfcH53mOImyt3bc97Ep3FJDXRpk9sMdGX0qgLmY0EIWxCag6EigerGhLVuL8lDVYNnSo8qnTElO4xw==", "cpu": [ "arm64" ], @@ -1548,12 +1525,13 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz", - "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.1.tgz", + "integrity": "sha512-xc6i2AuWh++oGi4ylOFPmzJOEeAa2lJeGUGb4MudOtgfyyjr4UPNK+eEWTPLvmPJIY/pgw6ssFIox23SyrkkJw==", "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1561,9 +1539,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz", - "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.1.tgz", + "integrity": "sha512-2ofU89lEpDYhdLAbRdeyz/kX3Y2lpYc6ShRnDjY35bZhd2ipuDMDi6ZTQ9NIag94K28nFMofdnKeHR7BT0CATw==", "cpu": [ "x64" ], @@ -1575,9 +1553,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz", - "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.1.tgz", + "integrity": "sha512-wOsE6H2u6PxsHY/BeFHA4VGQN3KUJFZp7QJBmDYI983fgxq5Th8FDkVuERb2l9vDMs1D5XhOrhBrnqcEY6l8ZA==", "cpu": [ "arm64" ], @@ -1589,9 +1567,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz", - "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.1.tgz", + "integrity": "sha512-A/xeqaHTlKbQggxCqispFAcNjycpUEHP52mwMQZUNqDUJFFYtPHCXS1VAG29uMlDzIVr+i00tSFWFLivMcoIBQ==", "cpu": [ "x64" ], @@ -1603,9 +1581,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz", - "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.1.tgz", + "integrity": "sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==", "cpu": [ "arm" ], @@ -1617,9 +1595,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz", - "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.1.tgz", + "integrity": "sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==", "cpu": [ "arm" ], @@ -1631,12 +1609,13 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz", - "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.1.tgz", + "integrity": "sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==", "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1644,9 +1623,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz", - "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.1.tgz", + "integrity": "sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==", "cpu": [ "arm64" ], @@ -1657,24 +1636,10 @@ "linux" ] }, - "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz", - "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-loong64-musl": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz", - "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==", + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.1.tgz", + "integrity": "sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==", "cpu": [ "loong64" ], @@ -1686,23 +1651,9 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz", - "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-ppc64-musl": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz", - "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.1.tgz", + "integrity": "sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==", "cpu": [ "ppc64" ], @@ -1714,9 +1665,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz", - "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.1.tgz", + "integrity": "sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==", "cpu": [ "riscv64" ], @@ -1728,9 +1679,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz", - "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.1.tgz", + "integrity": "sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==", "cpu": [ "riscv64" ], @@ -1742,9 +1693,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz", - "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.1.tgz", + "integrity": "sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==", "cpu": [ "s390x" ], @@ -1756,12 +1707,13 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz", - "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.1.tgz", + "integrity": "sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==", "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1769,9 +1721,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz", - "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.1.tgz", + "integrity": "sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==", "cpu": [ "x64" ], @@ -1782,24 +1734,10 @@ "linux" ] }, - "node_modules/@rollup/rollup-openbsd-x64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz", - "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ] - }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz", - "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.1.tgz", + "integrity": "sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==", "cpu": [ "arm64" ], @@ -1811,9 +1749,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz", - "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.1.tgz", + "integrity": "sha512-hpZB/TImk2FlAFAIsoElM3tLzq57uxnGYwplg6WDyAxbYczSi8O2eQ+H2Lx74504rwKtZ3N2g4bCUkiamzS6TQ==", "cpu": [ "arm64" ], @@ -1825,9 +1763,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz", - "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.1.tgz", + "integrity": "sha512-SXjv8JlbzKM0fTJidX4eVsH+Wmnp0/WcD8gJxIZyR6Gay5Qcsmdbi9zVtnbkGPG8v2vMR1AD06lGWy5FLMcG7A==", "cpu": [ "ia32" ], @@ -1838,24 +1776,10 @@ "win32" ] }, - "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz", - "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz", - "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.1.tgz", + "integrity": "sha512-StxAO/8ts62KZVRAm4JZYq9+NqNsV7RvimNK+YM7ry//zebEH6meuugqW/P5OFUCjyQgui+9fUxT6d5NShvMvA==", "cpu": [ "x64" ], @@ -1924,22 +1848,22 @@ "license": "MIT" }, "node_modules/@types/express": { - "version": "4.17.25", - "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz", - "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==", + "version": "4.17.23", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz", + "integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==", "dev": true, "license": "MIT", "dependencies": { "@types/body-parser": "*", "@types/express-serve-static-core": "^4.17.33", "@types/qs": "*", - "@types/serve-static": "^1" + "@types/serve-static": "*" } }, "node_modules/@types/express-serve-static-core": { - "version": "4.19.8", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.8.tgz", - "integrity": "sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA==", + "version": "4.19.6", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz", + "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==", "dev": true, "license": "MIT", "dependencies": { @@ -1995,13 +1919,13 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "25.3.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz", - "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==", + "version": "24.4.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.4.0.tgz", + "integrity": "sha512-gUuVEAK4/u6F9wRLznPUU4WGUacSEBDPoC2TrBkw3GAnOLHBL45QdfHOXp1kJ4ypBGLxTOB+t7NJLpKoC3gznQ==", "dev": true, "license": "MIT", "dependencies": { - "undici-types": "~7.18.0" + "undici-types": "~7.11.0" } }, "node_modules/@types/node-forge": { @@ -2029,31 +1953,9 @@ "license": "MIT" }, "node_modules/@types/send": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz", - "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, - "node_modules/@types/serve-static": { - "version": "1.15.10", - "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.10.tgz", - "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/http-errors": "*", - "@types/node": "*", - "@types/send": "<1" - } - }, - "node_modules/@types/serve-static/node_modules/@types/send": { - "version": "0.17.6", - "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz", - "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==", + "version": "0.17.5", + "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.5.tgz", + "integrity": "sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==", "dev": true, "license": "MIT", "dependencies": { @@ -2061,101 +1963,101 @@ "@types/node": "*" } }, - "node_modules/@vitejs/plugin-vue": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz", - "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==", + "node_modules/@types/serve-static": { + "version": "1.15.8", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.8.tgz", + "integrity": "sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==", "dev": true, "license": "MIT", "dependencies": { - "@rolldown/pluginutils": "1.0.0-rc.2" + "@types/http-errors": "*", + "@types/node": "*", + "@types/send": "*" + } + }, + "node_modules/@vitejs/plugin-vue": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz", + "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rolldown/pluginutils": "1.0.0-beta.29" }, "engines": { "node": "^20.19.0 || >=22.12.0" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", "vue": "^3.2.25" } }, "node_modules/@vue/compiler-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz", - "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.21.tgz", + "integrity": "sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/shared": "3.5.29", - "entities": "^7.0.1", + "@babel/parser": "^7.28.3", + "@vue/shared": "3.5.21", + "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, - "node_modules/@vue/compiler-core/node_modules/entities": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz", - "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==", - "license": "BSD-2-Clause", - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/@vue/compiler-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz", - "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.21.tgz", + "integrity": "sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-core": "3.5.21", + "@vue/shared": "3.5.21" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz", - "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.21.tgz", + "integrity": "sha512-SXlyk6I5eUGBd2v8Ie7tF6ADHE9kCR6mBEuPyH1nUZ0h6Xx6nZI29i12sJKQmzbDyr2tUHMhhTt51Z6blbkTTQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/compiler-core": "3.5.29", - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29", + "@babel/parser": "^7.28.3", + "@vue/compiler-core": "3.5.21", + "@vue/compiler-dom": "3.5.21", + "@vue/compiler-ssr": "3.5.21", + "@vue/shared": "3.5.21", "estree-walker": "^2.0.2", - "magic-string": "^0.30.21", + "magic-string": "^0.30.18", "postcss": "^8.5.6", "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz", - "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.21.tgz", + "integrity": "sha512-vKQ5olH5edFZdf5ZrlEgSO1j1DMA4u23TVK5XR1uMhvwnYvVdDF0nHXJUblL/GvzlShQbjhZZ2uvYmDlAbgo9w==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.21", + "@vue/shared": "3.5.21" } }, "node_modules/@vue/devtools-api": { - "version": "7.7.9", - "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz", - "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==", + "version": "7.7.7", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz", + "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==", "license": "MIT", "dependencies": { - "@vue/devtools-kit": "^7.7.9" + "@vue/devtools-kit": "^7.7.7" } }, "node_modules/@vue/devtools-kit": { - "version": "7.7.9", - "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz", - "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==", + "version": "7.7.7", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz", + "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==", "license": "MIT", "dependencies": { - "@vue/devtools-shared": "^7.7.9", + "@vue/devtools-shared": "^7.7.7", "birpc": "^2.3.0", "hookable": "^5.5.3", "mitt": "^3.0.1", @@ -2165,9 +2067,9 @@ } }, "node_modules/@vue/devtools-shared": { - "version": "7.7.9", - "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz", - "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==", + "version": "7.7.7", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz", + "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==", "license": "MIT", "dependencies": { "rfdc": "^1.4.1" @@ -2189,53 +2091,53 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz", - "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.21.tgz", + "integrity": "sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.29" + "@vue/shared": "3.5.21" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz", - "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.21.tgz", + "integrity": "sha512-+DplQlRS4MXfIf9gfD1BOJpk5RSyGgGXD/R+cumhe8jdjUcq/qlxDawQlSI8hCKupBlvM+3eS1se5xW+SuNAwA==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/reactivity": "3.5.21", + "@vue/shared": "3.5.21" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz", - "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.21.tgz", + "integrity": "sha512-3M2DZsOFwM5qI15wrMmNF5RJe1+ARijt2HM3TbzBbPSuBHOQpoidE+Pa+XEaVN+czbHf81ETRoG1ltztP2em8w==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/runtime-core": "3.5.29", - "@vue/shared": "3.5.29", - "csstype": "^3.2.3" + "@vue/reactivity": "3.5.21", + "@vue/runtime-core": "3.5.21", + "@vue/shared": "3.5.21", + "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz", - "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.21.tgz", + "integrity": "sha512-qr8AqgD3DJPJcGvLcJKQo2tAc8OnXRcfxhOJCPF+fcfn5bBGz7VCcO7t+qETOPxpWK1mgysXvVT/j+xWaHeMWA==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-ssr": "3.5.21", + "@vue/shared": "3.5.21" }, "peerDependencies": { - "vue": "3.5.29" + "vue": "3.5.21" } }, "node_modules/@vue/shared": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz", - "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.21.tgz", + "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==", "license": "MIT" }, "node_modules/abort-controller": { @@ -2276,9 +2178,9 @@ } }, "node_modules/acorn": { - "version": "8.16.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", - "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", + "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", "bin": { @@ -2299,9 +2201,9 @@ } }, "node_modules/ajv": { - "version": "6.14.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz", - "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==", + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "license": "MIT", "dependencies": { @@ -2444,9 +2346,9 @@ "license": "MIT" }, "node_modules/autoprefixer": { - "version": "10.4.24", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz", - "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==", + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", "dev": true, "funding": [ { @@ -2464,9 +2366,10 @@ ], "license": "MIT", "dependencies": { - "browserslist": "^4.28.1", - "caniuse-lite": "^1.0.30001766", - "fraction.js": "^5.3.4", + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, @@ -2481,9 +2384,9 @@ } }, "node_modules/b4a": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.0.tgz", - "integrity": "sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.1.tgz", + "integrity": "sha512-ZovbrBV0g6JxK5cGUF1Suby1vLfKjv4RWi8IxoaO/Mon8BDD9I21RxjHFtgQ+kskJqLAVyQZly3uMBui+vhc8Q==", "dev": true, "license": "Apache-2.0", "peerDependencies": { @@ -2503,19 +2406,12 @@ "license": "MIT" }, "node_modules/bare-events": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.2.tgz", - "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.6.1.tgz", + "integrity": "sha512-AuTJkq9XmE6Vk0FJVNq5QxETrSA/vKHarWVBG5l/JbdCL1prJemiyJqUS0jrlXO0MftuPq4m3YVYhoNc5+aE/g==", "dev": true, "license": "Apache-2.0", - "peerDependencies": { - "bare-abort-controller": "*" - }, - "peerDependenciesMeta": { - "bare-abort-controller": { - "optional": true - } - } + "optional": true }, "node_modules/base64-js": { "version": "1.5.1", @@ -2539,16 +2435,13 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz", - "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.3.tgz", + "integrity": "sha512-mcE+Wr2CAhHNWxXN/DdTI+n4gsPc5QpXpWnyCQWiQYIYZX+ZMJ8juXZgjRa/0/YPJo/NSsgW15/YgmI4nbysYw==", "dev": true, "license": "Apache-2.0", "bin": { - "baseline-browser-mapping": "dist/cli.cjs" - }, - "engines": { - "node": ">=6.0.0" + "baseline-browser-mapping": "dist/cli.js" } }, "node_modules/binary-extensions": { @@ -2565,9 +2458,9 @@ } }, "node_modules/birpc": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz", - "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz", + "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==", "license": "MIT", "funding": { "url": "https://github.com/sponsors/antfu" @@ -2601,24 +2494,24 @@ } }, "node_modules/body-parser": { - "version": "1.20.4", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz", - "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "~3.1.2", + "bytes": "3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", - "destroy": "~1.2.0", - "http-errors": "~2.0.1", - "iconv-lite": "~0.4.24", - "on-finished": "~2.4.1", - "qs": "~6.14.0", - "raw-body": "~2.5.3", + "destroy": "1.2.0", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "on-finished": "2.4.1", + "qs": "6.13.0", + "raw-body": "2.5.2", "type-is": "~1.6.18", - "unpipe": "~1.0.0" + "unpipe": "1.0.0" }, "engines": { "node": ">= 0.8", @@ -2657,9 +2550,9 @@ } }, "node_modules/browserslist": { - "version": "4.28.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", - "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.0.tgz", + "integrity": "sha512-P9go2WrP9FiPwLv3zqRD/Uoxo0RSHjzFCiQz7d4vbmwNqQFo9T9WCeP/Qn5EbcKQY6DBbkxEXNcpJOmncNrb7A==", "dev": true, "funding": [ { @@ -2677,11 +2570,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.9.0", - "caniuse-lite": "^1.0.30001759", - "electron-to-chromium": "^1.5.263", - "node-releases": "^2.0.27", - "update-browserslist-db": "^1.2.0" + "baseline-browser-mapping": "^2.8.2", + "caniuse-lite": "^1.0.30001741", + "electron-to-chromium": "^1.5.218", + "node-releases": "^2.0.21", + "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" @@ -2715,6 +2608,13 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-builder": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", + "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", + "dev": true, + "license": "MIT/X11" + }, "node_modules/buffer-crc32": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz", @@ -2811,9 +2711,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001774", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz", - "integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==", + "version": "1.0.30001741", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz", + "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==", "dev": true, "funding": [ { @@ -2849,9 +2749,9 @@ } }, "node_modules/chardet": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz", - "integrity": "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.0.tgz", + "integrity": "sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==", "dev": true, "license": "MIT" }, @@ -2881,9 +2781,9 @@ } }, "node_modules/ci-info": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz", - "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz", + "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==", "dev": true, "funding": [ { @@ -3127,9 +3027,9 @@ } }, "node_modules/cookie": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", - "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, "license": "MIT", "engines": { @@ -3137,22 +3037,22 @@ } }, "node_modules/cookie-signature": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", - "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true, "license": "MIT" }, "node_modules/copy-anything": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz", - "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", + "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", "license": "MIT", "dependencies": { - "is-what": "^5.2.0" + "is-what": "^4.1.8" }, "engines": { - "node": ">=18" + "node": ">=12.13" }, "funding": { "url": "https://github.com/sponsors/mesqueeb" @@ -3221,9 +3121,9 @@ } }, "node_modules/csstype": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", - "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, "node_modules/debug": { @@ -3244,9 +3144,9 @@ "license": "MIT" }, "node_modules/default-browser": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz", - "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz", + "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==", "dev": true, "license": "MIT", "dependencies": { @@ -3261,9 +3161,9 @@ } }, "node_modules/default-browser-id": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz", - "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.0.tgz", + "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==", "dev": true, "license": "MIT", "engines": { @@ -3321,22 +3221,19 @@ } }, "node_modules/detect-libc": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", - "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "dev": true, "license": "Apache-2.0", "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, "engines": { - "node": ">=8" + "node": ">=0.10" } }, - "node_modules/dexie": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.3.0.tgz", - "integrity": "sha512-5EeoQpJvMKHe6zWt/FSIIuRa3CWlZeIl6zKXt+Lz7BU6RoRRLgX9dZEynRfXrkLcldKYCBiz7xekTEylnie1Ug==", - "license": "Apache-2.0" - }, "node_modules/dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -3423,9 +3320,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.302", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz", - "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==", + "version": "1.5.218", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.218.tgz", + "integrity": "sha512-uwwdN0TUHs8u6iRgN8vKeWZMRll4gBkz+QMqdS7DDe49uiK68/UX92lFb61oiFPrpYZNeZIqa4bA7O6Aiasnzg==", "dev": true, "license": "ISC" }, @@ -3463,7 +3360,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -3506,9 +3402,9 @@ } }, "node_modules/esbuild": { - "version": "0.25.12", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", - "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==", + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz", + "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -3519,32 +3415,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.25.12", - "@esbuild/android-arm": "0.25.12", - "@esbuild/android-arm64": "0.25.12", - "@esbuild/android-x64": "0.25.12", - "@esbuild/darwin-arm64": "0.25.12", - "@esbuild/darwin-x64": "0.25.12", - "@esbuild/freebsd-arm64": "0.25.12", - "@esbuild/freebsd-x64": "0.25.12", - "@esbuild/linux-arm": "0.25.12", - "@esbuild/linux-arm64": "0.25.12", - "@esbuild/linux-ia32": "0.25.12", - "@esbuild/linux-loong64": "0.25.12", - "@esbuild/linux-mips64el": "0.25.12", - "@esbuild/linux-ppc64": "0.25.12", - "@esbuild/linux-riscv64": "0.25.12", - "@esbuild/linux-s390x": "0.25.12", - "@esbuild/linux-x64": "0.25.12", - "@esbuild/netbsd-arm64": "0.25.12", - "@esbuild/netbsd-x64": "0.25.12", - "@esbuild/openbsd-arm64": "0.25.12", - "@esbuild/openbsd-x64": "0.25.12", - "@esbuild/openharmony-arm64": "0.25.12", - "@esbuild/sunos-x64": "0.25.12", - "@esbuild/win32-arm64": "0.25.12", - "@esbuild/win32-ia32": "0.25.12", - "@esbuild/win32-x64": "0.25.12" + "@esbuild/aix-ppc64": "0.25.9", + "@esbuild/android-arm": "0.25.9", + "@esbuild/android-arm64": "0.25.9", + "@esbuild/android-x64": "0.25.9", + "@esbuild/darwin-arm64": "0.25.9", + "@esbuild/darwin-x64": "0.25.9", + "@esbuild/freebsd-arm64": "0.25.9", + "@esbuild/freebsd-x64": "0.25.9", + "@esbuild/linux-arm": "0.25.9", + "@esbuild/linux-arm64": "0.25.9", + "@esbuild/linux-ia32": "0.25.9", + "@esbuild/linux-loong64": "0.25.9", + "@esbuild/linux-mips64el": "0.25.9", + "@esbuild/linux-ppc64": "0.25.9", + "@esbuild/linux-riscv64": "0.25.9", + "@esbuild/linux-s390x": "0.25.9", + "@esbuild/linux-x64": "0.25.9", + "@esbuild/netbsd-arm64": "0.25.9", + "@esbuild/netbsd-x64": "0.25.9", + "@esbuild/openbsd-arm64": "0.25.9", + "@esbuild/openbsd-x64": "0.25.9", + "@esbuild/openharmony-arm64": "0.25.9", + "@esbuild/sunos-x64": "0.25.9", + "@esbuild/win32-arm64": "0.25.9", + "@esbuild/win32-ia32": "0.25.9", + "@esbuild/win32-x64": "0.25.9" } }, "node_modules/escalade": { @@ -3578,24 +3474,25 @@ } }, "node_modules/eslint": { - "version": "9.39.3", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.3.tgz", - "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==", + "version": "9.35.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz", + "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", - "@eslint/config-array": "^0.21.1", - "@eslint/config-helpers": "^0.4.2", - "@eslint/core": "^0.17.0", + "@eslint/config-array": "^0.21.0", + "@eslint/config-helpers": "^0.3.1", + "@eslint/core": "^0.15.2", "@eslint/eslintrc": "^3.3.1", - "@eslint/js": "9.39.3", - "@eslint/plugin-kit": "^0.4.1", + "@eslint/js": "9.35.0", + "@eslint/plugin-kit": "^0.3.5", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", + "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", @@ -3654,14 +3551,14 @@ } }, "node_modules/eslint-plugin-prettier": { - "version": "5.5.5", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz", - "integrity": "sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.4.tgz", + "integrity": "sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==", "dev": true, "license": "MIT", "dependencies": { - "prettier-linter-helpers": "^1.0.1", - "synckit": "^0.11.12" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.11.7" }, "engines": { "node": "^14.18.0 || >=16.0.0" @@ -3823,9 +3720,9 @@ } }, "node_modules/esquery": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz", - "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -3904,51 +3801,41 @@ "node": ">=0.8.x" } }, - "node_modules/events-universal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz", - "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "bare-events": "^2.7.0" - } - }, "node_modules/express": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz", - "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "~1.20.3", - "content-disposition": "~0.5.4", + "body-parser": "1.20.3", + "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "~0.7.1", - "cookie-signature": "~1.0.6", + "cookie": "0.7.1", + "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "~1.3.1", - "fresh": "~0.5.2", - "http-errors": "~2.0.0", + "finalhandler": "1.3.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", "merge-descriptors": "1.0.3", "methods": "~1.1.2", - "on-finished": "~2.4.1", + "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "~0.1.12", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", - "qs": "~6.14.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "~0.19.0", - "serve-static": "~1.16.2", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", - "statuses": "~2.0.1", + "statuses": "2.0.1", "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" @@ -4023,18 +3910,18 @@ } }, "node_modules/finalhandler": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", - "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", - "on-finished": "~2.4.1", + "on-finished": "2.4.1", "parseurl": "~1.3.3", - "statuses": "~2.0.2", + "statuses": "2.0.1", "unpipe": "~1.0.0" }, "engines": { @@ -4117,16 +4004,16 @@ } }, "node_modules/fraction.js": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", - "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", "dev": true, "license": "MIT", "engines": { "node": "*" }, "funding": { - "type": "github", + "type": "patreon", "url": "https://github.com/sponsors/rawify" } }, @@ -4141,9 +4028,9 @@ } }, "node_modules/fs-extra": { - "version": "11.3.3", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz", - "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==", + "version": "11.3.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.1.tgz", + "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==", "dev": true, "license": "MIT", "dependencies": { @@ -4230,10 +4117,9 @@ } }, "node_modules/glob": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", - "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", - "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me", + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "dev": true, "license": "ISC", "dependencies": { @@ -4264,37 +4150,24 @@ "node": ">= 6" } }, - "node_modules/glob/node_modules/balanced-match": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", - "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", - "dev": true, - "license": "MIT", - "engines": { - "node": "18 || 20 || >=22" - } - }, "node_modules/glob/node_modules/brace-expansion": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz", - "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { - "balanced-match": "^4.0.2" - }, - "engines": { - "node": "18 || 20 || >=22" + "balanced-match": "^1.0.0" } }, "node_modules/glob/node_modules/minimatch": { - "version": "9.0.7", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.7.tgz", - "integrity": "sha512-MOwgjc8tfrpn5QQEvjijjmDVtMw2oL88ugTevzxQnzRLm6l3fVEF2gzU0kYeYYKD8C66+IdGX6peJ4MyUlUnPg==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, "license": "ISC", "dependencies": { - "brace-expansion": "^5.0.2" + "brace-expansion": "^2.0.1" }, "engines": { "node": ">=16 || 14 >=14.17" @@ -4336,6 +4209,12 @@ "dev": true, "license": "ISC" }, + "node_modules/gsap": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz", + "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license." + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -4401,24 +4280,20 @@ } }, "node_modules/http-errors": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", - "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", "dev": true, "license": "MIT", "dependencies": { - "depd": "~2.0.0", - "inherits": "~2.0.4", - "setprototypeof": "~1.2.0", - "statuses": "~2.0.2", - "toidentifier": "~1.0.1" + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" }, "engines": { "node": ">= 0.8" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" } }, "node_modules/iconv-lite": { @@ -4466,9 +4341,9 @@ } }, "node_modules/immutable": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", - "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz", + "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==", "dev": true, "license": "MIT" }, @@ -4681,21 +4556,21 @@ } }, "node_modules/is-what": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz", - "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==", + "version": "4.1.16", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", + "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", "license": "MIT", "engines": { - "node": ">=18" + "node": ">=12.13" }, "funding": { "url": "https://github.com/sponsors/mesqueeb" } }, "node_modules/is-wsl": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz", - "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz", + "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==", "dev": true, "license": "MIT", "dependencies": { @@ -4716,9 +4591,9 @@ "license": "MIT" }, "node_modules/isbinaryfile": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.7.tgz", - "integrity": "sha512-gnWD14Jh3FzS3CPhF0AxNOJ8CxqeblPTADzI38r0wt8ZyQl5edpy75myt08EG2oKvpyiqSqsx+Wkz9vtkbTqYQ==", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.6.tgz", + "integrity": "sha512-I+NmIfBHUl+r2wcDd6JwE9yWje/PIVY/R5/CmV8dXLZd5K+L9X2klAOwfAHNnondLXkbHyTAleQAWonpTJBTtw==", "dev": true, "license": "MIT", "engines": { @@ -4769,9 +4644,9 @@ "license": "MIT" }, "node_modules/js-yaml": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", - "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, "license": "MIT", "dependencies": { @@ -4919,9 +4794,9 @@ } }, "node_modules/lodash": { - "version": "4.17.23", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", - "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true, "license": "MIT" }, @@ -4967,9 +4842,9 @@ "license": "ISC" }, "node_modules/magic-string": { - "version": "0.30.21", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", - "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "version": "0.30.19", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz", + "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==", "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" @@ -5015,6 +4890,21 @@ "node": ">= 0.6" } }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -5072,9 +4962,9 @@ } }, "node_modules/minimatch": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.4.tgz", - "integrity": "sha512-twmL+S8+7yIsE9wsqgzU3E8/LumN3M3QELrBZ20OdmQ9jB2JvW5oZtBEmft84k/Gs5CG9mqtWc6Y9vW+JEzGxw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "license": "ISC", "dependencies": { @@ -5095,11 +4985,11 @@ } }, "node_modules/minipass": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", - "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, - "license": "BlueOak-1.0.0", + "license": "ISC", "engines": { "node": ">=16 || 14 >=14.17" } @@ -5195,9 +5085,9 @@ "optional": true }, "node_modules/node-forge": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.3.tgz", - "integrity": "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", + "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", "dev": true, "license": "(BSD-3-Clause OR GPL-2.0)", "engines": { @@ -5205,9 +5095,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", - "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==", + "version": "2.0.21", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz", + "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==", "dev": true, "license": "MIT" }, @@ -5221,6 +5111,16 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz", @@ -5538,19 +5438,19 @@ } }, "node_modules/pinia": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz", - "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz", + "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==", "license": "MIT", "dependencies": { - "@vue/devtools-api": "^7.7.7" + "@vue/devtools-api": "^7.7.2" }, "funding": { "url": "https://github.com/sponsors/posva" }, "peerDependencies": { - "typescript": ">=4.5.0", - "vue": "^3.5.11" + "typescript": ">=4.4.4", + "vue": "^2.7.0 || ^3.5.11" }, "peerDependenciesMeta": { "typescript": { @@ -5630,9 +5530,9 @@ } }, "node_modules/prettier": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", - "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", "bin": { @@ -5646,9 +5546,9 @@ } }, "node_modules/prettier-linter-helpers": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz", - "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", "dev": true, "license": "MIT", "dependencies": { @@ -5700,13 +5600,13 @@ } }, "node_modules/qs": { - "version": "6.14.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz", - "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dev": true, "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.1.0" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -5716,9 +5616,9 @@ } }, "node_modules/quasar": { - "version": "2.18.6", - "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.18.6.tgz", - "integrity": "sha512-ZlK+vJXOBPSFDCNQDBDNwSI+AHoqaFPxK8ve6mhsYLhMKWI5b8zsGY9VU1xYjngO2aBvU4fvGWXy4tTbzrBk8Q==", + "version": "2.18.2", + "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.18.2.tgz", + "integrity": "sha512-SeSAamH4vgYH9alLTdVL2o1fTTwz7VZnS2+gvIwt6qsH3ndrn/tQW64sWE78VSvrHlWINYbXESVF/cvWEuTYxg==", "license": "MIT", "engines": { "node": ">= 10.18.1", @@ -5751,16 +5651,16 @@ } }, "node_modules/raw-body": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", - "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", + "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "~3.1.2", - "http-errors": "~2.0.1", - "iconv-lite": "~0.4.24", - "unpipe": "~1.0.0" + "bytes": "3.1.2", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" }, "engines": { "node": ">= 0.8" @@ -5829,9 +5729,9 @@ } }, "node_modules/readdir-glob/node_modules/minimatch": { - "version": "5.1.8", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.8.tgz", - "integrity": "sha512-7RN35vit8DeBclkofOVmBY0eDAZZQd1HzmukRdSyz95CRh8FT54eqnbj0krQr3mrHR6sfRyYkyhwBWjoV5uqlQ==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", "dev": true, "license": "ISC", "dependencies": { @@ -5912,9 +5812,9 @@ "license": "MIT" }, "node_modules/rollup": { - "version": "4.59.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz", - "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==", + "version": "4.50.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.1.tgz", + "integrity": "sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==", "dev": true, "license": "MIT", "dependencies": { @@ -5928,31 +5828,27 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.59.0", - "@rollup/rollup-android-arm64": "4.59.0", - "@rollup/rollup-darwin-arm64": "4.59.0", - "@rollup/rollup-darwin-x64": "4.59.0", - "@rollup/rollup-freebsd-arm64": "4.59.0", - "@rollup/rollup-freebsd-x64": "4.59.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", - "@rollup/rollup-linux-arm-musleabihf": "4.59.0", - "@rollup/rollup-linux-arm64-gnu": "4.59.0", - "@rollup/rollup-linux-arm64-musl": "4.59.0", - "@rollup/rollup-linux-loong64-gnu": "4.59.0", - "@rollup/rollup-linux-loong64-musl": "4.59.0", - "@rollup/rollup-linux-ppc64-gnu": "4.59.0", - "@rollup/rollup-linux-ppc64-musl": "4.59.0", - "@rollup/rollup-linux-riscv64-gnu": "4.59.0", - "@rollup/rollup-linux-riscv64-musl": "4.59.0", - "@rollup/rollup-linux-s390x-gnu": "4.59.0", - "@rollup/rollup-linux-x64-gnu": "4.59.0", - "@rollup/rollup-linux-x64-musl": "4.59.0", - "@rollup/rollup-openbsd-x64": "4.59.0", - "@rollup/rollup-openharmony-arm64": "4.59.0", - "@rollup/rollup-win32-arm64-msvc": "4.59.0", - "@rollup/rollup-win32-ia32-msvc": "4.59.0", - "@rollup/rollup-win32-x64-gnu": "4.59.0", - "@rollup/rollup-win32-x64-msvc": "4.59.0", + "@rollup/rollup-android-arm-eabi": "4.50.1", + "@rollup/rollup-android-arm64": "4.50.1", + "@rollup/rollup-darwin-arm64": "4.50.1", + "@rollup/rollup-darwin-x64": "4.50.1", + "@rollup/rollup-freebsd-arm64": "4.50.1", + "@rollup/rollup-freebsd-x64": "4.50.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.50.1", + "@rollup/rollup-linux-arm-musleabihf": "4.50.1", + "@rollup/rollup-linux-arm64-gnu": "4.50.1", + "@rollup/rollup-linux-arm64-musl": "4.50.1", + "@rollup/rollup-linux-loongarch64-gnu": "4.50.1", + "@rollup/rollup-linux-ppc64-gnu": "4.50.1", + "@rollup/rollup-linux-riscv64-gnu": "4.50.1", + "@rollup/rollup-linux-riscv64-musl": "4.50.1", + "@rollup/rollup-linux-s390x-gnu": "4.50.1", + "@rollup/rollup-linux-x64-gnu": "4.50.1", + "@rollup/rollup-linux-x64-musl": "4.50.1", + "@rollup/rollup-openharmony-arm64": "4.50.1", + "@rollup/rollup-win32-arm64-msvc": "4.50.1", + "@rollup/rollup-win32-ia32-msvc": "4.50.1", + "@rollup/rollup-win32-x64-msvc": "4.50.1", "fsevents": "~2.3.2" } }, @@ -6129,9 +6025,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz", - "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.1.tgz", + "integrity": "sha512-ffmsdbwqb3XeyR8jJR6KelIXARM9bFQe8A6Q3W4Klmwy5Ckd5gz7jgUNHo4UOqutU5Sk1DtKLbpDP0nLCg1xqQ==", "dev": true, "license": "MIT", "optional": true, @@ -6151,13 +6047,14 @@ } }, "node_modules/sass-embedded": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.97.3.tgz", - "integrity": "sha512-eKzFy13Nk+IRHhlAwP3sfuv+PzOrvzUkwJK2hdoCKYcWGSdmwFpeGpWmyewdw8EgBnsKaSBtgf/0b2K635ecSA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.92.1.tgz", + "integrity": "sha512-28YwLnF5atAhogt3E4hXzz/NB9dwKffyw08a7DEasLh94P7+aELkG3ENSHYCWB9QFN14hYNLfwr9ozUsPDhcDQ==", "dev": true, "license": "MIT", "dependencies": { "@bufbuild/protobuf": "^2.5.0", + "buffer-builder": "^0.2.0", "colorjs.io": "^0.5.0", "immutable": "^5.0.2", "rxjs": "^7.4.0", @@ -6172,30 +6069,30 @@ "node": ">=16.0.0" }, "optionalDependencies": { - "sass-embedded-all-unknown": "1.97.3", - "sass-embedded-android-arm": "1.97.3", - "sass-embedded-android-arm64": "1.97.3", - "sass-embedded-android-riscv64": "1.97.3", - "sass-embedded-android-x64": "1.97.3", - "sass-embedded-darwin-arm64": "1.97.3", - "sass-embedded-darwin-x64": "1.97.3", - "sass-embedded-linux-arm": "1.97.3", - "sass-embedded-linux-arm64": "1.97.3", - "sass-embedded-linux-musl-arm": "1.97.3", - "sass-embedded-linux-musl-arm64": "1.97.3", - "sass-embedded-linux-musl-riscv64": "1.97.3", - "sass-embedded-linux-musl-x64": "1.97.3", - "sass-embedded-linux-riscv64": "1.97.3", - "sass-embedded-linux-x64": "1.97.3", - "sass-embedded-unknown-all": "1.97.3", - "sass-embedded-win32-arm64": "1.97.3", - "sass-embedded-win32-x64": "1.97.3" + "sass-embedded-all-unknown": "1.92.1", + "sass-embedded-android-arm": "1.92.1", + "sass-embedded-android-arm64": "1.92.1", + "sass-embedded-android-riscv64": "1.92.1", + "sass-embedded-android-x64": "1.92.1", + "sass-embedded-darwin-arm64": "1.92.1", + "sass-embedded-darwin-x64": "1.92.1", + "sass-embedded-linux-arm": "1.92.1", + "sass-embedded-linux-arm64": "1.92.1", + "sass-embedded-linux-musl-arm": "1.92.1", + "sass-embedded-linux-musl-arm64": "1.92.1", + "sass-embedded-linux-musl-riscv64": "1.92.1", + "sass-embedded-linux-musl-x64": "1.92.1", + "sass-embedded-linux-riscv64": "1.92.1", + "sass-embedded-linux-x64": "1.92.1", + "sass-embedded-unknown-all": "1.92.1", + "sass-embedded-win32-arm64": "1.92.1", + "sass-embedded-win32-x64": "1.92.1" } }, "node_modules/sass-embedded-all-unknown": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.97.3.tgz", - "integrity": "sha512-t6N46NlPuXiY3rlmG6/+1nwebOBOaLFOOVqNQOC2cJhghOD4hh2kHNQQTorCsbY9S1Kir2la1/XLBwOJfui0xg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.92.1.tgz", + "integrity": "sha512-5t6/YZf+vhO3OY/49h8RCL6Cwo78luva0M+TnTM9gu9ASffRXAuOVLNKciSXa3loptyemDDS6IU5/dVH5w0KmA==", "cpu": [ "!arm", "!arm64", @@ -6206,13 +6103,13 @@ "license": "MIT", "optional": true, "dependencies": { - "sass": "1.97.3" + "sass": "1.92.1" } }, "node_modules/sass-embedded-android-arm": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.97.3.tgz", - "integrity": "sha512-cRTtf/KV/q0nzGZoUzVkeIVVFv3L/tS1w4WnlHapphsjTXF/duTxI8JOU1c/9GhRPiMdfeXH7vYNcMmtjwX7jg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.92.1.tgz", + "integrity": "sha512-4EjpVVzuksERdgAd4BqeSXFnWtWN3DSRyEIUPJ7BhcS9sfDh2Gf6miI2kNTvIQLJ2XIJynDDcEQ8a1U9KwKUTQ==", "cpu": [ "arm" ], @@ -6227,9 +6124,9 @@ } }, "node_modules/sass-embedded-android-arm64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.97.3.tgz", - "integrity": "sha512-aiZ6iqiHsUsaDx0EFbbmmA0QgxicSxVVN3lnJJ0f1RStY0DthUkquGT5RJ4TPdaZ6ebeJWkboV4bra+CP766eA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.92.1.tgz", + "integrity": "sha512-Q+UruGb7yKawHagVmVDRRKsnc4mJZvWMBnuRCu2coJo2FofyqBmXohVGXbxko97sYceA9TJTrUEx3WVKQUNCbQ==", "cpu": [ "arm64" ], @@ -6244,9 +6141,9 @@ } }, "node_modules/sass-embedded-android-riscv64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.97.3.tgz", - "integrity": "sha512-zVEDgl9JJodofGHobaM/q6pNETG69uuBIGQHRo789jloESxxZe82lI3AWJQuPmYCOG5ElfRthqgv89h3gTeLYA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.92.1.tgz", + "integrity": "sha512-nCY5btLlX7W7Jc6cCL6D2Yklpiu540EJ2G08YVGu12DrAMCBzqM347CSRf2ojp1H8jyhvmLkaFwnrJWzh+6S+w==", "cpu": [ "riscv64" ], @@ -6261,9 +6158,9 @@ } }, "node_modules/sass-embedded-android-x64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.97.3.tgz", - "integrity": "sha512-3ke0le7ZKepyXn/dKKspYkpBC0zUk/BMciyP5ajQUDy4qJwobd8zXdAq6kOkdiMB+d9UFJOmEkvgFJHl3lqwcw==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.92.1.tgz", + "integrity": "sha512-qYWR3bftJ77aLYwYDFuzDI4dcwVVixxqQxlIQWNGkHRCexj614qGSSHemr18C2eVj3mjXAQxTQxU68U7pkGPAA==", "cpu": [ "x64" ], @@ -6278,9 +6175,9 @@ } }, "node_modules/sass-embedded-darwin-arm64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.97.3.tgz", - "integrity": "sha512-fuqMTqO4gbOmA/kC5b9y9xxNYw6zDEyfOtMgabS7Mz93wimSk2M1quQaTJnL98Mkcsl2j+7shNHxIS/qpcIDDA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.92.1.tgz", + "integrity": "sha512-g2yQ3txjMYLKMjL2cW1xRO9nnV3ijf95NbX/QShtV6tiVUETZNWDsRMDEwBNGYY6PTE/UZerjJL1R/2xpQg6WA==", "cpu": [ "arm64" ], @@ -6295,9 +6192,9 @@ } }, "node_modules/sass-embedded-darwin-x64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.97.3.tgz", - "integrity": "sha512-b/2RBs/2bZpP8lMkyZ0Px0vkVkT8uBd0YXpOwK7iOwYkAT8SsO4+WdVwErsqC65vI5e1e5p1bb20tuwsoQBMVA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.92.1.tgz", + "integrity": "sha512-eH+fgxLQhTEPjZPCgPAVuX5e514Qp/4DMAUMtlNShv4cr4TD5qOp1XlsPYR/b7uE7p2cKFkUpUn/bHNqJ2ay4A==", "cpu": [ "x64" ], @@ -6312,9 +6209,9 @@ } }, "node_modules/sass-embedded-linux-arm": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.97.3.tgz", - "integrity": "sha512-2lPQ7HQQg4CKsH18FTsj2hbw5GJa6sBQgDsls+cV7buXlHjqF8iTKhAQViT6nrpLK/e8nFCoaRgSqEC8xMnXuA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.92.1.tgz", + "integrity": "sha512-cT3w8yoQTqrtZvWLJeutEGmawITDTY4J6oSVQjeDcPnnoPt0gOFxem8YMznraACXvahw/2+KJDH33BTNgiPo0A==", "cpu": [ "arm" ], @@ -6329,9 +6226,9 @@ } }, "node_modules/sass-embedded-linux-arm64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.97.3.tgz", - "integrity": "sha512-IP1+2otCT3DuV46ooxPaOKV1oL5rLjteRzf8ldZtfIEcwhSgSsHgA71CbjYgLEwMY9h4jeal8Jfv3QnedPvSjg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.92.1.tgz", + "integrity": "sha512-dNmlpGeZkry1BofhAdGFBXrpM69y9LlYuNnncf+HfsOOUtj8j0q1RwS+zb5asknhKFUOAG8GCGRY1df7Rwu35g==", "cpu": [ "arm64" ], @@ -6346,9 +6243,9 @@ } }, "node_modules/sass-embedded-linux-musl-arm": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.97.3.tgz", - "integrity": "sha512-cBTMU68X2opBpoYsSZnI321gnoaiMBEtc+60CKCclN6PCL3W3uXm8g4TLoil1hDD6mqU9YYNlVG6sJ+ZNef6Lg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.92.1.tgz", + "integrity": "sha512-nPBos6lI31ef2zQhqTZhFOU7ar4impJbLIax0XsqS269YsiCwjhk11VmUloJTpFlJuKMiVXNo7dPx+katxhD/Q==", "cpu": [ "arm" ], @@ -6363,9 +6260,9 @@ } }, "node_modules/sass-embedded-linux-musl-arm64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.97.3.tgz", - "integrity": "sha512-Lij0SdZCsr+mNRSyDZ7XtJpXEITrYsaGbOTz5e6uFLJ9bmzUbV7M8BXz2/cA7bhfpRPT7/lwRKPdV4+aR9Ozcw==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.92.1.tgz", + "integrity": "sha512-TfiEBkCyNzVoOhjHXUT+vZ6+p0ueDbvRw6f4jHdkvljZzXdXMby4wh7BU1odl69rgRTkSvYKhgbErRLDR/F7pQ==", "cpu": [ "arm64" ], @@ -6380,9 +6277,9 @@ } }, "node_modules/sass-embedded-linux-musl-riscv64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.97.3.tgz", - "integrity": "sha512-sBeLFIzMGshR4WmHAD4oIM7WJVkSoCIEwutzptFtGlSlwfNiijULp+J5hA2KteGvI6Gji35apR5aWj66wEn/iA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.92.1.tgz", + "integrity": "sha512-R+RcJA4EYpJDE9JM1GgPYgZo7x94FlxZ6jPodOQkEaZ1S9kvXVCuP5X/0PXRPhu08KJOfeMsAElzfdAjUf7KJg==", "cpu": [ "riscv64" ], @@ -6397,9 +6294,9 @@ } }, "node_modules/sass-embedded-linux-musl-x64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.97.3.tgz", - "integrity": "sha512-/oWJ+OVrDg7ADDQxRLC/4g1+Nsz1g4mkYS2t6XmyMJKFTFK50FVI2t5sOdFH+zmMp+nXHKM036W94y9m4jjEcw==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.92.1.tgz", + "integrity": "sha512-/HolYRGXJjx8nLw6oj5ZrkR7PFM7X/5kE4MYZaFMpDIPIcw3bqB2fUXLo/MYlRLsw7gBAT6hJAMBrNdKuTphfw==", "cpu": [ "x64" ], @@ -6414,9 +6311,9 @@ } }, "node_modules/sass-embedded-linux-riscv64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.97.3.tgz", - "integrity": "sha512-l3IfySApLVYdNx0Kjm7Zehte1CDPZVcldma3dZt+TfzvlAEerM6YDgsk5XEj3L8eHBCgHgF4A0MJspHEo2WNfA==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.92.1.tgz", + "integrity": "sha512-b9bxe0CMsbSsLx3nrR0cq8xpIkoAC6X36o4DGMITF3m2v3KsojC7ru9X0Gz+zUFr6rwpq/0lTNzFLNu6sPNo3w==", "cpu": [ "riscv64" ], @@ -6431,9 +6328,9 @@ } }, "node_modules/sass-embedded-linux-x64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.97.3.tgz", - "integrity": "sha512-Kwqwc/jSSlcpRjULAOVbndqEy2GBzo6OBmmuBVINWUaJLJ8Kczz3vIsDUWLfWz/kTEw9FHBSiL0WCtYLVAXSLg==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.92.1.tgz", + "integrity": "sha512-xuiK5Jp5NldW4bvlC7AuX1Wf7o0gLZ3md/hNg+bkTvxtCDgnUHtfdo8Q+xWP11bD9QX31xXFWpmUB8UDLi6XQQ==", "cpu": [ "x64" ], @@ -6448,9 +6345,9 @@ } }, "node_modules/sass-embedded-unknown-all": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.97.3.tgz", - "integrity": "sha512-/GHajyYJmvb0IABUQHbVHf1nuHPtIDo/ClMZ81IDr59wT5CNcMe7/dMNujXwWugtQVGI5UGmqXWZQCeoGnct8Q==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.92.1.tgz", + "integrity": "sha512-AT9oXvtNY4N+Nd0wvoWqq9A5HjdH/X3aUH4boQUtXyaJ/9DUwnQmBpP5Gtn028ZS8exOGBdobmmWAuigv0k/OA==", "dev": true, "license": "MIT", "optional": true, @@ -6461,13 +6358,13 @@ "!win32" ], "dependencies": { - "sass": "1.97.3" + "sass": "1.92.1" } }, "node_modules/sass-embedded-win32-arm64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.97.3.tgz", - "integrity": "sha512-RDGtRS1GVvQfMGAmVXNxYiUOvPzn9oO1zYB/XUM9fudDRnieYTcUytpNTQZLs6Y1KfJxgt5Y+giRceC92fT8Uw==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.92.1.tgz", + "integrity": "sha512-KvmpQjY9yTBMtTYz4WBqetlv9bGaDW1aStcu7MSTbH7YiSybX/9fnxlCAEQv1WlIidQhcJAiyk0Eae+LGK7cIQ==", "cpu": [ "arm64" ], @@ -6482,9 +6379,9 @@ } }, "node_modules/sass-embedded-win32-x64": { - "version": "1.97.3", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.97.3.tgz", - "integrity": "sha512-SFRa2lED9UEwV6vIGeBXeBOLKF+rowF3WmNfb/BzhxmdAsKofCXrJ8ePW7OcDVrvNEbTOGwhsReIsF5sH8fVaw==", + "version": "1.92.1", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.92.1.tgz", + "integrity": "sha512-B6Nz/GbH7Vkpb2TkQHsGcczWM5t+70VWopWF1x5V5yxLpA8ZzVQ7NTKKi+jDoVY2Efu6ZyzgT9n5KgG2kWliXA==", "cpu": [ "x64" ], @@ -6568,9 +6465,9 @@ } }, "node_modules/semver": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", - "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz", + "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==", "dev": true, "license": "ISC", "bin": { @@ -6581,30 +6478,40 @@ } }, "node_modules/send": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", - "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", - "encodeurl": "~2.0.0", + "encodeurl": "~1.0.2", "escape-html": "~1.0.3", "etag": "~1.8.1", - "fresh": "~0.5.2", - "http-errors": "~2.0.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", "mime": "1.6.0", "ms": "2.1.3", - "on-finished": "~2.4.1", + "on-finished": "2.4.1", "range-parser": "~1.2.1", - "statuses": "~2.0.2" + "statuses": "2.0.1" }, "engines": { "node": ">= 0.8.0" } }, + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/send/node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -6623,16 +6530,16 @@ } }, "node_modules/serve-static": { - "version": "1.16.3", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", - "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, "license": "MIT", "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "~0.19.1" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -6820,9 +6727,9 @@ } }, "node_modules/statuses": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", - "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", "dev": true, "license": "MIT", "engines": { @@ -6830,15 +6737,17 @@ } }, "node_modules/streamx": { - "version": "2.23.0", - "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz", - "integrity": "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==", + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.1.tgz", + "integrity": "sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==", "dev": true, "license": "MIT", "dependencies": { - "events-universal": "^1.0.0", "fast-fifo": "^1.3.2", "text-decoder": "^1.1.0" + }, + "optionalDependencies": { + "bare-events": "^2.2.0" } }, "node_modules/string_decoder": { @@ -6923,12 +6832,12 @@ } }, "node_modules/superjson": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz", - "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz", + "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==", "license": "MIT", "dependencies": { - "copy-anything": "^4" + "copy-anything": "^3.0.2" }, "engines": { "node": ">=16" @@ -6961,9 +6870,9 @@ } }, "node_modules/sync-message-port": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.2.0.tgz", - "integrity": "sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz", + "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==", "dev": true, "license": "MIT", "engines": { @@ -6971,9 +6880,9 @@ } }, "node_modules/synckit": { - "version": "0.11.12", - "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz", - "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==", + "version": "0.11.11", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz", + "integrity": "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==", "dev": true, "license": "MIT", "dependencies": { @@ -6999,9 +6908,9 @@ } }, "node_modules/terser": { - "version": "5.46.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz", - "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==", + "version": "5.44.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz", + "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -7025,21 +6934,15 @@ "license": "MIT" }, "node_modules/text-decoder": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.7.tgz", - "integrity": "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz", + "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==", "dev": true, "license": "Apache-2.0", "dependencies": { "b4a": "^1.6.4" } }, - "node_modules/three": { - "version": "0.183.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.183.1.tgz", - "integrity": "sha512-Psv6bbd3d/M/01MT2zZ+VmD0Vj2dbWTNhfe4CuSg7w5TuW96M3NOyCVuh9SZQ05CpGmD7NEcJhZw4GVjhCYxfQ==", - "license": "MIT" - }, "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", @@ -7181,16 +7084,16 @@ } }, "node_modules/ufo": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz", - "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz", + "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==", "dev": true, "license": "MIT" }, "node_modules/undici-types": { - "version": "7.18.2", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", - "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.11.0.tgz", + "integrity": "sha512-kt1ZriHTi7MU+Z/r9DOdAI3ONdaR3M3csEaRc6ewa4f4dTvX4cQCbJ4NkEn0ohE4hHtq85+PhPSTY+pO/1PwgA==", "dev": true, "license": "MIT" }, @@ -7228,9 +7131,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", - "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", + "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", "dev": true, "funding": [ { @@ -7303,13 +7206,13 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz", + "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==", "dev": true, "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -7511,490 +7414,6 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, - "node_modules/vite/node_modules/@esbuild/aix-ppc64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz", - "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/android-arm": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz", - "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/android-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz", - "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/android-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz", - "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz", - "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz", - "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz", - "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz", - "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz", - "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz", - "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ia32": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz", - "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-loong64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz", - "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-mips64el": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz", - "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==", - "cpu": [ - "mips64el" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ppc64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz", - "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-riscv64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz", - "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-s390x": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz", - "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz", - "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz", - "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/netbsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz", - "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz", - "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/openbsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz", - "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz", - "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openharmony" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/sunos-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz", - "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz", - "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-ia32": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz", - "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz", - "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/vite/node_modules/esbuild": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz", - "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=18" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.3", - "@esbuild/android-arm": "0.27.3", - "@esbuild/android-arm64": "0.27.3", - "@esbuild/android-x64": "0.27.3", - "@esbuild/darwin-arm64": "0.27.3", - "@esbuild/darwin-x64": "0.27.3", - "@esbuild/freebsd-arm64": "0.27.3", - "@esbuild/freebsd-x64": "0.27.3", - "@esbuild/linux-arm": "0.27.3", - "@esbuild/linux-arm64": "0.27.3", - "@esbuild/linux-ia32": "0.27.3", - "@esbuild/linux-loong64": "0.27.3", - "@esbuild/linux-mips64el": "0.27.3", - "@esbuild/linux-ppc64": "0.27.3", - "@esbuild/linux-riscv64": "0.27.3", - "@esbuild/linux-s390x": "0.27.3", - "@esbuild/linux-x64": "0.27.3", - "@esbuild/netbsd-arm64": "0.27.3", - "@esbuild/netbsd-x64": "0.27.3", - "@esbuild/openbsd-arm64": "0.27.3", - "@esbuild/openbsd-x64": "0.27.3", - "@esbuild/openharmony-arm64": "0.27.3", - "@esbuild/sunos-x64": "0.27.3", - "@esbuild/win32-arm64": "0.27.3", - "@esbuild/win32-ia32": "0.27.3", - "@esbuild/win32-x64": "0.27.3" - } - }, "node_modules/vite/node_modules/fdir": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", @@ -8034,16 +7453,16 @@ "license": "MIT" }, "node_modules/vue": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz", - "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.21.tgz", + "integrity": "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-sfc": "3.5.29", - "@vue/runtime-dom": "3.5.29", - "@vue/server-renderer": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.21", + "@vue/compiler-sfc": "3.5.21", + "@vue/runtime-dom": "3.5.21", + "@vue/server-renderer": "3.5.21", + "@vue/shared": "3.5.21" }, "peerDependencies": { "typescript": "*" @@ -8153,9 +7572,9 @@ "license": "MIT" }, "node_modules/vue-router": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz", - "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", + "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==", "license": "MIT", "dependencies": { "@vue/devtools-api": "^6.6.4" @@ -8164,7 +7583,7 @@ "url": "https://github.com/sponsors/posva" }, "peerDependencies": { - "vue": "^3.5.0" + "vue": "^3.2.0" } }, "node_modules/vue-router/node_modules/@vue/devtools-api": { diff --git a/frontend/package.json b/frontend/package.json index 91ed7f8..bac294a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,25 +10,19 @@ "lint": "eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"", "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore", "test": "echo \"No test specified\" && exit 0", - "dev": "npm install && quasar dev", + "dev": "quasar dev", "build": "quasar build", "postinstall": "quasar prepare" }, "dependencies": { "@quasar/extras": "^1.16.4", - "dexie": "^4.3.0", + "gsap": "^3.13.0", "pinia": "^3.0.1", "quasar": "^2.16.0", - "three": "^0.183.0", "vue": "^3.4.18", "vue-router": "^4.0.0", "vue-select": "^4.0.0-beta.6" }, - "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "^4.0.0", - "@rollup/rollup-linux-arm64-gnu": "^4.0.0", - "@rollup/rollup-linux-x64-gnu": "^4.0.0" - }, "devDependencies": { "@eslint/js": "^9.14.0", "@quasar/app-vite": "^2.1.0", @@ -46,4 +40,4 @@ "npm": ">= 6.13.4", "yarn": ">= 1.21.1" } -} \ No newline at end of file +} diff --git a/frontend/public/audio/ferien_erlebnisbericht.mp3 b/frontend/public/audio/ferien_erlebnisbericht.mp3 deleted file mode 100644 index 528cc3a..0000000 Binary files a/frontend/public/audio/ferien_erlebnisbericht.mp3 and /dev/null differ diff --git a/frontend/public/demo/photo-1506905925346-21bda4d32df4.jpeg b/frontend/public/demo/photo-1506905925346-21bda4d32df4.jpeg deleted file mode 100644 index de7378e..0000000 Binary files a/frontend/public/demo/photo-1506905925346-21bda4d32df4.jpeg and /dev/null differ diff --git a/frontend/public/demo/photo-1530103862676-de8c9debad1d.jpeg b/frontend/public/demo/photo-1530103862676-de8c9debad1d.jpeg deleted file mode 100644 index 1d998da..0000000 Binary files a/frontend/public/demo/photo-1530103862676-de8c9debad1d.jpeg and /dev/null differ diff --git a/frontend/public/demo/photo-1534067783941-51c9c23ecefd.jpeg b/frontend/public/demo/photo-1534067783941-51c9c23ecefd.jpeg deleted file mode 100644 index 1ac70a7..0000000 Binary files a/frontend/public/demo/photo-1534067783941-51c9c23ecefd.jpeg and /dev/null differ diff --git a/frontend/public/images/bg-image-1.jpg b/frontend/public/images/bg-image-1.jpg deleted file mode 100644 index 9de4148..0000000 Binary files a/frontend/public/images/bg-image-1.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-10.jpg b/frontend/public/images/bg-image-10.jpg deleted file mode 100644 index c5873d6..0000000 Binary files a/frontend/public/images/bg-image-10.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-2.jpg b/frontend/public/images/bg-image-2.jpg deleted file mode 100644 index 2a6b8a1..0000000 Binary files a/frontend/public/images/bg-image-2.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-3.jpg b/frontend/public/images/bg-image-3.jpg deleted file mode 100644 index e5036fd..0000000 Binary files a/frontend/public/images/bg-image-3.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-4.jpg b/frontend/public/images/bg-image-4.jpg deleted file mode 100644 index 5084322..0000000 Binary files a/frontend/public/images/bg-image-4.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-5.jpg b/frontend/public/images/bg-image-5.jpg deleted file mode 100644 index 2cc7fb7..0000000 Binary files a/frontend/public/images/bg-image-5.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-6.jpg b/frontend/public/images/bg-image-6.jpg deleted file mode 100644 index f0a89dc..0000000 Binary files a/frontend/public/images/bg-image-6.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-7.jpg b/frontend/public/images/bg-image-7.jpg deleted file mode 100644 index 011a4c1..0000000 Binary files a/frontend/public/images/bg-image-7.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-8.jpg b/frontend/public/images/bg-image-8.jpg deleted file mode 100644 index c5873d6..0000000 Binary files a/frontend/public/images/bg-image-8.jpg and /dev/null differ diff --git a/frontend/public/images/bg-image-9.jpg b/frontend/public/images/bg-image-9.jpg deleted file mode 100644 index 87e3fbd..0000000 Binary files a/frontend/public/images/bg-image-9.jpg and /dev/null differ diff --git a/frontend/public/videos/thumbs/3191901-uhd_3840_2160_25fps_thumb.jpg b/frontend/public/videos/thumbs/3191901-uhd_3840_2160_25fps_thumb.jpg deleted file mode 100644 index 861e913..0000000 Binary files a/frontend/public/videos/thumbs/3191901-uhd_3840_2160_25fps_thumb.jpg and /dev/null differ diff --git a/frontend/public/videos/thumbs/3326928-hd_1920_1080_24fps_thumb.jpg b/frontend/public/videos/thumbs/3326928-hd_1920_1080_24fps_thumb.jpg deleted file mode 100644 index c224754..0000000 Binary files a/frontend/public/videos/thumbs/3326928-hd_1920_1080_24fps_thumb.jpg and /dev/null differ diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js index b90233b..b2a85eb 100644 --- a/frontend/quasar.config.js +++ b/frontend/quasar.config.js @@ -3,7 +3,7 @@ import { defineConfig } from '#q-app/wrappers' -export default defineConfig((ctx) => { +export default defineConfig((/* ctx */) => { return { // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature // preFetch: true, @@ -11,10 +11,13 @@ export default defineConfig((ctx) => { // app boot file (/src/boot) // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli-vite/boot-files - boot: [], + boot: [ + ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css - css: ['app.scss'], + css: [ + 'app.scss' + ], // https://github.com/quasarframework/quasar/tree/dev/extras extras: [ @@ -33,8 +36,8 @@ export default defineConfig((ctx) => { // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build build: { target: { - browser: ['es2022', 'firefox115', 'chrome115', 'safari14'], - node: 'node20', + browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ], + node: 'node20' }, vueRouterMode: 'hash', // available values: 'hash', 'history' @@ -53,34 +56,23 @@ export default defineConfig((ctx) => { // polyfillModulePreload: true, // distDir - extendViteConf(viteConf) { - const srcDir = new URL('./src/composables', import.meta.url).pathname - viteConf.resolve.alias['composables'] = srcDir - }, + // extendViteConf (viteConf) {}, // viteVuePluginOptions: {}, - - vitePlugins: - ctx.prod && ctx.modeName !== 'capacitor' - ? [ - [ - 'vite-plugin-checker', - { - eslint: { - lintCommand: 'eslint -c ./eslint.config.js "./src/**/*.{js,mjs,cjs,vue}"', - useFlatConfig: true, - }, - }, - { server: false }, - ], - ] - : [], + + vitePlugins: [ + ['vite-plugin-checker', { + eslint: { + lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"', + useFlatConfig: true + } + }, { server: false }] + ] }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver devServer: { // https: true, - open: true, // opens browser window automatically - allowedHosts: ['app.thats-me.test'], + open: true // opens browser window automatically }, // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework @@ -98,7 +90,7 @@ export default defineConfig((ctx) => { // directives: [], // Quasar plugins - plugins: ['Dark'], + plugins: [] }, htmlVariables: { @@ -125,10 +117,10 @@ export default defineConfig((ctx) => { // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr ssr: { prodPort: 3000, // The default port that the production server should use - // (gets superseded if process.env.PORT is specified at runtime) + // (gets superseded if process.env.PORT is specified at runtime) middlewares: [ - 'render', // keep this as last one + 'render' // keep this as last one ], // extendPackageJson (json) {}, @@ -139,7 +131,7 @@ export default defineConfig((ctx) => { // manualStoreHydration: true, // manualPostHydrationTrigger: true, - pwa: false, + pwa: false // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name! // pwaExtendGenerateSWOptions (cfg) {}, @@ -148,7 +140,7 @@ export default defineConfig((ctx) => { // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa pwa: { - workboxMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest' + workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest' // swFilename: 'sw.js', // manifestFilename: 'manifest.json', // extendManifestJson (json) {}, @@ -166,7 +158,7 @@ export default defineConfig((ctx) => { // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor capacitor: { - hideSplashscreen: true, + hideSplashscreen: true }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron @@ -177,7 +169,7 @@ export default defineConfig((ctx) => { // extendPackageJson (json) {}, // Electron preload scripts (if any) from /src-electron, WITHOUT file extension - preloadScripts: ['electron-preload'], + preloadScripts: [ 'electron-preload' ], // specify the debugging port to use for the Electron app when running in development mode inspectPort: 5858, @@ -186,11 +178,13 @@ export default defineConfig((ctx) => { packager: { // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options + // OS X / Mac App Store // appBundleId: '', // appCategoryType: '', // osxSign: '', // protocol: 'myapp://path', + // Windows only // win32metadata: { ... } }, @@ -198,8 +192,8 @@ export default defineConfig((ctx) => { builder: { // https://www.electron.build/configuration/configuration - appId: 'thatsme-quasar', - }, + appId: 'thatsme-quasar' + } }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex @@ -215,7 +209,7 @@ export default defineConfig((ctx) => { * * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ] */ - extraScripts: [], - }, + extraScripts: [] + } } }) diff --git a/frontend/src-capacitor/capacitor.config.json b/frontend/src-capacitor/capacitor.config.json deleted file mode 100644 index b4e059f..0000000 --- a/frontend/src-capacitor/capacitor.config.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "appId": "media.adametz.thatsme", - "appName": "Thats Me", - "webDir": "www", - "plugins": { - "SplashScreen": { - "launchShowDuration": 0 - }, - "StatusBar": { - "overlaysWebView": false, - "style": "light", - "backgroundColor": "#000000" - } - }, - "ios": { - "contentInset": "never" - }, - "android": { - "allowMixedContent": false - } -} \ No newline at end of file diff --git a/frontend/src-capacitor/ios/.gitignore b/frontend/src-capacitor/ios/.gitignore deleted file mode 100644 index f470299..0000000 --- a/frontend/src-capacitor/ios/.gitignore +++ /dev/null @@ -1,13 +0,0 @@ -App/build -App/Pods -App/output -App/App/public -DerivedData -xcuserdata - -# Cordova plugins for Capacitor -capacitor-cordova-ios-plugins - -# Generated Config files -App/App/capacitor.config.json -App/App/config.xml diff --git a/frontend/src-capacitor/ios/App/App.xcodeproj/project.pbxproj b/frontend/src-capacitor/ios/App/App.xcodeproj/project.pbxproj deleted file mode 100644 index 43c4c01..0000000 --- a/frontend/src-capacitor/ios/App/App.xcodeproj/project.pbxproj +++ /dev/null @@ -1,424 +0,0 @@ -// !$*UTF8*$! -{ - archiveVersion = 1; - classes = { - }; - objectVersion = 48; - objects = { - -/* Begin PBXBuildFile section */ - 2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; }; - 50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; }; - 504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; }; - 504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; }; - 504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; }; - 504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; }; - 50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; }; - A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; }; -/* End PBXBuildFile section */ - -/* Begin PBXFileReference section */ - 2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = ""; }; - 50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = ""; }; - 504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; }; - 504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; - 504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; - 504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; - 504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; - 504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; - 50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = ""; }; - AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; }; - AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = ""; }; - FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = ""; }; -/* End PBXFileReference section */ - -/* Begin PBXFrameworksBuildPhase section */ - 504EC3011FED79650016851F /* Frameworks */ = { - isa = PBXFrameworksBuildPhase; - buildActionMask = 2147483647; - files = ( - A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXFrameworksBuildPhase section */ - -/* Begin PBXGroup section */ - 27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = { - isa = PBXGroup; - children = ( - AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */, - ); - name = Frameworks; - sourceTree = ""; - }; - 504EC2FB1FED79650016851F = { - isa = PBXGroup; - children = ( - 504EC3061FED79650016851F /* App */, - 504EC3051FED79650016851F /* Products */, - 7F8756D8B27F46E3366F6CEA /* Pods */, - 27E2DDA53C4D2A4D1A88CE4A /* Frameworks */, - ); - sourceTree = ""; - }; - 504EC3051FED79650016851F /* Products */ = { - isa = PBXGroup; - children = ( - 504EC3041FED79650016851F /* App.app */, - ); - name = Products; - sourceTree = ""; - }; - 504EC3061FED79650016851F /* App */ = { - isa = PBXGroup; - children = ( - 50379B222058CBB4000EE86E /* capacitor.config.json */, - 504EC3071FED79650016851F /* AppDelegate.swift */, - 504EC30B1FED79650016851F /* Main.storyboard */, - 504EC30E1FED79650016851F /* Assets.xcassets */, - 504EC3101FED79650016851F /* LaunchScreen.storyboard */, - 504EC3131FED79650016851F /* Info.plist */, - 2FAD9762203C412B000D30F8 /* config.xml */, - 50B271D01FEDC1A000F3C39B /* public */, - ); - path = App; - sourceTree = ""; - }; - 7F8756D8B27F46E3366F6CEA /* Pods */ = { - isa = PBXGroup; - children = ( - FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */, - AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */, - ); - name = Pods; - sourceTree = ""; - }; -/* End PBXGroup section */ - -/* Begin PBXNativeTarget section */ - 504EC3031FED79650016851F /* App */ = { - isa = PBXNativeTarget; - buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */; - buildPhases = ( - 6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */, - 504EC3001FED79650016851F /* Sources */, - 504EC3011FED79650016851F /* Frameworks */, - 504EC3021FED79650016851F /* Resources */, - 9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */, - ); - buildRules = ( - ); - dependencies = ( - ); - name = App; - productName = App; - productReference = 504EC3041FED79650016851F /* App.app */; - productType = "com.apple.product-type.application"; - }; -/* End PBXNativeTarget section */ - -/* Begin PBXProject section */ - 504EC2FC1FED79650016851F /* Project object */ = { - isa = PBXProject; - attributes = { - LastSwiftUpdateCheck = 0920; - LastUpgradeCheck = 2620; - TargetAttributes = { - 504EC3031FED79650016851F = { - CreatedOnToolsVersion = 9.2; - LastSwiftMigration = 1100; - ProvisioningStyle = Automatic; - }; - }; - }; - buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */; - compatibilityVersion = "Xcode 8.0"; - developmentRegion = en; - hasScannedForEncodings = 0; - knownRegions = ( - en, - Base, - ); - mainGroup = 504EC2FB1FED79650016851F; - packageReferences = ( - ); - productRefGroup = 504EC3051FED79650016851F /* Products */; - projectDirPath = ""; - projectRoot = ""; - targets = ( - 504EC3031FED79650016851F /* App */, - ); - }; -/* End PBXProject section */ - -/* Begin PBXResourcesBuildPhase section */ - 504EC3021FED79650016851F /* Resources */ = { - isa = PBXResourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */, - 50B271D11FEDC1A000F3C39B /* public in Resources */, - 504EC30F1FED79650016851F /* Assets.xcassets in Resources */, - 50379B232058CBB4000EE86E /* capacitor.config.json in Resources */, - 504EC30D1FED79650016851F /* Main.storyboard in Resources */, - 2FAD9763203C412B000D30F8 /* config.xml in Resources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXResourcesBuildPhase section */ - -/* Begin PBXShellScriptBuildPhase section */ - 6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = { - isa = PBXShellScriptBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - inputPaths = ( - "${PODS_PODFILE_DIR_PATH}/Podfile.lock", - "${PODS_ROOT}/Manifest.lock", - ); - name = "[CP] Check Pods Manifest.lock"; - outputPaths = ( - "$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt", - ); - runOnlyForDeploymentPostprocessing = 0; - shellPath = /bin/sh; - shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; - showEnvVarsInLog = 0; - }; - 9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = { - isa = PBXShellScriptBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - inputPaths = ( - ); - name = "[CP] Embed Pods Frameworks"; - outputPaths = ( - ); - runOnlyForDeploymentPostprocessing = 0; - shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n"; - showEnvVarsInLog = 0; - }; -/* End PBXShellScriptBuildPhase section */ - -/* Begin PBXSourcesBuildPhase section */ - 504EC3001FED79650016851F /* Sources */ = { - isa = PBXSourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 504EC3081FED79650016851F /* AppDelegate.swift in Sources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXSourcesBuildPhase section */ - -/* Begin PBXVariantGroup section */ - 504EC30B1FED79650016851F /* Main.storyboard */ = { - isa = PBXVariantGroup; - children = ( - 504EC30C1FED79650016851F /* Base */, - ); - name = Main.storyboard; - sourceTree = ""; - }; - 504EC3101FED79650016851F /* LaunchScreen.storyboard */ = { - isa = PBXVariantGroup; - children = ( - 504EC3111FED79650016851F /* Base */, - ); - name = LaunchScreen.storyboard; - sourceTree = ""; - }; -/* End PBXVariantGroup section */ - -/* Begin XCBuildConfiguration section */ - 504EC3141FED79650016851F /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_ANALYZER_NONNULL = YES; - CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++14"; - CLANG_CXX_LIBRARY = "libc++"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_COMMA = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_DOCUMENTATION_COMMENTS = YES; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INFINITE_RECURSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; - CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; - CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; - CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; - CLANG_WARN_STRICT_PROTOTYPES = YES; - CLANG_WARN_SUSPICIOUS_MOVE = YES; - CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - CODE_SIGN_IDENTITY = "iPhone Developer"; - COPY_PHASE_STRIP = NO; - DEBUG_INFORMATION_FORMAT = dwarf; - DEVELOPMENT_TEAM = ZLND8K74VD; - ENABLE_STRICT_OBJC_MSGSEND = YES; - ENABLE_TESTABILITY = YES; - ENABLE_USER_SCRIPT_SANDBOXING = YES; - GCC_C_LANGUAGE_STANDARD = gnu11; - GCC_DYNAMIC_NO_PIC = NO; - GCC_NO_COMMON_BLOCKS = YES; - GCC_OPTIMIZATION_LEVEL = 0; - GCC_PREPROCESSOR_DEFINITIONS = ( - "DEBUG=1", - "$(inherited)", - ); - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - IPHONEOS_DEPLOYMENT_TARGET = 26.0; - MTL_ENABLE_DEBUG_INFO = YES; - ONLY_ACTIVE_ARCH = YES; - SDKROOT = iphoneos; - STRING_CATALOG_GENERATE_SYMBOLS = YES; - SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG; - SWIFT_OPTIMIZATION_LEVEL = "-Onone"; - }; - name = Debug; - }; - 504EC3151FED79650016851F /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_ANALYZER_NONNULL = YES; - CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++14"; - CLANG_CXX_LIBRARY = "libc++"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_COMMA = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_DOCUMENTATION_COMMENTS = YES; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INFINITE_RECURSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; - CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; - CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; - CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; - CLANG_WARN_STRICT_PROTOTYPES = YES; - CLANG_WARN_SUSPICIOUS_MOVE = YES; - CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - CODE_SIGN_IDENTITY = "iPhone Developer"; - COPY_PHASE_STRIP = NO; - DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; - DEVELOPMENT_TEAM = ZLND8K74VD; - ENABLE_NS_ASSERTIONS = NO; - ENABLE_STRICT_OBJC_MSGSEND = YES; - ENABLE_USER_SCRIPT_SANDBOXING = YES; - GCC_C_LANGUAGE_STANDARD = gnu11; - GCC_NO_COMMON_BLOCKS = YES; - GCC_OPTIMIZATION_LEVEL = 2; - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - IPHONEOS_DEPLOYMENT_TARGET = 26.0; - MTL_ENABLE_DEBUG_INFO = NO; - SDKROOT = iphoneos; - STRING_CATALOG_GENERATE_SYMBOLS = YES; - SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule"; - VALIDATE_PRODUCT = YES; - }; - name = Release; - }; - 504EC3171FED79650016851F /* Debug */ = { - isa = XCBuildConfiguration; - baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 1; - ENABLE_USER_SCRIPT_SANDBOXING = NO; - INFOPLIST_FILE = App/Info.plist; - IPHONEOS_DEPLOYMENT_TARGET = 26.0; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - MARKETING_VERSION = 1.0; - OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\""; - PRODUCT_BUNDLE_IDENTIFIER = media.adametz.thatsme; - PRODUCT_NAME = "$(TARGET_NAME)"; - SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG; - SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; - }; - name = Debug; - }; - 504EC3181FED79650016851F /* Release */ = { - isa = XCBuildConfiguration; - baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 1; - ENABLE_USER_SCRIPT_SANDBOXING = NO; - GCC_OPTIMIZATION_LEVEL = s; - INFOPLIST_FILE = App/Info.plist; - IPHONEOS_DEPLOYMENT_TARGET = 26.0; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - MARKETING_VERSION = 1.0; - PRODUCT_BUNDLE_IDENTIFIER = media.adametz.thatsme; - PRODUCT_NAME = "$(TARGET_NAME)"; - SWIFT_ACTIVE_COMPILATION_CONDITIONS = ""; - SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; - }; - name = Release; - }; -/* End XCBuildConfiguration section */ - -/* Begin XCConfigurationList section */ - 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 504EC3141FED79650016851F /* Debug */, - 504EC3151FED79650016851F /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; - 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 504EC3171FED79650016851F /* Debug */, - 504EC3181FED79650016851F /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; -/* End XCConfigurationList section */ - }; - rootObject = 504EC2FC1FED79650016851F /* Project object */; -} diff --git a/frontend/src-capacitor/ios/App/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme b/frontend/src-capacitor/ios/App/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme deleted file mode 100644 index 655b7eb..0000000 --- a/frontend/src-capacitor/ios/App/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src-capacitor/ios/App/App.xcworkspace/contents.xcworkspacedata b/frontend/src-capacitor/ios/App/App.xcworkspace/contents.xcworkspacedata deleted file mode 100644 index b301e82..0000000 --- a/frontend/src-capacitor/ios/App/App.xcworkspace/contents.xcworkspacedata +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - diff --git a/frontend/src-capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/frontend/src-capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist deleted file mode 100644 index 18d9810..0000000 --- a/frontend/src-capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +++ /dev/null @@ -1,8 +0,0 @@ - - - - - IDEDidComputeMac32BitWarning - - - diff --git a/frontend/src-capacitor/ios/App/App/AppDelegate.swift b/frontend/src-capacitor/ios/App/App/AppDelegate.swift deleted file mode 100644 index c3cd83b..0000000 --- a/frontend/src-capacitor/ios/App/App/AppDelegate.swift +++ /dev/null @@ -1,49 +0,0 @@ -import UIKit -import Capacitor - -@UIApplicationMain -class AppDelegate: UIResponder, UIApplicationDelegate { - - var window: UIWindow? - - func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { - // Override point for customization after application launch. - return true - } - - func applicationWillResignActive(_ application: UIApplication) { - // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. - // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game. - } - - func applicationDidEnterBackground(_ application: UIApplication) { - // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. - // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits. - } - - func applicationWillEnterForeground(_ application: UIApplication) { - // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background. - } - - func applicationDidBecomeActive(_ application: UIApplication) { - // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface. - } - - func applicationWillTerminate(_ application: UIApplication) { - // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:. - } - - func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { - // Called when the app was launched with a url. Feel free to add additional processing here, - // but if you want the App API to support tracking app url opens, make sure to keep this call - return ApplicationDelegateProxy.shared.application(app, open: url, options: options) - } - - func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { - // Called when the app was launched with an activity, including Universal Links. - // Feel free to add additional processing here, but if you want the App API to support - // tracking app url opens, make sure to keep this call - return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler) - } - -} diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png b/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png deleted file mode 100644 index adf6ba0..0000000 Binary files a/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png and /dev/null differ diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json b/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json deleted file mode 100644 index 9b7d382..0000000 --- a/frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "images" : [ - { - "filename" : "AppIcon-512@2x.png", - "idiom" : "universal", - "platform" : "ios", - "size" : "1024x1024" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Contents.json b/frontend/src-capacitor/ios/App/App/Assets.xcassets/Contents.json deleted file mode 100644 index da4a164..0000000 --- a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Contents.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json b/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json deleted file mode 100644 index d7d96a6..0000000 --- a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "images" : [ - { - "idiom" : "universal", - "filename" : "splash-2732x2732-2.png", - "scale" : "1x" - }, - { - "idiom" : "universal", - "filename" : "splash-2732x2732-1.png", - "scale" : "2x" - }, - { - "idiom" : "universal", - "filename" : "splash-2732x2732.png", - "scale" : "3x" - } - ], - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png b/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png deleted file mode 100644 index 33ea6c9..0000000 Binary files a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png and /dev/null differ diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png b/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png deleted file mode 100644 index 33ea6c9..0000000 Binary files a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png and /dev/null differ diff --git a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png b/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png deleted file mode 100644 index 33ea6c9..0000000 Binary files a/frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png and /dev/null differ diff --git a/frontend/src-capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard b/frontend/src-capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard deleted file mode 100644 index e7ae5d7..0000000 --- a/frontend/src-capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src-capacitor/ios/App/App/Base.lproj/Main.storyboard b/frontend/src-capacitor/ios/App/App/Base.lproj/Main.storyboard deleted file mode 100644 index b44df7b..0000000 --- a/frontend/src-capacitor/ios/App/App/Base.lproj/Main.storyboard +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src-capacitor/ios/App/App/Info.plist b/frontend/src-capacitor/ios/App/App/Info.plist deleted file mode 100644 index d653c90..0000000 --- a/frontend/src-capacitor/ios/App/App/Info.plist +++ /dev/null @@ -1,49 +0,0 @@ - - - - - CFBundleDevelopmentRegion - en - CFBundleDisplayName - Thats Me - CFBundleExecutable - $(EXECUTABLE_NAME) - CFBundleIdentifier - $(PRODUCT_BUNDLE_IDENTIFIER) - CFBundleInfoDictionaryVersion - 6.0 - CFBundleName - $(PRODUCT_NAME) - CFBundlePackageType - APPL - CFBundleShortVersionString - $(MARKETING_VERSION) - CFBundleVersion - $(CURRENT_PROJECT_VERSION) - LSRequiresIPhoneOS - - UILaunchStoryboardName - LaunchScreen - UIMainStoryboardFile - Main - UIRequiredDeviceCapabilities - - armv7 - - UISupportedInterfaceOrientations - - UIInterfaceOrientationPortrait - UIInterfaceOrientationLandscapeLeft - UIInterfaceOrientationLandscapeRight - - UISupportedInterfaceOrientations~ipad - - UIInterfaceOrientationPortrait - UIInterfaceOrientationPortraitUpsideDown - UIInterfaceOrientationLandscapeLeft - UIInterfaceOrientationLandscapeRight - - UIViewControllerBasedStatusBarAppearance - - - diff --git a/frontend/src-capacitor/ios/App/Podfile b/frontend/src-capacitor/ios/App/Podfile deleted file mode 100644 index bdc47b0..0000000 --- a/frontend/src-capacitor/ios/App/Podfile +++ /dev/null @@ -1,25 +0,0 @@ -require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers' - -platform :ios, '14.0' -use_frameworks! - -# workaround to avoid Xcode caching of Pods that requires -# Product -> Clean Build Folder after new Cordova plugins installed -# Requires CocoaPods 1.6 or newer -install! 'cocoapods', :disable_input_output_paths => true - -def capacitor_pods - pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' - pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' - pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app' - pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar' -end - -target 'App' do - capacitor_pods - # Add your Pods here -end - -post_install do |installer| - assertDeploymentTarget(installer) -end diff --git a/frontend/src-capacitor/ios/App/Podfile.lock b/frontend/src-capacitor/ios/App/Podfile.lock deleted file mode 100644 index c751d9f..0000000 --- a/frontend/src-capacitor/ios/App/Podfile.lock +++ /dev/null @@ -1,34 +0,0 @@ -PODS: - - Capacitor (7.5.0): - - CapacitorCordova - - CapacitorApp (7.1.2): - - Capacitor - - CapacitorCordova (7.5.0) - - CapacitorStatusBar (7.0.5): - - Capacitor - -DEPENDENCIES: - - "Capacitor (from `../../node_modules/@capacitor/ios`)" - - "CapacitorApp (from `../../node_modules/@capacitor/app`)" - - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)" - - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)" - -EXTERNAL SOURCES: - Capacitor: - :path: "../../node_modules/@capacitor/ios" - CapacitorApp: - :path: "../../node_modules/@capacitor/app" - CapacitorCordova: - :path: "../../node_modules/@capacitor/ios" - CapacitorStatusBar: - :path: "../../node_modules/@capacitor/status-bar" - -SPEC CHECKSUMS: - Capacitor: 0a78ec6b54580fa055c11744a4e83cd7942d98ca - CapacitorApp: f01a913211780e0718dae9750442c3e23f96e106 - CapacitorCordova: ae35646a9b46cfd00d637f195509c86594026aad - CapacitorStatusBar: 6de542f202c0dd3f9d0a73b240d4c9d3dddc49b4 - -PODFILE CHECKSUM: 21111980a22580fb2d11fb4b5462ec0155a12abe - -COCOAPODS: 1.16.2 diff --git a/frontend/src-capacitor/package-lock.json b/frontend/src-capacitor/package-lock.json deleted file mode 100644 index 048149f..0000000 --- a/frontend/src-capacitor/package-lock.json +++ /dev/null @@ -1,1094 +0,0 @@ -{ - "name": "thatsme-quasar", - "version": "0.0.1", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "name": "thatsme-quasar", - "version": "0.0.1", - "dependencies": { - "@capacitor/app": "^7.0.0", - "@capacitor/cli": "^7.0.0", - "@capacitor/core": "^7.0.0", - "@capacitor/ios": "^7.5.0", - "@capacitor/status-bar": "^7.0.0" - } - }, - "node_modules/@capacitor/app": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-7.1.2.tgz", - "integrity": "sha512-d4I/oF/PRu4megL7/IGKYfe5j7yzSON1FRFgq6kH+m5kH6g7V+wyjHRLauCzGNjdRx4S+nWOumINds0qcRBtKg==", - "license": "MIT", - "peerDependencies": { - "@capacitor/core": ">=7.0.0" - } - }, - "node_modules/@capacitor/cli": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-7.5.0.tgz", - "integrity": "sha512-mlohsvLZjWrO5eAVTn1+dABNQwQawcphVp6NQVJZ3I4x2BAoNmJj53QflX7PYGUipL9gF9EM9Yiku3m1McxFZg==", - "license": "MIT", - "dependencies": { - "@ionic/cli-framework-output": "^2.2.8", - "@ionic/utils-subprocess": "^3.0.1", - "@ionic/utils-terminal": "^2.3.5", - "commander": "^12.1.0", - "debug": "^4.4.0", - "env-paths": "^2.2.0", - "fs-extra": "^11.2.0", - "kleur": "^4.1.5", - "native-run": "^2.0.3", - "open": "^8.4.0", - "plist": "^3.1.0", - "prompts": "^2.4.2", - "rimraf": "^6.0.1", - "semver": "^7.6.3", - "tar": "^7.5.3", - "tslib": "^2.8.1", - "xml2js": "^0.6.2" - }, - "bin": { - "cap": "bin/capacitor", - "capacitor": "bin/capacitor" - }, - "engines": { - "node": ">=20.0.0" - } - }, - "node_modules/@capacitor/core": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.5.0.tgz", - "integrity": "sha512-4Y4trISe2Bp3lwsoGFoQIvgX4hiZO8S1Slmbz6oFaMxAuEc4noipQGCQx974PF4glwVVe/8+H3P9iEmCXtrUgA==", - "license": "MIT", - "dependencies": { - "tslib": "^2.1.0" - } - }, - "node_modules/@capacitor/ios": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-7.5.0.tgz", - "integrity": "sha512-HlEWLjmPMSyjD8pM2FSTYF7a7aoYDdrlUoA3Ybm8OnmOaby3R7L8jpzJr96igh/i2SpsHvDI7v3sO2FhSNKCKA==", - "license": "MIT", - "peerDependencies": { - "@capacitor/core": "^7.5.0" - } - }, - "node_modules/@capacitor/status-bar": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.5.tgz", - "integrity": "sha512-d0DI/Usy4RrNiV5xfnypXNRLmWYMixC2yAUAwe6sCQQ0HF7oskDf4RpCxcZqbxnpc4H4A0qqiOSltfJLFAYshg==", - "license": "MIT", - "peerDependencies": { - "@capacitor/core": ">=7.0.0" - } - }, - "node_modules/@ionic/cli-framework-output": { - "version": "2.2.8", - "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.8.tgz", - "integrity": "sha512-TshtaFQsovB4NWRBydbNFawql6yul7d5bMiW1WYYf17hd99V6xdDdk3vtF51bw6sLkxON3bDQpWsnUc9/hVo3g==", - "license": "MIT", - "dependencies": { - "@ionic/utils-terminal": "2.3.5", - "debug": "^4.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-array": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.6.tgz", - "integrity": "sha512-0JZ1Zkp3wURnv8oq6Qt7fMPo5MpjbLoUoa9Bu2Q4PJuSDWM8H8gwF3dQO7VTeUj3/0o1IB1wGkFWZZYgUXZMUg==", - "license": "MIT", - "dependencies": { - "debug": "^4.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-fs": { - "version": "3.1.7", - "resolved": "https://registry.npmjs.org/@ionic/utils-fs/-/utils-fs-3.1.7.tgz", - "integrity": "sha512-2EknRvMVfhnyhL1VhFkSLa5gOcycK91VnjfrTB0kbqkTFCOXyXgVLI5whzq7SLrgD9t1aqos3lMMQyVzaQ5gVA==", - "license": "MIT", - "dependencies": { - "@types/fs-extra": "^8.0.0", - "debug": "^4.0.0", - "fs-extra": "^9.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-fs/node_modules/fs-extra": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", - "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", - "license": "MIT", - "dependencies": { - "at-least-node": "^1.0.0", - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@ionic/utils-object": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@ionic/utils-object/-/utils-object-2.1.6.tgz", - "integrity": "sha512-vCl7sl6JjBHFw99CuAqHljYJpcE88YaH2ZW4ELiC/Zwxl5tiwn4kbdP/gxi2OT3MQb1vOtgAmSNRtusvgxI8ww==", - "license": "MIT", - "dependencies": { - "debug": "^4.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-process": { - "version": "2.1.12", - "resolved": "https://registry.npmjs.org/@ionic/utils-process/-/utils-process-2.1.12.tgz", - "integrity": "sha512-Jqkgyq7zBs/v/J3YvKtQQiIcxfJyplPgECMWgdO0E1fKrrH8EF0QGHNJ9mJCn6PYe2UtHNS8JJf5G21e09DfYg==", - "license": "MIT", - "dependencies": { - "@ionic/utils-object": "2.1.6", - "@ionic/utils-terminal": "2.3.5", - "debug": "^4.0.0", - "signal-exit": "^3.0.3", - "tree-kill": "^1.2.2", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-stream": { - "version": "3.1.7", - "resolved": "https://registry.npmjs.org/@ionic/utils-stream/-/utils-stream-3.1.7.tgz", - "integrity": "sha512-eSELBE7NWNFIHTbTC2jiMvh1ABKGIpGdUIvARsNPMNQhxJB3wpwdiVnoBoTYp+5a6UUIww4Kpg7v6S7iTctH1w==", - "license": "MIT", - "dependencies": { - "debug": "^4.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-subprocess": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@ionic/utils-subprocess/-/utils-subprocess-3.0.1.tgz", - "integrity": "sha512-cT4te3AQQPeIM9WCwIg8ohroJ8TjsYaMb2G4ZEgv9YzeDqHZ4JpeIKqG2SoaA3GmVQ3sOfhPM6Ox9sxphV/d1A==", - "license": "MIT", - "dependencies": { - "@ionic/utils-array": "2.1.6", - "@ionic/utils-fs": "3.1.7", - "@ionic/utils-process": "2.1.12", - "@ionic/utils-stream": "3.1.7", - "@ionic/utils-terminal": "2.3.5", - "cross-spawn": "^7.0.3", - "debug": "^4.0.0", - "tslib": "^2.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@ionic/utils-terminal": { - "version": "2.3.5", - "resolved": "https://registry.npmjs.org/@ionic/utils-terminal/-/utils-terminal-2.3.5.tgz", - "integrity": "sha512-3cKScz9Jx2/Pr9ijj1OzGlBDfcmx7OMVBt4+P1uRR0SSW4cm1/y3Mo4OY3lfkuaYifMNBW8Wz6lQHbs1bihr7A==", - "license": "MIT", - "dependencies": { - "@types/slice-ansi": "^4.0.0", - "debug": "^4.0.0", - "signal-exit": "^3.0.3", - "slice-ansi": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0", - "tslib": "^2.0.1", - "untildify": "^4.0.0", - "wrap-ansi": "^7.0.0" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@isaacs/fs-minipass": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", - "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==", - "license": "ISC", - "dependencies": { - "minipass": "^7.0.4" - }, - "engines": { - "node": ">=18.0.0" - } - }, - "node_modules/@types/fs-extra": { - "version": "8.1.5", - "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.5.tgz", - "integrity": "sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==", - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, - "node_modules/@types/node": { - "version": "25.3.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz", - "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==", - "license": "MIT", - "dependencies": { - "undici-types": "~7.18.0" - } - }, - "node_modules/@types/slice-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/slice-ansi/-/slice-ansi-4.0.0.tgz", - "integrity": "sha512-+OpjSaq85gvlZAYINyzKpLeiFkSC4EsC6IIiT6v6TLSU5k5U83fHGj9Lel8oKEXM0HqgrMVCjXPDPVICtxF7EQ==", - "license": "MIT" - }, - "node_modules/@xmldom/xmldom": { - "version": "0.8.11", - "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz", - "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==", - "license": "MIT", - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/astral-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", - "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/at-least-node": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", - "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", - "license": "ISC", - "engines": { - "node": ">= 4.0.0" - } - }, - "node_modules/balanced-match": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", - "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", - "license": "MIT", - "engines": { - "node": "18 || 20 || >=22" - } - }, - "node_modules/base64-js": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, - "node_modules/big-integer": { - "version": "1.6.52", - "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", - "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", - "license": "Unlicense", - "engines": { - "node": ">=0.6" - } - }, - "node_modules/bplist-parser": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.2.tgz", - "integrity": "sha512-apC2+fspHGI3mMKj+dGevkGo/tCqVB8jMb6i+OX+E29p0Iposz07fABkRIfVUPNd5A5VbuOz1bZbnmkKLYF+wQ==", - "license": "MIT", - "dependencies": { - "big-integer": "1.6.x" - }, - "engines": { - "node": ">= 5.10.0" - } - }, - "node_modules/brace-expansion": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz", - "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==", - "license": "MIT", - "dependencies": { - "balanced-match": "^4.0.2" - }, - "engines": { - "node": "18 || 20 || >=22" - } - }, - "node_modules/buffer-crc32": { - "version": "0.2.13", - "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", - "license": "MIT", - "engines": { - "node": "*" - } - }, - "node_modules/chownr": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz", - "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==", - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=18" - } - }, - "node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "license": "MIT" - }, - "node_modules/commander": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", - "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/cross-spawn": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", - "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", - "license": "MIT", - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/debug": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", - "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", - "license": "MIT", - "dependencies": { - "ms": "^2.1.3" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/define-lazy-prop": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", - "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/elementtree": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/elementtree/-/elementtree-0.1.7.tgz", - "integrity": "sha512-wkgGT6kugeQk/P6VZ/f4T+4HB41BVgNBq5CDIZVbQ02nvTVqAiVTbskxxu3eA/X96lMlfYOwnLQpN2v5E1zDEg==", - "license": "Apache-2.0", - "dependencies": { - "sax": "1.1.4" - }, - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "license": "MIT" - }, - "node_modules/env-paths": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", - "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/fd-slicer": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", - "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", - "license": "MIT", - "dependencies": { - "pend": "~1.2.0" - } - }, - "node_modules/fs-extra": { - "version": "11.3.3", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz", - "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==", - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=14.14" - } - }, - "node_modules/glob": { - "version": "13.0.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz", - "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==", - "license": "BlueOak-1.0.0", - "dependencies": { - "minimatch": "^10.2.2", - "minipass": "^7.1.3", - "path-scurry": "^2.0.2" - }, - "engines": { - "node": "18 || 20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/graceful-fs": { - "version": "4.2.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "license": "ISC" - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "license": "ISC" - }, - "node_modules/ini": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", - "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", - "license": "ISC", - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, - "node_modules/is-docker": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", - "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", - "license": "MIT", - "bin": { - "is-docker": "cli.js" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/is-wsl": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", - "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "license": "MIT", - "dependencies": { - "is-docker": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "license": "ISC" - }, - "node_modules/jsonfile": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz", - "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==", - "license": "MIT", - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/kleur": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", - "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/lru-cache": { - "version": "11.2.6", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz", - "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==", - "license": "BlueOak-1.0.0", - "engines": { - "node": "20 || >=22" - } - }, - "node_modules/minimatch": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.3.tgz", - "integrity": "sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==", - "license": "BlueOak-1.0.0", - "dependencies": { - "brace-expansion": "^5.0.2" - }, - "engines": { - "node": "18 || 20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/minipass": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", - "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/minizlib": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz", - "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==", - "license": "MIT", - "dependencies": { - "minipass": "^7.1.2" - }, - "engines": { - "node": ">= 18" - } - }, - "node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "license": "MIT" - }, - "node_modules/native-run": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/native-run/-/native-run-2.0.3.tgz", - "integrity": "sha512-U1PllBuzW5d1gfan+88L+Hky2eZx+9gv3Pf6rNBxKbORxi7boHzqiA6QFGSnqMem4j0A9tZ08NMIs5+0m/VS1Q==", - "license": "MIT", - "dependencies": { - "@ionic/utils-fs": "^3.1.7", - "@ionic/utils-terminal": "^2.3.4", - "bplist-parser": "^0.3.2", - "debug": "^4.3.4", - "elementtree": "^0.1.7", - "ini": "^4.1.1", - "plist": "^3.1.0", - "split2": "^4.2.0", - "through2": "^4.0.2", - "tslib": "^2.6.2", - "yauzl": "^2.10.0" - }, - "bin": { - "native-run": "bin/native-run" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/open": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", - "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", - "license": "MIT", - "dependencies": { - "define-lazy-prop": "^2.0.0", - "is-docker": "^2.1.1", - "is-wsl": "^2.2.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/package-json-from-dist": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", - "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "license": "BlueOak-1.0.0" - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/path-scurry": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz", - "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==", - "license": "BlueOak-1.0.0", - "dependencies": { - "lru-cache": "^11.0.0", - "minipass": "^7.1.2" - }, - "engines": { - "node": "18 || 20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/pend": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", - "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", - "license": "MIT" - }, - "node_modules/plist": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz", - "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==", - "license": "MIT", - "dependencies": { - "@xmldom/xmldom": "^0.8.8", - "base64-js": "^1.5.1", - "xmlbuilder": "^15.1.1" - }, - "engines": { - "node": ">=10.4.0" - } - }, - "node_modules/prompts": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", - "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==", - "license": "MIT", - "dependencies": { - "kleur": "^3.0.3", - "sisteransi": "^1.0.5" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/prompts/node_modules/kleur": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", - "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/readable-stream": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", - "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", - "license": "MIT", - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/rimraf": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.1.3.tgz", - "integrity": "sha512-LKg+Cr2ZF61fkcaK1UdkH2yEBBKnYjTyWzTJT6KNPcSPaiT7HSdhtMXQuN5wkTX0Xu72KQ1l8S42rlmexS2hSA==", - "license": "BlueOak-1.0.0", - "dependencies": { - "glob": "^13.0.3", - "package-json-from-dist": "^1.0.1" - }, - "bin": { - "rimraf": "dist/esm/bin.mjs" - }, - "engines": { - "node": "20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, - "node_modules/sax": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz", - "integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg==", - "license": "ISC" - }, - "node_modules/semver": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", - "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", - "license": "ISC", - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "license": "MIT", - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/signal-exit": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", - "license": "ISC" - }, - "node_modules/sisteransi": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", - "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", - "license": "MIT" - }, - "node_modules/slice-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", - "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/slice-ansi?sponsor=1" - } - }, - "node_modules/split2": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz", - "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", - "license": "ISC", - "engines": { - "node": ">= 10.x" - } - }, - "node_modules/string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "license": "MIT", - "dependencies": { - "safe-buffer": "~5.2.0" - } - }, - "node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "license": "MIT", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "license": "MIT", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/tar": { - "version": "7.5.9", - "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz", - "integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==", - "license": "BlueOak-1.0.0", - "dependencies": { - "@isaacs/fs-minipass": "^4.0.0", - "chownr": "^3.0.0", - "minipass": "^7.1.2", - "minizlib": "^3.1.0", - "yallist": "^5.0.0" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/through2": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz", - "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==", - "license": "MIT", - "dependencies": { - "readable-stream": "3" - } - }, - "node_modules/tree-kill": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", - "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", - "license": "MIT", - "bin": { - "tree-kill": "cli.js" - } - }, - "node_modules/tslib": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", - "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" - }, - "node_modules/undici-types": { - "version": "7.18.2", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", - "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", - "license": "MIT" - }, - "node_modules/universalify": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", - "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", - "license": "MIT", - "engines": { - "node": ">= 10.0.0" - } - }, - "node_modules/untildify": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz", - "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "license": "MIT" - }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "license": "ISC", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/xml2js": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz", - "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==", - "license": "MIT", - "dependencies": { - "sax": ">=0.6.0", - "xmlbuilder": "~11.0.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/xml2js/node_modules/xmlbuilder": { - "version": "11.0.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", - "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==", - "license": "MIT", - "engines": { - "node": ">=4.0" - } - }, - "node_modules/xmlbuilder": { - "version": "15.1.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz", - "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==", - "license": "MIT", - "engines": { - "node": ">=8.0" - } - }, - "node_modules/yallist": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz", - "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==", - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=18" - } - }, - "node_modules/yauzl": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", - "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", - "license": "MIT", - "dependencies": { - "buffer-crc32": "~0.2.3", - "fd-slicer": "~1.1.0" - } - } - } -} diff --git a/frontend/src-capacitor/package.json b/frontend/src-capacitor/package.json deleted file mode 100644 index 688f5e5..0000000 --- a/frontend/src-capacitor/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "thatsme-quasar", - "version": "0.0.1", - "description": " Thats me Quasar Project", - "author": "Kevin Adametz", - "private": true, - "dependencies": { - "@capacitor/app": "^7.0.0", - "@capacitor/cli": "^7.0.0", - "@capacitor/core": "^7.0.0", - "@capacitor/ios": "^7.5.0", - "@capacitor/status-bar": "^7.0.0" - } -} \ No newline at end of file diff --git a/frontend/src/components/AddEventButton.vue b/frontend/src/components/AddEventButton.vue deleted file mode 100644 index 2a58325..0000000 --- a/frontend/src/components/AddEventButton.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - diff --git a/frontend/src/components/AppSettingsModal.vue b/frontend/src/components/AppSettingsModal.vue deleted file mode 100644 index e4443b6..0000000 --- a/frontend/src/components/AppSettingsModal.vue +++ /dev/null @@ -1,412 +0,0 @@ - - - - - diff --git a/frontend/src/components/EventPanel.vue b/frontend/src/components/EventPanel.vue deleted file mode 100644 index 5f57d38..0000000 --- a/frontend/src/components/EventPanel.vue +++ /dev/null @@ -1,1028 +0,0 @@ - - - - - diff --git a/frontend/src/components/FloatingLines.vue b/frontend/src/components/FloatingLines.vue deleted file mode 100644 index e0a00ff..0000000 --- a/frontend/src/components/FloatingLines.vue +++ /dev/null @@ -1,750 +0,0 @@ - - - - - diff --git a/frontend/src/components/GlowDot.vue b/frontend/src/components/GlowDot.vue deleted file mode 100644 index b5a154f..0000000 --- a/frontend/src/components/GlowDot.vue +++ /dev/null @@ -1,248 +0,0 @@ - - - - - diff --git a/frontend/src/components/LifeWaveSettings.vue b/frontend/src/components/LifeWaveSettings.vue deleted file mode 100644 index 2e1a665..0000000 --- a/frontend/src/components/LifeWaveSettings.vue +++ /dev/null @@ -1,829 +0,0 @@ - - - - - diff --git a/frontend/src/components/ModalCard.vue b/frontend/src/components/ModalCard.vue deleted file mode 100644 index 9cda16a..0000000 --- a/frontend/src/components/ModalCard.vue +++ /dev/null @@ -1,173 +0,0 @@ - - - - - diff --git a/frontend/src/components/TimelineView.vue b/frontend/src/components/TimelineView.vue deleted file mode 100644 index fb37b57..0000000 --- a/frontend/src/components/TimelineView.vue +++ /dev/null @@ -1,752 +0,0 @@ - - - - - diff --git a/frontend/src/components/UserMenu.vue b/frontend/src/components/UserMenu.vue deleted file mode 100644 index 2fe9b08..0000000 --- a/frontend/src/components/UserMenu.vue +++ /dev/null @@ -1,280 +0,0 @@ - - - - - diff --git a/frontend/src/components/UserMenuButton.vue b/frontend/src/components/UserMenuButton.vue deleted file mode 100644 index da96753..0000000 --- a/frontend/src/components/UserMenuButton.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/frontend/src/components/ZoomControl.vue b/frontend/src/components/ZoomControl.vue deleted file mode 100644 index c53bb45..0000000 --- a/frontend/src/components/ZoomControl.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - - - diff --git a/frontend/src/composables/useImageCache.js b/frontend/src/composables/useImageCache.js deleted file mode 100644 index 662f9d4..0000000 --- a/frontend/src/composables/useImageCache.js +++ /dev/null @@ -1,186 +0,0 @@ -import { ref, unref, watch } from 'vue' -import { db } from 'src/db' - -const THUMB_SIZE = 200 - -// In-memory URL cache: avoids repeated IndexedDB reads and blob URL creation -// Shared across all component instances -const memoryCache = new Map() - -/** - * Create a thumbnail (THUMB_SIZE x THUMB_SIZE) from a source image blob. - * Returns a new Blob (JPEG, quality 0.8). - */ -function createThumbnail(blob) { - return new Promise((resolve, reject) => { - const img = new Image() - const url = URL.createObjectURL(blob) - img.onload = () => { - const canvas = document.createElement('canvas') - canvas.width = THUMB_SIZE - canvas.height = THUMB_SIZE - - const ctx = canvas.getContext('2d') - // Cover crop: center the image - const scale = Math.max(THUMB_SIZE / img.width, THUMB_SIZE / img.height) - const w = img.width * scale - const h = img.height * scale - const x = (THUMB_SIZE - w) / 2 - const y = (THUMB_SIZE - h) / 2 - ctx.drawImage(img, x, y, w, h) - - canvas.toBlob( - (thumbBlob) => { - URL.revokeObjectURL(url) - if (thumbBlob) resolve(thumbBlob) - else reject(new Error('Canvas toBlob failed')) - }, - 'image/jpeg', - 0.8 - ) - } - img.onerror = () => { - URL.revokeObjectURL(url) - reject(new Error('Image load failed')) - } - img.src = url - }) -} - -/** - * Fetch an image from URL, cache thumbnail in IndexedDB, return blob URL. - */ -async function fetchAndCache(imageUrl, eventId) { - const response = await fetch(imageUrl) - if (!response.ok) throw new Error(`Fetch failed: ${response.status}`) - const blob = await response.blob() - - // Create thumbnail - const thumbBlob = await createThumbnail(blob) - - // Store in IndexedDB - await db.imageCache.put({ - url: imageUrl, - eventId, - type: 'thumbnail', - blob: thumbBlob, - cachedAt: Date.now() - }) - - const blobUrl = URL.createObjectURL(thumbBlob) - memoryCache.set(imageUrl, blobUrl) - return blobUrl -} - -/** - * Get a cached thumbnail blob URL from IndexedDB. - * Returns null if not cached. - */ -async function getCachedImage(imageUrl) { - // Check memory first - if (memoryCache.has(imageUrl)) return memoryCache.get(imageUrl) - - try { - const entry = await db.imageCache.get(imageUrl) - if (entry?.blob) { - const blobUrl = URL.createObjectURL(entry.blob) - memoryCache.set(imageUrl, blobUrl) - return blobUrl - } - } catch (e) { - console.warn('Image cache read failed:', e) - } - return null -} - -/** - * Composable: resolves an event's image to a displayable src. - * - Checks memory cache → IndexedDB cache → fetches & caches thumbnail. - * - Returns reactive `resolvedSrc` ref. - */ -export function useImageCache(imageUrl, eventId) { - const resolvedSrc = ref(null) - const loading = ref(false) - let requestId = 0 - - async function resolve(nextUrl = unref(imageUrl)) { - const currentRequestId = ++requestId - - if (!nextUrl) { - resolvedSrc.value = null - loading.value = false - return - } - - // 1. Memory cache (instant) - if (memoryCache.has(nextUrl)) { - resolvedSrc.value = memoryCache.get(nextUrl) - loading.value = false - return - } - - // 2. IndexedDB cache - const cached = await getCachedImage(nextUrl) - if (cached) { - if (currentRequestId !== requestId) return - resolvedSrc.value = cached - loading.value = false - return - } - - // 3. Fetch, create thumbnail, cache - loading.value = true - try { - const blobUrl = await fetchAndCache(nextUrl, unref(eventId)) - if (currentRequestId !== requestId) return - resolvedSrc.value = blobUrl - } catch (e) { - // Fallback: use original URL directly (works when online) - console.warn('Image cache failed, using direct URL:', e) - if (currentRequestId !== requestId) return - resolvedSrc.value = nextUrl - } finally { - if (currentRequestId === requestId) loading.value = false - } - } - - watch(() => unref(imageUrl), (nextUrl) => { - resolve(nextUrl) - }, { immediate: true }) - - return { resolvedSrc, loading } -} - -/** - * Resolve full-res image for EventPanel (no thumbnail, just cache check). - * Returns the original URL — browser Cache-Control handles caching. - * When offline, falls back to cached thumbnail. - */ -export async function resolveFullRes(imageUrl) { - if (!imageUrl) return null - - // If online, return original URL (browser caches via HTTP headers) - if (navigator.onLine) return imageUrl - - // Offline: try cached thumbnail as fallback - const cached = await getCachedImage(imageUrl) - return cached || imageUrl -} - -/** - * Clear all cached images for a specific event. - */ -export async function clearEventImages(eventId) { - try { - const entries = await db.imageCache.where('eventId').equals(eventId).toArray() - for (const entry of entries) { - if (memoryCache.has(entry.url)) { - URL.revokeObjectURL(memoryCache.get(entry.url)) - memoryCache.delete(entry.url) - } - } - await db.imageCache.where('eventId').equals(eventId).delete() - } catch (e) { - console.warn('Clear event images failed:', e) - } -} diff --git a/frontend/src/composables/usePanelDrag.js b/frontend/src/composables/usePanelDrag.js deleted file mode 100644 index 34c608c..0000000 --- a/frontend/src/composables/usePanelDrag.js +++ /dev/null @@ -1,141 +0,0 @@ -import { ref, onBeforeUnmount } from 'vue' - -/** - * Composable for draggable bottom-sheet panels with snap points. - * - * Default snap stops (in dvh): 100, 75, 50 - * Close threshold: below 25dvh - * - * @param {Function} onClose - called when panel is dragged below threshold - * @param {Object} options - drag/snap behavior overrides - * @returns {{ panelHeight, handleListeners, resetHeight }} - */ -export function usePanelDrag(onClose, options = {}) { - const SNAP_POINTS = options.snapPoints ?? [100, 75, 50, 25] // dvh values - const CLOSE_THRESHOLD = options.closeThreshold ?? 15 // below this → close - const INITIAL_DVH = options.initialDvh ?? 75 - const MIN_DVH = options.minDvh ?? 10 - const MAX_DVH = options.maxDvh ?? 100 - - // Current panel height in dvh (null = use CSS default) - const panelHeight = ref(null) - const isDragging = ref(false) - - let dragging = false - let startY = 0 - let startHeight = 0 - - function getViewportHeight() { - return window.innerHeight - } - - function pxToDvh(px) { - return (px / getViewportHeight()) * 100 - } - - function findNearestSnap(dvh) { - let nearest = SNAP_POINTS[0] - let minDist = Infinity - for (const snap of SNAP_POINTS) { - const dist = Math.abs(dvh - snap) - if (dist < minDist) { - minDist = dist - nearest = snap - } - } - return nearest - } - - function onPointerDown(e) { - // Only primary button / single touch - if (e.button && e.button !== 0) return - dragging = true - isDragging.value = true - - const clientY = e.touches ? e.touches[0].clientY : e.clientY - startY = clientY - - // Current height: if panelHeight is set use it, else measure from CSS - const currentDvh = panelHeight.value ?? INITIAL_DVH - startHeight = currentDvh - - document.addEventListener('pointermove', onPointerMove, { passive: false }) - document.addEventListener('pointerup', onPointerUp) - document.addEventListener('touchmove', onTouchMove, { passive: false }) - document.addEventListener('touchend', onTouchEnd) - - // Prevent text selection - e.preventDefault() - } - - function onPointerMove(e) { - if (!dragging) return - const clientY = e.clientY - handleMove(clientY) - } - - function onTouchMove(e) { - if (!dragging) return - if (e.touches.length !== 1) return - handleMove(e.touches[0].clientY) - e.preventDefault() - } - - function handleMove(clientY) { - const deltaY = clientY - startY - const deltaDvh = pxToDvh(deltaY) - const newHeight = Math.max(MIN_DVH, Math.min(MAX_DVH, startHeight - deltaDvh)) - panelHeight.value = newHeight - } - - function onPointerUp() { - finishDrag() - } - - function onTouchEnd() { - finishDrag() - } - - function finishDrag() { - if (!dragging) return - dragging = false - isDragging.value = false - - cleanup() - - const currentHeight = panelHeight.value ?? INITIAL_DVH - if (currentHeight < CLOSE_THRESHOLD) { - panelHeight.value = null - onClose() - } else { - // Snap to nearest point - panelHeight.value = findNearestSnap(currentHeight) - } - } - - function cleanup() { - document.removeEventListener('pointermove', onPointerMove) - document.removeEventListener('pointerup', onPointerUp) - document.removeEventListener('touchmove', onTouchMove) - document.removeEventListener('touchend', onTouchEnd) - } - - function resetHeight() { - panelHeight.value = null - } - - onBeforeUnmount(cleanup) - - // Event listeners to bind on the handle element - const handleListeners = { - pointerdown: onPointerDown, - touchstart: onPointerDown, - } - - return { - panelHeight, - isDragging, - handleListeners, - resetHeight, - } -} diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss index a8b507c..a0d8d1d 100644 --- a/frontend/src/css/app.scss +++ b/frontend/src/css/app.scss @@ -1,62 +1,211 @@ -:root { - --tm-accent: #737373; - --tm-accent-rgb: 115, 115, 115; - --q-primary: #737373; - --q-secondary: #737373; - --q-accent: #737373; +// Variables +$primary-color: #4f46e5; +$gradient-colors: (45deg, #8634f9, #ffab1a, #ff2fa2); +$button-radius: 4px; +$button-padding: 6px 12px; +$tooltip-radius: 4px; +$image-size: 80px; + +// Mixins +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; } -// Glass button style -.glass--button { - background: rgba(128, 128, 128, 0.1); - border: 1px solid rgba(var(--tm-accent-rgb), 0.24); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - transition: background 0.2s ease; +// Global Styles +.controls { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 500px; + margin-bottom: 10px; +} - &:hover { - background: rgba(128, 128, 128, 0.18); +.button { + padding: $button-padding; + background-color: $primary-color; + color: white; + border: none; + border-radius: $button-radius; + cursor: pointer; +} + +// Wave Visualization Styles +.visualization-container { + position: relative; + width: 100%; + height: calc(100vh - 86px); + overflow: hidden; + +} + +.gradient-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2); + background-size: 200% 200%; + animation: gradientAnimation 20s ease infinite; +} + +@keyframes gradientAnimation { + 0% { background-position: 0% 0%; } + 25% { background-position: 100% 0%; } + 50% { background-position: 100% 100%; } + 75% { background-position: 0% 100%; } + 100% { background-position: 0% 0%; } +} + +.median { + position: absolute; + top: 51.2%; + left: 0; + right: 0; + height: 1px; + background-color: rgba(255,255,255,0.3); + z-index: 1; +} + +.scroll-container { + position: relative; + width: 100%; + height: 100%; + overflow-x: auto; + overflow-y: hidden; + min-height:400px; + z-index: 2; + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.smooth-scroll { + scroll-behavior: smooth; +} + +.active { + cursor: grabbing; +} + +.spacer { + height: 100vh; +} + +.dot-tooltip { + pointer-events: none; + opacity: 1; + + .tooltip-background { + fill: rgba(0, 0, 0, 0.0); + } + + .tooltip-content { + @include flex-center; + flex-direction: column; + width: 100%; + height: 100%; + color: white; + } + + .image_container { + margin-top: 8px; + box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); + transition: box-shadow 0.25s ease-in-out; + width: $image-size; + height: $image-size; + overflow: hidden; + border-radius: 50%; + border: 2px solid white; + display: flex; + justify-content: center; + + &:hover { + box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8); + } + } + + .tooltip-image { + width: 100%; + height: auto; + display: block; + pointer-events: auto; + } + + .tooltip-title { + font-size: 14px; + font-weight: 400; + margin-bottom: 2px; + text-align: center; + text-wrap: balance; + hyphens: auto; + line-height: 1.1; + } + + .tooltip-description { + font-size: 12px; + font-weight: 300; + } + + .tooltip-arrow { + width: 1px; + height: 30px; + background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent); + } +} + +.dot { + transition: r 0.2s ease, fill 0.2s ease; + cursor: pointer; + + &:hover { + fill: rgba(255, 255, 255, 0.9); + filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); + } +} + +.tooltip-img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $tooltip-radius; +} + +// Remove Quasar card shadows globally +.q-card { + box-shadow: none !important; + + &--bordered { + box-shadow: none !important; } - - &:active { - transform: scale(0.95); + + &--flat { + box-shadow: none !important; } } -// Glass panel style — strong blur for slide-up panels -.glass--panel { - background: rgba(255, 255, 255, 0.7); - border-top: 1px solid rgba(var(--tm-accent-rgb), 0.24); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - color: #1a1a1a; +// .q-drawer{ +// background: transparent !important; - .body--dark & { - background: rgba(30, 30, 30, 0.7); - border-top-color: rgba(255, 255, 255, 0.08); - color: #f5f5f5; - } +// .q-item{ +// color: white; +// } + +// } + +.bg-white, +.q-layout__section--marginal{ + background: transparent !important; } -// GlowDot animations — soft opacity pulse on the glow aura -@keyframes glowPulse { - 0%, 100% { - opacity: 0.85; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.06); - } -} - -@keyframes ghostPulse { - 0%, 100% { - opacity: 0.5; - transform: scale(1); - } - 50% { - opacity: 0.9; - transform: scale(1.12); - } -} +footer{ + .text-primary, + .text-grey{ + color: white !important; + } +} \ No newline at end of file diff --git a/frontend/src/css/quasar.variables.scss b/frontend/src/css/quasar.variables.scss index 12caa3d..3996ce1 100644 --- a/frontend/src/css/quasar.variables.scss +++ b/frontend/src/css/quasar.variables.scss @@ -12,9 +12,9 @@ // to match your app's branding. // Tip: Use the "Theme Builder" on Quasar's documentation website. -$primary : #d946ef; -$secondary : #a855f7; -$accent : #ec4899; +$primary : #1976D2; +$secondary : #26A69A; +$accent : #9C27B0; $dark : #1D1D1D; $dark-page : #121212; diff --git a/frontend/src/db/index.js b/frontend/src/db/index.js deleted file mode 100644 index 3975f0e..0000000 --- a/frontend/src/db/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import Dexie from 'dexie' - -export const db = new Dexie('thatsMeDB') - -db.version(1).stores({ - // Events: indexed by id (PK), date for sorted queries, syncStatus for dirty tracking - events: 'id, date, updatedAt, syncStatus', - - // Sync queue: outbound mutations waiting to be pushed to server - syncQueue: '++queueId, eventId, action, createdAt', - - // Image cache: offline blob storage for thumbnails - imageCache: 'url, eventId, type, cachedAt', - - // Metadata: key-value pairs (lastSyncCursor, userId, etc.) - meta: 'key' -}) - -db.version(2).stores({ - // Events are locally namespaced by userId until the backend owns persistence. - events: 'id, userId, [userId+date], updatedAt, syncStatus', - syncQueue: '++queueId, userId, eventId, action, createdAt', - imageCache: 'url, eventId, type, cachedAt', - meta: 'key' -}) - -db.version(3).stores({ - events: 'id, userId, [userId+date], updatedAt, syncStatus', - syncQueue: '++queueId, userId, eventId, action, createdAt', - imageCache: 'url, eventId, type, cachedAt', - eventMedia: 'id, eventId, userId, createdAt', - meta: 'key' -}) diff --git a/frontend/src/layouts/LifeWaveLayout.vue b/frontend/src/layouts/LifeWaveLayout.vue deleted file mode 100644 index 87d65d4..0000000 --- a/frontend/src/layouts/LifeWaveLayout.vue +++ /dev/null @@ -1,490 +0,0 @@ - - - - - diff --git a/frontend/src/legacy/README.md b/frontend/src/legacy/README.md deleted file mode 100644 index 2717455..0000000 --- a/frontend/src/legacy/README.md +++ /dev/null @@ -1,5 +0,0 @@ -Legacy frontend screens archived on 2026-04-30. - -These files are not mounted by `frontend/src/router/routes.js`. They are kept here -as reference while the active LifeWave experience is consolidated around events, -the timeline, and Floating Lines. diff --git a/frontend/src/legacy/pages/CategorySelector.vue b/frontend/src/legacy/pages/CategorySelector.vue deleted file mode 100644 index c03e179..0000000 --- a/frontend/src/legacy/pages/CategorySelector.vue +++ /dev/null @@ -1,369 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/pages/EditPage.vue b/frontend/src/legacy/pages/EditPage.vue deleted file mode 100644 index 03af6ca..0000000 --- a/frontend/src/legacy/pages/EditPage.vue +++ /dev/null @@ -1,2037 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/pages/EntryDetailPage.vue b/frontend/src/legacy/pages/EntryDetailPage.vue deleted file mode 100644 index db1f822..0000000 --- a/frontend/src/legacy/pages/EntryDetailPage.vue +++ /dev/null @@ -1,1224 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/pages/PersonSelector.vue b/frontend/src/legacy/pages/PersonSelector.vue deleted file mode 100644 index 2254e7f..0000000 --- a/frontend/src/legacy/pages/PersonSelector.vue +++ /dev/null @@ -1,423 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/pages/TagSelector.vue b/frontend/src/legacy/pages/TagSelector.vue deleted file mode 100644 index e703d0d..0000000 --- a/frontend/src/legacy/pages/TagSelector.vue +++ /dev/null @@ -1,445 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/pages/WavePage.vue b/frontend/src/legacy/pages/WavePage.vue deleted file mode 100644 index e125986..0000000 --- a/frontend/src/legacy/pages/WavePage.vue +++ /dev/null @@ -1,488 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/legacy/utils/ConnectedDotsVisualization.ts b/frontend/src/legacy/utils/ConnectedDotsVisualization.ts deleted file mode 100644 index eba1518..0000000 --- a/frontend/src/legacy/utils/ConnectedDotsVisualization.ts +++ /dev/null @@ -1,550 +0,0 @@ -// Define interfaces -export interface DotConfig { - id: number; - value: number; - x: number; - link?: string; // URL to navigate to when dot is clicked - onClick?: () => void; // Function to call when dot is clicked - imageUrl?: string; // Image to display in tooltip - title?: string; // Optional title for the tooltip - description?: string; // Optional description for the tooltip -} -export interface Config { - totalWidth: number; - height: number; - dotRadius: number; - xUnitSize: number; - tension: number; - showGrid: boolean; - tooltipWidth: number; - tooltipHeight: number; -} -interface ControlPoints { - x1: number; - y1: number; - x2: number; - y2: number; -} -interface TooltipEdges { - leftmost: number; - rightmost: number; -} -export class ConnectedDotsVisualization { - private config: Config; - private dots: DotConfig[]; - private preloadedImages: Map = new Map(); - // DOM Elements - private scrollContainer: HTMLElement; - private svg: SVGElement; - private gridGroup: SVGGElement; - private curvePath: SVGPathElement; - private dotsGroup: SVGGElement; - private tooltipGroup: SVGGElement; - // Active tooltip - private activeTooltip: SVGElement | null = null; - constructor( - containerId: string, - dots: DotConfig[], - config?: Partial - ) { - // Use the provided dots or empty array - this.dots = dots || []; - // Calculate the total width based on dots data - const xUnitSize = config?.xUnitSize || 100; - let calculatedWidth = 0; - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - calculatedWidth = (maxX - minX + 6) * xUnitSize; - } else { - calculatedWidth = 6 * xUnitSize; // Default width if no dots - } - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: window.innerHeight, - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - // Initialize DOM elements - this.scrollContainer = document.getElementById(containerId) as HTMLElement; - - // Calculate the container height dynamically - const containerHeight = - this.scrollContainer.clientHeight || - this.scrollContainer.offsetHeight || - window.innerHeight; - - // Default configuration - this.config = { - totalWidth: calculatedWidth, - height: containerHeight, // Use the calculated container height - dotRadius: 6, - xUnitSize: xUnitSize, - tension: 0.5, - showGrid: false, - tooltipWidth: 128, - tooltipHeight: 128, - ...config, - }; - - // Create SVG elements - this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - this.gridGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.curvePath = document.createElementNS( - "http://www.w3.org/2000/svg", - "path" - ); - this.dotsGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - this.tooltipGroup = document.createElementNS( - "http://www.w3.org/2000/svg", - "g" - ); - // Initialize the visualization - this.addStyles(); - this.initializeSVG(); - this.setupEventListeners(); - this.preloadImages(); - this.render(); - } - private preloadImages(): void { - // Extract all unique image URLs from dots - const imageUrls: string[] = this.dots - .filter((dot) => dot.imageUrl) - // biome-ignore lint/style/noNonNullAssertion: - .map((dot) => dot.imageUrl!) - .filter((url, index, self) => self.indexOf(url) === index); // Remove duplicates - // Create a loading indicator (optional) - const loadingCount = { current: 0, total: imageUrls.length }; - if (imageUrls.length > 0) { - console.log(`Preloading ${imageUrls.length} images...`); - } - // Preload each image - for (const url of imageUrls) { - const img = new Image(); - // Optional loading events - img.onload = () => { - loadingCount.current++; - if (loadingCount.current === loadingCount.total) { - console.log("All images preloaded successfully"); - } - }; - img.onerror = () => { - loadingCount.current++; - console.error(`Failed to preload image: ${url}`); - }; - // Set src to start loading - img.src = url; - // Store in map for potential later use - this.preloadedImages.set(url, img); - } - } - private addStyles(): void { - // Add necessary styles for tooltips and interactions - const styleId = "connected-dots-styles"; - if (!document.getElementById(styleId)) { - const style = document.createElement("style"); - style.id = styleId; - // style.textContent = ` - - // `; - document.head.appendChild(style); - } - } - private initializeSVG(): void { - // Configure SVG - this.svg.setAttribute("width", `${this.config.totalWidth}`); - this.svg.setAttribute("height", `${this.config.height}`); - this.svg.style.overflow = "visible"; - this.scrollContainer.appendChild(this.svg); - // Configure grid group - this.gridGroup.classList.add("grid"); - this.svg.appendChild(this.gridGroup); - // Configure curve path - this.curvePath.setAttribute("fill", "none"); - this.curvePath.setAttribute("stroke", "white"); - this.curvePath.setAttribute("stroke-width", "2"); - this.curvePath.setAttribute("stroke-linecap", "round"); - this.curvePath.classList.add("curve-path"); - this.svg.appendChild(this.curvePath); - // Configure dots group - this.svg.appendChild(this.dotsGroup); - // Configure tooltip group (always on top) - this.tooltipGroup.classList.add("tooltips"); - this.svg.appendChild(this.tooltipGroup); - } - private setupEventListeners(): void { - // Event listeners removed as the controls were removed - } - private getDotX(x: number): number { - return (x + 3) * this.config.xUnitSize; - } - private getDotY(value: number): number { - const centerY = this.config.height / 1.95; - // Calculate raw Y position - // height of the amplitude - const rawY = centerY - (value / 3) * ((this.config.height / 2) * 0.6); - // Calculate minimum Y position to ensure tooltip fits - const minY = this.config.tooltipHeight + 40; // tooltip height + some padding - // Ensure Y is never less than minimum (never too high on screen) - return Math.max(rawY, minY); - } - private calculateBezierControlPoints( - dots: DotConfig[], - index: number - ): ControlPoints { - const tension = this.config.tension * 500; // Scale tension for Bezier curve Rundung Kurve - // Get current point and its neighbors - const curr = dots[index]; - const next = dots[index + 1]; - // Calculate control points for a smooth bezier curve - const x1 = this.getDotX(curr.x) + tension; - const y1 = this.getDotY(curr.value); - const x2 = this.getDotX(next.x) - tension; - const y2 = this.getDotY(next.value); - return { x1, y1, x2, y2 }; - } - private generateBezierPath(): string { - if (this.dots.length < 2) return ""; - let path = `M ${this.getDotX(this.dots[0].x)} ${this.getDotY( - this.dots[0].value - )}`; - for (let i = 0; i < this.dots.length - 1; i++) { - const { x1, y1, x2, y2 } = this.calculateBezierControlPoints( - this.dots, - i - ); - const nextX = this.getDotX(this.dots[i + 1].x); - const nextY = this.getDotY(this.dots[i + 1].value); - path += ` C ${x1} ${y1}, ${x2} ${y2}, ${nextX} ${nextY}`; - } - return path; - } - private drawGrid(): void { - // Clear previous grid - while (this.gridGroup.firstChild) { - this.gridGroup.removeChild(this.gridGroup.firstChild); - } - if (!this.config.showGrid) return; - // Horizontal grid lines - for (const value of [-3, -2, -1, 0, 1, 2, 3]) { - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", "0"); - line.setAttribute("y1", this.getDotY(value).toString()); - line.setAttribute("x2", this.config.totalWidth.toString()); - line.setAttribute("y2", this.getDotY(value).toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", "10"); - text.setAttribute("y", (this.getDotY(value) + 4).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.textContent = value.toString(); - this.gridGroup.appendChild(text); - } - // Vertical grid lines - const numVertLines = Math.ceil( - this.config.totalWidth / this.config.xUnitSize - ); - for (let i = 0; i < numVertLines; i++) { - const x = i * this.config.xUnitSize; - const xValue = i - 3; // Starting from -3 - const line = document.createElementNS( - "http://www.w3.org/2000/svg", - "line" - ); - line.setAttribute("x1", x.toString()); - line.setAttribute("y1", "0"); - line.setAttribute("x2", x.toString()); - line.setAttribute("y2", this.config.height.toString()); - line.setAttribute("stroke", "rgba(219, 39, 119, 0.4)"); - line.setAttribute("stroke-width", "1"); - this.gridGroup.appendChild(line); - if (xValue !== 0) { - const text = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - text.setAttribute("x", x.toString()); - text.setAttribute("y", (this.config.height / 2 + 20).toString()); - text.setAttribute("fill", "rgba(219, 39, 119, 0.8)"); - text.setAttribute("font-size", "12"); - text.setAttribute("text-anchor", "middle"); - text.textContent = xValue.toString(); - this.gridGroup.appendChild(text); - } - } - } - - private createTooltip(dot: DotConfig, x: number, y: number): SVGElement { - const tooltip = document.createElementNS("http://www.w3.org/2000/svg", "g"); - tooltip.classList.add("dot-tooltip"); - tooltip.setAttribute("data-dot-id", dot.id.toString()); - - // Calculate tooltip dimensions and position - const tooltipWidth = 128; // Base width for your tooltip - const tooltipHeight = (4 / 3) * tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - let tooltipY = y - tooltipHeight - 10; // Positioned above the dot - tooltipY = Math.max(tooltipY, 10); // Ensure it doesn't go above the view - - // Create background rectangle - const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - bg.setAttribute("x", tooltipX.toString()); - bg.setAttribute("y", tooltipY.toString()); - bg.setAttribute("width", tooltipWidth.toString()); - bg.setAttribute("height", tooltipHeight.toString()); - bg.setAttribute("rx", "0"); // Rounded corners - bg.classList.add("tooltip-background"); - tooltip.appendChild(bg); - - // Create foreignObject for the content - const contentContainer = document.createElementNS( - "http://www.w3.org/2000/svg", - "foreignObject" - ); - contentContainer.setAttribute("x", tooltipX.toString()); - contentContainer.setAttribute("y", tooltipY.toString()); - contentContainer.setAttribute("width", tooltipWidth.toString()); - contentContainer.setAttribute("height", tooltipHeight.toString()); - - // Create a div to contain the content - const div = document.createElement("div"); - div.classList.add("tooltip-content"); - - // Add title if available - if (dot.title) { - const title = document.createElement("div"); - title.textContent = dot.title; - title.classList.add("tooltip-title"); - div.appendChild(title); - } - - // Add description if available - if (dot.description) { - const desc = document.createElement("div"); - desc.textContent = dot.description; - desc.classList.add("tooltip-description"); - div.appendChild(desc); - } - - // Add image if available - // Create a container div - const imageContainer = document.createElement("div"); - imageContainer.classList.add("image_container"); // Add image_container class - - // Define a variable for handling case with or without link - let imgWrapper: HTMLElement; - - // if (dot.imageUrl) { - if (dot.link || dot.onClick) { - const link = document.createElement("a"); - if (dot.link) { - link.href = dot.link; - } else { - link.href = "#"; // Prevent default href for onClick - } - link.target = "_self"; // Opens in the same window - - const imgElement = document.createElement("img"); - imgElement.src = dot.imageUrl; - imgElement.classList.add("tooltip-image"); - - // Append the image element to the link - link.appendChild(imgElement); - imgWrapper = link; // Use the link as the wrapper - - // Add the event listener to the link - link.addEventListener("click", (e) => { - if (dot.onClick) { - e.preventDefault(); // Prevent default navigation - dot.onClick(); - } else if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link or onClick handler"); - throw new Error("Dot has no link or onClick handler"); - } - }); - } else { - const img = document.createElement("img"); - img.src = dot.imageUrl; - img.classList.add("tooltip-image"); - imgWrapper = img; // Use the image directly as the wrapper - } - // } else { - // console.error("Dot has no image URL"); - // throw new Error("Dot has no image URL"); - // } - - // Append imageWrapper to the container - imageContainer.appendChild(imgWrapper); - - - // Append the image container to the main div - div.appendChild(imageContainer); - - const arrow = document.createElement("div"); - - arrow.classList.add("tooltip-arrow"); - - div.appendChild(arrow); // Append the arrow to the tooltip-content div - - contentContainer.appendChild(div); - tooltip.appendChild(contentContainer); - - return tooltip; - } - - private showTooltip(dot: DotConfig, x: number, y: number): void { - // Create tooltip - const tooltip = this.createTooltip(dot, x, y); - this.tooltipGroup.appendChild(tooltip); - this.activeTooltip = tooltip; - } - private hideTooltip(): void { - // This method is kept for compatibility but doesn't hide tooltips anymore - } - private drawCurve(): void { - const pathData = this.generateBezierPath(); - this.curvePath.setAttribute("d", pathData); - } - private calculateTooltipEdges(): TooltipEdges { - let leftmost = 0; - let rightmost = 0; - let firstTooltipFound = false; - // If no dots with tooltips, return default values - if (this.dots.length === 0) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - // Calculate the leftmost and rightmost edges of all tooltips - for (const dot of this.dots) { - // Skip dots without tooltip content - if (!dot.imageUrl && !dot.title && !dot.description) { - continue; - } - const x = this.getDotX(dot.x); - const tooltipWidth = this.config.tooltipWidth; - const tooltipX = x - tooltipWidth / 2; - if (!firstTooltipFound) { - leftmost = tooltipX; - rightmost = tooltipX + tooltipWidth; - firstTooltipFound = true; - } else { - // Update leftmost and rightmost values - leftmost = Math.min(leftmost, tooltipX); - rightmost = Math.max(rightmost, tooltipX + tooltipWidth); - } - } - // If no dots with tooltips were found, use default values - if (!firstTooltipFound) { - return { leftmost: 0, rightmost: this.config.totalWidth }; - } - return { leftmost, rightmost }; - } - private drawDots(): void { - // Clear previous dots - while (this.dotsGroup.firstChild) { - this.dotsGroup.removeChild(this.dotsGroup.firstChild); - } - // Clear previous tooltips - while (this.tooltipGroup.firstChild) { - this.tooltipGroup.removeChild(this.tooltipGroup.firstChild); - } - for (const dot of this.dots) { - const x = this.getDotX(dot.x); - const y = this.getDotY(dot.value); - const circle = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle" - ); - circle.setAttribute("cx", x.toString()); - circle.setAttribute("cy", y.toString()); - circle.setAttribute("r", this.config.dotRadius.toString()); - circle.setAttribute("fill", "white"); - circle.setAttribute("data-dot-id", dot.id.toString()); - circle.classList.add("dot"); - // Always show tooltip if it has content - if (dot.imageUrl || dot.title || dot.description) { - this.showTooltip(dot, x, y); - } - // Click event for navigation or custom function - if (dot.link || dot.onClick) { - circle.addEventListener("click", () => { - if (dot.onClick) { - dot.onClick(); - } else if (dot.link) { - window.location.href = dot.link; - } else { - console.error("Dot has no link or onClick handler"); - throw new Error("Dot has no link or onClick handler"); - } - }); - } - this.dotsGroup.appendChild(circle); - } - } - public render(): void { - this.drawGrid(); - this.drawCurve(); - this.drawDots(); - // Calculate tooltip edges and set SVG width - const { leftmost, rightmost } = this.calculateTooltipEdges(); - // Set the SVG width based on the rightmost tooltip edge - if (rightmost > 0) { - // Add some padding - const padding = 40; - this.config.totalWidth = rightmost + padding; - this.svg.setAttribute("width", `${this.config.totalWidth}`); - // Update grid width - this.drawGrid(); - } - } - // Public API methods for external use - public updateDots(newDots: DotConfig[]): void { - this.dots = newDots; - // Initial width calculation based on dot positions (for grid) - if (this.dots.length > 0) { - // Find the minimum and maximum x values - const minX = Math.min(...this.dots.map((dot) => dot.x)); - const maxX = Math.max(...this.dots.map((dot) => dot.x)); - // Calculate width based on the range of x values - // Add padding on both sides (3 units on each side) - this.config.totalWidth = (maxX - minX + 6) * this.config.xUnitSize; - } - // Render will calculate the tooltip edges and update the SVG width - this.render(); -} - public updateConfig(newConfig: Partial): void { - this.config = { ...this.config, ...newConfig }; - this.render(); - } - public resize(): void { - const containerHeight = this.scrollContainer.clientHeight || this.scrollContainer.offsetHeight || window.innerHeight; - this.config.height = containerHeight; - this.svg.setAttribute("height", `${this.config.height}`); - this.render(); - } -} diff --git a/frontend/src/legacy/utils/editFormOptions.js b/frontend/src/legacy/utils/editFormOptions.js deleted file mode 100644 index 0679b42..0000000 --- a/frontend/src/legacy/utils/editFormOptions.js +++ /dev/null @@ -1,238 +0,0 @@ -// Form options and data for EditPage component - -// Main categories with their subcategories -export const categoryStructure = [ - { - label: 'Career', - value: 'career', - subcategories: [ - { label: 'Promotion', value: 'career-promotion' }, - { label: 'Retirement', value: 'career-retirement' }, - { label: 'Career Changes', value: 'career-changes' } - ] - }, - { - label: 'Education', - value: 'education', - subcategories: [ - { label: 'Graduation', value: 'education-graduation' }, - { label: 'Schooling', value: 'education-schooling' } - ] - }, - { - label: 'Awards', - value: 'awards', - subcategories: [] - }, - { - label: 'Personal Celebrations', - value: 'personal-celebrations', - subcategories: [ - { label: 'Birthday', value: 'birthday' }, - { label: 'Anniversary', value: 'anniversary' } - ] - }, - { - label: 'Relationships', - value: 'relationships', - subcategories: [ - { label: 'Engagement', value: 'relationships-engagement' }, - { label: 'Marriage', value: 'relationships-marriage' }, - { label: 'Divorce', value: 'relationships-divorce' } - ] - }, - { - label: 'Parenthood', - value: 'parenthood', - subcategories: [ - { label: 'Pregnancy', value: 'parenthood-pregnancy' }, - { label: 'Birth', value: 'parenthood-birth' }, - { label: 'Adoption', value: 'parenthood-adoption' } - ] - }, - { - label: 'Loss & Passing', - value: 'passing', - subcategories: [ - { label: 'Funeral', value: 'passing-funeral' } - ] - }, - { - label: 'Festivities', - value: 'festivities', - subcategories: [ - { label: 'Christmas', value: 'festivities-christmas' }, - { label: 'Thanksgiving', value: 'festivities-thanksgiving' }, - { label: 'New Year', value: 'festivities-new-year' }, - { label: 'Easter', value: 'festivities-easter' }, - { label: 'Holidays', value: 'festivities-holidays' } - ] - }, - { - label: 'Social Events', - value: 'social-events', - subcategories: [ - { label: 'Reunions', value: 'reunions' }, - { label: 'Concerts', value: 'concerts' }, - { label: 'Sports', value: 'sports' }, - { label: 'Festivals', value: 'festivals' } - ] - }, - { - label: 'Community', - value: 'community', - subcategories: [ - { label: 'Charity', value: 'charity' }, - { label: 'Community Service', value: 'community-service' } - ] - }, - { - label: 'Health', - value: 'health', - subcategories: [ - { label: 'Surgery', value: 'health-surgery' }, - { label: 'Illness', value: 'health-illness' }, - { label: 'Recovery', value: 'health-recovery' }, - { label: 'Transplants', value: 'health-transplants' }, - { label: 'Mental Health', value: 'health-mental-health' } - ] - }, - { - label: 'Religious & Spiritual', - value: 'religious', - subcategories: [ - { label: 'Baptism', value: 'religious-baptism' }, - { label: 'Bar/Bat Mitzvah', value: 'religious-bar-bat-mitzvah' }, - { label: 'Communion', value: 'religious-communion' }, - { label: 'Confirmation', value: 'religious-confirmation' }, - { label: 'Pilgrimage', value: 'religious-pilgrimage' } - ] - }, - { - label: 'Travel & Adventure', - value: 'travel', - subcategories: [ - { label: 'Travel', value: 'travel-general' }, - { label: 'Vacation', value: 'vacation' }, - { label: 'Adventure', value: 'adventure' } - ] - }, - { - label: 'Life Changes', - value: 'life-changes', - subcategories: [ - { label: 'Moving', value: 'moving' }, - { label: 'License', value: 'license' }, - { label: 'Voting', value: 'voting' }, - { label: 'Citizenship', value: 'citizenship' } - ] - }, - { - label: 'Milestones', - value: 'milestones', - subcategories: [] - } -] - -// Flattened category options for backward compatibility and simple select usage -export const categoryOptions = categoryStructure.reduce((acc, category) => { - // Add main category if it has no subcategories - if (category.subcategories.length === 0) { - acc.push({ label: category.label, value: category.value }) - } else { - // Add subcategories with main category prefix - category.subcategories.forEach(sub => { - acc.push({ - label: `${category.label} - ${sub.label}`, - value: sub.value, - mainCategory: category.value, - subcategory: sub.value - }) - }) - } - return acc -}, []) - -// Helper functions for category management -export const getCategoryStructure = () => categoryStructure - -export const getMainCategories = () => { - return categoryStructure.map(cat => ({ - label: cat.label, - value: cat.value - })) -} - -export const getSubcategories = (mainCategoryValue) => { - const mainCategory = categoryStructure.find(cat => cat.value === mainCategoryValue) - return mainCategory ? mainCategory.subcategories : [] -} - -export const getCategoryByValue = (value) => { - return categoryOptions.find(cat => cat.value === value) -} - -export const getMainCategoryFromValue = (value) => { - const category = getCategoryByValue(value) - return category ? category.mainCategory : null -} - -export const tagOptions = [ - // Emotions - 'happy', 'sad', 'exciting', 'stressful', 'memorable', 'important', - 'fun', 'challenging', 'rewarding', 'disappointing', 'surprising', - 'life-changing', 'routine', 'special', 'difficult', 'joyful', - 'overwhelming', 'peaceful', 'anxious', 'proud', 'grateful', - 'emotional', 'touching', 'inspiring', 'motivating', 'healing', - - // Significance - 'milestone', 'achievement', 'breakthrough', 'turning-point', - 'first-time', 'last-time', 'once-in-a-lifetime', 'unexpected', - 'planned', 'spontaneous', 'tradition', 'new-experience', - - // Social - 'family', 'friends', 'colleagues', 'community', 'solo', - 'group', 'intimate', 'public', 'private', 'celebration', - - // Intensity - 'intense', 'mild', 'dramatic', 'subtle', 'overwhelming', - 'gradual', 'sudden', 'anticipated', 'shocking', 'gentle', - - // Time-related - 'brief', 'extended', 'momentary', 'lasting', 'temporary', - 'permanent', 'seasonal', 'annual', 'weekly', 'daily' -] - -export const personOptions = [ - 'Anna Mueller', - 'Max Schmidt', - 'Sarah Johnson', - 'Michael Weber', - 'Lisa Anderson', - 'Thomas Brown', - 'Julia Martinez', - 'David Wilson', - 'Emma Garcia', - 'Robert Davis' -] - -export const defaultFormData = { - keyImage: null, - keyImageUrl: '', - additionalImages: [], - additionalImageUrls: [], - level: 0, - categories: [], - headline: '', - subheadline: '', - text: '', - tags: [], - location: '', - date: '', - time: '', - audioFiles: [], - audioRecordings: [], - videoFiles: [], - videoRecordings: [], - relatedPersons: [] -} \ No newline at end of file diff --git a/frontend/_src/pages/CategorySelector.vue b/frontend/src/pages/CategorySelector.vue similarity index 100% rename from frontend/_src/pages/CategorySelector.vue rename to frontend/src/pages/CategorySelector.vue diff --git a/frontend/_src/pages/EditPage.vue b/frontend/src/pages/EditPage.vue similarity index 100% rename from frontend/_src/pages/EditPage.vue rename to frontend/src/pages/EditPage.vue diff --git a/frontend/_src/pages/EntryDetailPage.vue b/frontend/src/pages/EntryDetailPage.vue similarity index 96% rename from frontend/_src/pages/EntryDetailPage.vue rename to frontend/src/pages/EntryDetailPage.vue index db1f822..4c5dfa0 100644 --- a/frontend/_src/pages/EntryDetailPage.vue +++ b/frontend/src/pages/EntryDetailPage.vue @@ -66,6 +66,7 @@
+

Description

{{ entry.description }}

@@ -93,7 +94,6 @@