fragment-tools 0.1.0

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

@@ -0,0 +1,263 @@
+<script context="module">
+const inputs = {
+    "Mouse": {
+        events: [
+            { name: "onMouseDown", triggerable: true, controllable: false },
+            { name: "onMouseUp", triggerable: true, controllable: false },
+            { name: "onMouseMove", triggerable: true, controllable: false },
+            { name: "onClick", triggerable: true, controllable: false },
+        ]
+    },
+    "Keyboard": {
+        events: [
+            { name: "onKeyDown", triggerable: true, controllable: false },
+            { name: "onKeyPress", triggerable: true, controllable: false },
+            { name: "onKeyUp", triggerable: true, controllable: false },
+        ]
+    },
+    "MIDI": {
+        events: [
+            { name: "onNoteOn", triggerable: true, controllable: false },
+            { name: "onNoteOff", triggerable: true, controllable: false },
+            { name: "onNumberOn", triggerable: true, controllable: false },
+            { name: "onNumberOff", triggerable: true, controllable: false },
+            { name: "onControlChange", triggerable: false, controllable: true },
+        ],
+    }
+};
+</script>
+
+<script>
+import IconCross from "../components/IconCross.svelte";
+import ButtonInput from "./fields/ButtonInput.svelte";
+import FieldInputRow from "./fields/FieldInputRow.svelte";
+import Select from "./fields/Select.svelte";
+import TextInput from "./fields/TextInput.svelte";
+import * as triggersMap from "../triggers/index.js";
+import { createEventDispatcher, onDestroy, onMount } from "svelte";
+
+export let index;
+export let inputType = undefined;
+export let eventName = undefined;
+export let enabled = true;
+export let controllable = false;
+export let triggerable = false;
+export let context;
+export let onTrigger = () => {};
+export let params = { key: []};
+
+let trigger;
+let dispatch = createEventDispatcher();
+
+function registerTrigger() {
+    if (trigger) {
+        enabled = trigger.enabled;
+
+        trigger.destroy();
+        trigger = null;
+    }
+
+    const createTrigger = triggersMap[eventName];
+
+    trigger = createTrigger(onTrigger, {
+        ...params,
+        context,
+        hot: false,
+        enabled,
+    });
+}
+
+function onTypeChange(event) {
+    inputType = event.detail;
+
+    if (!eventOptions.includes(eventName)) {
+        eventName = undefined;
+        key = null;
+    }
+
+    if (trigger) {
+        trigger.destroy();
+        trigger = null;
+    }
+}
+
+function onEventChange(event) {
+    eventName = event.detail;
+
+    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;
+    });
+
+    registerTrigger();
+}
+
+function handleClickDelete() {
+    dispatch('delete', index);
+}
+
+function toggleTrigger() {
+    if (trigger) {
+        trigger.enabled = !trigger.enabled;
+    }
+}
+
+onMount(() => {
+    if (
+        (inputType === "Mouse" && eventName) ||
+        (inputType && eventName && params.key)
+    ) {
+        registerTrigger();
+    }
+});
+
+onDestroy(() => {
+    if (trigger) {
+        trigger.destroy();
+        trigger = null;
+    }
+});
+
+$: validInputs = [...Object.keys(inputs)].reduce((all, inputName) => {
+    const input = inputs[inputName];
+    const { disabled, events } = input;
+    const filteredEvents = events.filter((event) => {
+        return event.triggerable === triggerable && event.controllable === controllable;
+    });
+
+    if (filteredEvents.length > 0) {
+        all[inputName] = { events: filteredEvents, disabled };
+    };
+    
+    return all;
+}, {});
+
+$: inputOptions = [
+    { label: "Select input", value: undefined, disabled: true },
+    ...Object.keys(validInputs).map((inputName) => ({
+        value: inputName,
+        disabled: validInputs[inputName].disabled,
+    }))
+];
+
+$: eventOptions = inputType ? [
+    { label: "-", value: undefined, disabled: true },
+    ...validInputs[inputType].events.map(event => ({ value: event.name }))
+] : [];
+
+$: isValid = inputType && eventName;
+$: key = params.key && params.key.length ? params.key.join(',') : "";
+
+</script>
+
+<div class="field-trigger {inputType ? inputType.toLowerCase() : ""}">
+    <FieldInputRow --grid-template-columns="var(--width-activity) var(--width-cols) var(--width-delete)">
+        <button
+            class="activity"
+            class:valid={isValid}
+            class:enabled={trigger && trigger.enabled}
+            class:disabled={!trigger || !trigger.enabled}
+            on:click={toggleTrigger}
+        ></button>
+        <Select
+            name="trigger-input"
+            value={inputType}
+            options={inputOptions}
+            on:change={onTypeChange}
+        />
+        {#if inputType }
+        <Select
+            options={eventOptions}
+            bind:value={eventName}
+            disabled={inputType === undefined}
+            on:change={onEventChange}
+        />
+        {/if}
+        {#if inputType === 'Keyboard'}
+            <TextInput
+                bind:value={key}
+                label="key"
+                on:input={onTextChange}
+            />
+        {/if}
+        {#if inputType === 'MIDI'}
+            <TextInput
+                bind:value={key}
+                label={["onNoteOn", "onNoteOff"].includes(eventName) ? "note" : "number"}
+                on:input={onTextChange}
+            />
+        {/if}
+        <ButtonInput
+            label="delete"
+            showLabel={false}
+            on:click={handleClickDelete}
+            --color-text="white"
+            --background-color="var(--color-red)"
+            --box-shadow-color-active="var(--color-lightred)"
+        >
+            <IconCross />
+        </ButtonInput>
+    </FieldInputRow>
+</div>
+
+<style>
+
+.field-trigger {
+    --width-delete: var(--height-input);
+    --width-input: 90px;
+    --width-activity: 16px;
+    --width-cols: 1fr;
+
+    width: 100%;
+}
+
+.activity {
+    --background-color: rgba(255, 255, 255, 0.5);
+
+    position: relative;
+
+    width: var(--width-activity);
+    height: 100%;
+
+    background-color: transparent;
+}
+
+.activity:before {
+    --size: 4px;
+
+    content: '';
+
+    position: absolute;
+    top: calc(50% - var(--size) * 0.5);
+    left: calc(50% - var(--size) * 0.5);
+
+    width: var(--size);
+    height: var(--size);
+    border-radius: 2px;
+
+    background-color: var(--background-color);
+}
+
+.activity.valid.enabled {
+    --background-color: var(--color-green);
+}
+
+.activity.valid.disabled {
+    --background-color: var(--color-red);
+}
+
+.field-trigger.mouse {
+    --width-cols: var(--width-input) 1fr;
+}
+
+.field-trigger.keyboard, .field-trigger.midi {
+    --width-cols: var(--width-input) 1fr 0.75fr;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<script>
+import FieldTrigger from "./FieldTrigger.svelte";
+import ButtonInput from "./fields/ButtonInput.svelte";
+
+export let context;
+export let onTrigger;
+export let triggers;
+export let triggerable = false;
+export let controllable = false;
+
+function onTriggerDelete(e) {
+    const triggerIndex = e.detail;
+
+    $triggers = $triggers.filter((t, i) => i !== triggerIndex);
+}
+
+function handleClickAdd() {
+    triggers.update((current) => {
+        return [
+            ...current,
+            {
+                inputType: undefined,
+                eventName: undefined,
+            },
+        ]
+    });
+}
+</script>
+
+{#if onTrigger }
+    <ButtonInput label="add trigger" on:click={handleClickAdd} />
+    <div class="field-triggers">
+    {#each $triggers as trigger, index}
+        <FieldTrigger
+            {index}
+            bind:inputType={trigger.inputType}
+            bind:eventName={trigger.eventName}
+            bind:params={trigger.params}
+            bind:enabled={trigger.enabled}
+            {onTrigger}
+            {context}
+            {controllable}
+            {triggerable}
+            on:delete={onTriggerDelete}
+        />
+    {/each}
+    </div>
+{/if}
+
+<style>
+.field-triggers {
+    width: 100%;
+}
+
+.field-triggers:not(:empty) {
+    margin-top: var(--column-gap);
+}
+</style>

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

@@ -0,0 +1,49 @@
+<script>
+import KeyBinding from "../components/KeyBinding.svelte";
+import Params from "../modules/Params.svelte";
+
+export let size = 0.3;
+export let align = "right";
+export let output = false;
+export let hidden = false;
+
+$: visible = !hidden;
+$: width = typeof size === "number" ? `${size * 100}%` : size;
+
+</script>
+
+<div
+	class="container"
+	class:hidden={!visible}
+	class:align-left={align === "left"}
+	class:align-right={align === "right"}
+	style={`width: ${width};`}
+>
+	<Params {output}/>
+</div>
+<KeyBinding key="h" on:trigger={() => visible = !visible} />
+
+<style>
+.container {
+	--padding: 16px;
+	position: absolute;
+	top: var(--padding);
+
+	height: auto;
+
+	border-radius: calc(var(--border-radius-input) * 2);
+	overflow: hidden;
+}
+
+.container.hidden {
+	display: none;
+}
+
+.container.align-left {
+	left: var(--padding);
+}
+
+.container.align-right {
+	right: var(--padding);
+}
+</style>

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

@@ -0,0 +1,50 @@
+<script>
+import Root from "./LayoutRoot.svelte";
+import Column from "./LayoutColumn.svelte"; 
+import Build from "./Build.svelte";
+import Row from "./LayoutRow.svelte"; 
+import ModuleRenderer from "./ModuleRenderer.svelte";
+import { layout } from "../stores/layout.js";
+import KeyBinding from "../components/KeyBinding.svelte";
+import { monitors, preview } from "../stores/rendering";
+
+function toggleEdition() {
+	$layout.editing = !$layout.editing;
+}
+
+function togglePreview() {
+	if ($monitors.length === 1 && !$layout.previewing) {
+		$preview = $monitors[0].selected;
+	}
+	
+	$layout.previewing = !$layout.previewing;
+}
+
+</script>
+
+<Root>
+	{#if __PRODUCTION__ || $layout.previewing }
+		<Build />
+	{:else}
+	<Row size={1}>
+		<Column size={0.65}>
+			<ModuleRenderer name="monitor" />
+		</Column>
+		<Column size={0.35}>
+			<Row size={1}>
+				<ModuleRenderer name="exports" />
+			</Row>
+			<Row size={1}>
+				<ModuleRenderer name="params" />
+			</Row>
+		</Column>
+	</Row>
+	{/if}
+</Root>
+{#if !__PRODUCTION__}
+	<KeyBinding key="w" on:trigger={toggleEdition} />
+	<KeyBinding key="p" on:trigger={togglePreview} />
+{/if}
+{#if $layout.editing}
+	<KeyBinding key="Escape" type="down" on:trigger={toggleEdition} />
+{/if}

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

@@ -0,0 +1,9 @@
+<script>
+import LayoutComponent from "./LayoutComponent.svelte";
+
+export let size = 1;
+</script>
+
+<LayoutComponent size={size} type="column">
+	<slot></slot>
+</LayoutComponent>

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

@@ -0,0 +1,279 @@
+<script context="module">
+let ID = 0;
+</script>
+
+<script>
+import { getContext, hasContext, onDestroy, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { addChildren, addSibling, layout, remove, replaceChildren, swapRoot, updateModule } from "../stores/layout";
+import Toolbar from "./LayoutToolbar.svelte";
+import Resizer from "./LayoutResizer.svelte";
+import { getModuleID } from "./Module.svelte"; 
+import ModuleRenderer  from "./ModuleRenderer.svelte";
+import Preview from "./Preview.svelte";
+
+export let size = 1;
+export let type = "column";
+export let tree = { children: [] };
+
+let parent = hasContext('parent') ? getContext('parent') : null;
+let depth = hasContext('depth') ? (getContext('depth') + 1) : 0;
+let module = writable({});
+setContext('depth', depth);
+setContext('module', module);
+
+let isRoot = parent === null;
+let children = writable([]);
+let style = "";
+
+function createComponent({
+	id,
+	parent = null,
+	root = false,
+	node = null,
+	depth,
+	size = 1,
+	minimized = false,
+	type,
+	children = [],
+}) {
+	return {
+		id,
+		root,
+		node,
+		depth,
+		size,
+		minimized,
+		parent: parent ? parent.id : null,
+		type,
+		children,
+	};
+}
+
+let current = createComponent({
+	id: !isNaN(tree.id) ? tree.id : ID++,
+	root: isRoot,
+	depth,
+	size,
+	parent,
+	type,
+});
+
+ID = Math.max(ID, !isNaN(current.id) ? current.id + 1 : 0);
+
+$: isColumn = type === "column";
+$: isRow = !isColumn;
+
+const context = {
+	id: current.id,
+	children,
+	registerChild: (child) => {
+		$children = [...$children, child];
+
+		onDestroy(() => {
+			$children = $children.filter((c) => c !== child);
+		});
+	}
+};
+
+setContext('parent', context);
+
+if (parent) {
+	parent.registerChild(current);
+}
+
+if (!__PRODUCTION__) {
+	$layout.registerChild(current, () => $children);
+}
+
+$: {
+	let property = ``, value = ``;
+
+	const nodes = tree.children;
+
+	if (Array.isArray(nodes) && nodes.length > 1) {
+		if (isColumn) {
+			property = `grid-template-rows`;
+			value = nodes.map((row, i) => {
+				let size = `${row.size}fr`;
+
+				return `minmax(25px, ${size}) 0px`;
+			}).join(' ');
+		} else {
+			property = `grid-template-columns`;
+			value = nodes.map((col, i) => {
+				let size = `${col.size}fr`;
+
+				return `minmax(25px, ${size}) 0px`;
+			}).join(' ');
+		}
+
+		style = `${property}:${value}`;
+	} else {
+		style = "";
+	}
+}
+
+function addComponent(newType) {
+	const isSibling = newType === type;
+
+	const newborn = createComponent({
+		id: ID++,
+		parent: isSibling ? parent : context,
+		depth: isSibling ? depth : depth + 1,
+		type: newType,
+		children: [
+			{ mID: getModuleID(), type: "module" },
+		]
+	});
+
+	if (isSibling) {
+		if (isRoot) {
+			const newSibling = createComponent({
+				id: ID++,
+				depth: newborn.depth,
+				type: newborn.type,
+				children: current.children,
+			});
+
+			// switch type
+			current.children = [
+				newSibling,
+				newborn,
+			];
+			current.type = current.type === "column" ? "row" : "column";
+
+			swapRoot(current);
+		} else {
+			addSibling(current, newborn);
+		}
+	} else {
+		if ($children.length === 1 && $children[0].type === "module") {
+			replaceChildren(current, [
+				...$children.map((c, i) => createComponent({
+					id: ID++,
+					type: type === "row" ? "column" : "row",
+					depth: depth + 1,
+					children: [
+						c,
+					]
+				})),
+				newborn
+			]);
+
+			module.set({});
+		} else {
+			addChildren(current, newborn);
+		}
+	}
+}
+
+function addColumn() {
+	addComponent('column');
+}
+
+function addRow() {
+	addComponent("row");
+}
+
+function deleteCurrent() {
+	remove(current);
+
+	$children = current.children;
+}
+
+function handleModuleChange(event) {
+	const moduleName = event.detail;
+	$children[0].name = moduleName; // keep state when replacingChildren
+
+	updateModule($module, {
+		name: moduleName,
+	});
+}
+
+let offsetWidth;
+
+$: minimized = current.minimized;
+
+</script>
+
+<div
+	style={style}
+	class:column={isColumn}
+	class:root={isRoot}
+	class:row={isRow}
+	class:minimized={minimized}
+	bind:this={current.node}
+	bind:offsetWidth={offsetWidth}
+>
+	{#if isRoot && $layout.previewing}
+		<Preview />
+	{:else if tree && Array.isArray(tree.children) && tree.children.length > 0 }
+		{#each tree.children as child (child.id) }
+			{#if child.type === "column" || child.type === "row"}
+				<svelte:self type={child.type} size={child.size} tree={child} />
+			{:else if child.type === "module"}
+				<ModuleRenderer name={child.name} mID={child.mID} hasHeader={child.hasHeader} />
+			{/if}
+		{/each}
+	{:else}
+		<slot></slot>
+	{/if}
+	{#if $layout.editing && (($children.length === 1 && $children[0].type === "module") || isRoot) }
+	<Toolbar
+		{isRoot}
+		moduleName={$children[0].name}
+		on:change={handleModuleChange}
+		on:add-row={addRow}
+		on:add-column={addColumn}
+		on:delete={deleteCurrent}
+		vertical={offsetWidth < 300}
+	/>
+	{/if}
+</div>
+{#if !isRoot }
+<Resizer direction={isColumn ? "vertical" : "horizontal"} {current} {parent} />
+{/if}
+
+
+<style>
+.root {
+	align-content: stretch;
+	width: 100%;
+    height: 100%;
+}
+
+.column {
+	position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(25px, 1fr);
+}
+
+.column:not(:last-child) {
+    border-right: 0.5px solid var(--color-lightblack);
+}
+
+.column:not(:first-child) {
+    border-left: 0.5px solid var(--color-lightblack);
+}
+
+.row {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(25px, 1fr);
+    width: 100%;
+    height: 100%;
+
+    background-color: var(--color-background);
+}
+
+.row:not(:first-child) {
+	border-top: 0.5px solid var(--color-lightblack);
+}
+
+.row:not(:last-child) {
+	border-bottom: 0.5px solid var(--color-lightblack);
+}
+</style>