Kevin Adametz
c62234e1ca
# Conflicts: # .gitignore # backend/vite.config.js # frontend/package-lock.json
320 lines
8.3 KiB
TypeScript
320 lines
8.3 KiB
TypeScript
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;
|
|
});
|
|
});
|