fragment-tools 0.2.11 → 0.2.13

package/src/cli/prompts.js

@@ -1,3 +1,4 @@
+import { styleText } from 'node:util';
 import { ConfirmPrompt, SelectPrompt, TextPrompt } from '@clack/core';
 import isUnicodeSupported from 'is-unicode-supported';
 import * as color from 'kleur/colors';
@@ -23,6 +24,7 @@ const S_BAR = s('│', '|');
 
 /**
  * @param {object} opts
+ * @param {string} opts.message
  * @param {string} opts.active
  * @param {string} opts.inactive
  * @param {boolean} opts.initialValue
@@ -67,9 +69,9 @@ export const confirm = (opts) => {
  * @param {string} [opts.placeholder]
  * @param {string} [opts.defaultValue]
  * @param {string} [opts.initialValue]
- * @param {string} [opts.initialValue]
- * @param {function} [opts.validate]
- * @returns {Promise<string|symbol>}
+ * @param {string} [opts.hint]
+ * @param {(value: string | undefined) => any} [opts.validate]
+ * @returns {Promise<string | symbol | undefined>}
  */
 export const text = (opts) => {
 	const { hint = '' } = opts;
@@ -82,24 +84,36 @@ export const text = (opts) => {
 		render() {
 			const title = `${opts.message}\n`;
 			const placeholder = opts.placeholder
-				? color.inverse(opts.placeholder[0]) +
-					color.dim(opts.placeholder.slice(1))
-				: color.inverse(color.hidden('_'));
-			const value = !this.value
-				? `${placeholder} ${color.dim(hint)}`.trim()
-				: this.valueWithCursor;
+				? styleText('inverse', opts.placeholder[0]) +
+					styleText('dim', opts.placeholder.slice(1))
+				: styleText(['inverse', 'hidden'], '_');
+			const userInput = !this.userInput
+				? `${placeholder} ${styleText('dim', hint)}`.trim()
+				: this.userInputWithCursor;
+			const value = this.value ?? '';
 
 			switch (this.state) {
-				case 'error':
-					return `${title.trim()}\n${value}\n  ${color.yellow(this.error)}\n`;
-				case 'submit':
-					return `${color.dim(`${title}`)} ${color.green(this.value || opts.placeholder)}\n`;
-				case 'cancel':
-					return `${title} ${color.strikethrough(
-						color.dim(this.value ?? placeholder),
-					)}\n`;
-				default:
-					return `${title} ${value}\n`;
+				case 'error': {
+					const errorText = this.error
+						? `  ${styleText('yellow', this.error)}`
+						: '';
+					return `${title.trim()}\n${userInput}\n${errorText}\n`;
+				}
+				case 'submit': {
+					const valueText = value
+						? `${styleText('green', value)}`
+						: '';
+					return `${styleText('dim', `${title}`)} ${valueText}\n`;
+				}
+				case 'cancel': {
+					const valueText = value
+						? ` ${styleText(['strikethrough', 'dim'], value)}`
+						: '';
+					return `${title}${valueText}${value.trim() ? `\n` : ''}`;
+				}
+				default: {
+					return `${title}${userInput}\n\n`;
+				}
 			}
 		},
 	}).prompt();
@@ -140,6 +154,22 @@ const limitOptions = (params) => {
 		});
 };
 
+/**
+ *
+ * @param {string} label
+ * @param {(text: string) => string} format
+ * @returns {string}
+ */
+const computeLabel = (label, format) => {
+	if (!label.includes('\n')) {
+		return format(label);
+	}
+	return label
+		.split('\n')
+		.map((line) => format(line))
+		.join('\n');
+};
+
 /**
  * @typedef {string|boolean|number} Value
  */
