fragment-tools 0.1.13 → 0.1.15

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

@@ -1,139 +1,156 @@
 <script>
-import { rendering, SIZES, monitors } from "../stores/rendering.js";
-import { sketchesCount } from "../stores/sketches.js";
-import Field from "./Field.svelte";
-import presets, { getDimensionsForPreset } from "../lib/presets";
-import { exports } from "../stores";
-import ParamsMultisampling from "./ParamsMultisampling.svelte";
+	import { rendering, SIZES, monitors } from '../stores/rendering.js';
+	import { sketchesCount } from '../stores/sketches.js';
+	import Field from './Field.svelte';
+	import presets, {
+		PRESET_ORIENTATIONS,
+		getDimensionsForPreset,
+	} from '../lib/presets';
+	import { exports } from '../stores';
+	import ParamsMultisampling from './ParamsMultisampling.svelte';
+	import Select from './fields/Select.svelte';
+	import FieldInputRow from './fields/FieldInputRow.svelte';
 
-let canvasWidth = $rendering.width;
-let canvasHeight = $rendering.height;
+	let canvasWidth = $rendering.width;
+	let canvasHeight = $rendering.height;
 
-function handleChangeDimensions(event) {
-    const [width, height] = event.detail;
-    const needsUpdate = canvasWidth !== width || canvasHeight !== height;
+	function handleChangeDimensions(event) {
+		const [width, height] = event.detail;
+		const needsUpdate = canvasWidth !== width || canvasHeight !== height;
 
-    if (needsUpdate) {
-        canvasWidth = width;
-        canvasHeight = height;
+		if (needsUpdate) {
+			canvasWidth = width;
+			canvasHeight = height;
 
-        rendering.update((curr) => {
-            return {
-                ...curr,
-                width,
-                height
-            }
-        });
-    }
-}
+			rendering.update((curr) => {
+				return {
+					...curr,
+					width,
+					height,
+				};
+			});
+		}
+	}
 
-let sizes = Object.values(SIZES);
-$: dimensionsEnabled = [SIZES.FIXED, SIZES.SCALE].includes($rendering.resizing);
+	let sizes = Object.values(SIZES);
+	$: dimensionsEnabled = [SIZES.FIXED, SIZES.SCALE].includes(
+		$rendering.resizing,
+	);
 
-$: {
-    if ($rendering.resizing === SIZES.PRESET) {
-        const { preset } = $rendering;
-        const [ width, height ] = getDimensionsForPreset(preset, { pixelsPerInch: 300 });
-
-        rendering.update((curr) => {
-            return {
-                ...curr,
-                width,
-                height,
-            };
-        });
-    }
-}
+	$: {
+		if ($rendering.resizing === SIZES.PRESET) {
+			const { preset } = $rendering;
+			const [width, height] = getDimensionsForPreset(preset, {
+				pixelsPerInch: 300,
+				orientation: $rendering.presetOrientation,
+			});
 
+			rendering.update((curr) => {
+				return {
+					...curr,
+					width,
+					height,
+				};
+			});
+		}
+	}
 </script>
 
 <Field
-    key="dimensions"
-    value={[
-        $rendering.width,
-        $rendering.height,
-    ]}
-    on:change={handleChangeDimensions}
-    params={{
-        step: 1,
-        suffix: "px",
-        locked: false,
-        disabled: !dimensionsEnabled,
-    }}
+	key="dimensions"
+	value={[$rendering.width, $rendering.height]}
+	on:change={handleChangeDimensions}
+	params={{
+		step: 1,
+		suffix: 'px',
+		locked: false,
+	}}
+	disabled={!dimensionsEnabled}
 />
 <Field
