fragment-tools 0.1.0

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

@@ -0,0 +1,96 @@
+import Trigger from "./Trigger";
+import { wildcard, getContext } from "./shared.js";
+import { addToMapArray, removeFromMapArray } from "../utils";
+
+window.mouseIsPressed = false;
+window.mouseX = 0;
+window.mouseY = 0;
+
+const downs = new Map();
+const ups = new Map();
+const moves = new Map();
+const clicks = new Map();
+
+export const reset = (context) => {
+    downs.delete(context);
+    ups.delete(context);
+    moves.delete(context);
+    clicks.delete(context);
+}
+
+export const removeHotListeners = (context) => {
+    function removeHotFrom(collection) {
+        const triggers = collection.get(context);
+
+        if (triggers && triggers.length > 0) {
+            const hotListeners = triggers.filter(t => t.hot);
+            const rest = triggers.filter(t => !t.hot);
+
+            hotListeners.forEach(t => t.destroy());
+
+            collection.set(context, rest);
+        }
+    }
+
+    removeHotFrom(downs);
+    removeHotFrom(ups);
+    removeHotFrom(moves);
+    removeHotFrom(clicks);
+};
+
+const checkForTriggers = (collection, event, scope) => {
+    const triggers = [
+        ...(collection.has(scope) ? collection.get(scope) : []),
+        ...(collection.has(wildcard) ? collection.get(wildcard) : []),
+    ];
+
+    triggers.forEach(trigger => {
+        trigger.run(event)
+    });
+}
+
+/**
+ * 
+ * @param {Map} collection 
+ * @returns 
+ */
+const createTrigger = (eventName, collection) => {
+    return (fn, { context, hot, enabled } = {}) => {
+        try {
+            if (!context) {
+                context = getContext();
+            }
+
+            const trigger = new Trigger({
+                inputType: 'Mouse',
+                eventName,
+                fn,
+                params: { context },
+                context,
+                hot,
+                enabled,
+                destroy: () => {
+                    removeFromMapArray(collection, context, (item) => item.id === trigger.id);
+                }
+            });
+
+            addToMapArray(collection, context, trigger);
+
+            return trigger;
+        } catch(error) {
+            console.error(error);
+            
+            return null;
+        }
+    }
+};
+
+export const checkForTriggersDown = (event, context) => checkForTriggers(downs, event, context);
+export const checkForTriggersMove = (event, context) => checkForTriggers(moves, event, context);
+export const checkForTriggersUp = (event, context) => checkForTriggers(ups, event, context);
+export const checkForTriggersClick = (event, context) => checkForTriggers(clicks, event, context);
+
+export const onMouseDown = createTrigger('onMouseDown', downs);
+export const onMouseUp = createTrigger('onMouseUp', ups);
+export const onMouseMove = createTrigger('onMouseMove', moves);
+export const onClick = createTrigger('onClick', clicks);

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

@@ -0,0 +1,71 @@
+let ID = 0;
+
+class Trigger {
+    /**
+     * 
+     * @param {string} inputType 
+     * @param {string} eventName 
+     * @param {function} fn 
+     * @param {object} params 
+     */
+    constructor({
+        inputType,
+        eventName,
+        fn,
+        context,
+        params = { key: [] },
+        destroy = () => {},
+        enabled = typeof inputType === "string" && typeof eventName === "string",
+        hot = true,
+    } = {}) {
+        this.id = ID++;
+        this.inputType = inputType;
+        this.eventName = eventName;
+        this.fn = fn;
+        this.context = context;
+        this.params = params;
+        this.enabled = enabled;
+        this.hot = hot;
+        this._destroy = destroy;
+    }
+
+    assign(fn) {
+        this.fn = fn;
+    }
+
+    enable() {
+        this.enabled = true;
+    }
+
+    disable() {
+        this.enabled = false;
+    }
+
+    run(...args) {
+        if (this.enabled) {
+            this.fn(...args);
+        }
+    }
+
+    destroy() {
+        this._destroy();
+
+        this.inputType = null;
+        this.eventName = null;
+        this.fn = null;
+        this.params = null;
+        this.enabled = null;
+        this._destroy = null;
+    }
+
+    toJSON() {
+        return {
+            inputType: this.inputType,
+            eventName: this.eventName,
+            enabled: this.enabled,
+            params: this.params,
+        };
+    }
+}
+
+export default Trigger;

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

