fragment-tools 0.1.0

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

@@ -0,0 +1,114 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import FieldInputRow from "./FieldInputRow.svelte";
+import Input from "./Input.svelte";
+import ProgressInput from "./ProgressInput.svelte";
+import Keyboard from "../../inputs/Keyboard.js";
+import { clamp } from "../../utils/math.utils.js";
+
+function round(value, step) {
+    return Math.round(value * (1 / step)) / (1 / step);
+}
+
+export let value = null;
+export let label = "";
+export let step = 1;
+export let suffix = "";
+export let min = -Infinity;
+export let max = Infinity;
+export let disabled = false;
+
+$: isFocused = false;
+const dispatch = createEventDispatcher();
+
+function sanitize(v, suffix) {
+    return (suffix && suffix !== "") ? Number(v.split(suffix)[0]) : Number(v);
+}
+
+function composeValue(v, isFocused, suffix = "") {
+    const clampedValue = clamp(v, isFinite(min) ? min : -Infinity, isFinite(max) ? max : Infinity);
+    const roundedValue = typeof step === "number" ? round(clampedValue, step) : v;
+
+    return isFocused ? `${roundedValue}` : `${roundedValue}${suffix}`;
+}
+
+$: currentValue = value;
+$: composedValue = composeValue(currentValue, isFocused, suffix);
+
+function onFocus() {
+    isFocused = true;
+}
+
+function onBlur(event) {
+    isFocused = false;
+
+    let newValue = event.currentTarget.value;
+    let isNotValid = isNaN(Number(event.currentTarget.value));
+
+    if (isNotValid) {
+        newValue = `${value}`;
+    }
+
+    currentValue = sanitize(newValue, suffix);
+
+    dispatch('change', currentValue);
+}
+
+function onKeyDown(event) {
+    if ([38, 40].includes(event.keyCode)) {
+        event.preventDefault();
+
+        const diff = Keyboard.getStepFromEvent(event) * step;
+        const direction = event.keyCode === 38 ? 1 : -1;
+        const newValue = sanitize(composedValue, suffix) + direction * (diff);
+
+        currentValue = newValue;
+        dispatch('change', currentValue);
+    }
+}
+
+$: hasProgress = isFinite(min) && isFinite(max);
+
+function handleChangeProgress(event) {
+    currentValue = event.detail;
+    dispatch('change', event.detail);
+}
+
+</script>
+
+<div class="number-input {hasProgress ? "number-input--with-progress": ""}">
+    {#if hasProgress}
+        <FieldInputRow --grid-template-columns="1fr 0.5fr">
+            <ProgressInput
+                step={step}
+                value={currentValue}
+                min={min}
+                max={max}
+                on:change={handleChangeProgress}
+            />
+            <Input 
+                {label}
+                {disabled}
+                on:keydown={onKeyDown}
+                on:focus={onFocus}
+                on:blur={onBlur}
+                bind:value={composedValue}
+            />
+        </FieldInputRow>
+    {:else}
+        <Input 
+            {label}
+            on:keydown={onKeyDown}
+            on:focus={onFocus}
+            on:blur={onBlur}
+            bind:value={composedValue}
+        />
+    {/if}
+</div>
+
+<style>
+.number-input {
+    position: relative;
+    width: 100%;
+}
+</style>

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

@@ -0,0 +1,90 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import { map, clamp } from "../../utils/math.utils.js";
+
+export let value;
+export let min;
+export let max;
+export let step;
+
+let node;
+let rect;
+
+const dispatch = createEventDispatcher();
+
+let isDragging = false;
+
+// handlers
+function handleMouseDown(event) {
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    rect = node.getBoundingClientRect();
+
+    isDragging = true;
+
+    onDrag(event);
+}
+
+function handleMouseMove(event) {
+    onDrag(event);
+}
+
+function onDrag(event) {
+    let v = clamp(map(event.clientX, rect.left, rect.right, min, max), min, max);
+    v = Math.floor(v * (1 / step)) / (1 / step);
+
+    dispatch("change", v);
+}
+
+function handleMouseUp() {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    isDragging = false;
+}
+
+$: scaleX = clamp(map(value, min, max, 0, 1), 0, 1);
+
+</script>
+
+<div class="progress {isDragging ? "dragging": ""} " bind:this={node} on:mousedown={handleMouseDown}>
+    <div class="fill" style="opacity: {scaleX > 0 ? 1 : 0}; transform: scaleX({scaleX})"></div>
+</div>
+
+<style>
+.progress {
+    position: relative;
+    
+    height: var(--height-input);
+    border-radius: var(--border-radius-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+    background: var(--color-background-input);
+    cursor: ew-resize;
+}
+
+.progress:hover {
+    box-shadow: inset 0 0 0 1px var(--color-active);
+}
+
+.progress.dragging {
+    box-shadow: 0 0 0 2px var(--color-active);
+}
+
+
+.fill {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    bottom: 3px;
+    right: 3px;
+
+    background: grey;
+    transform-origin: 0 50%;
+    border-radius: calc(var(--border-radius-input) * 0.5);
+
+    background-color: var(--color-active);
+}
+
+</style>

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

@@ -0,0 +1,116 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import SelectChevrons from "../SelectChevrons.svelte";
+
+export let options = [];
+export let name = "";
+export let value;
+export let disabled = false;
+export let title = "";
+
+let node;
+let sanitizedOptions = [];
+
+const dispatch = createEventDispatcher();
+
+$: {
+    sanitizedOptions = [];
+    
+    for (let i = 0; i < options.length; i++) {
+        const { value, label, disabled } = options[i];
+
+        if (["number", "string"].includes(typeof options[i])) {
+            sanitizedOptions[i] = {
+                value: options[i],
+                label: options[i],
+                disabled,
+            };
+        } else {
+            sanitizedOptions[i] = {
+                value: value,
+                label: label ? label : value,
+                disabled,
+            }
+        }
+    }
+}
+
+function handleChange(event) {
+    dispatch("change", event.currentTarget.value);
+}
+
+</script>
+
+<div
+    class="select-input"
+    class:disabled={disabled}
+    class:single={sanitizedOptions.length === 1}
+>
+    <div class="container">
+        <select class="select" bind:this={node} on:change={handleChange} {name} {disabled} {title} bind:value={value}>
+            {#each sanitizedOptions as option}
+                <option value={option.value} selected={value === option.value} disabled={option.disabled}>{option.label}</option>
+            {/each}
+        </select>
+        {#if sanitizedOptions.length > 1 }
+            <SelectChevrons />
+        {/if}
+    </div>
+</div>
+
+<style>
+.select-input {
+    width: 100%;
+}
+
+.container {
+    position: relative;
+
+    display: flex;
+    height: var(--height-input);
+    margin: 2px 0;
+
+    color: rgba(255, 255, 255, 0.5);
+
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+    border-radius: var(--border-radius-input);
+    background-color: var(--color-background-input);
+}
+
+.select-input:not(.disabled) .container:hover {
+    box-shadow: inset 0 0 0 1px var(--color-active);
+}
+
+.container:focus-within {
+    box-shadow: 0 0 0 2px var(--color-active);
+}
+
+.select {
+    padding: 0 var(--padding, 6px) 0 var(--padding, 6px);
+
+    width: 100%;
+    
+    color: inherit;
+    font-size: var(--font-size-input);
+
+    outline: 0;
+    background-color: transparent;
+}
+
+.select-input:not(.disabled) .select {
+    cursor: pointer;
+}
+
+:global(.field__section:hover .select-input:not(.disabled) .container) {
+    color: var(--color-text);
+}
+
+.select-input:not(.disabled) .select:focus {
+    color: var(--color-text);
+}
+
+.select-input:not(.disabled) .select:hover {
+    color: var(--color-text);
+}
+
+</style>

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

@@ -0,0 +1,18 @@
+<script>
+import Input from "./Input.svelte";
+
+export let value;
+export let label = "";
+export let disabled = false;
+
+</script>
+
+<div class="text-input">
+    <Input {value} {label} {disabled} on:change on:input />
+</div>
+
+<style>
+.text-input {
+    width: 100%;
+}
+</style>

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

@@ -0,0 +1,5 @@
+<script>
+import VectorInput from "./VectorInput.svelte";
+</script>
+
+<VectorInput {...$$props} on:change/>

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

@@ -0,0 +1,6 @@
+<script>
+import VectorInput from "./VectorInput.svelte";
+
+</script>
+
+<VectorInput {...$$props} />

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

@@ -0,0 +1,102 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import FieldInputRow from "./FieldInputRow.svelte";
+import NumberInput from "./NumberInput.svelte";
+
+export let value;
+export let suffix = "";
+export let min = -Infinity;
+export let max = Infinity;
+export let step = 0.1;
+export let locked = false;
+export let disabled = false;
+
+function sanitize(value, type) {
+    if (Array.isArray(value)) {
+        return value.reduce((all, v, index) => {
+            if (typeof v === "number") {
+                all[index] = {
+                    value: v,
+                    label: ""
+                }
+            } else {
+                all[index] = v;
+            }
+
+            return all;
+        }, []);
+    } else {
+        return Object.keys(value).map((key) => {
+            return { label: key, value: value[key] }
+        });
+    }
+}
+
+function desanitize(updated) {
+    if (Array.isArray(value)) {
+        return updated.map((v) => v.value);
+    }
+
+    return updated;
+}
+
+$: previousValue = sanitize(value);
+$: currentValue = sanitize(value);
+
+const dispatch = createEventDispatcher();
+
+function onValueChange(index, newValue) {
+    const prevValue = previousValue[index].value;
+    const ratio = newValue / prevValue;
+
+    const updated = currentValue.map((v, i) => {
+        return {
+            ...v,
+            value: i === index ? newValue : 
+                locked ? (Math.round(previousValue[i].value * ratio * (1/step)) / (1/step)) :
+                v.value
+        };
+    });
+
+    currentValue = updated;
+
+    dispatch("change", desanitize(updated));
+}
+
+</script>
+
+<div class="vector-container vec{currentValue.length}" class:locked={locked}>
+    <FieldInputRow --grid-template-columns={currentValue.map(() => "1fr").join(" ")}>
+        {#each currentValue as curr, index}
+            <NumberInput
+                {min}
+                {max}
+                {step}
+                {suffix}
+                {disabled}
+                label={curr.label}
+                value={curr.value}
+                on:change={(event) => onValueChange(index, event.detail)}
+            />
+        {/each}
+    </FieldInputRow>
+</div>
+
+<style>
+.vector-container {
+    width: 100%;
+}
+
+:global(.vector-container.locked .number-input:not(:last-child):after) {
+    content: '';
+
+    position: absolute;
+    top: 50%;
+    right: calc(var(--column-gap) * -1);
+    width: var(--column-gap);
+    height: 1px;
+
+    background-color: var(--color-border-input);
+}
+
+</style>

package/src/client/app/utils/canvas.utils.js

@@ -0,0 +1,229 @@
+/*
+https://github.com/mattdesl/canvas-sketch/blob/24f6bb2bbdfdfd72a698a0b8a0962ad843fb7688/lib/save.js
+*/
+
+import { changeDpiDataUrl } from "changedpi";
+import { get } from "svelte/store";
+import { exports } from "../stores";
+import { VIDEO_FORMATS } from "../stores/exports";
+import { downloadBlob, createBlobFromDataURL } from "./file.utils";
+import WebMRecorder from "../lib/canvas-recorder/WebMRecorder";
+import MP4Recorder from "../lib/canvas-recorder/MP4Recorder";
+import GIFRecorder from "../lib/canvas-recorder/GIFRecorder";
+import FrameRecorder from "../lib/canvas-recorder/FrameRecorder";
+import { exportCanvas } from "../lib/canvas-recorder/utils";
+import { map } from "./math.utils";
+
+export async function saveDataURL(dataURL, options, blob) {
+    async function onError(err) {
+        if (typeof options.onError === "function") {
+            options.onError(err);
+        }
+
+        if (!blob) {
+            blob = await createBlobFromDataURL(dataURL);
+        }
+
+        await downloadBlob(blob, options);
+    }
+
+    try {
+        const body = {
+            dataURL: dataURL.split(',')[1], // remove extension,
+            ...options,
+        };
+        const response = await fetch('/save', {
+            method: "POST",
+            body: JSON.stringify(body),
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+        });
+        const { filepath, error } = await response.json();
+
+        if (response.ok && filepath) {
+            console.log(`[fragment] Saved ${filepath}`);
+        } else {
+            onError(error);
+        }
+    } catch(error) {
+        onError(error);
+    }
+};
+
+export async function createDataURLFromBlob(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        
+        reader.onerror = (err) => {
+            reject(err);
+        };
+
+        reader.onload = (e) => {
+            resolve(e.target.result);
+        };
+
+        reader.readAsDataURL(blob);
+    });
+}
+
+export async function saveBlob(blob, options) {
+    const dataURL = await createDataURLFromBlob(blob);
+
+    return saveDataURL(dataURL, options, blob);
+};
+
+function getFilenameParams() {
+    const now = new Date();
+
+    const year = now.toLocaleString('default', { year: 'numeric' });
+    const month = now.toLocaleString('default', { month: 'numeric' }).padStart(2, `0`);
+    const day = now.toLocaleString('default', { day: 'numeric' });
+    const hours = now.toLocaleString('default', { hour: 'numeric' }).split(' ')[0];
+    const minutes = now.toLocaleString('default', { minute: 'numeric' }).padStart(2, `0`);
+    const seconds = now.toLocaleString('default', { second: 'numeric' }).padStart(2, `0`);
+
+    const timestamp = `${year}.${month}.${day}-${hours}.${minutes}.${seconds}`;
+
+    return {
+        year,
+        month,
+        day,
+        hours,
+        minutes,
+        seconds,
+        timestamp,
+    };
+}
+
+export const defaultFilenamePattern = ({
+    filename,
+    timestamp,
+}) => {
+    return `${filename}.${timestamp}`;
+};
+
+export async function screenshotCanvas(canvas, {
+    filename = "",
+    pattern = defaultFilenamePattern,
+    params = {},
+}) {
+    const { imageEncoding, imageQuality, pixelsPerInch } = get(exports);
+    let { extension, dataURL } = exportCanvas(canvas, {
+        encoding: `image/${imageEncoding}`,
+        encodingQuality: map(imageQuality, 1, 100, 0, 1),
+    });
+
+    let patternParams = getFilenameParams();
+    let name = pattern({ filename, ...params, ...patternParams });
+
+    if (imageEncoding !== "webp" && pixelsPerInch !== 72) {
+        dataURL = changeDpiDataUrl(dataURL, pixelsPerInch);
+    }
+    
+    await saveDataURL(dataURL, {
+        filename: `${name}${extension}`,
+        onError: () => {
+            console.error(`[fragment] Error while saving screenshot.`);
+        }
+    });
+}
+
+function recordCanvasWebM(canvas, options) {
+    let recorder = new WebMRecorder(canvas, options);
+    recorder.start();
+
+    return recorder;
+}
+
+function recordCanvasMp4(canvas, options) {
+    let recorder = new MP4Recorder(canvas, options);
+    recorder.start();
+
+    return recorder;
+}
+
+function recordCanvasGIF(canvas, options) {
+    let recorder = new GIFRecorder(canvas, options);
+    recorder.start();
+
+    return recorder;
+}
+
+function recordCanvasFrames(canvas, options) {
+    let recorder = new FrameRecorder(canvas, options);
+    recorder.start();
+
+    return recorder;
+}
+
+export function recordCanvas(canvas, {
+    filename = 'output',
+    format = 'mp4',
+    framerate = 25,
+    duration = Infinity,
+    quality = 100,
+    pattern = defaultFilenamePattern,
+    imageEncoding,
+    onStart = () => {},
+    onTick = () => {},
+    onComplete = () => {}
+} = {}) {
+    let patternParams = getFilenameParams();
+    let name = pattern({ filename, ...patternParams });
+
+    function complete(result) {
+        if (Array.isArray(result)) {
+            const frmt = format === VIDEO_FORMATS.FRAMES ? imageEncoding : format;
+
+            for (let i = 0; i < result.length; i++) {
+                const index = `${i}`.padStart(`${result.length}`.length, '0');
+                saveBlob(result[i], {
+                    filename: `${name}-${index}.${frmt}`,
+                    onError: () => {
+                        console.log(`[fragment] Error while saving record.`);
+                    }
+                });
+            }
+        } else {
+            saveBlob(result, {
+                filename: `${name}.${format}`,
+                onError: () => {
+                    console.log(`[fragment] Error while saving record.`);
+                }
+            });
+        }
+        onComplete();
+    }
+
+    const options = {
+        framerate,
+        duration,
+        quality,
+        onStart,
+        onTick,
+        onComplete: complete,
+    };
+
+    let recorder;
+
+    if (format === VIDEO_FORMATS.WEBM) {
+        recorder = recordCanvasWebM(canvas, options);
+    } else if (format === VIDEO_FORMATS.MP4) {
+        recorder = recordCanvasMp4(canvas, options);
+    } else if (format === VIDEO_FORMATS.GIF) {
+        recorder = recordCanvasGIF(canvas, options);
+    } else if (format === VIDEO_FORMATS.FRAMES) {
+        recorder = recordCanvasFrames(canvas, {
+            ...options,
+            imageEncoding,
+        });
+    }
+
+    if (!recorder) {
+        console.error(`Cannot find matching recorder`);
+    }
+
+    return recorder;
+};