fragment-tools 0.2.8 → 0.2.10

package/src/types/renderers.d.ts

@@ -0,0 +1,100 @@
+import type p5 from 'p5';
+import type * as THREE from 'three';
+import type { Frag } from '@fragment/lib/gl';
+
+export type Rendering = '2d' | 'fragment' | 'p5' | 'p5-webgl' | 'three';
+
+type Params = Record<string, any>;
+
+export type RendererParams = {
+	id: number;
+	canvas: HTMLCanvasElement;
+	container: HTMLElement;
+	width: number;
+	height: number;
+	pixelRatio: number;
+};
+
+export type InitParams<P extends Params = Params> = P;
+
+type RenderingsMountParams = {
+	'2d': { canvas: HTMLCanvasElement; context: CanvasRenderingContext2D };
+	fragment: { canvas: HTMLCanvasElement; frag: Frag };
+	p5: { canvas: HTMLCanvasElement; p: p5 };
+	'p5-webgl': { canvas: HTMLCanvasElement; p: p5 };
+	three: {
+		canvas: HTMLCanvasElement;
+		scene: THREE['Scene'];
+		renderer: THREE['WebGLRenderer'];
+	};
+};
+
+export type MountParams<R extends Rendering | Params> =
+	R extends keyof RenderingsMountParams ? RenderingsMountParams[R] : R;
+
+export type MountParams2DRenderer = MountParams<'2d'>;
+export type MountParamsFragmentRenderer = MountParams<'fragment'>;
+export type MountParamsP5Renderer = MountParams<'p5'>;
+export type MountParamsP5GLRenderer = MountParams<'p5-webgl'>;
+export type MountParamsThreeRenderer = MountParams<'three'>;
+
+export type RendererInit<P extends Params = InitParams> = (
+	params: Pick<RendererParams, 'canvas' | 'width' | 'height' | 'pixelRatio'>,
+) => InitParams<P>;
+
+export type RendererOnMountPreview<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<
+		RendererParams,
+		'id' | 'canvas' | 'container' | 'width' | 'height' | 'pixelRatio'
+	> &
+		InitParams<P>,
+) => MountParams<R>;
+
+export type RendererOnResizePreview<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<
+		RendererParams,
+		'id' | 'canvas' | 'width' | 'height' | 'pixelRatio'
+	> &
+		InitParams<P> &
+		MountParams<R>,
+) => void;
+
+export type RendererOnBeforeUpdatePreview<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<RendererParams, 'id' | 'canvas' | 'container'> &
+		InitParams<P> &
+		MountParams<R>,
+) => void;
+
+export type RendererOnAfterUpdatePreview<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<RendererParams, 'id' | 'canvas' | 'container'> &
+		InitParams<P> &
+		MountParams<R>,
+) => void;
+
+export type RendererOnDestroyPreview<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<RendererParams, 'id'> & InitParams<P> & MountParams<R>,
+) => void;
+
+export type RendererResize<
+	P extends Params = InitParams,
+	R extends Rendering | Params = Params,
+> = (
+	params: Pick<RendererParams, 'width' | 'height' | 'pixelRatio'> &
+		InitParams<P> &
+		MountParams<R>,
+) => void;

package/src/types/sketch.d.ts

@@ -0,0 +1,45 @@
+import type { Props } from './props';
+import type { Rendering, MountParams, RendererParams } from './renderers';
+import type { Frag } from './gl';
+
+export type Load<R extends Rendering | object> = (
+	params: RendererParams &
+		MountParams<R> & {
+			publicPath: string;
+		},
+) => Promise<void> | void;
+
+export type Init<R extends Rendering | object> = (
+	params: RendererParams &
+		MountParams<R> & {
+			publicPath: string;
+		},
+) => Promise<void> | void;
+
+export type Update<R extends Rendering | object> = (
+	params: RendererParams &
+		MountParams<R> & {
+			time: number;
+			deltaTime: number;
+			playhead?: number;
+			playcount?: number;
+		},
+) => void;
+
+export type Resize<R extends Rendering | object> = (
+	params: RendererParams & MountParams<R>,
+) => void;
+
+export type Dispose<R extends Rendering | object> = () => void;
+
+export type FilenamePattern = (params: {
+	filename: string;
+	year: string;
+	month: string;
+	day: string;
+	hours: string;
+	minutes: string;
+	seconds: string;
+	timestamp: string;
+	props: Props;
+}) => string;

package/src/types/triggers.d.ts