-    key="canvasSize"
-    value={$rendering.resizing}
-    on:change={(event) => {
-        const resizing = event.detail;
-        let aspectRatio = 1;
+	key="canvasSize"
+	value={$rendering.resizing}
+	on:change={(event) => {
+		const resizing = event.detail;
+		let aspectRatio = 1;
 
-        if (resizing === SIZES.ASPECT_RATIO) {
-            // compute aspect ratio based on previous props
-            aspectRatio = $rendering.width / $rendering.height;
-        }
+		if (resizing === SIZES.ASPECT_RATIO) {
+			// compute aspect ratio based on previous props
+			aspectRatio = $rendering.width / $rendering.height;
+		}
 
-        $exports.pixelsPerInch = resizing === SIZES.PRESET ? 300 : 72;
+		$exports.pixelsPerInch = resizing === SIZES.PRESET ? 300 : 72;
 
-        rendering.update((curr) => {
-            return {
-                ...curr,
-                resizing,
-                aspectRatio,
-            }
-        });
-    }}
-    params={{
-        options: sizes,
-    }}
+		rendering.update((curr) => {
+			return {
+				...curr,
+				resizing,
+				aspectRatio,
+			};
+		});
+	}}
+	params={{
+		options: sizes,
+	}}
 />
 {#if $rendering.resizing === SIZES.ASPECT_RATIO}
-<Field
-    key="aspectRatio"
-    value={$rendering.aspectRatio}
-    on:change={(event) => {
-        $rendering.aspectRatio = event.detail;
-    }}
-    params={{
-        step: 0.01,
-    }}
-/>
+	<Field
+		key="aspectRatio"
+		value={$rendering.aspectRatio}
+		on:change={(event) => {
+			$rendering.aspectRatio = event.detail;
+		}}
+		params={{
+			step: 0.01,
+		}}
+	/>
 {/if}
 {#if $rendering.resizing === SIZES.SCALE}
-<Field
-    key="zoom"
-    value={$rendering.scale}
-    on:change={(event) => {
-        $rendering.scale = event.detail;
-    }}
-    params={{
-        step: 0.01,
-    }}
-/>
+	<Field
+		key="zoom"
+		value={$rendering.scale}
+		on:change={(event) => {
+			$rendering.scale = event.detail;
+		}}
+		params={{
+			step: 0.01,
+		}}
+	/>
 {/if}
 {#if $rendering.resizing === SIZES.PRESET}
-<Field
-    key="preset"
-    value={$rendering.preset}
-    on:change={(event) => {
-        $rendering.preset = event.detail;
-    }}
-    params={{
-        options: presets,
-    }}
-/>
+	<Field key="preset">
+		<FieldInputRow --grid-template-columns="1fr 1fr">
+			<Select
+				value={$rendering.preset}
+				options={presets}
+				on:change={(event) => {
+					$rendering.preset = event.detail;
+				}}
+			/>
+			<Select
+				value={$rendering.presetOrientation}
+				options={[
+					PRESET_ORIENTATIONS.PORTRAIT,
+					PRESET_ORIENTATIONS.LANDSCAPE,
+				]}
+				on:change={(event) => {
+					$rendering.presetOrientation = event.detail;
+				}}
+			/>
+		</FieldInputRow>
+	</Field>
 {/if}
 
-{#if $rendering.resizing !== SIZES.PRESET }
-<Field
-    key="pixelRatio"
-    value={Number($rendering.pixelRatio)}
-    on:change={(event) => $rendering.pixelRatio = event.detail }
-    params={{
-        step: 0.1,
-    }}
-/>
+{#if $rendering.resizing !== SIZES.PRESET}
+	<Field
+		key="pixelRatio"
+		value={Number($rendering.pixelRatio)}
+		on:change={(event) => ($rendering.pixelRatio = event.detail)}
+		params={{
+			step: 0.1,
+		}}
+	/>
 {/if}
-{#if $sketchesCount > 1 && $monitors.length > 1 }
-<ParamsMultisampling />
+{#if $sketchesCount > 1 && $monitors.length > 1}
+	<ParamsMultisampling />
 {/if}

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

@@ -1,15 +1,14 @@
 <script>
-import { onDestroy } from "svelte";
+	import { onDestroy } from 'svelte';
 
-import { rendering } from "../stores/rendering";
-import Build from "./Build.svelte";
+	import { rendering } from '../stores/rendering';
+	import Build from './Build.svelte';
 
-let saved = $rendering;
-
-onDestroy(() => {
-	$rendering = saved;
-});
+	let saved = $rendering;
 
+	onDestroy(() => {
+		$rendering = saved;
+	});
 </script>
 
 <Build />

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

@@ -1,25 +1,37 @@
 <script>
-export let width = 24;
-export let height = 24;
+	export let width = 24;
+	export let height = 24;
 </script>
 
 <div class="chevrons" style={`width: ${width}px;`}>
-	<svg class="chevron chevron-bottom" width={width} height={height} fill="none" viewBox="0 0 24 24">
-		<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+	<svg
+		class="chevron chevron-bottom"
+		{width}
+		{height}
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M15.25 10.75L12 14.25L8.75 10.75"
+		/>
 	</svg>
 </div>
 
 <style>
-.chevrons {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    width: 15px;
+	.chevrons {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		width: 15px;
 
-    color: var(--color, currentColor);
-    pointer-events: none;
-}
+		color: inherit;
+		pointer-events: none;
+	}
 </style>