fragment-tools 0.1.0

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

@@ -0,0 +1,87 @@
+<script>
+import ModuleHeaderSelect from "./ModuleHeaderSelect.svelte";
+import ModuleHeaderButton from "./ModuleHeaderButton.svelte";
+
+export let label = "";
+export let permanent = false;
+export let value = null;
+export let border = false;
+export let margin = true;
+export let options = [];
+
+$: disabled = options.length === 1;
+
+</script>
+
+<div class="module-header-action" class:permanent={permanent} class:border={border} class:no-margin={!margin} class:disabled={disabled}>
+    {#if options.length > 0}
+        <ModuleHeaderSelect {options} {value} {disabled} on:change/>
+    {:else}
+        <ModuleHeaderButton label={label} on:click>
+            <slot name="text">
+                <div class="text">
+                    <slot></slot>
+                </div>
+            </slot>
+            <slot name="icon"></slot>
+        </ModuleHeaderButton>
+    {/if}
+</div>
+
+
+<style>
+.module-header-action {
+    display: flex;
+    align-items: center;
+
+    color: rgba(255, 255, 255, 0.75);
+
+    margin: 0 2px;
+}
+
+.module-header-action:not(.disabled):hover {
+    color: rgba(255, 255, 255, 1);
+}
+
+.text:not(:empty) {
+    color: inherit;
+    background: transparent;
+    width: 100%;
+    font-size: 10px;
+
+    padding: 1px 3px 1px 3px;
+}
+
+.module-header-action.no-margin {
+    margin: 0;
+}
+
+.module-header-action.border {
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.module-header-action:not(.disabled).border:hover {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.module-header-action:first-child {
+    margin-left: 0;
+}
+
+.module-header-action:last-child {
+    margin-right: 0;
+}
+
+.module-header-action:not(.permanent) {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+}
+
+:global(.module__header:hover .module-header-action:not(.permanent)) {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+</style>

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

@@ -0,0 +1,21 @@
+<script>
+export let label;
+</script>
+
+<button class="module-header-action__button" aria-label={label} on:click>
+    <slot></slot>
+</button>
+
+<style>
+.module-header-action__button {
+    color: inherit;
+    background: transparent;
+    /* opacity: 0.5; */
+    display: flex;
+    transition: opacity 0.2s ease;
+}
+
+.module-header-action__button:hover {
+    opacity: 1;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<script>
+import { createEventDispatcher } from "svelte";
+
+import SelectChevrons from "./SelectChevrons.svelte";
+
+export let value;
+export let options = [];
+export let disabled = false;
+
+const dispatch = createEventDispatcher();
+
+function handleChange(event) {
+    dispatch("change", event.currentTarget.value);
+}
+</script>
+
+<div class="module-header-select">
+    <select class="select" on:change={handleChange} class:single={options.length === 1} disabled={disabled}>
+        {#each options as option}
+            <option value={option.value} selected={value === option.value}>{option.label}</option>
+        {/each}
+    </select>
+    {#if options.length > 1 }
+        <SelectChevrons width={15} height={15} --color="rgba(255, 255, 255, 0.75)" />
+    {/if}
+</div>
+
+<style>
+.module-header-select {
+    position: relative;
+    
+    display: flex;
+}
+
+.select {
+    font-size: 10px;
+    padding: 1px 3px;
+    
+    color: inherit;
+    background: transparent;
+    
+    outline: 0;
+    user-select: none;
+}
+
+.select:not(.single) {
+    padding-right: 15px;
+}
+
+</style>

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

@@ -0,0 +1,38 @@
+<script context="module">
+export let moduleNames = [
+    "monitor",
+    "params",
+    "midi",
+    "console",
+    "exports",
+];
+</script>
+
+<script>
+import Module from "./Module.svelte";
+
+export let mID = undefined;
+export let name;
+export let hasHeader = true;
+
+const moduleList = {
+    "monitor": () => import("../modules/Monitor.svelte"),
+    "params": () => import("../modules/Params.svelte"),
+    "midi": () => import("../modules/MidiPanel.svelte"),
+    "console": () => import("../modules/Console.svelte"),
+    "exports": () => import("../modules/Exports.svelte"),
+};
+
+</script>
+
+{#if moduleList[name]}
+    {#await moduleList[name]()}
+        <Module {hasHeader} {mID} {name}/>
+    {:then value}
+        <svelte:component this={value.default} {mID} {hasHeader} />
+    {:catch error}
+        <p>Something went wrong: {error.message}</p>
+    {/await}
+{:else}
+    <Module {hasHeader} {mID} {name}/>
+{/if}

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

@@ -0,0 +1,149 @@
+<script>
+import { onDestroy, onMount } from "svelte";
+import { fragment, Texture } from "../lib/gl";
+import { transitions } from "../transitions/index.js";
+import { rendering, monitors } from "../stores/rendering.js";
+import { multisampling, threshold, transition } from "../stores/multisampling.js";
+
+export let paused = false;
+
+let _raf;
+let canvas;
+let output;
+let _mounted;
+let uniforms = {
+    threshold: { value: 0, type: "float" },
+    uSampler0: { value: null, type: "sampler2D" },
+    uSampler1: { value: null, type: "sampler2D" },
+}
+
+let defaultFragmentShader = /* glsl */`
+precision highp float;
+
+uniform float threshold;
+uniform sampler2D uSampler0;
+uniform sampler2D uSampler1;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 mapTexel0 = texture2D(uSampler0, vUv);
+    vec4 mapTexel1 = texture2D(uSampler1, vUv);
+
+    vec3 color = mix(mapTexel0.rgb, mapTexel1.rgb, threshold);
+
+    gl_FragColor = vec4(color, 1.);
+}
+`;
+
+$: t = transitions[$transition];
+$: fragmentShader = t ? t.fragmentShader : defaultFragmentShader;
+$: {
+    if (output) {
+        output.fragmentShader = fragmentShader;
+    }
+}
+
+onMount(() => {
+    output = fragment({
+        canvas,
+        shader: fragmentShader,
+        uniforms,
+    });
+
+    uniforms.uSampler0.value = new Texture(output.gl);
+    uniforms.uSampler1.value = new Texture(output.gl);
+
+    assignTextures();
+    resize();
+    render();
+
+    rendering.subscribe(() => {
+        resize();
+    });
+
+    _mounted = true;
+});
+
+onDestroy(() => {
+    cancelAnimationFrame(_raf);
+
+    output.destroy();
+    output = null;
+});
+
+function assignTextures([monitorID0, monitorID1] = $multisampling) {
+    if (!output) return;
+
+    if (monitorID0 >= 0) {
+        uniforms.uSampler0.value.image = $monitors.find((monitor) => monitor.id === monitorID0).canvas;
+    }
+
+    if (monitorID1 >= 0) {
+        uniforms.uSampler1.value.image = $monitors.find((monitor) => monitor.id === monitorID1).canvas;
+    }
+}
+
+multisampling.subscribe(assignTextures);
+
+function render() {
+    uniforms.threshold.value = $threshold;
+
+    if (!paused) {
+        uniforms.uSampler0.value.needsUpdate = true;
+        uniforms.uSampler1.value.needsUpdate = true;
+
+        output.render();
+    }
+
+    _raf = requestAnimationFrame(render);
+}
+
+function resize() {
+    if (!output) return;
+
+    const { width, height, pixelRatio } = $rendering;
+
+    output.resize({
+        width,
+        height,
+        pixelRatio,
+    })
+}
+
+</script>
+
+<div class="output-renderer">
+    <div class="canvas-container" style="max-width: {$rendering.width}px;">
+        <canvas bind:this={canvas}></canvas>
+    </div>
+</div>
+
+<style>
+.output-renderer {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+
+    background-color: var(--background-color, var(--color-lightblack));
+}
+
+.output-renderer :global(canvas) {
+    max-width: 100%;
+    max-height: 100%;
+    background: black;
+
+    width: auto !important;
+    height: auto !important;
+}
+
+.canvas-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    max-height: 100%;
+}
+</style>

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

@@ -0,0 +1,109 @@
+<script>
+import { multisampling, threshold, transition } from "../stores/multisampling.js";
+import { monitors } from "../stores/rendering.js";
+import { transitions } from "../transitions/index.js";
+import Field from "./Field.svelte";
+import FieldGroup from "./FieldGroup.svelte";
+
+let monitorDisabled = false;
+let sampler0 = -1;
+let sampler1 = -1;
+
+const transitionOptions = Object.keys(transitions).map((key) => {
+    const transition = transitions[key];
+    const label = transition.name ? transition.name : key;
+    return { value: key, label };
+});
+
+if (!$transition) {
+    $transition = transitionOptions[0].value;
+}
+
+$: samplerOptions = $monitors
+	.map((monitor, index) => ({ label: `monitor ${index+1}`, value: monitor.id })) // set index first so it matches <Monitor>
+    .filter((option) => {
+		const monitor = $monitors.find((m) => m.id === option.value);
+
+		return monitor.selected !== "output";
+	});
+$: {
+    monitorDisabled = samplerOptions.length === 0;
+
+    if (samplerOptions.length === 0) {
+        samplerOptions = [
+            { label: `No monitor available.`, value: -1 }
+        ];
+        sampler0 = samplerOptions[0].value;
+        sampler1 = samplerOptions[0].value;
+    } else {
+        if (sampler0 < 0) {
+            sampler0 = samplerOptions[0].value;
+        }
+
+        if (sampler1 < 0) {
+            sampler1 = samplerOptions.length > 1 ? samplerOptions[1].value : -1;
+        }
+    }
+
+    $multisampling = [sampler0, sampler1];
+}
+
+</script>
+<FieldGroup name="monitors">
+    <Field
+        key="sampler0"
+        value={sampler0}
+        on:change={event => {
+            sampler0 = Number(event.detail);
+        }}
+        params={
+            {
+                options: samplerOptions,
+                disabled: monitorDisabled
+            }
+        }
+    />
+    <Field
+        key="sampler1"
+        value={sampler1}
+        on:change={event => {
+            sampler1 = Number(event.detail);
+        }}
+        params={
+            {
+                options: samplerOptions,
+                disabled: monitorDisabled
+            }
+        }
+    />
+</FieldGroup>
+<FieldGroup name="transition">
+    <Field
+        key="type"
+        value={$transition}
+        on:change={(event) => {
+            $transition = event.detail;
+        }}
+        params={{
+            options: transitionOptions,
+        }}
+    />
+    <Field
+        key="threshold"
+        value={$threshold}
+        on:change={(event) => $threshold = event.detail }
+        params={{
+            step: 0.01,
+            min: 0,
+            max: 1,
+        }}
+    />
+    <Field
+        key="switch"
+        value={() => $threshold = 1 - Math.round($threshold)}
+        params={{
+            label: `switch ${Math.round($threshold) > 0 ? `<` : `>`}`
+        }}
+    />
+    
+</FieldGroup>

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

@@ -0,0 +1,139 @@
+<script>
+import { rendering, SIZES, monitors } from "../stores/rendering.js";
+import { sketchesCount } from "../stores/sketches.js";
+import Field from "./Field.svelte";
+import presets, { getDimensionsForPreset } from "../lib/presets";
+import { exports } from "../stores";
+import ParamsMultisampling from "./ParamsMultisampling.svelte";
+
+let canvasWidth = $rendering.width;
+let canvasHeight = $rendering.height;
+
+function handleChangeDimensions(event) {
+    const [width, height] = event.detail;
+    const needsUpdate = canvasWidth !== width || canvasHeight !== height;
+
+    if (needsUpdate) {
+        canvasWidth = width;
+        canvasHeight = height;
+
+        rendering.update((curr) => {
+            return {
+                ...curr,
+                width,
+                height
+            }
+        });
+    }
+}
+
+let sizes = Object.values(SIZES);
+$: dimensionsEnabled = [SIZES.FIXED, SIZES.SCALE].includes($rendering.resizing);
+
+$: {
+    if ($rendering.resizing === SIZES.PRESET) {
+        const { preset } = $rendering;
+        const [ width, height ] = getDimensionsForPreset(preset, { pixelsPerInch: 300 });
+
+        rendering.update((curr) => {
+            return {
+                ...curr,
+                width,
+                height,
+            };
+        });
+    }
+}
+
+</script>
+
+<Field
+    key="dimensions"
+    value={[
+        $rendering.width,
+        $rendering.height,
+    ]}
+    on:change={handleChangeDimensions}
+    params={{
+        step: 1,
+        suffix: "px",
+        locked: false,
+        disabled: !dimensionsEnabled,
+    }}
+/>
+<Field
+    key="canvasSize"
+    value={$rendering.resizing}
+    on:change={(event) => {
+        const resizing = event.detail;
+        let aspectRatio = 1;
+
+        if (resizing === SIZES.ASPECT_RATIO) {
+            // compute aspect ratio based on previous props
+            aspectRatio = $rendering.width / $rendering.height;
+        }
+
+        $exports.pixelsPerInch = resizing === SIZES.PRESET ? 300 : 72;
+
+        rendering.update((curr) => {
+            return {
+                ...curr,
+                resizing,
+                aspectRatio,
+            }
+        });
+    }}
+    params={{
+        options: sizes,
+    }}
+/>
+{#if $rendering.resizing === SIZES.ASPECT_RATIO}
+<Field
+    key="aspectRatio"
+    value={$rendering.aspectRatio}
+    on:change={(event) => {
+        $rendering.aspectRatio = event.detail;
+    }}
+    params={{
+        step: 0.01,
+    }}
+/>
+{/if}
+{#if $rendering.resizing === SIZES.SCALE}
+<Field
+    key="zoom"
+    value={$rendering.scale}
+    on:change={(event) => {
+        $rendering.scale = event.detail;
+    }}
+    params={{
+        step: 0.01,
+    }}
+/>
+{/if}
+{#if $rendering.resizing === SIZES.PRESET}
+<Field
+    key="preset"
+    value={$rendering.preset}
+    on:change={(event) => {
+        $rendering.preset = event.detail;
+    }}
+    params={{
+        options: presets,
+    }}
+/>
+{/if}
+
+{#if $rendering.resizing !== SIZES.PRESET }
+<Field
+    key="pixelRatio"
+    value={Number($rendering.pixelRatio)}
+    on:change={(event) => $rendering.pixelRatio = event.detail }
+    params={{
+        step: 0.1,
+    }}
+/>
+{/if}
+{#if $sketchesCount > 1 && $monitors.length > 1 }
+<ParamsMultisampling />
+{/if}

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

@@ -0,0 +1,15 @@
+<script>
+import { onDestroy } from "svelte";
+
+import { rendering } from "../stores/rendering";
+import Build from "./Build.svelte";
+
+let saved = $rendering;
+
+onDestroy(() => {
+	$rendering = saved;
+});
+
+</script>
+
+<Build />

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

@@ -0,0 +1,25 @@
+<script>
+export let width = 24;
+export let height = 24;
+</script>
+
+<div class="chevrons" style={`width: ${width}px;`}>
+	<svg class="chevron chevron-bottom" width={width} height={height} fill="none" viewBox="0 0 24 24">
+		<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+	</svg>
+</div>
+
+<style>
+.chevrons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    width: 15px;
+
+    color: var(--color, currentColor);
+    pointer-events: none;
+}
+</style>