fragment-tools 0.1.13 → 0.1.14

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

@@ -1,103 +1,115 @@
 <script>
-export let name;
+	export let name;
 
-export let collapsed = false;
-
-function handleClick() {
-    collapsed = !collapsed;
-}
+	export let collapsed = false;
 
+	function handleClick() {
+		collapsed = !collapsed;
+	}
 </script>
 
-<div class="field-group {collapsed ? "collapsed" : ""}">
-    <header class="header">
-        <button class="header__action" on:click={handleClick}>
-            <svg class="header__icon" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"/>
-            </svg>
-            <span class="field-group__name">{name}</span>
-        </button>
-    </header>
-    <div class="content">
-        <slot></slot>
-    </div>
+<div class="field-group {collapsed ? 'collapsed' : ''}">
+	<header class="header">
+		<button class="header__action" on:click={handleClick}>
+			<svg
+				class="header__icon"
+				width="24"
+				height="24"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M10.75 8.75L14.25 12L10.75 15.25"
+				/>
+			</svg>
+			<span class="field-group__name">{name}</span>
+		</button>
+	</header>
+	<div class="content">
+		<slot />
+	</div>
 </div>
 
 <style>
-.field-group {
-    position: relative;
-
-    display: grid;
-    width: 100%;
-    
-}
-
-.field-group:after {
-    content: "";
-
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    
-    width: 12px;
-    height: 1px;
-    
-    background-color: #323233;
-}
-
-.header {
-    padding: 3px 6px;
-    border-bottom: 1px solid #323233;
-}
-
-.header__action {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-
-    background: transparent;
-    cursor: pointer;
-}
-
-.header__icon {
-    padding-bottom: 1px;
-
-    color: #f0f0f0;
-    transform: rotate(90deg);
-    opacity: 0.5;
-    transition: opacity 0.1s ease;
-}
-
-.header__action:hover .header__icon {
-    opacity: 1;
-}
-
-.field-group.collapsed .header__icon {
-    transform: rotate(0deg);
-}
-
-.field-group__name {
-    color: #f0f0f0;
-
-    font-size: 11px;
-    font-weight: 700;
-    /* text-transform: uppercase; */
-
-    opacity: 0.75;
-    transition: opacity 0.1s ease;
-}
-
-.header__action:hover .field-group__name {
-    opacity: 1;
-}
-
-.content {
-    margin-left: 12px;
-    border-left: 1px solid #323233;
-}
-
-.field-group.collapsed .content {
-    display: none;
-}
+	.field-group {
+		position: relative;
+
+		display: grid;
+		width: 100%;
+	}
+
+	.field-group:after {
+		content: '';
+
+		position: absolute;
+		left: 0;
+		bottom: 0px;
+
+		width: 12px;
+		height: 1px;
+
+		background-color: #323233;
+	}
+
+	.header {
+		padding: 3px 6px;
+		border-bottom: 1px solid #323233;
+	}
+
+	.header__action {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		text-align: left;
+
+		background: transparent;
+		cursor: pointer;
+		outline: 0;
+	}
+
+	.header__icon {
+		padding-bottom: 1px;
+
+		color: #f0f0f0;
+		transform: rotate(90deg);
+		opacity: 0.5;
+		transition: opacity 0.1s ease;
+	}
+
+	.header__action:hover .header__icon {
+		opacity: 1;
+	}
+
+	.field-group.collapsed .header__icon {
+		transform: rotate(0deg);
+	}
+
+	.field-group__name {
+		color: #f0f0f0;
+
+		font-size: 11px;
+		font-weight: 700;
+		/* text-transform: uppercase; */
+
+		opacity: 0.75;
+		transition: opacity 0.1s ease;
+	}
+
+	.header__action:hover .field-group__name,
+	.header__action:focus-visible .field-group__name {
+		opacity: 1;
+	}
+
+	.content {
+		margin-left: 12px;
+		border-left: 1px solid #323233;
+	}
+
+	.field-group.collapsed .content {
+		display: none;
+	}
 </style>

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

@@ -1,123 +1,132 @@
 <script>
-export let visible = true;
-export let secondary = false;
-export let interactive = false;
-export let label = "";
-export let name = "";
+	export let key;
+	export let visible = true;
+	export let secondary = false;
+	export let interactive = false;
+	export let displayName = key;
+	export let disabled = false;
 </script>
 
