fragment-tools 0.1.0

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

@@ -0,0 +1,262 @@
+<script>
+import { createEventDispatcher } from "svelte";
+
+import Select from "./fields/Select.svelte";
+import NumberInput from "./fields/NumberInput.svelte";
+import CheckboxInput from "./fields/CheckboxInput.svelte";
+import Vec2Input from "./fields/Vec2Input.svelte";
+import Vec3Input from "./fields/Vec3Input.svelte";
+import TextInput from "./fields/TextInput.svelte";
+import ColorInput from "./fields/ColorInput.svelte";
+import ListInput from "./fields/ListInput.svelte";
+import ButtonInput from "./fields/ButtonInput.svelte";
+import ImageInput from "./fields/ImageInput.svelte";
+import FieldSection from "./FieldSection.svelte";
+import FieldTriggers from "./FieldTriggers.svelte";
+import { inferFromParams, inferFromValue } from "../utils/props.utils.js";
+import { download } from "../utils/file.utils.js";
+import { map } from "../utils/math.utils";
+import frameDebounce from "../lib/helpers/frameDebounce.js";
+import { getStore } from "../stores/utils";
+import { writable } from "svelte/store";
+
+export let key = '';
+export let value = null;
+export let context = null;
+export let params = {};
+export let type = null;
+
+let offsetWidth;
+let showTriggers = false;
+
+const store = getStore(context, { props: {}}, {
+    persist: context !== null,
+});
+
+if (!$store.props[key]) {
+    $store.props[key] = { triggers: [] };
+}
+
+let triggers = writable($store.props[key].triggers.filter((trigger) => trigger.inputType !== undefined));
+triggers.subscribe((all) => {
+    store.update((curr) => {
+        curr.props[key].triggers = all;
+
+        return curr;
+    });
+})
+
+const dispatch = createEventDispatcher();
+const fields = {
+    "select": Select,
+    "number": NumberInput,
+    "vec2": Vec2Input,
+    "vec3": Vec3Input,
+    "checkbox": CheckboxInput,
+    "text": TextInput,
+    "list": ListInput,
+    "color": ColorInput,
+    "button": ButtonInput,
+    "download": ButtonInput,
+    "image": ImageInput,
+};
+
+const onTriggers = {
+    'checkbox': () => {
+        value = !value;
+
+        dispatch('change', value);
+    },
+    'button': (event) => {
+        value(event);
+        dispatch('click', event);
+    },
+    'download': (event) => {
+        let [data, filename] = value(event);
+
+        download(data, filename);
+    },
+    'number': (event = {}) => {
+        const isValueInRange = event.value >= 0 && event.value <= 1;
+
+        if (isValueInRange && isFinite(params.min) && isFinite(params.max)) {
+            let v = map(event.value, 0, 1, params.min, params.max);
+            let step = params.step ? params.step : 1;
+            let value = Math.round(v * (1 / step)) / (1 / step);
+
+            dispatch('change', value);
+        }
+    },
+};
+
+$: fieldType = type ? type : (inferFromParams(params) || inferFromValue(value));
+$: fieldProps = composeFieldProps(params);
+$: onTrigger = frameDebounce(onTriggers[fieldType]);
+$: input = fields[fieldType];
+$: label = params.label !== undefined && typeof value !== "function" ? params.label : key;
+$: disabled = params.disabled;
+$: triggerable = params.triggerable !== false && (
+    (fieldType === "number" && isFinite(params.min) && isFinite(params.max)) ||
+    (fieldType === "button")
+);
+$: {
+    if (fieldType === "download" || fieldType === "button") {
+        if (params.label === undefined) {
+            fieldProps.label = fieldType === "download" ? "download" : "run";
+        }
+    }
+}
+$: xxsmall = offsetWidth < 200;
+$: xsmall = !xxsmall && offsetWidth < 260;
+$: small = !xxsmall && !xsmall && offsetWidth < 320;
+$: triggersActive = $triggers.length > 0;
+
+function toggleTriggers(event) {
+    event.preventDefault();
+
+    showTriggers = !showTriggers;
+}
+
+function composeFieldProps(params) {
+    const { triggerable, controllable, ...rest } = params;
+
+    return rest;
+}
+
+</script>
+
+<div class="field"
+    class:disabled={disabled}
+    class:xxsmall={xxsmall}
+    class:xsmall={xsmall}
+    class:small={small}
+    bind:offsetWidth={offsetWidth}
+>
+    <FieldSection name={key} label={label} interactive={triggerable} on:click={toggleTriggers}>
+        <div slot="infos" class="field__actions">
+            {#if triggerable && !disabled }
+                <button
+                    on:click={toggleTriggers}
+                    class="field__action field__action--triggers"
+                    class:active={triggersActive}>
+                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8H7.25"/>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 8H19.25"/>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16H12.25"/>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.75 16H19.25"/>
+                        <circle cx="10" cy="8" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+                        <circle cx="15" cy="16" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+                    </svg>
+                </button>
+            {/if}
+            {#if (fieldType === "vec2" || fieldType === "vec3") && !disabled }
+                <button class="field__action field__action--lock" on:click={() => params.locked = !params.locked}>
+                    {#if params.locked}
+                    <svg class="action__icon" width="16" height="16" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"></path>
+                    </svg>
+                    {:else}
+                    <svg class="action__icon" width="16" height="16" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"></path>
+                    </svg>
+                    {/if}
+                </button>
+            {/if}
+        </div>
+        <svelte:component
+            this={input}
+            {value}
+            {...fieldProps}
+            on:change
+            on:click={onTrigger}
+        />
+        <slot></slot>
+    </FieldSection>
+    {#if triggerable }
+        <FieldSection visible={showTriggers} secondary>
+            <FieldTriggers
+                {triggers}
+                {onTrigger}
+                {context}
+                triggerable={fieldType === "button"}
+                controllable={fieldType === "number"}
+            />
+        </FieldSection>
+    {/if}
+</div>
+
+<style>
+.field {
+    --column-gap: 3px;
+    --padding: 6px;
+
+    width: 100%;
+
+    padding: 3px 6px 3px 12px;
+    border-bottom: 1px solid var(--color-spacing);
+}
+
+:global(.field__input .field) {
+    padding-left: 0px !important;
+}
+
+:global(.field__input .field:last-child) {
+    border-bottom: 0px solid #323233 !important;
+    padding-bottom: 0px !important;
+}
+
+.field.disabled {
+    pointer-events: none;
+}
+
+.field__actions {
+    display: flex;
+    align-items: center;
+}
+
+.field__action {
+    display: flex;
+    align-items: center;
+
+    background: transparent;
+    transition: opacity 0.1s ease;
+}
+
+.field__action:hover {
+    opacity: 1;
+}
+
+.field__action--triggers {
+    --background-color: rgba(255, 255, 255, 0.5);
+
+    position: relative;
+
+    width: 16px;
+    height: 16px;
+
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.field__action--triggers:not(.active) {
+    display: none;
+}
+
+.field__action {
+    color: var(--color-text);
+
+    opacity: 0.6;
+    background-color: transparent;
+    transition: opacity 0.1s ease;
+}
+
+.field__action--triggers svg {
+    transform: rotate(90deg);
+}
+
+.field__action:hover {
+    opacity: 1;
+}
+</style>

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

@@ -0,0 +1,103 @@
+<script>
+export let name;
+
+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>
+
+<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;
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script>
+export let visible = true;
+export let secondary = false;
+export let interactive = false;
+export let label = "";
+export let name = "";
+</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>
+
+<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);
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script>
+export let height = 20;
+</script>
+
+<div class="field-space" style="height: {height}px"></div>
+
+<style>
+.field-space {
+    position: relative;
+
+    border-bottom: 1px solid var(--color-spacing);
+    overflow: hidden;
+}
+
+.field-space:before, .field-space:after {
+    /* content: ''; */
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    width: 100%;
+    height: 1px;
+
+    background-color: var(--color-spacing);
+}
+
+.field-space:before {
+    transform: rotate(3deg);
+}
+
+.field-space:after {
+    content: none;
+    transform: rotate(-3deg);
+}
+
+
+</style>