@dosgato/dialog 0.0.36 → 0.0.38

package/chooser/Chooser.svelte

@@ -100,7 +100,7 @@ onMount(async () => {
     </section>
     <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
-        <Thumbnail item={$preview} />
+        <Thumbnail item={$preview} larger />
         <Details item={$preview}>
           {#if $preview.type === 'folder'}
             <li>{$selected?.children?.length ?? 0} sub-items</li>

package/chooser/ChooserAPI.d.ts

@@ -75,6 +75,7 @@ export interface Asset extends Item {
         width: number;
         height: number;
         thumbnailUrl?: string;
+        previewUrl?: string;
     };
 }
 export {};

package/chooser/Thumbnail.svelte

@@ -3,12 +3,13 @@ import fileLinkOutline from '@iconify-icons/mdi/file-link-outline.js';
 import FileIcon from '../FileIcon.svelte';
 import Icon from '../Icon.svelte';
 export let item;
+export let larger = false;
 </script>
 
 <div class="dialog-chooser-thumbnail">
   {#if item.type === 'asset'}
     {#if item.image}
-      <img src={item.image.thumbnailUrl} alt="" />
+      <img src={(larger ? item.image.thumbnailUrl : item.image.previewUrl) ?? item.image.thumbnailUrl ?? item.url} alt="" />
     {:else}
       <FileIcon mime={item.mime} width='5em' />
     {/if}

package/chooser/Thumbnail.svelte.d.ts

@@ -4,6 +4,7 @@ import type { RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
         item: AnyItem | RawURL;
+        larger?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/colorpicker/FieldColorPicker.svelte

@@ -43,7 +43,7 @@ const groupid = randomid();
   .color-container {
     display: grid;
     grid-gap: 10px;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 
   label.colorsel :global(input[type="radio"]) {

package/cropper/FieldCropper.svelte

@@ -12,7 +12,7 @@ export let required = false;
 export let conditional = undefined;
 export let helptext = undefined;
 const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio });
-const { output, selection } = store;
+const { output, outputPct, selection } = store;
 let setVal;
 let value;
 function init(spValue, spSetVal) {
@@ -39,7 +39,7 @@ let container;
 function onMouseDown(e) {
     if (!updateRect())
         return;
-    if (e instanceof TouchEvent && e.touches.length > 1)
+    if (window.TouchEvent && TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
         return;
     const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
@@ -51,7 +51,7 @@ function onMouseDown(e) {
 function onMouseMove(e) {
     if (!updateRect())
         return;
-    if (e instanceof TouchEvent && e.touches.length > 1)
+    if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
         return;
     const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
@@ -114,9 +114,9 @@ let focusWithin = false;
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
       <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$store.cursor}>
         <img class="crop-image" src={imageSrc} alt="" />
-        {#if $selection && $output}
+        {#if $selection && $outputPct}
           <div class='crop-bg'>
-            <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$output.left}% {$output.top}%, {100 - $output.right}% {$output.top}%, {100 - $output.right}% {100 - $output.bottom}%, {$output.left}% {100 - $output.bottom}%, {$output.left}% {$output.top}%)" />
+            <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$outputPct.left}% {$outputPct.top}%, {100 - $outputPct.right}% {$outputPct.top}%, {100 - $outputPct.right}% {100 - $outputPct.bottom}%, {$outputPct.left}% {100 - $outputPct.bottom}%, {$outputPct.left}% {$outputPct.top}%)" />
           </div>
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
           <div class='selectionHilite' {id} tabindex="0" on:keydown={onKeyDown('move')}

package/cropper/cropper.d.ts

@@ -40,6 +40,12 @@ export declare class CropperStore extends Store<ICropperStore> {
         bottom: number;
     } | undefined, ICropperStore>;
     output: import("@txstate-mws/svelte-store").DerivedStore<CropOutput | undefined, ICropperStore>;
+    outputPct: import("@txstate-mws/svelte-store").DerivedStore<{
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    } | undefined, ICropperStore>;
     constructor(initialValue: Omit<ICropperStore, 'cursor'>);
     setOutput(selection?: CropOutput): void;
     updateDimensions(width: number, height: number): void;

package/cropper/cropper.js

@@ -8,6 +8,7 @@ export class CropperStore extends Store {
         return this.convertToPx(v.selection, v.width, v.height);
     });
     output = derivedStore(this, 'selection');
+    outputPct = derivedStore(this, v => v.selection ? ({ left: v.selection.left * 100, top: v.selection.top * 100, right: v.selection.right * 100, bottom: v.selection.bottom * 100 }) : undefined);
     constructor(initialValue) {
         super({ ...initialValue, cursor: 'crosshair' });
     }
@@ -57,7 +58,7 @@ export class CropperStore extends Store {
             const ar = v.width / v.height;
             const s = {};
             if (ar > v.targetAspect) { // draw area is wider than aspect, fill height
-                s.left = 100 * (ar - v.targetAspect) / (2 * ar);
+                s.left = (ar - v.targetAspect) / (2 * ar);
                 s.right = s.left;
                 s.top = 0;
                 s.bottom = 0;
@@ -65,7 +66,7 @@ export class CropperStore extends Store {
             else { // draw area is taller than aspect, fill width
                 s.left = 0;
                 s.right = 0;
-                s.top = 100 * (v.targetAspect - ar) / (2 * v.targetAspect);
+                s.top = (v.targetAspect - ar) / (2 * v.targetAspect);
                 s.bottom = s.top;
             }
             return { ...v, selection: s };
@@ -75,20 +76,20 @@ export class CropperStore extends Store {
         if (!sel)
             return undefined;
         return {
-            left: 100.0 * sel.left / width,
-            right: 100.0 * (width - sel.right) / width,
-            top: 100.0 * sel.top / height,
-            bottom: 100.0 * (height - sel.bottom) / height
+            left: sel.left / width,
+            right: (width - sel.right) / width,
+            top: sel.top / height,
+            bottom: (height - sel.bottom) / height
         };
     }
     convertToPx(output, width, height) {
         if (!output)
             return undefined;
         return {
-            left: output.left * width / 100.0,
-            right: width - output.right * width / 100.0,
-            top: output.top * height / 100.0,
-            bottom: height - output.bottom * height / 100.0
+            left: output.left * width,
+            right: width - output.right * width,
+            top: output.top * height,
+            bottom: height - output.bottom * height
         };
     }
     determineSelection(startX, startY, x, y, v) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.7",
     "@txstate-mws/svelte-forms": "^1.3.4",