fragment-tools 0.1.13 → 0.1.15

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

@@ -1,154 +1,153 @@
 <script context="module">
-let MODULE_ID = 0; 
+	let MODULE_ID = 0;
 
-export let getModuleID = () => {
-    return MODULE_ID++;
-};
+	export let getModuleID = () => {
+		return MODULE_ID++;
+	};
 </script>
 
 <script>
-import { getContext } from "svelte";
-import { layout } from "../stores/layout.js";
+	import { getContext } from 'svelte';
+	import { layout } from '../stores/layout.js';
 
-export let mID = undefined;
-export let name;
-export let slug = name;
-export let scrollable = true;
-export let hasHeader = true;
+	export let mID = undefined;
+	export let name;
+	export let slug = name;
+	export let scrollable = true;
+	export let hasHeader = true;
 
-const parent = getContext('parent');
+	const parent = getContext('parent');
 
-const current = {
-    mID: !isNaN(mID) ? mID : MODULE_ID++,
-    type: "module",
-    name: slug,
-    hasHeader,
-};
+	const current = {
+		mID: !isNaN(mID) ? mID : MODULE_ID++,
+		type: 'module',
+		name: slug,
+		hasHeader,
+	};
 
-MODULE_ID = Math.max(MODULE_ID, !isNaN(current.mID) ? current.mID + 1 : 0);
+	MODULE_ID = Math.max(MODULE_ID, !isNaN(current.mID) ? current.mID + 1 : 0);
 
-parent.registerChild(current);
-
-const m = getContext('module');
-m.set(current);
+	parent.registerChild(current);
 
+	const m = getContext('module');
+	m.set(current);
 </script>
 
 <div
-    class="module module--{slug}"
-    class:scrollable={scrollable}
-    class:no-header={!hasHeader}
-    class:editing={$layout.editing}
+	class="module module--{slug}"
+	class:scrollable
+	class:no-header={!hasHeader}
+	class:editing={$layout.editing}
 >