@@ -149,12 +179,13 @@ const limitOptions = (params) => {
  * @property {string} value
  * @property {string} [label]
  * @property {string} [hint]
+ * @property {boolean} [disabled]
  */
 
 /**
  * @param {object} opts
  * @param {string} opts.message
- * @param {Option<Value>[]} opts.options
+ * @param {import('@clack/core').SelectOptions<Value>} opts.options
  * @param {Value} [opts.initialValue]
  * @param {number} [opts.maxItems]
  * @returns {Promise<boolean|symbol>}
@@ -162,47 +193,69 @@ const limitOptions = (params) => {
 export const select = (opts) => {
 	/**
 	 *
-	 * @param {Option<Value>} option
-	 * @param {'inactive' | 'active' | 'selected' | 'cancelled'} state
+	 * @param {Option} option
+	 * @param {'inactive' | 'active' | 'selected' | 'cancelled' | 'disabled'} state
 	 * @returns {string}
 	 */
 	const opt = (option, state) => {
 		const label = option.label ?? String(option.value);
 		switch (state) {
+			case 'disabled':
+				return `${styleText('gray', S_RADIO_INACTIVE)} ${computeLabel(label, (text) => styleText('gray', text))}${
+					option.hint
+						? ` ${styleText('dim', `(${option.hint ?? 'disabled'})`)}`
+						: ''
+				}`;
 			case 'selected':
-				return `${label}`;
+				return `${computeLabel(label, (text) => text)}`;
 			case 'active':
-				return `${color.green(S_RADIO_ACTIVE)} ${label} ${
-					option.hint ? color.dim(`(${option.hint})`) : ''
+				return `${styleText('green', S_RADIO_ACTIVE)} ${label}${
+					option.hint
+						? ` ${styleText('dim', `(${option.hint})`)}`
+						: ''
 				}`;
 			case 'cancelled':
-				return `${color.strikethrough(color.dim(label))}`;
+				return `${computeLabel(label, (str) => styleText(['strikethrough', 'dim'], str))}`;
 			default:
-				return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
+				return `${styleText('dim', S_RADIO_INACTIVE)} ${computeLabel(label, (text) => styleText('dim', text))}`;
 		}
 	};
 
 	return new SelectPrompt({
 		options: opts.options,
+		signal: opts.signal,
+		input: opts.input,
+		output: opts.output,
 		initialValue: opts.initialValue,
 		render() {
 			const title = `${opts.message}\n`;
 
 			switch (this.state) {
-				case 'submit':
-					return `${color.dim(title)} ${color.green(opt(this.options[this.cursor], 'selected'))}\n`;
-				case 'cancel':
-					return `${title} ${opt(
-						this.options[this.cursor],
-						'cancelled',
-					)}\n`;
+				case 'submit': {
+					return `${styleText('dim', title)} ${styleText('green', opt(this.options[this.cursor], 'selected'))}\n`;
+				}
+				case 'cancel': {
+					return `${title}${opt(this.options[this.cursor], 'cancelled')}`;
+				}
 				default: {
-					return `${title} ${limitOptions({
+					const titleLineCount = title.split('\n').length;
+					const footerLineCount = 1;
+					return `${title}${limitOptions({
+						output: opts.output,
 						cursor: this.cursor,
 						options: this.options,
 						maxItems: opts.maxItems,
+						columnPadding: 0,
+						rowPadding: titleLineCount + footerLineCount,
 						style: (item, active) =>
-							opt(item, active ? 'active' : 'inactive'),
+							opt(
+								item,
+								item.disabled
+									? 'disabled'
+									: active
+										? 'active'
+										: 'inactive',
+							),
 					}).join(`\n`)}\n`;
 				}
 			}

package/src/cli/run.js

@@ -7,7 +7,7 @@ import {
 	FRAGMENT_DIRECTORY,
 } from './createFragmentFile.js';
 import { getEntries } from './getEntries.js';
-import { log, magenta, bold, cyan, red } from './log.js';
+import { log, magenta, bold, cyan } from './log.js';
 import save from './plugins/save.js';
 import * as p from './prompts.js';
 import { prettifyTime } from './utils.js';

package/src/cli/templates/blank/index.ts

@@ -1,4 +1,4 @@
-import { Init, Resize, Update } from '@fragment/types';
+import type { Init, Resize, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});

package/src/cli/templates/default/index.js

@@ -1,3 +1,5 @@
+let resolution = { x: 0, y: 0 };
+
 export const props = {};
 
 /**
@@ -24,8 +26,11 @@ export const init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playcount
  */
 export const update = ({ context, width, height, pixelRatio }) => {
+	const w = width * pixelRatio;
+	const h = height * pixelRatio;
+
 	context.fillStyle = 'rgb(0, 255, 0)';
-	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
+	context.fillRect(0, 0, w, h);
 };
 
 /**
@@ -35,6 +40,9 @@ export const update = ({ context, width, height, pixelRatio }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {};
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+};
 
 export const rendering = '2d';

package/src/cli/templates/default/index.ts

@@ -1,4 +1,4 @@
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});
@@ -11,8 +11,11 @@ export const update: Update<'2d'> = ({
 	height,
 	pixelRatio,
 }) => {
+	const w = width * pixelRatio;
+	const h = height * pixelRatio;
+
 	context.fillStyle = 'rgb(0, 255, 0)';
-	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
+	context.fillRect(0, 0, w, h);
 };
 
 export const resize: Resize<'2d'> = ({}) => {};

package/src/cli/templates/fragment-gl/index.ts

@@ -1,4 +1,4 @@
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 
 import fragmentShader from './fragment.fs';
 

package/src/cli/templates/p5/index.ts

@@ -1,6 +1,6 @@
 import p5 from 'p5';
 
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});

package/src/cli/templates/p5-webgl/index.ts

@@ -1,6 +1,6 @@
 import p5, { type Shader } from 'p5';
 
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 import fragmentShader from './fragment.fs';

package/src/cli/templates/three-fragment/index.js

@@ -6,9 +6,11 @@ import fragmentShader from './fragment.fs';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 let uniforms = {
-	uResolution: { value: new THREE.Vector2() },
+	uResolution: { value: resolution },
 	uTime: { value: 0 },
 };
 
@@ -87,8 +89,8 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.pixelRatio
  */
 export const resize = ({ width, height, pixelRatio }) => {
-	uniforms.uResolution.value.x = width * pixelRatio;
-	uniforms.uResolution.value.y = height * pixelRatio;
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
 
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;

package/src/cli/templates/three-fragment/index.ts

@@ -1,13 +1,14 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 import fragmentShader from './fragment.fs';
 
 let scene: THREE.Scene;
 let camera: THREE.OrthographicCamera;
+let resolution = new THREE.Vector2();
 let uniforms = {
-	uResolution: { value: new THREE.Vector2() },
+	uResolution: { value: resolution },
 	uTime: { value: 0 },
 };
 
@@ -54,8 +55,8 @@ export const update: Update<'three'> = ({ renderer, time }) => {
 };
 
 export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
-	uniforms.uResolution.value.x = width * pixelRatio;
-	uniforms.uResolution.value.y = height * pixelRatio;
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
 
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;

package/src/cli/templates/three-orthographic/index.js

@@ -4,6 +4,8 @@ import * as THREE from 'three';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 /**
  * @param {object} params
@@ -49,7 +51,10 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;
 	camera.top = height * 0.5;

package/src/cli/templates/three-orthographic/index.ts

@@ -1,9 +1,10 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 let scene: THREE.Scene;
 let camera: THREE.OrthographicCamera;
+let resolution = new THREE.Vector2();
 
 export const init: Init<'three'> = ({}) => {
 	scene = new THREE.Scene();
@@ -17,7 +18,10 @@ export const update: Update<'three'> = ({ renderer }) => {
 	renderer.render(scene, camera);
 };
 
-export const resize: Resize<'three'> = ({ width, height }) => {
+export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;
 	camera.top = height * 0.5;

package/src/cli/templates/three-perspective/index.js

@@ -4,6 +4,8 @@ import * as THREE from 'three';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 /**
  * @param {object} params
@@ -50,7 +52,10 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 };

package/src/cli/templates/three-perspective/index.ts

@@ -1,9 +1,10 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 let scene: THREE.Scene;
 let camera: THREE.PerspectiveCamera;
+let resolution = new THREE.Vector2();
 
 export const init: Init<'three'> = ({}) => {
 	scene = new THREE.Scene();
@@ -18,7 +19,10 @@ export const update: Update<'three'> = ({ renderer }) => {
 	renderer.render(scene, camera);
 };
 
-export const resize: Resize<'three'> = ({ width, height }) => {
+export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 };

package/src/client/app/actions/resize.js

@@ -1,13 +1,20 @@
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {() => void} callback
+ * @returns
+ */
 export function resize(node, callback) {
 	if (typeof callback !== 'function') return;
 
+	/** @type {ResizeObserver | null} */
 	let observer = new ResizeObserver(callback);
 
 	observer.observe(node);
 
 	return {
 		destroy: () => {
-			observer.disconnect();
+			observer?.disconnect();
 			observer = null;
 		},
 	};

package/src/client/app/attachments/draggable.js

@@ -0,0 +1,93 @@
+/**
+ *
+ * @param {object} options
+ * @param {Function} options.onDragStart
+ * @param {Function} options.onDrag
+ * @param {Function} options.onDragEnd
+ * @returns {import('svelte/attachments').Attachment} */
+export function draggable({ onDragStart, onDrag, onDragEnd } = {}) {
+	return (node) => {
+		let isDragging = false;
+		/** @type {MouseEvent | undefined} */
+		let eventStart;
+		/** @type {DOMRect | undefined} */
+		let rect;
+		let classNameDragging = 'fragment-dragging';
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseDown(event) {
+			isDragging = true;
+			eventStart = event;
+
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
+
+			document.body.classList.add(classNameDragging);
+
+			rect = node.getBoundingClientRect();
+
+			const params = computeDrag(event);
+
+			onDragStart?.(event, params);
+			onDrag?.(event, params);
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseMove(event) {
+			onDrag?.(event, computeDrag(event));
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseUp(event) {
+			document.body.classList.remove(classNameDragging);
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+
+			isDragging = false;
+
+			const params = computeDrag(event);
+			onDrag?.(event, params);
+			onDragEnd?.(event, params);
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function computeDrag(event) {
+			let distanceX = event.clientX - eventStart.clientX;
+			let distanceY = event.clientY - eventStart.clientY;
+
+			let distance = Math.sqrt(
+				distanceX * distanceX + distanceY * distanceY,
+			);
+
+			return {
+				distanceX,
+				distanceY,
+				distance,
+				isDragging,
+				rect,
+				node,
+			};
+		}
+
+		node.addEventListener('mousedown', handleMouseDown);
+
+		return () => {
+			node.removeEventListener('mousedown', handleMouseDown);
+
+			rect = undefined;
+			eventStart = undefined;
+		};
+	};
+}