fragment-tools 0.1.0

package/src/client/app/modules/Console/ConsoleLine.svelte

@@ -0,0 +1,254 @@
+<script>
+	import JSONTree from 'svelte-json-tree';
+	// import ConsoleTable from './ConsoleTable.svelte';
+
+	export let log;
+	export let level = 1;
+
+	function toggleGroupCollapse() {
+		log.collapsed = !log.collapsed;
+	}
+</script>
+
+<!-- {#if log.level === 'table'}
+	<ConsoleTable data={log.args[0]} columns={log.args[1]} />
+{/if} -->
+
+<div class="log console-{log.level}" style="padding-left: {level * 8}px" on:click={log.level === 'group' ? toggleGroupCollapse : undefined}>
+	{#if log.count > 1}
+		<div class="count">
+			<span>{log.count}</span>
+		</div>
+	{/if}
+
+	{#if log.level === 'trace' || log.level === 'assert'}
+		<div class="arrow" class:expand={!log.collapsed} on:click={toggleGroupCollapse}>▶</div>
+	{/if}
+
+	{#if log.level === 'assert'}
+		<span class="assert">Assertion failed:</span>
+	{/if}
+
+	{#if log.level === 'clear'}
+		<span class="info">Console was cleared</span>
+	{:else if log.level === 'unclonable'}
+		<span class="info error">Message could not be cloned. Open devtools to see it</span>
+	{:else if log.level === 'group'}
+		<div class="arrow" class:expand={!log.collapsed}>▶</div>
+		<span class="title">{log.label}</span>
+	{:else if log.level.startsWith('system')}
+		{#each log.args as arg}
+			{arg}
+		{/each}
+	{:else if log.level === 'table'}
+		<JSONTree value={log.args[0]} />
+	{:else}
+		<div class="args">
+			{#each log.args as arg}
+				{#if typeof arg === "string"}
+					<span class="string">{arg}</span>
+				{:else if typeof arg === "function"}
+					<div class="function">{arg.toString()}</div>
+				{:else}
+					<JSONTree value={arg} />
+				{/if}
+			{/each}
+		</div>
+	{/if}
+	{#each new Array(level - 1) as _, idx}
+		<div class="outline" style="left: {idx * 15 + 15}px" />
+	{/each}
+</div>
+
+{#if log.level === 'group' && !log.collapsed}
+	{#each log.logs as childLog}
+		<svelte:self log={childLog} level={level + 1}/>
+	{/each}
+{/if}
+
+{#if (log.level === 'trace' || log.level === 'assert') && !log.collapsed}
+	<div class="trace">
+		{#each log.stack.split('\n').slice(2) as stack}
+			<div>{stack.replace(/^\s*at\s+/, '')}</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+.log {
+	--json-tree-string-color: rgba(240, 240, 240, 0.6);
+	--arrow-sign: rgba(255, 255, 255, 0.5);
+	--json-tree-font-size: var(--font-size-input);
+	--json-tree-font-family: var(--font-mono);
+	--json-tree-number-color: #9980FF;
+	--json-tree-symbol-color: #cb3f41;
+	--json-tree-boolean-color: #9980FF;
+	--json-tree-function-color: var(--color-active);
+	/* --json-tree-number-color: #3029cf; */
+	--json-tree-property-color: #5DB0D7;
+	--json-tree-label-color: #17d08e;
+	--json-tree-arrow-color: #727272;
+	--json-tree-null-color: #8d8d8d;
+	--json-tree-undefined-color: #8d8d8d;
+	--json-tree-date-color: #8d8d8d;
+	--json-tree-li-indentation: 12px;
+
+	position: relative;
+	
+	display: flex;
+	padding: 4px 0 3px;
+
+	color: rgba(255, 255, 255, 0.5);
+
+	border-bottom: 1px solid #3A3A3A;
+	border-top: 1px solid #3A3A3A;
+}
+
+.args {
+	display: flex;
+	flex-direction: column;
+}
+
+.string {
+	display: block;
+	font-size: var(--font-size-input);
+}
+
+.function {
+	font-size: var(--font-size-input);
+	font-style: italic;
+	white-space: pre;
+	tab-size: 2em;
+}
+
+:global(.log ul > .Number, .log ul > .Boolean, .log ul > .Date, .log ul > .Undefined) {
+	margin-left: calc(var(--li-identation) * -1);
+}
+
+.log:first-child:not(.console-error) {
+	border-top: none;
+}
+
+.log:not(:first-child) {
+	margin-top: -1px;
+}
+
+/* :global(.console-warn  .console-log) {
+	border-top-color: transparent;
+} */
+
+/* .log > :global(*) {
+	margin-right: 10px;
+} */
+
+.console-warn, .console-system-warn {
+	--json-tree-string-color: #F3AB26;
+	background: #332B00;
+	border-color: #665600;
+	color: var(--json-tree-string-color);
+}
+
+.console-error, .console-assert {
+	--json-tree-string-color: #FF8081;
+	--json-tree-label-color: #FF8081;
+
+	color: var(--json-tree-string-color);
+	background: #2A0000;
+	border-color: #5C0000;
+}
+
+.console-group, .arrow {
+	cursor: pointer;
+	user-select: none;
+}
+
+.log :global(.arrow) {
+	margin-right: 10px;
+}
+
+.log :global(.String) {
+	white-space: pre-wrap;
+}
+
+.console-trace, .console-assert {
+	border-bottom: none;
+}
+
+.console-assert + .trace {
+	background: #fff0f0;
+	border-color: #fed6d7;
+}
+
+.trace {
+	border-bottom: 1px solid #eee;
+	font-size: 12px;
+	font-family: var(--font-mono);
+	padding: 4px 0 2px;
+}
+
+.trace > :global(div) {
+	margin-left: 15px;
+}
+
+.count {
+	position: relative;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 4px;
+	
+	font-size: 9px;
+	padding: 0 4px;
+}
+
+.count:before {
+	content: '';
+
+	position: absolute;
+
+	width: 100%;
+	min-width: 16px;
+	height: 16px;
+
+	border-radius: 9px;
+	background-color: var(--color-lightblack);
+}
+
+.count span {
+	position: relative;
+}
+
+.outline {
+	border-left: 1px solid #9c9cab;
+	position: absolute;
+	top: 0;
+	bottom: -1px;
+}
+
+.arrow {
+	position: absolute;
+	font-size: 0.6em;
+	transition: 150ms;
+	transform-origin: 50% 50%;
+	transform: translateY(1px) translateX(-50%);
+}
+
+.arrow.expand {
+	transform: translateY(1px) translateX(-50%) rotateZ(90deg);
+}
+
+.title {
+	font-family: var(--font-mono);
+	font-size: 13px;
+	font-weight: bold;
+	padding-left: 11px;
+	height: 19px;
+}
+
+.assert {
+	padding-left: 11px;
+	font-weight: bold;
+	/* color: #da106e; */
+}
+</style>

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

@@ -0,0 +1,82 @@
+<script>
+import Module from "../ui/Module.svelte";
+import ModuleHeaderAction from "../ui/ModuleHeaderAction.svelte";
+import { logs } from "../stores/console";
+import ConsoleLine from "./Console/ConsoleLine.svelte";
+import { afterUpdate } from "svelte";
+
+export let mID;
+export let hasHeader;
+
+let scrollableContainer;
+
+function clear() {
+    $logs = [];
+}
+
+afterUpdate(() => {
+    if (scrollableContainer) {
+        scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
+    }
+})
+
+</script>
+
+<Module {mID} {hasHeader} name="console" scrollable={false}>
+    <svelte:fragment slot="header-right">
+        <ModuleHeaderAction border label="Clear" on:click={() => clear()}>clear</ModuleHeaderAction>
+    </svelte:fragment>
+    <div class="container">
+        <div class="list">
+            <div class="scroll" bind:this={scrollableContainer}>
+                {#each $logs as log}
+                    <ConsoleLine {log} />
+                {/each}
+            </div>
+        </div>
+    </div>
+</Module>
+
+<style>
+.container {
+    position: relative;
+    
+    height: 100%;
+    max-height: 100%;
+    padding: 4px;
+}
+
+.list {
+    position: relative;
+
+    margin-right: var(--padding);
+    padding: 1px 1px;
+
+    height: 100%;
+    max-height: 100%;
+
+    background-color: #1d1d1e;
+    border-radius: var(--border-radius-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+}
+
+.scroll {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.scroll::-webkit-scrollbar {
+    width: 5px;               /* width of the entire scrollbar */
+}
+
+.scroll::-webkit-scrollbar-track {
+    background-color: var(--color-lightblack);        /* color of the tracking area */
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: var(--color-active);    /* color of the scroll thumb */
+    border-radius: 20px;       /* roundness of the scroll thumb */
+}
+
+</style>

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

@@ -0,0 +1,105 @@
+<script>
+import Module from "../ui/Module.svelte";
+import Field from "../ui/Field.svelte";
+import FieldGroup from "../ui/FieldGroup.svelte";
+import { exports } from "../stores";
+import { recording, capturing, IMAGE_ENCODINGS, VIDEO_FORMATS } from "../stores/exports";
+
+export let mID;
+export let hasHeader = true;
+
+const LABEL_RECORD = "start";
+const LABEL_RECORDING = "stop";
+
+function record () {
+	$recording = !$recording;
+}
+
+function capture() {
+	$capturing = !$capturing;
+}
+
+$: recordLabel = $recording ? LABEL_RECORDING : LABEL_RECORD;
+
+</script>
+
+<Module {mID} {hasHeader} name="exports">
+	<FieldGroup name="image">
+		<Field
+			key="encoding"
+			value={$exports.imageEncoding}
+			params={{ options: IMAGE_ENCODINGS }}
+			on:change={((e) => {
+				$exports.imageEncoding = e.detail;
+			})}
+		/>
+		<Field
+			key="quality"
+			value={$exports.imageQuality}
+			params={{ min: 1, max: 100, suffix: "%", triggerable: false }}
+			on:change={((e) => {
+				$exports.imageQuality = e.detail;
+			})}
+		/>
+		<Field
+			key="pixelsPerInch"
+			value={$exports.pixelsPerInch}
+			params={{ step: 1 }}
+			on:change={((e) => {
+				$exports.pixelsPerInch = e.detail;
+			})}
+		/>
+		<Field
+			key="screenshot"
+			value={capture}
+			params={{ label: "capture", triggerable: false }}
+		/>
+	</FieldGroup>
+	<FieldGroup name="video">
+		<Field
+			key="framerate"
+			value={$exports.framerate}
+			on:change={((e) => {
+				$exports.framerate = e.detail;
+			})}
+		/>
+		<Field
+			key="format"
+			value={$exports.videoFormat}
+			params={{ options: Object.values(VIDEO_FORMATS) }}
+			on:change={((e) => {
+				$exports.videoFormat = e.detail;
+			})}
+		/>
+		<Field
+			key="quality"
+			value={$exports.videoQuality}
+			params={{ min: 1, max: 100, step: 1, suffix: "%", triggerable: false }}
+			on:change={((e) => {
+				$exports.videoQuality = e.detail;
+			})}
+		/>
+		<Field
+			key="useDuration"
+			value={$exports.useDuration}
+			on:change={((e) => {
+				$exports.useDuration = e.detail;
+			})}
+		/>
+		{#if $exports.useDuration }
+		<Field
+			key="loopCount"
+			value={$exports.loopCount}
+			params={{ step: 1 }}
+			on:change={((e) => {
+				$exports.loopCount = e.detail;
+			})}
+		/>
+		{/if}
+		<Field
+			key="record"
+			value={record}
+			params={{ label: recordLabel, triggerable: false }}
+		/>
+	</FieldGroup>
+</Module>

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

@@ -0,0 +1,106 @@
+<script>
+import { onMount } from "svelte";
+import Module from "../ui/Module.svelte";
+import Field from "../ui/Field.svelte";
+import MIDI from "../inputs/MIDI.js";
+
+export let mID;
+export let hasHeader;
+
+let input, output;
+let inputs = [], outputs = [];
+
+function createDeviceOptions(deviceMap = new Map()) {
+    let options = [];
+
+    if (deviceMap.size !== 0) {
+        options.push({ value: "none", label: "No device selected." });
+    }
+
+    for (let entry of deviceMap) {
+        let device = entry[1];
+        const { id, name, manufacturer } = device;
+
+        options.push({ value: id, label: `${manufacturer} ${name} – id: ${id}` });
+    }
+
+    if (options.length === 0) {
+        options = [
+            { value: "none", label: "No device detected."}
+        ];
+    }
+
+    return options;
+}
+
+let messages = [];
+
+$: {
+    MIDI.selectedInputID = input;
+}
+
+$: {
+    MIDI.selectedOutputID = output;
+}
+
+onMount(async () => {
+    await MIDI.request();
+
+    function refresh() {
+        inputs = createDeviceOptions(MIDI.inputs);
+        outputs = createDeviceOptions(MIDI.outputs);
+
+        // if a single device is connected, select it by default
+        input = (inputs.length === 2 ? inputs[1].value : inputs[0].value);
+        output = (outputs.length === 2 ? outputs[1].value : outputs[0].value);
+    }
+
+    MIDI.addEventListener("connected", refresh);
+    MIDI.addEventListener("disconnected", () => {
+        refresh();
+    });
+
+    MIDI.addEventListener("message", (event) => {
+        const { type, note, channel, value } = event;
+        let date = new Date();
+        let time = `${date.getHours()}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
+
+        let noteLog = ["noteon", "noteoff"].includes(type) ? ` note:${note.name}` : ``; 
+
+        messages = [
+            ...messages,
+            `${time} ${type} number:${note.number}${noteLog}`,
+        ]
+    });
+
+    refresh();
+});
+
+</script>
+
+<Module {mID} {hasHeader} name="MIDI" {...$$props} slug="midi">
+    <Field
+        key="inputs"
+        value={input}
+        on:change={(event) => input = event.detail}
+        params={{
+            options: inputs,
+        }}
+    />
+    <Field
+        key="outputs"
+        value={output}
+        on:change={(event) => output = event.detail}
+        params={{
+            options: outputs,
+        }}
+    />
+    <Field
+        key="messages"
+        value={messages}
+        type="list"
+        params={{
+            disabled: true
+        }}
+    />
+</Module>

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

@@ -0,0 +1,62 @@
+<script context="module">
+let ID = 0;
+</script>
+
+<script>
+import { onMount, onDestroy } from "svelte";
+import Module from "../ui/Module.svelte";
+import SketchRenderer from "../ui/SketchRenderer.svelte";
+import OutputRenderer from "../ui/OutputRenderer.svelte";
+import SketchSelect from "../ui/SketchSelect.svelte";
+import { sketchesKeys } from "../stores/sketches.js";
+import { monitors, preview } from "../stores/rendering";
+
+export let mID;
+export let hasHeader = true;
+export let sketchKey = null;
+
+let id = ID++;
+let name = "monitor";
+let selected = sketchKey ?
+    sketchKey :
+    ($preview ? $preview : $sketchesKeys[Math.min(id, $sketchesKeys.length - 1)]);
+
+onMount(() => {
+    $monitors = [
+        ...$monitors,
+        {
+            id,
+            selected,
+        }
+    ];
+});
+
+monitors.subscribe((all) => {
+    const current = all.find((monitor) => monitor.id === id);
+
+    if (current && current.selected !== selected) {
+        selected = current.selected;
+    }
+})
+
+onDestroy(() => {
+    $monitors = $monitors.filter((m) => m.id !== id);
+});
+
+$: index = $monitors.findIndex(monitor => monitor.id === id);
+$: moduleName = `${name} ${$monitors.length > 1 ? (index + 1) : ""}`;
+</script>
+
+<Module {hasHeader} {mID} slug="monitor" name={moduleName} scrollable={false}>
+    <svelte:fragment slot="header-left">
+        <SketchSelect
+            monitorID={id}
+            {selected}
+        />
+    </svelte:fragment>
+    {#if selected && selected !== "output"}
+        <SketchRenderer key={selected} {id} />
+    {:else if selected }
+        <OutputRenderer />
+    {/if}
+</Module>