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

Snap to grid and flag export

Browse Source
This commit is contained in:
Raphaël Forment
2025-12-05 00:44:08 +01:00
parent 0a3d2eca77
commit 67b68f1c8a
6 changed files with 62 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/lib/Palette.svelte
View File

@@ -8,14 +8,22 @@
let soundInput: HTMLInputElement;
let videoInput: HTMLInputElement;
function getSpawnPosition() {
return {
x: state.snap(-state.viewport.x / state.viewport.zoom + 400),
y: state.snap(-state.viewport.y / state.viewport.zoom + 300)
};
}
function addTile() {
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
id,
html: '',
css: '',
x: -state.viewport.x / state.viewport.zoom + 400,
y: -state.viewport.y / state.viewport.zoom + 300,
x: pos.x,
y: pos.y,
width: 200,
height: 200,
rotation: 0,
@@ -26,6 +34,7 @@
function addText() {
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
id,
html: '<p>Text</p>',
@@ -34,8 +43,8 @@
font-size: 24px;
font-family: 'Departure Mono', monospace;
}`,
x: -state.viewport.x / state.viewport.zoom + 400,
y: -state.viewport.y / state.viewport.zoom + 300,
x: pos.x,
y: pos.y,
width: 200,
height: 50,
rotation: 0,
@@ -48,6 +57,7 @@
const url = prompt('Enter URL to embed:');
if (!url) return;
const id = crypto.randomUUID();
const pos = getSpawnPosition();
state.addItem({
id,
html: `<iframe src="${url}" frameborder="0" allowfullscreen></iframe>`,
@@ -56,8 +66,8 @@
height: 100%;
border: none;
}`,
x: -state.viewport.x / state.viewport.zoom + 400,
y: -state.viewport.y / state.viewport.zoom + 300,
x: pos.x,
y: pos.y,
width: 640,
height: 480,
rotation: 0,
@@ -91,8 +101,7 @@
const id = crypto.randomUUID();
const assetId = crypto.randomUUID();
const url = URL.createObjectURL(file);
const x = -state.viewport.x / state.viewport.zoom + 400;
const y = -state.viewport.y / state.viewport.zoom + 300;
const pos = getSpawnPosition();
const img = document.createElement('img');
img.onload = () => {
@@ -106,8 +115,8 @@
height: 100%;
object-fit: contain;
}`,
x,
y,
x: pos.x,
y: pos.y,
width: img.naturalWidth,
height: img.naturalHeight,
rotation: 0,
@@ -122,8 +131,7 @@
const id = crypto.randomUUID();
const assetId = crypto.randomUUID();
const url = URL.createObjectURL(file);
const x = -state.viewport.x / state.viewport.zoom + 400;
const y = -state.viewport.y / state.viewport.zoom + 300;
const pos = getSpawnPosition();
state.addAsset(assetId, { blob: file, url, filename: file.name });
state.addItem({
@@ -133,8 +141,8 @@
css: `audio {
width: 100%;
}`,
x,
y,
x: pos.x,
y: pos.y,
width: 300,
height: 54,
rotation: 0,
@@ -147,8 +155,7 @@
const id = crypto.randomUUID();
const assetId = crypto.randomUUID();
const url = URL.createObjectURL(file);
const x = -state.viewport.x / state.viewport.zoom + 400;
const y = -state.viewport.y / state.viewport.zoom + 300;
const pos = getSpawnPosition();
const video = document.createElement('video');
video.onloadedmetadata = () => {
@@ -161,8 +168,8 @@
width: 100%;
height: 100%;
}`,
x,
y,
x: pos.x,
y: pos.y,
width: video.videoWidth || 640,
height: video.videoHeight || 360,
rotation: 0,