-    {#if hasHeader && name}
-        <header class="module__header" >
-            <div class="header__col">
-                <div class="slot slot--left">
-                    <slot name="header-left"></slot>
-                </div>
-            </div>
-            <div class="header__col">
-                <h2 class="module__title">{name}</h2>
-            </div>
-            <div class="header__col">
-                <div class="slot slot--right">
-                    <slot name="header-right"></slot>
-                </div>
-            </div>
-        </header>
-    {/if}
-    <div class="module__container">
-        <slot></slot>
-    </div>
+	{#if hasHeader && name}
+		<header class="module__header">
+			<div class="header__col">
+				<div class="slot slot--left">
+					<slot name="header-left" />
+				</div>
+			</div>
+			<div class="header__col">
+				<h2 class="module__title">{name}</h2>
+			</div>
+			<div class="header__col">
+				<div class="slot slot--right">
+					<slot name="header-right" />
+				</div>
+			</div>
+		</header>
+	{/if}
+	<div class="module__container">
+		<slot />
+	</div>
 </div>
 
 <style>
-.module {
-    --header-height: 25px;
-
-    display: grid;
-    grid-template-rows: 25px minmax(0px, auto);
-    grid-template-columns: minmax(0, 1fr);
-    align-items: stretch;
-}
-
-.module.no-header {
-    --header-height: 0px;
-    grid-template-rows: minmax(0px, auto);
-}
-
-.module__header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    height: var(--header-height);
-    flex-shrink: 0;
-    align-items: center;
-
-    background-color: var(--color-lightblack);
-}
-
-.slot {
-    display: flex;
-    align-items: center;
-}
-
-.header__col {
-    display: flex;
-    padding: 0 6px;
-    justify-content: center;
-    align-items: center;
-}
-
-.header__col:first-child {
-    justify-content: flex-start;
-}
-
-.header__col:last-child {
-    justify-content: flex-end;
-}
-
-.module__title {
-    user-select: none;
-
-    color: white;
-    font-size: 10px;
-    text-transform: capitalize;
-    background-color: transparent;
-}
-
-.module__container {
-    position: relative;
-
-    background-color: var(--color-background);
-}
-
-.module.scrollable .module__container {
-    overflow-y: auto;
-}
-
-.module.editing.scrollable .module__container {
-    overflow-y: hidden;
-}
-
-.module__container::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-
-.module__container::-webkit-scrollbar-track {
-    background: transparent;        /* color of the tracking area */
-}
-
-.module__container::-webkit-scrollbar-thumb {
-    background-color: var(--color-active);    /* color of the scroll thumb */
-    border-radius: 20px;/*       roundness of the scroll thumb*/
-}
-
-.module.minimized .module__container {
-    display: none;
-}
-
-.footer {
-    height: var(--height-input);
-}
+	.module {
+		--header-height: 25px;
+
+		display: grid;
+		grid-template-rows: 25px minmax(0px, auto);
+		grid-template-columns: minmax(0, 1fr);
+		align-items: stretch;
+	}
+
+	.module.no-header {
+		--header-height: 0px;
+		grid-template-rows: minmax(0px, auto);
+	}
+
+	.module__header {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		height: var(--header-height);
+		flex-shrink: 0;
+		align-items: center;
+
+		background-color: var(--color-lightblack);
+	}
+
+	.slot {
+		display: flex;
+		align-items: center;
+	}
+
+	.header__col {
+		display: flex;
+		padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.header__col:first-child {
+		justify-content: flex-start;
+	}
+
+	.header__col:last-child {
+		justify-content: flex-end;
+	}
+
+	.module__title {
+		user-select: none;
+
+		color: white;
+		font-size: 10px;
+		text-transform: capitalize;
+		background-color: transparent;
+	}
+
+	.module__container {
+		position: relative;
+
+		background-color: var(--color-background);
+	}
+
+	.module.scrollable .module__container {
+		overflow-y: auto;
+	}
+
+	.module.editing.scrollable .module__container {
+		overflow-y: hidden;
+	}
+
+	.module__container::-webkit-scrollbar {
+		width: 5px;
+		height: 5px;
+	}
+
+	.module__container::-webkit-scrollbar-track {
+		background: transparent; /* color of the tracking area */
+	}
+
+	.module__container::-webkit-scrollbar-thumb {
+		background-color: var(--color-active); /* color of the scroll thumb */
+		border-radius: 20px; /*       roundness of the scroll thumb*/
+	}
+
+	.module.minimized .module__container {
+		display: none;
+	}
+
+	.footer {
+		height: var(--height-input);
+	}
 </style>

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

@@ -1,87 +1,90 @@
 <script>
-import ModuleHeaderSelect from "./ModuleHeaderSelect.svelte";
-import ModuleHeaderButton from "./ModuleHeaderButton.svelte";
+	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;
+	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
+	class="module-header-action"
+	class:permanent
+	class:border
+	class:no-margin={!margin}
+	class:disabled
+>
+	{#if options.length > 0}
+		<ModuleHeaderSelect {options} {value} {disabled} on:change />
+	{:else}
+		<ModuleHeaderButton {label} on:click>
+			<slot name="text">
+				<div class="text">
+					<slot />
+				</div>
+			</slot>
+			<slot name="icon" />
+		</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;
-}
-
+	.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

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

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

@@ -1,50 +1,60 @@
 <script>
-import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from 'svelte';
 
-import SelectChevrons from "./SelectChevrons.svelte";
+	import SelectChevrons from './SelectChevrons.svelte';
 
-export let value;
-export let options = [];
-export let disabled = false;
+	export let value;
+	export let options = [];
+	export let disabled = false;
 
-const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-function handleChange(event) {
-    dispatch("change", event.currentTarget.value);
-}
+	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}
+	<select
+		class="select"
+		on:change={handleChange}
+		class:single={options.length === 1}
+		{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;
-}
+	.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

@@ -1,38 +1,37 @@
 <script context="module">
-export let moduleNames = [
-    "monitor",
-    "params",
-    "midi",
-    "console",
-    "exports",
-];
+	export let moduleNames = [
+		'monitor',
+		'params',
+		'midi',
+		'console',
+		'exports',
+	];
 </script>
 
 <script>
-import Module from "./Module.svelte";
+	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"),
-};
+	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}
+	{#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}/>
+	<Module {hasHeader} {mID} {name} />
 {/if}