fragment-tools 0.1.0

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -0,0 +1,54 @@
+<script>
+export let value = null;
+export let label;
+export let disabled = false;
+export let showLabel = true;
+export let title = "";
+
+</script>
+
+<div class="button-container" class:disabled={disabled}>
+    <button class="button" {disabled} on:click {title} on:mouseenter on:mouseleave>
+        <span class="label" class:visually-hidden={!showLabel}>{label}</span>
+        <slot></slot>
+    </button>
+</div>
+
+<style>
+.button-container {
+    display: flex;
+    width: 100%;
+}
+
+.button {
+    display: flex;
+    width: 100%;
+    min-width: var(--height-input);
+    height: var(--height-input);
+    justify-content: center;
+    align-items: center;
+    padding: 0 4px;
+
+    color: rgba(255, 255, 255, 0.5);
+    font-size: var(--font-size-input);
+    
+    border-radius: var(--border-radius-input);
+    background-color: var(--background-color, var(--color-background-input));
+    box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-border-input));
+}
+
+:global(.field.disabled) .button {
+    color: rgba(255, 255, 255, 0.2);
+}
+
+.button:hover {
+    color: var(--color-text);
+
+    box-shadow: inset 0 0 0 1px var(--box-shadow-color-active, var(--color-active));
+}
+
+.button:active {
+    box-shadow: 0 0 0 2px var(--box-shadow-color-active, var(--color-active));
+}
+
+</style>

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -0,0 +1,70 @@
+<script>
+import { createEventDispatcher } from "svelte";
+
+export let value;
+
+const dispatch = createEventDispatcher();
+
+function handleChange() {
+    dispatch("change", value);
+}
+
+</script>
+
+<div class="checkbox">
+    <input class="input" bind:checked={value} type="checkbox" on:change={handleChange} />
+    <div class="checked">
+    </div>
+</div>
+
+<style>
+.checkbox {
+    position: relative;
+
+    width: var(--height-input);
+    height: var(--height-input);
+    margin-right: calc(var(--padding));
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+    border-radius: var(--border-radius-input);
+    background-color: var(--color-background-input);
+}
+
+.checkbox:hover {
+    box-shadow: inset 0 0 0 1px var(--color-active);
+}
+
+.checkbox:focus-within {
+    box-shadow: 0 0 0 2px var(--color-active);
+}
+
+.input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: var(--border-radius-input);
+    background-color: transparent;
+}
+
+/* .input:checked {
+    background-color: var(--color-active);
+} */
+
+.checked {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    bottom: 3px;
+    right: 3px;
+
+    border-radius: calc(var(--border-radius-input) * 0.5);
+    background-color: var(--color-active);
+
+    opacity: 0;
+    pointer-events: none;
+}
+
+.input:checked + .checked {
+    opacity: 1;
+}
+</style>

package/src/client/app/ui/fields/ColorInput.svelte