@@ -0,0 +1,19 @@
+import * as Mouse from "./Mouse.js";
+import * as Keyboard from "./Keyboard.js";
+import * as MIDI from "./MIDI.js";
+
+export * from "./Mouse.js";
+export * from "./Keyboard.js";
+export * from "./MIDI.js";
+
+export { Mouse, Keyboard, MIDI };
+
+/**
+ * Remove all listeners for all kinds of inputs for a specific context
+ * @param {string} context 
+ */
+export const removeHotListeners = (context) => {
+	Mouse.removeHotListeners(context);
+	Keyboard.removeHotListeners(context);
+	MIDI.removeHotListeners(context);
+};

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

@@ -0,0 +1,37 @@
+export const wildcard = "*";
+export let sketchFiles = [];
+
+export function assignSketchFiles(files) {
+    sketchFiles.push(...files);
+};
+
+export function getContext() {
+	let context;
+	
+	const { stack } = new Error();
+	const { url } = import.meta;
+
+	const callstack = stack.split('\n');
+	const index = callstack.findIndex((call) => call.includes(url));
+
+	if (index >= 0) {
+		callstack.splice(0, index + 1);
+	}
+
+	for (let i = 0; i < callstack.length; i++) {
+		for (let j = 0; j < sketchFiles.length; j++) {
+			const sketchFile = sketchFiles[j];
+
+			if (callstack[i].includes(sketchFile)) {
+				context = sketchFile;
+				break;
+			}
+		}
+	}
+
+	if (!context) {
+		context = wildcard;
+	}
+
+	return context;
+};

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

