Add textures for sprites

Images are uploaded to a content-addressed blob endpoint and stored as
data/textures/<sha256>.<ext>; the project only keeps the file name. The
sprite points at a texture asset through an ordinary property of the new
kind `asset`, so instance overrides, "Apply to container", "Reset to
asset", undo and `Set property` work without any extra code. The new kind
also replaces the ad-hoc asset picker the graph nodes faked as an enum.

Import goes through + -> Texture, drag & drop onto the canvas or Ctrl+V.
Images wider than 2048px are downscaled client-side and re-encoded to
WebP if needed, because nginx caps uploads at 1MB; an image that already
fits is uploaded byte for byte so pixel art is never resampled.

The sprite colour default changes from red to white, since colour tints
the texture multiplicatively and a tint of white shows an image as it is.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5 committed 2026-09-08 13:43:08 +02:00
1 parent 6168df41f8
commit 5a6af74e44
47 files changed
+1995 -110

No files matched your search

+54
View File
@@ -0,0 +1,54 @@
import { statusMessage } from './http';
import type { StoredTexture, TextureStore, UploadedTexture } from './TextureStore';
/**
* Talks to the texture routes of `api/index.php`. Routing goes through the `r` query parameter
* (`?r=textures/{file}`) for the same reason as `HttpProjectStore`: nginx does not pass
* PATH_INFO to PHP.
*/
export class HttpTextureStore implements TextureStore {
constructor(private readonly endpoint: string) {}
async upload(bytes: Blob | ArrayBuffer, type: string): Promise<UploadedTexture> {
return this.request<UploadedTexture>('POST', 'textures', { bytes, type });
}
async list(): Promise<StoredTexture[]> {
return this.request<StoredTexture[]>('GET', 'textures');
}
async delete(file: string): Promise<void> {
await this.request<void>('DELETE', `textures/${encodeURIComponent(file)}`);
}
/** One round trip; every failure becomes an `Error` carrying the server's message. */
private async request<T>(
method: string,
route: string,
payload?: { bytes: Blob | ArrayBuffer; type: string },
): Promise<T> {
const url = `${this.endpoint}?r=${encodeURIComponent(route)}`;
const response = await fetch(url, {
method,
headers: payload ? { 'Content-Type': payload.type } : {},
body: payload?.bytes,
});
if (response.status === 204) return undefined as T;
const text = await response.text();
let data: unknown;
try {
data = text ? JSON.parse(text) : null;
} catch {
// An upload is exactly the request nginx refuses before PHP sees it, and its answer is
// an HTML page. Explain such a failure from the status; a successful non-JSON body is a defect.
if (response.ok) throw new Error(`API ${method} ${route}: invalid JSON (${response.status})`);
data = null;
}
if (!response.ok) {
const message =
(data as { error?: string } | null)?.error ?? statusMessage(response.status, response.statusText);
throw new Error(`API ${method} ${route}: ${message} (${response.status})`);
}
return data as T;
}
}