fragment-tools 0.2.8 → 0.2.10

package/src/client/app/utils/canvas.utils.js

@@ -3,10 +3,9 @@ https://github.com/mattdesl/canvas-sketch/blob/24f6bb2bbdfdfd72a698a0b8a0962ad84
 */
 
 import { VIDEO_FORMATS } from '../state/exports.svelte';
-import WebMRecorder from '../lib/canvas-recorder/WebMRecorder';
-import MP4Recorder from '../lib/canvas-recorder/MP4Recorder';
 import GIFRecorder from '../lib/canvas-recorder/GIFRecorder';
 import FrameRecorder from '../lib/canvas-recorder/FrameRecorder';
+import MediaBunnyRecorder from '../lib/canvas-recorder/MediaBunnyRecorder';
 import { exportCanvas } from '../lib/canvas-recorder/utils';
 import { map } from './math.utils';
 import { createDataURLFromBlob, saveFiles } from './file.utils';
@@ -101,28 +100,21 @@ export async function screenshotCanvas(
 	}
 }
 
-function recordCanvasWebM(canvas, options) {
-	let recorder = new WebMRecorder(canvas, options);
+function record(canvas, options) {
+	let recorder = new MediaBunnyRecorder(canvas, options);
 	recorder.start();
 
 	return recorder;
 }
 
-function recordCanvasMp4(canvas, options) {
-	let recorder = new MP4Recorder(canvas, options);
-	recorder.start();
-
-	return recorder;
-}
-
-function recordCanvasGIF(canvas, options) {
+function recordGIF(canvas, options) {
 	let recorder = new GIFRecorder(canvas, options);
 	recorder.start();
 
 	return recorder;
 }
 
-function recordCanvasFrames(canvas, options) {
+function recordFrames(canvas, options) {
 	let recorder = new FrameRecorder(canvas, options);
 	recorder.start();
 
@@ -138,6 +130,7 @@ export function recordCanvas(
 		duration = Infinity,
 		quality = 100,
 		pattern = defaultFilenamePattern,
+		codec,
 		exportDir,
 		imageEncoding,
 		onStart = () => {},
@@ -189,6 +182,7 @@ export function recordCanvas(
 
 	const options = {
 		framerate,
+		format,
 		duration,
 		quality,
 		onStart,
@@ -198,14 +192,22 @@ export function recordCanvas(
 
 	let recorder;
 
-	if (format === VIDEO_FORMATS.WEBM) {
-		recorder = recordCanvasWebM(canvas, options);
-	} else if (format === VIDEO_FORMATS.MP4) {
-		recorder = recordCanvasMp4(canvas, options);
+	if (
+		[
+			VIDEO_FORMATS.MKV,
+			VIDEO_FORMATS.MOV,
+			VIDEO_FORMATS.MP4,
+			VIDEO_FORMATS.WEBM,
+		].includes(format)
+	) {
+		recorder = record(canvas, {
+			...options,
+			codec,
+		});
 	} else if (format === VIDEO_FORMATS.GIF) {
-		recorder = recordCanvasGIF(canvas, options);
+		recorder = recordGIF(canvas, options);
 	} else if (format === VIDEO_FORMATS.FRAMES) {
-		recorder = recordCanvasFrames(canvas, {
+		recorder = recordFrames(canvas, {
 			...options,
 			imageEncoding,
 		});

package/src/client/public/css/global.css

@@ -12,28 +12,27 @@
 }
 
 :root {
-	--font-mono: 'Jetbrains Mono', monospace;
-
-	--color-lightred: #ffaeae;
-	--color-red: #ff4444;
-	--color-green: #9af49f;
-	--color-lightblack: #0e0e0e;
-
-	--color-background: #242425;
-	--color-active: #177bd0;
-	--color-active-disabled: #214366;
-	--color-text: #f0f0f0;
-	--color-border: var(--color-lightblack);
-	--color-border-input: #000000;
-	--color-text-input: #989899;
-	--color-text-input-disabled: #535354;
-	--color-background-input: #1d1d1e;
-	--color-spacing: #323233;
-
-	--height-input: 20px;
-	--height-topbar: 24px;
-	--border-radius-input: 3px;
-	--font-size-input: 11px;
+	--fragment-font-family: 'Jetbrains Mono', monospace;
+
+	--fragment-color-lightred: #ffaeae;
+	--fragment-color-red: #ff4444;
+	--fragment-color-green: #9af49f;
+	--fragment-color-lightblack: #0e0e0e;
+	--fragment-color-white: #f0f0f0;
+
+	--fragment-background-color: #242425;
+	--fragment-accent-color: #177bd0;
+	--fragment-color-disabled: #214366;
+	--fragment-text-color: var(--fragment-color-white);
+	--fragment-spacing-color: #323233;
+
+	--fragment-input-border-color: #000000;
+	--fragment-input-text-color: #989899;
+	--fragment-input-disabled-text-color: #535354;
+	--fragment-input-height: 20px;
+	--fragment-input-border-radius: 3px;
+	--fragment-input-font-size: 11px;
+	--fragment-input-background-color: #1d1d1e;
 }
 
 html {
@@ -48,9 +47,9 @@ body {
 
 	margin: 0;
 	padding: 0;
-	font-family: var(--font-mono);
+	font-family: var(--fragment-font-family);
 
-	background-color: var(--color-lightblack);
+	background-color: var(--fragment-color-lightblack);
 	overscroll-behavior: none;
 }
 
@@ -90,7 +89,7 @@ ol {
 * {
 	box-sizing: border-box;
 	scrollbar-width: thin;
-	scrollbar-color: var(--color-active) transparent;
+	scrollbar-color: var(--fragment-accent-color) transparent;
 }
 
 input,
@@ -100,7 +99,7 @@ button {
 	padding: 0;
 	margin: 0;
 	border: none;
-	font-family: var(--font-mono);
+	font-family: var(--fragment-font-family);
 }
 
 h1,
@@ -123,7 +122,7 @@ h5 {
 }
 
 .loading {
-	color: #f0f0f0;
+	color: var(--fragment-text-color);
 	padding: 18px;
 }
 

package/src/types/client.d.ts

@@ -0,0 +1,36 @@
+declare const __CWD__: string | undefined;
+declare const __FRAGMENT_PORT__: string | number | undefined;
+declare const __START_TIME__: string | number | undefined;
+declare const __SEED__: string | number | undefined;
+declare const __BUILD__: boolean | undefined;
+
+declare const __THREE_RENDERER__: string | undefined;
+declare const __FRAGMENT_RENDERER__: string | undefined;
+declare const __P5_RENDERER__: string | undefined;
+declare const __P5_WEBGL_RENDERER__: string | undefined;
+declare const __2D_RENDERER__: string | undefined;
+
+declare module '*.glsl' {
+	const value: string;
+	export default value;
+}
+
+declare module '*.vs' {
+	const value: string;
+	export default value;
+}
+
+declare module '*.vert' {
+	const value: string;
+	export default value;
+}
+
+declare module '*.fs' {
+	const value: string;
+	export default value;
+}
+
+declare module '*.frag' {
+	const value: string;
+	export default value;
+}

package/src/types/gl.d.ts

@@ -0,0 +1,130 @@
+declare module '@fragment/lib/gl' {
+	type Gl = WebGLRenderingContext | WebGL2RenderingContext;
+
+	type UniformValue = number | number[] | Texture | null;
+	type Uniform = { type?: string; value?: UniformValue };
+	type Uniforms = Record<string, Uniform>;
+
+	type Attributes = Record<string, { data: number[] }>;
+
+	class Geometry {
+		constructor(gl: Gl, attributes?: Attributes);
+		gl: Gl;
+		attributes: Attributes | null;
+		buffers: Record<string, WebGLBuffer> | null;
+	}
+
+	class Texture {
+		constructor(
+			gl: Gl,
+			params?: {
+				image?: TexImageSource | null;
+				name?: string;
+				target?: number;
+				type?: number;
+				wrapS?: number;
+				wrapT?: number;
+				generateMipmaps?: boolean;
+				format?: number;
+				internalFormat?: number;
+				minFilter?: number;
+				magFilter?: number;
+				flipY?: boolean;
+			},
+		);
+		id: number;
+		gl: Gl;
+		image: TexImageSource | null;
+		name: string;
+		target: number;
+		type: number;
+		wrapS: number;
+		wrapT: number;
+		generateMipmaps: boolean;
+		format: number;
+		internalFormat: number;
+		minFilter: number;
+		magFilter: number;
+		flipY: boolean;
+		needsUpdate: boolean;
+		glTexture: WebGLTexture | null;
+		bind(): void;
+		update(textureUnit?: number): void;
+		destroy(): void;
+	}
+
+	class Program {
+		constructor(
+			gl: Gl,
+			params?: {
+				vertex?: string;
+				fragment?: string;
+				uniforms?: Uniforms;
+			},
+		);
+		id: number;
+		gl: Gl;
+		vertexShader: string;
+		fragmentShader: string;
+		uniforms: Uniforms;
+		needsUpdate: boolean;
+		attributesLocations: Record<
+			string,
+			ReturnType<WebGLRenderingContext['getAttribLocation']>
+		>;
+		uniformsLocations: Record<
+			string,
+			ReturnType<WebGLRenderingContext['getUniformLocation']>
+		>;
+		compile(): void;
+	}
+
+	class Renderer {
+		constructor(params?: {
+			canvas?: HTMLCanvasElement;
+			antialias?: boolean;
+			alpha?: boolean;
+			depth?: boolean;
+			stencil?: boolean;
+			premultipliedAlpha?: boolean;
+			pixelRatio?: number;
+			webgl?: 1 | 2;
+		});
+		gl: Gl;
+		canvas: HTMLCanvasElement;
+		render(params: {
+			geometry: Geometry;
+			program: Program;
+			primitiveType?: GLenum;
+			offset?: number;
+			count?: number;
+		}): void;
+		setPixelRatio(pixelRatio?: number): void;
+		setSize(params?: { width?: number; height?: number }): void;
+		setViewport(params?: { width?: number; height?: number }): void;
+		destroy(): void;
+	}
+
+	interface Frag {
+		gl: Gl;
+		program: Program;
+		texture: (params?: {}) => Texture;
+		shader: string;
+		fragmentShader: string;
+		vertexShader: string;
+		uniforms: Uniforms;
+		resize: (params?: {
+			width?: number;
+			height?: number;
+			pixelRatio?: number;
+		}) => void;
+		render: () => void;
+		destroy: () => void;
+	}
+
+	function fragment(params?: {
+		canvas?: HTMLCanvasElement;
+		shader?: string;
+		uniforms?: Uniforms;
+	}): Frag;
+}

package/src/types/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from './props';
+
+declare module '@fragment/helpers' {
+	function reactiveProps(props?: Props): Props;
+}

package/src/types/hooks.d.ts

@@ -0,0 +1,14 @@
+declare module '@fragment/hooks' {
+	type Listener = (params: {
+		encoding: string;
+		quality: number;
+		count: number;
+		index: number;
+		pixelsPerInch: number;
+	}) => Function | void;
+
+	function onBeforeCapture(listener: Listener, context?: string): void;
+	function onAfterCapture(listener: Listener, context?: string): void;
+	function onBeforeRecord(listener: Listener, context?: string): void;
+	function onAfterRecord(listener: Listener, context?: string): void;
+}

package/src/types/index.d.ts

@@ -0,0 +1,8 @@
+export type * from './renderers';
+export type * from './sketch';
+export type * from './props';
+export type * from './helpers';
+export type * from './hooks';
+export type * from './triggers';
+export type * from './midi';
+export type * from './gl';

package/src/types/midi.d.ts

@@ -0,0 +1,176 @@
+export declare global {
+	namespace MIDI {
+		/**
+		 * All the posible notes.
+		 */
+		type MIDINote =
+			| 'C'
+			| 'C#'
+			| 'D'
+			| 'D#'
+			| 'E'
+			| 'F'
+			| 'F#'
+			| 'G'
+			| 'G#'
+			| 'A'
+			| 'A#'
+			| 'B';
+
+		interface MIDIPort extends EventTarget {
+			/**
+			 * A unique ID of the port. This can be used by developers to remember ports the
+			 * user has chosen for their application.
+			 */
+			id: string;
+
+			/**
+			 * The manufacturer of the port.
+			 */
+			manufacturer?: string | undefined;
+
+			/**
+			 * The system name of the port.
+			 */
+			name?: string | undefined;
+
+			/**
+			 * A descriptor property to distinguish whether the port is an input or an output
+			 * port.
+			 */
+			type: MIDIPortType;
+
+			/**
+			 * The version of the port.
+			 */
+			version?: string | undefined;
+
+			/**
+			 * The state of the device.
+			 */
+			state: MIDIPortDeviceState;
+
+			/**
+			 * The state of the connection to the device.
+			 */
+			connection: MIDIPortConnectionState;
+
+			/**
+			 * The handler called when an existing port changes its state or connection
+			 * attributes.
+			 */
+			onstatechange(event: MIDIConnectionEvent): void;
+
+			addEventListener(
+				type: 'statechange',
+				listener: (this: this, event: MIDIConnectionEvent) => any,
+				options?: boolean | AddEventListenerOptions,
+			): void;
+			addEventListener(
+				type: string,
+				listener: EventListenerOrEventListenerObject,
+				options?: boolean | AddEventListenerOptions,
+			): void;
+
+			/**
+			 * Makes the MIDI device corresponding to the MIDIPort explicitly available. Note
+			 * that this call is NOT required in order to use the MIDIPort - calling send() on
+			 * a MIDIOutput or attaching a MIDIMessageEvent handler on a MIDIInputPort will
+			 * cause an implicit open().
+			 *
+			 * When invoked, this method returns a Promise object representing a request for
+			 * access to the given MIDI port on the user's system.
+			 */
+			open(): Promise<MIDIPort>;
+
+			/**
+			 * Makes the MIDI device corresponding to the MIDIPort
+			 * explicitly unavailable (subsequently changing the state from "open" to
+			 * "connected"). Note that successful invocation of this method will result in MIDI
+			 * messages no longer being delivered to MIDIMessageEvent handlers on a
+			 * MIDIInputPort (although setting a new handler will cause an implicit open()).
+			 *
+			 * When invoked, this method returns a Promise object representing a request for
+			 * access to the given MIDI port on the user's system. When the port has been
+			 * closed (and therefore, in exclusive access systems, the port is available to
+			 * other applications), the vended Promise is resolved. If the port is
+			 * disconnected, the Promise is rejected.
+			 */
+			close(): Promise<MIDIPort>;
+		}
+
+		interface MIDIInput extends MIDIPort {
+			type: 'input';
+
+			onmidimessage(e: MIDIMessageEvent): void;
+
+			addEventListener(
+				type: 'midimessage',
+				listener: (this: this, event: MIDIMessageEvent) => any,
+				options?: boolean | AddEventListenerOptions,
+			): void;
+			addEventListener(
+				type: 'statechange',
+				listener: (this: this, event: MIDIConnectionEvent) => any,
+				options?: boolean | AddEventListenerOptions,
+			): void;
+			addEventListener(
+				type: string,
+				listener: EventListenerOrEventListenerObject,
+				options?: boolean | AddEventListenerOptions,
+			): void;
+		}
+
+		type MIDIMessageEvent = {
+			/**
+			 * The type of the message event.
+			 */
+			type: 'noteon' | 'noteoff' | 'controlchange';
+
+			/**
+			 * The triggered note.
+			 */
+			note: { number: number; name: MIDINote };
+
+			/**
+			 * The channel the message was sent to.
+			 */
+			channel: number;
+
+			/**
+			 * The normalized velocity of the note expressed as a float between 0 and 1.
+			 */
+			velocity: number;
+
+			/**
+			 * The raw velocity of the note expressed as an integer between 0 and 127.
+			 */
+			rawVelocity: number;
+
+			/**
+			 * The normalized value expressed as a float between 0 and 1.
+			 */
+			value: number;
+
+			/**
+			 * The raw value expressed as an integer between 0 and 127.
+			 */
+			rawValue: number;
+
+			/**
+			 * The object that dispatched the event.
+			 */
+			currentTarget: MIDIInput;
+
+			/**
+			 * The object that dispatched the event.
+			 */
+			target: MIDIInput;
+
+			/**
+			 * The object that dispatched the event.
+			 */
+			srcElement: MIDIInput;
+		};
+	}
+}

package/src/types/props.d.ts

@@ -0,0 +1,72 @@
+type BaseProp<Value, Params, Type> = {
+	value: Value;
+	params?: Params;
+	type?: Type;
+	hidden?: boolean;
+	displayName?: string;
+	folder?: string;
+	group?: string;
+	onChange?: PropOnChange<Value, Params>;
+};
+
+type SelectProp = BaseProp<
+	number | string,
+	{
+		options?:
+			| number[]
+			| string[]
+			| Array<{ label?: string; value: number }>
+			| Array<{ label?: string; value: string }>;
+	},
+	'select'
+>;
+type NumberProp = BaseProp<
+	number,
+	{ disabled?: boolean; step?: number } | { min: number; max: number },
+	'number'
+>;
+type VecProp = BaseProp<
+	| [number, number]
+	| [number, number, number]
+	| [number, number, number, number],
+	{ locked?: boolean },
+	'vec'
+>;
+type CheckboxProp = BaseProp<boolean, never, 'checkbox'>;
+type TextProp = BaseProp<string, { disabled?: boolean }, 'text'>;
+type ListProp = BaseProp<any[], { disabled?: boolean }, 'list'>;
+type ColorProp = BaseProp<
+	string | THREE.Color | { r: number; g: number; b: string; a?: number },
+	never,
+	'color'
+>;
+type ButtonProp = BaseProp<
+	() => void,
+	{ disabled?: boolean; label?: string },
+	'button' | 'download'
+>;
+type ImageProp = BaseProp<string, never, 'image'>;
+
+type Prop =
+	| SelectProp
+	| NumberProp
+	| VecProp
+	| CheckboxProp
+	| TextProp
+	| ListProp
+	| ColorProp
+	| ButtonProp
+	| ImageProp;
+
+export type Props = Record<string, Prop>;
+
+export type PropOnChangeOptions<Value, Params> = {
+	value: Value;
+	_initialValue: Value;
+	params: Params;
+	onChange: PropOnChange<Value, Params>;
+};
+
+export type PropOnChange<Value, Params> = (
+	options: PropOnChangeOptions<Value, Params>,
+) => void;