@@ -0,0 +1,187 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import * as color from "../../utils/color.utils.js";
+import TextInput from "./TextInput.svelte";
+import Field from "../Field.svelte";
+
+export let value;
+
+const dispatch = createEventDispatcher();
+
+let hexValue = color.toHex(color.isTHREE(value) ? `#${value.getHexString()}` : value);
+let isInputDriven = true;
+
+let override = false;
+
+let format = color.getColorFormat(value);
+let textValue = formatColorFromHex(hexValue);
+let alpha = 1;
+
+$: hasAlpha = typeof textValue === "string" &&
+    (
+        color.isRGBAString(textValue) ||
+        color.isVec4String(textValue) ||
+        color.isHSLAString(textValue)
+    );
+$: {
+    if (isInputDriven) {
+        textValue = formatColorFromHex(hexValue);
+    } else {
+        hexValue = color.toHex(textValue);
+    }
+
+    if (color.isTHREE(value)) {
+        const [r, g, b] = color.hexToComponents(hexValue);
+
+        value.r =  r / 255;
+        value.g =  g / 255;
+        value.b =  b / 255;
+    }
+
+    dispatchChange();
+}
+
+$: {
+    if (hasAlpha) {
+        const [r, g, b, a = 1] = color.toComponents(textValue);
+        alpha = a;
+    }
+}
+
+function dispatchChange() {
+    // support THREE.Color
+    if (format === color.FORMATS.THREE) {
+        dispatch('change', value);
+    } else {
+        dispatch('change', textValue);
+    }
+}
+
+function handleBlur() {
+    dispatchChange();
+}
+
+function formatColorFromHex(hex) {
+    if (override) return textValue;
+
+    if (format === color.FORMATS.THREE) return color.threeToHexString(value);
+    if (format === color.FORMATS.HEX_STRING) return hex;
+    if (format === color.FORMATS.VEC3_STRING) return color.hexToVec3String(hex);
+    if (format === color.FORMATS.RGB_STRING) return color.hexToRGBString(hex);
+
+    let components = color.hexToComponents(hex);
+
+    if (hasAlpha && alpha !== 1) {
+        components[3] = alpha;
+    }
+
+    if (format === color.FORMATS.HSL_STRING) return color.hexToHSLString(components);
+    if (format === color.FORMATS.RGBA_STRING) return color.componentsToRGBAString(components);
+    if (format === color.FORMATS.VEC4_STRING) return color.componentsToVec4String(components);
+    if (format === color.FORMATS.HSLA_STRING) return color.componentsToHSLAString(components);
+    
+}
+
+function onChangeText(event) {
+    isInputDriven = false;
+
+    const newColor = event.detail;
+
+    if (color.isColor(newColor)) {
+        format = color.getColorFormat(newColor);
+        textValue = newColor;
+    }
+}
+
+function onChangeAlpha(event) {
+    isInputDriven = false;
+
+    if (format === color.FORMATS.RGBA_STRING) {
+        const [r, g, b] = color.hexToComponents(hexValue);
+
+        textValue = color.componentsToRGBAString([r, g, b, event.detail]);
+    } else if (format === color.FORMATS.VEC4_STRING) {
+        const [r, g, b] = color.vecToComponents(textValue);
+
+        textValue = color.componentsToVec4String([r, g, b, event.detail]);
+    } else if (format === color.FORMATS.HSLA_STRING) {
+        const [h, s, l] = color.hslToHSLComponents(textValue);
+
+        textValue = color.hslaToHSLAString([h, s, l, event.detail]);
+    }
+}
+
+function onInput() {
+    isInputDriven = true;
+}
+
+</script>
+
+<div class="color-input">
+    <div class="layout">
+        <div class="mirror" style="--currentColor: {hexValue}; --opacity: {alpha}">
+            <!-- svelte-ignore -->
+            <input class="input" type="color" bind:value={hexValue} on:blur={handleBlur} on:input={onInput} />
+        </div>
+        <TextInput value={textValue} on:change={onChangeText} />
+    </div>
+    {#if hasAlpha }
+        <Field key="alpha" value={alpha} params={{min: 0, max: 1, step: 0.01}} on:change={onChangeAlpha}></Field>
+    {/if }
+</div>
+
+<style>
+.color-input {
+    position: relative;
+    width: 100%;
+}
+
+.layout {
+    display: grid;
+    column-gap: var(--column-gap);
+    grid-template-columns: 0.35fr 0.65fr;
+    align-items: center;
+}
+
+.mirror {
+    position: relative;
+    
+    height: var(--height-input);
+
+    border-radius: var(--border-radius-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+}
+
+.mirror:before {
+    --gap: 1px;
+
+    content: '';
+    position: absolute;
+    top: var(--gap);
+    left: var(--gap);
+    right: var(--gap);
+    bottom: var(--gap);
+
+    background-color: var(--currentColor);
+    border-radius: calc(var(--border-radius-input) * 0.5);
+    opacity: var(--opacity, 1);
+}
+
+.mirror:hover {
+    box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+}
+
+.mirror:focus-within {
+    box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+}
+
+.input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+}
+
+</style>

package/src/client/app/ui/fields/FieldInputRow.svelte

@@ -0,0 +1,13 @@
+<div class="row">
+	<slot></slot>
+</div>
+
+<style>
+.row {
+	display: grid;
+	width: 100%;
+	column-gap: var(--column-gap);
+	grid-template-columns: var(--grid-template-columns, 1fr);
+	align-items: center;
+}
+</style>

package/src/client/app/ui/fields/ImageInput.svelte

@@ -0,0 +1,145 @@
+<script>
+import { onMount } from "svelte";
+import { loadImage } from "../../lib/loader/loadImage";
+import ButtonInput from "./ButtonInput.svelte";
+import FieldInputRow from "./FieldInputRow.svelte";
+import TextInput from "./TextInput.svelte";
+
+export let value;
+
+let img, input, name;
+$: url = typeof value === HTMLImageElement ? value.src : value;
+$: displayUrl = name ? name : url.replace(`/@fs${__CWD__}`, '');
+$: {
+	;(async () => {
+		await loadImage(url, { img });
+	})();
+}
+
+function handleClick() {
+	input.click();
+}
+
+let reader = new FileReader();
+let dragover = false;
+
+function handleUpload(event) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	let file;
+
+	if (event.dataTransfer) {
+        file = event.dataTransfer.files[0];
+	} else if(event.target) {
+        file = event.target.files[0];
+    }
+
+    name = file.name;
+
+    reader.onload = async (e) => {
+		reader.onload = null;
+
+		value = e.target.result;
+    };
+	reader.readAsDataURL(file);
+
+	dragover = false;
+}
+
+function handleDragover(event) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	dragover = true;
+}
+
+function handleDragleave(event) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	dragover = false;
+}
+
+</script>
+
+<div
+	class="img-container"
+	class:dragover={dragover}
+	on:dragover={handleDragover}
+	on:dragleave={handleDragleave}
+	on:drop={handleUpload}
+>
+	<FieldInputRow --grid-template-columns="1fr 0.5fr">
+		<div class="row">
+			<div
+				class="preview"
+				on:click={handleClick}
+			>
+				<img class="img" src="" alt="" bind:this={img}/>
+				<input class="input" type="file" bind:this={input} on:change={handleUpload} />
+			</div>
+			<TextInput disabled value={displayUrl} />
+		</div>
+		<ButtonInput
+			label="change"
+			on:click={handleClick}
+			on:dragover={handleDragover}
+			on:dragleave={handleDragleave}
+			on:drop={handleUpload}
+		/>
+	</FieldInputRow>
+	
+</div>
+
+<style>
+.img-container {
+	width: 100%;
+}
+
+.preview {
+	width: calc(var(--height-input) * 1);
+	height: calc(var(--height-input) * 1);
+;
+	display: grid;
+	place-items: center;
+
+	border-radius: var(--border-radius-input);
+    background-color: var(--color-background-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+	cursor: copy;
+	overflow: hidden;
+}
+
+.row {
+	display: grid;
+	grid-template-columns: 20px auto;
+	gap: var(--column-gap);
+	place-items: center;
+}
+
+.preview:hover {
+    color: var(--color-text);
+
+    box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+}
+
+.preview:active, .img-container.dragover .preview {
+    box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+}
+
+.img-container.dragover {
+	cursor: copy;
+}
+
+.img {
+	max-width: calc(100% - var(--padding) * 0.5);
+	max-height: calc(100% - var(--padding) * 0.5);
+}
+
+.input {
+	display: none;
+}
+
+</style>

package/src/client/app/ui/fields/Input.svelte

@@ -0,0 +1,120 @@
+<script>
+import { createEventDispatcher } from "svelte";
+
+
+export let label = null;
+export let value;
+export let disabled = false;
+
+let node;
+
+const dispatch = createEventDispatcher();
+
+function onKeyPress(event) {
+    if (event.key === 'Enter') {
+        node.blur();
+    }
+}
+
+function handleChange(event) {
+    dispatch('change', event.currentTarget.value);
+}
+
+</script>
+
+<div class="input-container" class:disabled={disabled}>
+    {#if label }
+        <span class="label">{label}</span>
+    {/if}
+    <input
+        class="input"
+        bind:this={node}
+        bind:value={value}
+        on:change={handleChange}
+        on:input
+        on:keypress={onKeyPress}
+        on:keydown
+        on:focus
+        on:blur
+        {disabled}
+        autocomplete="off"
+        spellcheck="false"
+    />
+</div>
+
+<style>
+.input-container {
+    position: relative;
+
+    display: flex;
+    height: var(--height-input);
+    margin: 2px 0;
+
+    border-radius: var(--border-radius-input);
+    background-color: var(--color-background-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+}
+
+.input-container:not(.disabled):hover {
+    box-shadow: inset 0 0 0 1px var(--color-active);
+}
+
+.input-container:not(.disabled):focus-within {
+    box-shadow: 0 0 0 2px var(--color-active);
+}
+
+.label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+    padding: var(--padding);
+
+    color: var(--color-text);
+    font-size: var(--font-size-input);
+    font-weight: 600;
+    pointer-events: none;
+    opacity: 0.35;
+}
+
+.input-container.disabled .label {
+    opacity: 0.15;
+}
+
+.input {
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--padding);
+
+    color: rgba(255, 255, 255, 0.5);
+    font-size: var(--font-size-input);
+    text-align: right;
+
+    background: transparent;
+    outline: 0;
+}
+
+.input:disabled {
+    opacity: 0.4;
+}
+
+:global(.field.disabled) .input {
+    opacity: 0.4;
+}
+
+:global(.field__section:hover .container .input) {
+    color: var(--color-text);
+}
+
+input:focus {
+    color: var(--color-text);
+}
+
+/* .input:focus {
+    border: var(--borderWidth) solid var(--color-active);
+} */
+
+</style>

package/src/client/app/ui/fields/ListInput.svelte

@@ -0,0 +1,106 @@
+<script>
+import { afterUpdate } from "svelte";
+
+export let disabled;
+export let value = null;
+
+let container;
+
+afterUpdate(() => {
+    container.scrollTo(0, container.scrollHeight);
+});
+
+</script>
+
+<div class="list {disabled ? "disabled" : ""}">
+    <div class="container" bind:this={container}>
+        <ul class="ul">
+            {#each value as item, index}
+                <li class="item">
+                    {#if disabled }
+                        <span class="label">{item}</span>
+                    {:else}
+                        <button class="label">{item}</button>
+                    {/if}
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+
+<style>
+.list {
+    width: 100%;
+
+    pointer-events: auto;
+}
+
+.container {
+    margin-right: var(--padding);
+    padding: 1px 0;
+    height: 80px;
+
+    background-color: #1d1d1e;
+    border-radius: var(--border-radius-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+    overflow-y: scroll;
+}
+
+.ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 2px 0;
+    
+}
+
+.container::-webkit-scrollbar {
+    width: 5px;               /* width of the entire scrollbar */
+}
+
+.container::-webkit-scrollbar-track {
+    background-color: var(--color-lightblack);        /* color of the tracking area */
+}
+
+.container::-webkit-scrollbar-thumb {
+    background-color: var(--color-active);    /* color of the scroll thumb */
+    border-radius: 20px;       /* roundness of the scroll thumb */
+}
+
+.item {
+    display: flex;
+    width: 100%;
+
+    margin: 0;
+    padding: 0 3px;
+    color: var(--color-text);
+    font-size: 10px;
+
+    opacity: 0.35;
+    user-select: none;
+}
+
+.label {
+    width: 100%;
+    padding: 1px var(--padding);
+    background-color: transparent;
+    text-align: left;
+}
+
+.list:not(.disabled) .label:hover {
+    box-shadow: inset 0 0 0 1px var(--color-active);
+}
+
+.list:not(.disabled) .label:active {
+    box-shadow: 0 0 0 2px var(--color-active);
+}
+
+.item:hover {
+    /* background-color: #0E0E0E; */
+    opacity: 1;
+}
+
+/* :global(.field:hover) .list:not(.disabled) .item {
+    opacity: 1;
+} */
+</style>