@@ -0,0 +1,96 @@
+<script>
+import { onDestroy } from "svelte";
+
+import Monitor from "../modules/Monitor.svelte";
+import Params from "../modules/Params.svelte";
+import { layout } from "../stores/layout";
+import { override, preview } from "../stores/rendering";
+import { sketches, sketchesKeys } from "../stores/sketches";
+import FloatingParams from "./FloatingParams.svelte";
+import Column from "./LayoutColumn.svelte";
+import Row from "./LayoutRow.svelte";
+
+console.log(`Made with Fragment. https://fragment.tools`);
+
+let gui, style, head;
+let defaultGUIConfig = {
+	position: "float",
+	align: "right",
+	size: 0.3,
+	output: false,
+	hidden: false,
+};
+
+let guiConfig = defaultGUIConfig;
+$: sketchKey = ($layout.previewing && $preview) ? $preview : sketchesKeys[0];
+$: sketch = $sketches[sketchKey];
+
+$: {
+	if (sketch.buildConfig) {
+		override(sketch.buildConfig);
+	}
+
+	const config = sketch.buildConfig ? sketch.buildConfig : {};
+	gui = config.gui;
+
+	if (gui && typeof gui === "object") {
+		guiConfig = {
+			...defaultGUIConfig,
+			...gui,
+		};
+	}
+
+	const { styles = "" } = config;
+
+	if (styles !== "") {
+		head = document.getElementsByTagName('head')[0];
+
+		if (style) {
+			head.removeChild(style);
+		}
+
+		style = document.createElement('style');
+		style.setAttribute('type', 'text/css');
+		style.appendChild(document.createTextNode(styles));
+		head.appendChild(style);
+	}
+}
+
+onDestroy(() => {
+	if (style && head) {
+		head.removeChild(style);
+	}
+});
+</script>
+
+{#if gui}
+	{#if guiConfig.position === "fixed"}
+	<Row>
+		{#if guiConfig.align === "right"}
+			<Column size={1 - guiConfig.size}>
+				<Monitor hasHeader={false}  {sketchKey} />
+			</Column>
+			<Column size={guiConfig.size}>
+				<Params hasHeader={false} {output}/>
+			</Column>
+		{:else}
+			<Column size={guiConfig.size}>
+				<Params hasHeader={false} {output}/>
+			</Column>
+			<Column size={1 - guiConfig.size}>
+				<Monitor hasHeader={false}  {sketchKey} />
+			</Column>
+		{/if}
+	</Row>
+	{:else}
+		<Monitor hasHeader={false} {sketchKey} />
+		<FloatingParams
+			output={guiConfig.output}
+			align={guiConfig.align}
+			size={guiConfig.size}
+			hidden={guiConfig.hidden}
+		/>
+	{/if}
+{:else }
+	<Monitor hasHeader={false}/>
+{/if}

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

@@ -0,0 +1,130 @@
+<script>
+import { clearErrors } from "../stores/errors";
+
+export let error;
+
+export function getLineAndColNumber(stack) {
+	const match = stack.match(/(:([0-9]+)\:([0-9]+))/);
+
+	let lineNumber, colNumber;
+
+	if (match && match[2] && match[3]) {
+		lineNumber = match[2];
+		colNumber = match[3];
+	}
+
+	return { lineNumber, colNumber };
+}
+
+$: stackLines = error.stack ?
+	error.stack.split('\n')
+		.filter((line, i, s) => s.length === 1 ? true : i !== 0)
+		.filter((line) => !line.includes('/app'))
+		.map((line) => {
+			// remove path to file in URL
+			line = line.replace(`${window.location.origin}/@fs${__CWD__}/`, "");
+			// remove vite injected params in URL
+			line = line.replace(/\?.+?\:/g, ":");
+
+			return line;
+		}) :
+	null;
+
+$: extract = error.source ?
+	error.source.split("\n").map((text, index) => ({ text, highlighted: text.includes(`> ${error.lineNumber}:`) })) : [];
+</script>
+
+<div class="error-overlay" on:click={() => clearErrors()}>
+	<div class="display">
+		<h2>{error.name}: {error.message}</h2>
+		{#if error.stack}
+			<p class="stack">
+				{#each stackLines as stackLine}
+					<span>{stackLine}</span>
+				{/each}
+			</p>
+		{/if}
+		{#if extract.length > 0}
+		<div class="extract">
+			{#each extract as line}
+				<span class="extract-line" class:highlighted={line.highlighted}>{line.text}</span>
+			{/each}
+		</div>
+		{/if}
+	</div>
+	<span class="console">Open your browser's console to further inspect this error. Click to dismiss.</span>
+</div>
+
+<style>
+.error-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	width: 100%;
+	height: 100%;
+	padding: 12px 18px;
+
+	color: #FF8081;
+
+	background-color: #2A0000;
+}
+
+h2 {
+	color: #FF8081;
+	font-size: 1rem;
+}
+
+.stack {
+	padding-left: 18px;
+	font-size: 13px;
+}
+
+.stack span {
+	display: block;
+}
+
+.extract {
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	color: #2A0000;
+	padding: 12px 0;
+	font-size: var(--font-size-input);
+	background-color: #FF8081;
+	border-radius: var(--border-radius-input);
+	overflow-x: auto;
+}
+
+.extract::-webkit-scrollbar {
+    height: 5px;               /* width of the entire scrollbar */
+}
+
+.extract::-webkit-scrollbar-track {
+    background-color: #5C0000;
+}
+
+.extract::-webkit-scrollbar-thumb {
+    background-color: #f0f0f0;    /* color of the scroll thumb */
+    border-radius: 20px;       /* roundness of the scroll thumb */
+}
+
+.extract-line {
+	display: block;
+	white-space: pre;
+	padding: 0 12px;
+	width: 100%;
+}
+
+.extract-line.highlighted {
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: 1px;
+}
+
+.console {
+	font-size: var(--font-size-input);
+}
+</style>