fragment-tools 0.2.7 → 0.2.9

package/src/client/app/ui/fields/ListInput.svelte

@@ -42,8 +42,8 @@
 		height: 80px;
 
 		background-color: #1d1d1e;
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 		overflow-y: scroll;
 	}
 
@@ -60,12 +60,14 @@
 
 	.container::-webkit-scrollbar-track {
 		background-color: var(
-			--color-lightblack
+			--fragment-color-lightblack
 		); /* color of the tracking area */
 	}
 
 	.container::-webkit-scrollbar-thumb {
-		background-color: var(--color-active); /* color of the scroll thumb */
+		background-color: var(
+			--fragment-accent-color
+		); /* color of the scroll thumb */
 		border-radius: 20px; /* roundness of the scroll thumb */
 	}
 
@@ -75,7 +77,7 @@
 
 		margin: 0;
 		padding: 0 3px;
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 		font-size: 10px;
 
 		opacity: 0.35;
@@ -90,15 +92,14 @@
 	}
 
 	.list:not(.disabled) .label:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.list:not(.disabled) .label:active {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.item:hover {
-		/* background-color: #0E0E0E; */
 		opacity: 1;
 	}
 

package/src/client/app/ui/fields/ProgressInput.svelte

@@ -101,11 +101,11 @@
 	.progress {
 		position: relative;
 
-		height: var(--height-input);
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		height: var(--fragment-input-height);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		background: var(--color-background-input);
+		background: var(--fragment-input-background-color);
 
 		container-type: size;
 		outline: 0;
@@ -116,13 +116,13 @@
 	}
 
 	:global(body:not(.fragment-dragging)) .progress:not(.disabled):hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.progress.dragging,
 	:global(body:not(.fragment-dragging))
 		.progress:not(.disabled):focus-visible {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.fill {
@@ -145,14 +145,14 @@
 
 		background: grey;
 		transform-origin: 0 50%;
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 
 		transform: translate3d(var(--tx), 0px, 0px);
 	}
 
 	.progress.disabled .fill {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 </style>

package/src/client/app/ui/fields/Select.svelte

@@ -86,33 +86,33 @@
 	.select-input {
 		width: 100%;
 
-		color: var(--color-text-input);
+		color: var(--fragment-input-text-color);
 	}
 
 	.select-input.disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	.container {
 		position: relative;
 
 		display: flex;
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 		margin: 2px 0;
 
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.select-input:not(.disabled)
 		.container:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.container:focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.select {
@@ -121,7 +121,7 @@
 		width: 100%;
 
 		color: inherit;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 
 		outline: 0;
 		background-color: transparent;
@@ -133,10 +133,10 @@
 	}
 
 	.select-input .select option {
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.select-input:not(.disabled) .select:focus {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 </style>

package/src/client/app/ui/fields/VectorInput.svelte

@@ -131,6 +131,6 @@
 		width: var(--column-gap);
 		height: 1px;
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 </style>

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/client/public/preview.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Preview</title>
+	</head>
+	<style>
+		body {
+			background-color: black;
+			display: grid;
+			place-items: center;
+		}
+
+		* {
+			margin: 0;
+			padding: 0;
+		}
+
+		canvas {
+			max-width: 100vw !important;
+			height: auto;
+			margin: 0 auto;
+		}
+	</style>
+	<body>
+		<canvas id="preview" width="1920" height="1080"></canvas>
+		<script>
+			const previewCanvas = document.getElementById('preview');
+			const ctx = previewCanvas.getContext('2d');
+			let offscreen;
+
+			window.opener.postMessage(
+				{
+					type: 'ready',
+				},
+				'*',
+			);
+
+			window.addEventListener('message', async (e) => {
+				console.log(e.data.type);
+				if (e.data.type === 'resize') {
+					previewCanvas.width = e.data.width;
+					previewCanvas.height = e.data.height;
+				}
+
+				if (e.data.bitmap) {
+					const bitmap = e.data.bitmap;
+					ctx.clearRect(
+						0,
+						0,
+						previewCanvas.width,
+						previewCanvas.height,
+					);
+					ctx.drawImage(bitmap, 0, 0);
+					bitmap.close(); // release bitmap memory
+				}
+			});
+		</script>
+	</body>
+</html>

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;
+		};
+	}
+}