-<div class="field__section" class:visible={visible} class:secondary={secondary} class:no-label={label === null}>
-    <div class="field__infos">
-        {#if label !== null}
-            {#if interactive}
-                <button class="field__label" on:click>{label}</button>
-            {:else}
-                <span class="field__label">{label}</span>
-            {/if}
-        {/if}
-        <slot name="infos"></slot>
-    </div>
-    <div class="field__input">
-        <slot></slot>
-    </div>
+<div
+	class="field__section"
+	class:visible
+	class:secondary
+	class:nameless={displayName === null}
+>
+	<div class="field__infos">
+		{#if displayName !== null}
+			{#if interactive}
+				<button class="field__label" {disabled} on:click
+					>{displayName}</button
+				>
+			{:else}
+				<span class="field__label">{displayName}</span>
+			{/if}
+		{/if}
+		<slot name="infos" />
+	</div>
+	<div class="field__input">
+		<slot />
+	</div>
 </div>
 
 <style>
-.field__section {
-    position: relative;
-    
-    display: grid;
-    grid-template-columns: 0.5fr 1fr;
-    column-gap: 10px;
-}
-
-.field__section.no-label {
-    grid-template-columns: 1fr;
-}
-
-.field__section:hover .field__label, .field__section:focus-within .field__label {
-    opacity: 1;
-}
-
-.field__section:not(.visible) {
-    display: none;
-}
-
-.field__section.secondary {
-    --margin: 15px;
-
-    grid-template-columns: 0.25fr 1fr;
-    margin-top: var(--margin);
-}
-
-.field__section.secondary:before {
-    content: '';
-
-    position: absolute;
-    left: 10px;
-    top: calc(var(--margin) * -1);
-
-    width: 1px;
-    height: var(--margin);
-    
-    background-color: var(--color-spacing);
-}
-
-.field__infos {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    
-    color: var(--color-text);
-}
-
-.field__label {
-    color: inherit;
-    font-size: var(--font-size-input);
-    user-select: none;
-
-    opacity: 0.6;
-    background-color: transparent;
-    transition: opacity 0.1s ease;
-}
-
-button.field__label {
-    cursor: pointer;
-}
-
-.field__label:focus-visible {
-    outline: 0;
-    box-shadow: 0 0 0 2px var(--color-text);
-    border-radius: 2px;
-}
-
-.field__section.secondary {
-    grid-template-columns: 1fr;
-}
-
-.field__section.secondary .field__infos {
-    display: none;
-}
-
-.field__section.secondary .field__label {
-    position: relative;
-
-    padding-left: 5px;
-
-    background-color: #242425;
-}
-
-.field__input {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.field__section.secondary .field__input {
-    padding: var(--column-gap);
-    border: 1px solid var(--color-spacing);
-}
+	.field__section {
+		position: relative;
+
+		display: grid;
+		grid-template-columns: 0.5fr 1fr;
+		column-gap: 10px;
+	}
+
+	.field__section.nameless {
+		grid-template-columns: 1fr;
+	}
+
+	.field__section:hover .field__label,
+	.field__section:focus-within .field__label {
+		opacity: 1;
+	}
+
+	.field__section:not(.visible) {
+		display: none;
+	}
+
+	.field__section.secondary {
+		--margin: 15px;
+
+		grid-template-columns: 0.25fr 1fr;
+		margin-top: var(--margin);
+	}
+
+	.field__section.secondary:before {
+		content: '';
+
+		position: absolute;
+		left: 10px;
+		top: calc(var(--margin) * -1);
+
+		width: 1px;
+		height: var(--margin);
+
+		background-color: var(--color-spacing);
+	}
+
+	.field__infos {
+		position: relative;
+
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		color: var(--color-text);
+	}
+
+	.field__label {
+		color: inherit;
+		font-size: var(--font-size-input);
+		user-select: none;
+
+		opacity: 0.6;
+		background-color: transparent;
+		transition: opacity 0.1s ease;
+	}
+
+	button.field__label {
+		cursor: pointer;
+	}
+
+	.field__label:focus-visible {
+		outline: 0;
+		box-shadow: 0 0 0 2px var(--color-text);
+		border-radius: 2px;
+	}
+
+	.field__section.secondary {
+		grid-template-columns: 1fr;
+	}
+
+	.field__section.secondary .field__infos {
+		display: none;
+	}
+
+	.field__section.secondary .field__label {
+		position: relative;
+
+		padding-left: 5px;
+
+		background-color: #242425;
+	}
+
+	.field__input {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.field__section.secondary .field__input {
+		padding: var(--column-gap);
+		border: 1px solid var(--color-spacing);
+	}
 </style>

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

@@ -1,109 +1,110 @@
 <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";
+	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;
+	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;
-}
+	const transitionOptions = Object.keys(transitions).map((key) => {
+		const transition = transitions[key];
+		const label = transition.name ? transition.name : key;
+		return { value: key, label };
+	});
 
-$: 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);
+	if (!$transition) {
+		$transition = transitionOptions[0].value;
+	}
 
-		return monitor.selected !== "output";
-	});
-$: {
-    monitorDisabled = samplerOptions.length === 0;
+	$: 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);
 
-    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;
-        }
+			return monitor.selected !== 'output';
+		});
+	$: {
+		monitorDisabled = samplerOptions.length === 0;
 
-        if (sampler1 < 0) {
-            sampler1 = samplerOptions.length > 1 ? samplerOptions[1].value : -1;
-        }
-    }
+		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;
+			}
 
-    $multisampling = [sampler0, sampler1];
-}
+			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
-            }
-        }
-    />
+	<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 ? `<` : `>`}`
-        }}
-    />
-    
+	<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>