@@ -0,0 +1,45 @@
+declare module '@fragment/triggers' {
+	// Mouse
+	function onClick(listener: (event: MouseEvent) => void): void;
+	function onMouseDown(listener: (event: MouseEvent) => void): void;
+	function onMouseUp(listener: (event: MouseEvent) => void): void;
+	function onMouseMove(listener: (event: MouseEvent) => void): void;
+
+	// Keyboard
+	function onKeyPress(
+		key?: string | string[],
+		listener: (event: KeyboardEvent) => void,
+	): void;
+	function onKeyDown(
+		key?: string | string[],
+		listener: (event: KeyboardEvent) => void,
+	): void;
+	function onKeyUp(
+		key?: string | string[],
+		listener: (event: KeyboardEvent) => void,
+	): void;
+
+	// MIDI
+	function onNoteOn(
+		note?: MIDI.MIDINote | MIDI.MIDINote[],
+		listener: (event: MIDI.MIDIMessageEvent) => void,
+	): void;
+	function onNoteOff(
+		note?: MIDI.MIDINote | MIDI.MIDINote[],
+		listener: (event: MIDI.MIDIMessageEvent) => void,
+	): void;
+
+	function onNumberOn(
+		noteNumber?: number | number[],
+		listener: (event: MIDI.MIDIMessageEvent) => void,
+	): void;
+	function onNumberOff(
+		noteNumber?: number | number[],
+		listener: (event: MIDI.MIDIMessageEvent) => void,
+	): void;
+
+	function onControlChange(
+		control?: number | number[],
+		listener: (event: MIDI.MIDIMessageEvent) => void,
+	): void;
+}

package/src/types/utils.ts

@@ -0,0 +1,11 @@
+import { Props } from './props';
+
+/**
+ * Declare props with full type inference support
+ *
+ * @param {Props} props
+ * @returns {Props}
+ */
+export function defineProps<P extends Props>(props: P): P {
+	return props;
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"esModuleInterop": false,
+		"moduleDetection": "force",
+		"resolveJsonModule": true,
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"allowJs": true,
+		"checkJs": false,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true,
+		"allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
+
+		/* Paths */
+		"paths": {
+			"@fragment/types": ["src/types"],
+			"@fragment/types/*": ["src/types/*"],
+			"@fragment/*": ["src/client/app/*"]
+		}
+	}
+}

package/.prettierignore

@@ -1,4 +0,0 @@
-pnpm-lock.yaml
-pnpm-workspace.yaml
-package-lock.json
-/docs

package/.prettierrc

@@ -1,25 +0,0 @@
-{
-	"semi": true,
-	"tabWidth": 4,
-	"useTabs": true,
-	"singleQuote": true,
-	"printWidth": 80,
-	"bracketSpacing": true,
-	"trailingComma": "all",
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": ["README.md", "packages/*/README.md", "**/package.json"],
-			"options": {
-				"useTabs": false,
-				"tabWidth": 2
-			}
-		},
-		{
-			"files": ["docs/**/*.md"],
-			"options": {
-				"printWidth": 60
-			}
-		}
-	]
-}

package/src/client/app/lib/canvas-recorder/MP4Recorder.js

@@ -1,44 +0,0 @@
-import loadMP4Module, { isWebCodecsSupported } from './mp4.js';
-import CanvasRecorder from './CanvasRecorder';
-
-let MP4;
-
-class MP4Recorder extends CanvasRecorder {
-	static loaded = false;
-	static isSupported = true;
-
-	constructor(canvas, options) {
-		super(canvas, options);
-	}
-
-	async load() {
-		if (!MP4Recorder.loaded) {
-			MP4 = await loadMP4Module();
-
-			MP4Recorder.loaded = true;
-		}
-
-		this.encoder = MP4.createWebCodecsEncoder({
-			width: this.canvas.width,
-			height: this.canvas.height,
-			fps: this.framerate,
-		});
-	}
-
-	async tick() {
-		const bitmap = await window.createImageBitmap(this.canvas);
-
-		// Add bitmap to encoder
-		await this.encoder.addFrame(bitmap);
-	}
-
-	async end() {
-		const buffer = await this.encoder.end();
-
-		this.result = new Blob([buffer], { type: 'video/mp4' });
-
-		super.end();
-	}
-}
-
-export default MP4Recorder;

package/src/client/app/lib/canvas-recorder/WebMRecorder.js

@@ -1,29 +0,0 @@
-import WebMWriter from 'webm-writer';
-import { map } from '../../utils/math.utils';
-import CanvasRecorder from './CanvasRecorder';
-
-class WebMRecorder extends CanvasRecorder {
-	start() {
-		const quality = map(this.quality, 1, 100, 0, 0.99999);
-
-		this.writer = new WebMWriter({
-			quality,
-			frameRate: this.framerate,
-		});
-
-		super.start();
-	}
-
-	tick() {
-		this.writer.addFrame(this.canvas);
-	}
-
-	async end() {
-		this.result = await this.writer.complete();
-		this.writer = null;
-
-		super.end();
-	}
-}
-
-export default WebMRecorder;