feat(infinite-canvas): add infinite canvas component with drag and zoom functionality

- Implemented InfiniteCanvas.vue for rendering an infinite canvas with drag and zoom capabilities.
- Created useInfiniteCanvas composable for managing canvas state and interactions.
- Added useImagePreloader composable for preloading images and videos.
- Introduced constants for physics, touch interactions, viewport settings, and zoom defaults.
- Developed utility functions for touch handling and media type detection.
- Defined TypeScript types for canvas items, grid items, and composables.
- Registered components and composables in the Nuxt module.
- Added screenshot generation functionality for content files.
- Updated package.json to include capture-website dependency.
This commit is contained in:
2025-09-05 11:01:11 +02:00
parent 97d7cddaa5
commit 5dadb20607
21 changed files with 2031 additions and 13 deletions

View File

@@ -45,10 +45,15 @@ defineShortcuts({
t: () => toggleDark({ clientX: window.innerWidth / 2, clientY: window.innerHeight }),
})
const isMobile = computed(() => {
if (!import.meta.client)
return false
return isMobileDevice(navigator.userAgent, window.innerWidth)
})
const activeElement = useActiveElement()
watch(openMessageModal, async () => {
await nextTick()
if (activeElement.value instanceof HTMLElement) {
if (activeElement.value instanceof HTMLElement && isMobile.value) {
activeElement.value.blur()
}
})