fragment-tools 0.1.1 → 0.1.11

package/README.md

@@ -17,33 +17,21 @@
 
 ## Installation
 
-`fragment` is not yet available on [npmjs.com](npmjs.com) so you need to clone and link the project in order to use it. It's only a few steps.
-
 ```
-# clone the project
-git clone https://github.com/raphaelameaume/fragment
-
-# move to the project directory
-cd fragment
-
-# link the project
-npm link
+npm install fragment-tools -g
 ``` 
 
-You should now be able to run `fragment` from your command line. If you encounter any issues, you can read more about linking on [npmjs.com](https://docs.npmjs.com/cli/v8/commands/npm-link).
+You should now be able to run `fragment` from your command line.
 
 ## Usage
 
 ```
 # create a new directory for your sketches
-mkdir ../sketches
+mkdir sketches
 
 # move into that folder
 cd sketches
 
-# initialize npm for linking to work
-npm init
-
 # create a sketch from a template
 fragment ./sketch.js --new --template=2d
 ```
@@ -80,7 +68,7 @@ export let update = ({ context, width, height }) => {
 };
 ```
 
-Learn how to write your own sketch in the [API docs](./docs/api/sketch.md) or read the [examples](./examples/).
+Learn how to write your own sketch by following the [Getting started](./docs//guide/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).
 
 ## Contributing
 
@@ -88,6 +76,39 @@ If you find issues, please [file one](https://github.com/raphaelameaume/fragment
 
 Feel free to reach out on [Twitter](https://twitter.com/raphaelameaume) if you want to discuss the project.
 
+## Running it locally
+
+```
+# clone or fork the project
+git clone https://github.com/raphaelameaume/fragment.git 
+
+# move to the root of the repository
+cd fragment
+
+# run the command line locally
+node ./bin/index.js examples/shape-2d.js --dev
+
+# or from your sketch folder
+node [path-to-root]/bin/index.js sketch.js --dev
+```
+
+> The `--dev` flag only enables Vite `info` logLevel, helpful for development. Otherwise it will work the same as when you're running from the npm package.
+
+Alternatively, you can tell npm to point the `fragment` command to the newly cloned folder.
+
+```
+# at the root of the repo
+npm link
+```
+
+You should be able the command as before, only this time it will point to the repository instead of the globally installed package.
+
+```
+fragment sketch.js
+```
+
+If that's not the case, try to uninstall `fragment-tools` globally first, make sure the `fragment` command is not found anymore, then retry to link the project from the root of the repo.
+
 ## Credits
 
 - [Vite](https://vitejs.dev/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.1",
+  "version": "0.1.11",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/client/app/modules/Params.svelte

@@ -92,8 +92,8 @@ $: showOutputParams = (monitor && monitor.selected === "output") ||
                     context={sketchKey}
                     key={key}
                     value={sketchProps[key].value}
-                    params={sketchProps[key].params || {}}
                     type={sketchProps[key].type}
+                    bind:params={sketchProps[key].params}
                     on:click={() => {
                         $props[sketchKey][key].value._refresh = true;
                     }}

package/src/client/app/stores/props.js

@@ -4,41 +4,43 @@ import { sketches } from "./sketches";
 export const props = writable({});
 
 sketches.subscribe((sketches) => {
-	const $props = get(props);
+	props.update((currentProps) => {
+		Object.keys(sketches).forEach((key) => {
+			const sketch = sketches[key];
 
-	Object.keys(sketches).forEach((key) => {
-		const sketch = sketches[key];
-
-		if (sketch) { // sketch can be undefined if failed to load
-			$props[key] = reconcile(sketch.props, $props[key]);
-		}
+			if (sketch) { // sketch can be undefined if failed to load
+				currentProps[key] = reconcile(sketch.props, currentProps[key]);
+			}
+		});
 
+		return currentProps;
 	});
-
-	props.set($props);
 });
 
-function reconcile(newProps = {}, existingProps = {}) {
-	Object.keys(newProps).forEach(propKey => {
-		newProps[propKey]._initialValue = newProps[propKey].value;
+function reconcile(newProps = {}, prevProps = {}) {
+	Object.keys(newProps).forEach((propKey) => {
+		let newProp = newProps[propKey];
+
+		if (!newProp.params) {
+			newProp.params = {};
+		}
 	});
 
-	if (existingProps) {
-		Object.keys(existingProps).forEach((propKey) => {
+	if (prevProps) {
+		Object.keys(prevProps).forEach((propKey) => {
+			let prevProp = prevProps[propKey];
 			let newProp = newProps[propKey];
 
 			if (newProp) {
-				let prevProp = existingProps[propKey];
-				let overrideValue = 
-					typeof prevProp._initialValue === "number" && 
-					prevProp._initialValue === newProp._initialValue;
-
-				if (overrideValue) {
-					newProp.value = prevProp.value;
+				if (prevProp.params) {
+					// reconcile locked VectorInput from UI
+					if (prevProp.params.locked !== undefined) {
+						newProp.params.locked = prevProp.params.locked;
+					}
 				}
 			}
 		});
-	};
+	}
 
 	return newProps;
 }

package/src/client/app/triggers/Keyboard.js

@@ -61,7 +61,7 @@ function createTrigger(eventName, collection) {
         const { hot, enabled, ...params } = options;
         const context = getContext();
 
-        const keys = Array.isArray(key) ? key : [key];
+        const keys = Array.isArray(key) ? key : [...key.split(',').map(k => k.trim())];
         
         const trigger = new Trigger({
             inputType: 'Keyboard',

package/src/client/app/triggers/MIDI.js

@@ -78,7 +78,11 @@ function createTrigger(eventName, collection) {
         }
 
         const { hot, enabled, ...params } = options;
-        const keys = Array.isArray(key) ? key : [key];
+        let keys = Array.isArray(key) ? key : [...key.split(',').map(k => k.trim())];
+
+        if (["onControlChange", "onNumberOn", "onNumberOff"].includes(eventName)) {
+            keys = keys.map((k) => Number(k));
+        }
 
         if (!MIDI.enabled) {
             MIDI.request();

package/src/client/app/ui/Field.svelte

@@ -4,8 +4,7 @@ import { createEventDispatcher } from "svelte";
 import Select from "./fields/Select.svelte";
 import NumberInput from "./fields/NumberInput.svelte";
 import CheckboxInput from "./fields/CheckboxInput.svelte";
-import Vec2Input from "./fields/Vec2Input.svelte";
-import Vec3Input from "./fields/Vec3Input.svelte";
+import VectorInput from "./fields/VectorInput.svelte";
 import TextInput from "./fields/TextInput.svelte";
 import ColorInput from "./fields/ColorInput.svelte";
 import ListInput from "./fields/ListInput.svelte";
@@ -20,7 +19,7 @@ import frameDebounce from "../lib/helpers/frameDebounce.js";
 import { getStore } from "../stores/utils";
 import { writable } from "svelte/store";
 
-export let key = '';
+export let key = "";
 export let value = null;
 export let context = null;
 export let params = {};
@@ -50,8 +49,7 @@ const dispatch = createEventDispatcher();
 const fields = {
     "select": Select,
     "number": NumberInput,
-    "vec2": Vec2Input,
-    "vec3": Vec3Input,
+    "vec": VectorInput,
     "checkbox": CheckboxInput,
     "text": TextInput,
     "list": ListInput,
@@ -120,7 +118,11 @@ function toggleTriggers(event) {
 function composeFieldProps(params) {
     const { triggerable, controllable, ...rest } = params;
 
-    return rest;
+    return {
+        ...rest,
+        key,
+        context,
+    };
 }
 
 </script>
@@ -149,7 +151,7 @@ function composeFieldProps(params) {
                     </svg>
                 </button>
             {/if}
-            {#if (fieldType === "vec2" || fieldType === "vec3") && !disabled }
+            {#if (fieldType === "vec") && !disabled }
                 <button class="field__action field__action--lock" on:click={() => params.locked = !params.locked}>
                     {#if params.locked}
                     <svg class="action__icon" width="16" height="16" fill="none" viewBox="0 0 24 24">
@@ -200,11 +202,13 @@ function composeFieldProps(params) {
 
 :global(.field__input .field) {
     padding-left: 0px !important;
+    padding-right: 0px !important;
 }
 
 :global(.field__input .field:last-child) {
     border-bottom: 0px solid #323233 !important;
     padding-bottom: 0px !important;
+    
 }
 
 .field.disabled {

package/src/client/app/ui/FieldTrigger.svelte

@@ -72,7 +72,7 @@ function onTypeChange(event) {
 
     if (!eventOptions.includes(eventName)) {
         eventName = undefined;
-        key = null;
+        params.key = null;
     }
 
     if (trigger) {
@@ -82,19 +82,24 @@ function onTypeChange(event) {
 }
 
 function onEventChange(event) {
+    const clearParams = (inputType === "MIDI" && eventName !== undefined &&
+        ((eventName.includes("Number") && event.detail.includes("Note")) ||
+        (eventName.includes("Note") && event.detail.includes("Number")))
+    );
+
     eventName = event.detail;
 
+    if (clearParams) {
+        params.key = "";
+    }
+
     if (inputType === "Mouse") {
         registerTrigger();
     }
 }
 
 function onTextChange(e) {
-    const castToNumber = ["onControlChange", "onNumberOn", "onNumberOff"].includes(eventName);
-
-    params.key = e.detail.split(',').map((value) => {
-        return castToNumber ? Number(value) : value;
-    });
+    params.key = e.detail;
 
     registerTrigger();
 }
@@ -153,7 +158,7 @@ $: eventOptions = inputType ? [
 ] : [];
 
 $: isValid = inputType && eventName;
-$: key = params.key && params.key.length ? params.key.join(',') : "";
+$: key = params.key;
 
 </script>
 

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

@@ -4,6 +4,8 @@ export let label;
 export let disabled = false;
 export let showLabel = true;
 export let title = "";
+export let context = null;
+export let key = "";
 
 </script>
 

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

@@ -2,6 +2,8 @@
 import { createEventDispatcher } from "svelte";
 
 export let value;
+export let context = null;
+export let key = "";
 
 const dispatch = createEventDispatcher();
 

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

@@ -5,55 +5,53 @@ import TextInput from "./TextInput.svelte";
 import Field from "../Field.svelte";
 
 export let value;
+export let context = null;
+export let key = "";
 
 const dispatch = createEventDispatcher();
 
-let hexValue = color.toHex(color.isTHREE(value) ? `#${value.getHexString()}` : value);
-let isInputDriven = true;
-
-let override = false;
-
-let format = color.getColorFormat(value);
-let textValue = formatColorFromHex(hexValue);
-let alpha = 1;
-
-$: hasAlpha = typeof textValue === "string" &&
-    (
-        color.isRGBAString(textValue) ||
-        color.isVec4String(textValue) ||
-        color.isHSLAString(textValue)
-    );
-$: {
-    if (isInputDriven) {
-        textValue = formatColorFromHex(hexValue);
-    } else {
-        hexValue = color.toHex(textValue);
-    }
-
-    if (color.isTHREE(value)) {
-        const [r, g, b] = color.hexToComponents(hexValue);
-
-        value.r =  r / 255;
-        value.g =  g / 255;
-        value.b =  b / 255;
-    }
-
-    dispatchChange();
-}
-
+$: format = color.getColorFormat(value);
+$: hexValue = color.toHex(value, format);
+$: textValue = color.toString(value, format);
+$: alpha = 1;
+$: hasAlpha = [
+    color.FORMATS.RGBA_STRING,
+    color.FORMATS.VEC4_STRING,
+    color.FORMATS.RGBA_OBJECT,
+    color.FORMATS.HSLA_STRING
+].includes(format);
 $: {
     if (hasAlpha) {
-        const [r, g, b, a = 1] = color.toComponents(textValue);
+        const [r, g, b, a = 1] = color.toComponents(value);
         alpha = a;
+    } else {
+        alpha = 1;
     }
 }
 
 function dispatchChange() {
+    const [r, g, b] = color.hexToComponents(hexValue);
+
     // support THREE.Color
-    if (format === color.FORMATS.THREE) {
-        dispatch('change', value);
-    } else {
-        dispatch('change', textValue);
+    switch (format) {
+        case color.FORMATS.THREE:
+        case color.FORMATS.RGB_OBJECT:
+            value.r = r;
+            value.g = g;
+            value.b = b;
+
+            dispatch('change', value);
+            break;
+        case color.FORMATS.RGBA_OBJECT:
+            value.r = r;
+            value.g = g;
+            value.b = b;
+            value.a = alpha;
+
+            dispatch('change', value);
+            break;
+        default:
+            dispatch('change', textValue);
     }
 }
 
@@ -61,58 +59,74 @@ function handleBlur() {
     dispatchChange();
 }
 
-function formatColorFromHex(hex) {
-    if (override) return textValue;
-
-    if (format === color.FORMATS.THREE) return color.threeToHexString(value);
-    if (format === color.FORMATS.HEX_STRING) return hex;
-    if (format === color.FORMATS.VEC3_STRING) return color.hexToVec3String(hex);
-    if (format === color.FORMATS.RGB_STRING) return color.hexToRGBString(hex);
-
-    let components = color.hexToComponents(hex);
-
-    if (hasAlpha && alpha !== 1) {
-        components[3] = alpha;
-    }
-
-    if (format === color.FORMATS.HSL_STRING) return color.hexToHSLString(components);
-    if (format === color.FORMATS.RGBA_STRING) return color.componentsToRGBAString(components);
-    if (format === color.FORMATS.VEC4_STRING) return color.componentsToVec4String(components);
-    if (format === color.FORMATS.HSLA_STRING) return color.componentsToHSLAString(components);
-    
-}
-
 function onChangeText(event) {
-    isInputDriven = false;
-
     const newColor = event.detail;
 
     if (color.isColor(newColor)) {
-        format = color.getColorFormat(newColor);
         textValue = newColor;
+    } else {
+        // newColor is not a color, reset value
+        textValue = color.toString(value, format);
     }
+
+    hexValue = color.toHex(textValue);
+    dispatchChange();
 }
 
 function onChangeAlpha(event) {
-    isInputDriven = false;
-
-    if (format === color.FORMATS.RGBA_STRING) {
-        const [r, g, b] = color.hexToComponents(hexValue);
-
-        textValue = color.componentsToRGBAString([r, g, b, event.detail]);
-    } else if (format === color.FORMATS.VEC4_STRING) {
-        const [r, g, b] = color.vecToComponents(textValue);
+    alpha = event.detail;
+
+    const [r, g, b] = color.hexToComponents(hexValue);
+
+    switch(format) {
+        case color.FORMATS.RGBA_STRING:
+        case color.FORMATS.RGBA_OBJECT:
+            textValue = color.componentsToRGBAString([r, g, b, alpha]);
+            break;
+        case color.FORMATS.VEC4_STRING:
+            textValue = color.componentsToVec4String([r, g, b, alpha]);
+            break;
+        case color.FORMATS.HSLA_STRING:
+            const [h, s, l] = color.hslToHSLComponents(textValue);
+            textValue = color.hslaToHSLAString([h, s, l, alpha]);
+            break;
+    }
 
-        textValue = color.componentsToVec4String([r, g, b, event.detail]);
-    } else if (format === color.FORMATS.HSLA_STRING) {
-        const [h, s, l] = color.hslToHSLComponents(textValue);
+    dispatchChange();
+}
 
-        textValue = color.hslaToHSLAString([h, s, l, event.detail]);
+function onInput(event) {
+    hexValue = event.currentTarget.value;
+
+    const [r, g, b] = color.hexToComponents(hexValue);
+
+    switch(format) {
+        case color.FORMATS.RGBA_STRING:
+        case color.FORMATS.RGBA_OBJECT:
+            textValue = color.toRGBAString({ r, g, b, a: alpha });
+            break;
+        case color.FORMATS.VEC3_STRING:
+            textValue = color.componentsToVec3String([r, g, b]);
+            break;
+        case color.FORMATS.VEC4_STRING:
+            textValue = color.componentsToVec4String([r, g, b, alpha]);
+            break;
+        case color.FORMATS.RGB_STRING:
+        case color.FORMATS.RGB_OBJECT:
+            textValue = color.toRGBString(hexValue);
+            break;
+        case color.FORMATS.HSL_STRING:
+            textValue = color.componentsToHSLString([r, g, b]);
+            break;
+        case color.FORMATS.HSLA_STRING:
+            textValue = color.componentsToHSLAString([r, g, b, alpha]);
+            break;
+        default:
+            textValue = color.toString(hexValue);
+            break;
     }
-}
 
-function onInput() {
-    isInputDriven = true;
+    dispatchChange();
 }
 
 </script>
@@ -120,13 +134,31 @@ function onInput() {
 <div class="color-input">
     <div class="layout">
         <div class="mirror" style="--currentColor: {hexValue}; --opacity: {alpha}">
+            {#if hasAlpha }
+            <svg width="calc(100% - 2px)" height="calc(100% - 2px)" class="alpha-svg">
+                <pattern id="checker" x="0" y="0" width="7.2" height="7.2" patternUnits="userSpaceOnUse">
+                    <rect fill="white" x="0" width="3.6" height="3.6" y="0"></rect>
+                    <rect fill="grey" x="3.6" width="3.6" height="3.6" y="0"></rect>
+                    <rect fill="white" x="3.6" width="3.6" height="3.6" y="3.6"></rect>
+                    <rect fill="grey" x="0" width="3.6" height="3.6" y="3.6"></rect>
+                </pattern>
+                <!-- The canvas with our applied pattern -->
+                <rect x="0" y="0" width="100%" height="100%" fill="url(#checker)"></rect>
+            </svg>
+            {/if}
             <!-- svelte-ignore -->
             <input class="input" type="color" bind:value={hexValue} on:blur={handleBlur} on:input={onInput} />
         </div>
-        <TextInput value={textValue} on:change={onChangeText} />
+        <TextInput {context} {key} bind:value={textValue} on:change={onChangeText} />
     </div>
     {#if hasAlpha }
-        <Field key="alpha" value={alpha} params={{min: 0, max: 1, step: 0.01}} on:change={onChangeAlpha}></Field>
+        <Field
+            key={`${key}.alpha`}
+            value={alpha}
+            params={{label: "alpha", min: 0, max: 1, step: 0.01}}
+            {context}
+            on:change={onChangeAlpha}
+        />
     {/if }
 </div>
 
@@ -143,6 +175,16 @@ function onInput() {
     align-items: center;
 }
 
+.alpha-svg {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+
+    border-radius: calc(var(--border-radius-input) * 0.5);
+}
+
 .mirror {
     position: relative;
     
@@ -152,11 +194,12 @@ function onInput() {
     box-shadow: inset 0 0 0 1px var(--color-border-input);
 }
 
-.mirror:before {
+.mirror:after {
     --gap: 1px;
 
     content: '';
     position: absolute;
+    z-index: 1;
     top: var(--gap);
     left: var(--gap);
     right: var(--gap);
@@ -165,6 +208,7 @@ function onInput() {
     background-color: var(--currentColor);
     border-radius: calc(var(--border-radius-input) * 0.5);
     opacity: var(--opacity, 1);
+    pointer-events: none;
 }
 
 .mirror:hover {

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

@@ -6,6 +6,8 @@ import FieldInputRow from "./FieldInputRow.svelte";
 import TextInput from "./TextInput.svelte";
 
 export let value;
+export let context = null;
+export let key = "";
 
 let img, input, name;
 $: url = typeof value === HTMLImageElement ? value.src : value;

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

@@ -5,6 +5,8 @@ import { createEventDispatcher } from "svelte";
 export let label = null;
 export let value;
 export let disabled = false;
+export let context = null;
+export let key = "";
 
 let node;
 
@@ -16,6 +18,10 @@ function onKeyPress(event) {
     }
 }
 
+function handleInput(event) {
+    dispatch('input', event.currentTarget.value);
+}
+
 function handleChange(event) {
     dispatch('change', event.currentTarget.value);
 }
@@ -31,7 +37,7 @@ function handleChange(event) {
         bind:this={node}
         bind:value={value}
         on:change={handleChange}
-        on:input
+        on:input={handleInput}
         on:keypress={onKeyPress}
         on:keydown
         on:focus

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

@@ -3,6 +3,8 @@ import { afterUpdate } from "svelte";
 
 export let disabled;
 export let value = null;
+export let context = null;
+export let key = "";
 
 let container;