BuboBubo/buboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing problems

Browse Source
This commit is contained in:
Raphaël Forment
2026-01-21 18:46:00 +01:00
parent 67b68f1c8a
commit d32a86fea8
5 changed files with 77 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/Palette.svelte
View File

@@ -1,24 +1,24 @@
<script lang="ts">
import { Square, Type, Image, Music, Video, Globe } from 'lucide-svelte';
import { state } from './state.svelte';
import { state as appState } from './state.svelte';
let locked = $derived(state.locked);
let locked = $derived(appState.locked);
let imageInput: HTMLInputElement;
let soundInput: HTMLInputElement;
let videoInput: HTMLInputElement;
let imageInput = $state<HTMLInputElement>(undefined!);
let soundInput = $state<HTMLInputElement>(undefined!);
let videoInput = $state<HTMLInputElement>(undefined!);
function getSpawnPosition() {
return {
x: state.snap(-state.viewport.x / state.viewport.zoom + 400),
y: state.snap(-state.viewport.y / state.viewport.zoom + 300)
x: appState.snap(-appState.viewport.x / appState.viewport.zoom + 400),
y: appState.snap(-appState.viewport.y / appState.viewport.zoom + 300)
};
}
function addTile() {
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
appState.addItem({
id,
html: '',
css: '',
@@ -27,15 +27,15 @@
width: 200,
height: 200,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
}
function addText() {
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
appState.addItem({
id,
html: '<p>Text</p>',
css: `p {
@@ -48,9 +48,9 @@
width: 200,
height: 50,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
}
function addEmbed() {
@@ -58,7 +58,7 @@
if (!url) return;
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
appState.addItem({
id,
html: `<iframe src="${url}" frameborder="0" allowfullscreen></iframe>`,
css: `iframe {
@@ -71,9 +71,9 @@
width: 640,
height: 480,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
}
function handleImageChange(e: Event) {
@@ -105,8 +105,8 @@
const img = document.createElement('img');
img.onload = () => {
state.addAsset(assetId, { blob: file, url, filename: file.name });
state.addItem({
appState.addAsset(assetId, { blob: file, url, filename: file.name });
appState.addItem({
id,
assetId,
html: `<img src="${url}" alt="" />`,
@@ -120,9 +120,9 @@
width: img.naturalWidth,
height: img.naturalHeight,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
};
img.src = url;
}
@@ -133,8 +133,8 @@
const url = URL.createObjectURL(file);
const pos = getSpawnPosition();
state.addAsset(assetId, { blob: file, url, filename: file.name });
state.addItem({
appState.addAsset(assetId, { blob: file, url, filename: file.name });
appState.addItem({
id,
assetId,
html: `<audio src="${url}" controls></audio>`,
@@ -146,9 +146,9 @@
width: 300,
height: 54,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
}
function addVideoItem(file: File) {
@@ -159,8 +159,8 @@
const video = document.createElement('video');
video.onloadedmetadata = () => {
state.addAsset(assetId, { blob: file, url, filename: file.name });
state.addItem({
appState.addAsset(assetId, { blob: file, url, filename: file.name });
appState.addItem({
id,
assetId,
html: `<video src="${url}" controls></video>`,
@@ -173,9 +173,9 @@
width: video.videoWidth || 640,
height: video.videoHeight || 360,
rotation: 0,
zIndex: state.maxZIndex + 1
zIndex: appState.maxZIndex + 1
});
state.select(id);
appState.select(id);
};
video.src = url;
}