@dosgato/dialog 0.0.30 → 0.0.32

package/FieldChooserLink.svelte

@@ -20,6 +20,9 @@ export let urlEntry = false;
 export let initialSource = undefined;
 export let initialPath = undefined;
 export let helptext = undefined;
+export let selectedAsset = undefined;
+// TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
+// choosing unacceptable mime types
 const formStore = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
@@ -45,25 +48,60 @@ function onChange(setVal) {
 }
 async function userUrlEntry() {
     const url = this.value;
+    store.clearPreview();
+    let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
-        if (item)
-            return store.setPreview(item);
+        if (item) {
+            found = true;
+            if ((item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
+                (item.type === 'folder' && !folders) || // they typed the URL for an asset folder but not allowed
+                (item.type === 'asset' && !assets) || // they typed the URL for an asset but not allowed
+                (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
+            ) {
+                selectedAsset = {
+                    type: 'raw',
+                    id: undefined,
+                    url
+                };
+            }
+            else {
+                selectedAsset = { ...item, url };
+            }
+        }
     }
-    store.clearPreview();
-    const newVal = chooserClient.urlToValue?.(url) ?? url;
-    selectedAsset = {
-        type: 'raw',
-        id: newVal,
-        url
-    };
-    formStore.setField(finalPath, newVal);
+    if (!found) {
+        try {
+            const _ = new URL(url);
+            const newVal = chooserClient.urlToValue?.(url) ?? url;
+            selectedAsset = {
+                type: 'raw',
+                id: newVal,
+                url
+            };
+        }
+        catch (e) {
+            selectedAsset = {
+                type: 'raw',
+                id: undefined,
+                url
+            };
+        }
+    }
+    formStore.setField(finalPath, selectedAsset?.id);
     formStore.dirtyField(finalPath);
 }
-let selectedAsset;
 async function updateSelected(..._) {
-    if ($value && selectedAsset?.id !== $value)
+    if ($value && selectedAsset?.id !== $value) {
         selectedAsset = await chooserClient.findById($value);
+        try {
+            if (!selectedAsset)
+                selectedAsset = { type: 'raw', id: $value, url: chooserClient.valueToUrl?.($value) ?? $value };
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
 }
 $: updateSelected($value);
 </script>
@@ -76,8 +114,8 @@ $: updateSelected($value);
     </div>
   {/if}
   <div class="dialog-chooser-entry">
-    {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
-      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}>
+    {#if urlEntry}
+      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
     {/if}
     <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
   </div>

package/FieldChooserLink.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import { type RawURL } from './chooser';
+import type { AnyItem } from './chooser/ChooserAPI';
 declare const __propDef: {
     props: {
         id?: string | undefined;
@@ -15,6 +17,7 @@ declare const __propDef: {
         initialSource?: string | undefined;
         initialPath?: string | undefined;
         helptext?: string | undefined;
+        selectedAsset?: AnyItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/chooser/ChooserAPI.d.ts

@@ -8,6 +8,12 @@ export interface Client<F = any> {
     findById: (id: string) => Promise<AnyItem | undefined>;
     findByUrl?: (url: string) => Promise<AnyItem | undefined>;
     urlToValue?: (url: string) => string;
+    /**
+     * If the form is preloaded with a raw URL, findById returns undefined, and the client implements
+     * urlToValue, we will need a way to decode/reverse what urlToValue does. This function should
+     * do that.
+     */
+    valueToUrl?: (value: string) => string;
     upload: (source: string, path: string, files: FileList) => Promise<void>;
 }
 export interface Source {
@@ -30,11 +36,28 @@ interface Item {
     path: string;
     name: string;
     source: string;
+    /**
+     * Identifier for the urlEntry input
+     *
+     * When urlEntry prop is true, the user gets a text field where they can freely
+     * enter a string to identify the object being chosen. This value will be
+     * placed in that field when they use the chooser.
+     *
+     * It should be reversible with the `findByUrl` function provided by your chooser
+     * client, but note that the `findByUrl` function can accept multiple URLs that
+     * all point to the same resource. If the user types anything that can identify
+     * a resource, the resource will show up in the "Details" area, but the URL the user
+     * typed will NOT change to the one provided by this property. We try not
+     * to rewrite values in the form fields where possible, because it can disrupt the
+     * user's interaction.
+     */
+    url: string;
 }
 export interface Folder extends Item {
     type: 'folder';
     hasChildren: boolean;
     acceptsUpload: boolean;
+    url: string;
 }
 export interface Page extends Item {
     type: 'page';

package/chooser/Details.svelte

@@ -4,11 +4,13 @@ export let item;
 
 <ul class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
-    <li>{item.name}</li>
+    <li>{item.path}</li>
+  {:else if item.id}
+    <li>External Link<br>{item.url}</li>
   {/if}
   {#if item.type === 'asset' && item.image}
     <li>{item.image.width}x{item.image.height}</li>
-  {:else if item.type === 'page'}
+  {:else if item.type === 'page' && item.title}
     <li>{item.title}</li>
   {:else if item.type === 'folder'}
     <li>{item.path}</li>

package/chooser/Thumbnail.svelte

@@ -14,7 +14,7 @@ export let item;
     {/if}
   {:else if item.type === 'folder'}
     <Icon icon={folderOutline} width='5em' />
-  {:else}
+  {:else if item.id}
     <Icon icon={fileLinkOutline} width='5em' />
   {/if}
 </div>

package/imagecropper/FieldImageCropper.svelte

@@ -0,0 +1,377 @@
+<script>import { isNotBlank, isNotNull } from 'txstate-utils';
+import FieldStandard from '../FieldStandard.svelte';
+import { ImageCropperStore } from './ImageCropperStore';
+export let id = undefined;
+export let path;
+export let imageSrc;
+export let selectionAspectRatio = 1;
+export let minSelection = 0; // percentage of image, a value 0-1
+export let snapDistance = 0;
+export let label = '';
+export let required = false;
+export let conditional = undefined;
+export let helptext = undefined;
+let minSelectionWidth = 0;
+let minSelectionHeight = 0;
+let localCoord = null;
+const oldGlobalCoord = { x: 0, y: 0 };
+let initialGlobalCoord = null;
+let globalOffsetX = 0;
+let globalOffsetY = 0;
+let initialGlobalDragCoord = null;
+let initialDragLeft = 0;
+let initialDragTop = 0;
+let altKey = false;
+let ctrlKey = false;
+const pseudoEvent = { clientX: 0, clientY: 0 };
+let shieldDiv;
+let image;
+function widthPercent(val) {
+    return val / imageWidth * 100;
+}
+function heightPercent(val) {
+    return val / imageHeight * 100;
+}
+const defaultSelection = {
+    selection: {
+        left: undefined,
+        top: undefined,
+        width: undefined,
+        height: undefined,
+        visible: false,
+        shieldVisible: false,
+        track: false,
+        drag: false
+    },
+    crop: {
+        imagecropbottom: 0,
+        imagecropleft: 0,
+        imagecropright: 0,
+        imagecroptop: 0
+    }
+};
+let imageWidth;
+let imageHeight;
+$: imageAspectRatio = imageWidth / imageHeight;
+$: maxContainerWidth = (image ? Math.min(image.width, 700) : '700');
+const store = new ImageCropperStore(defaultSelection);
+const { selection, crop } = store;
+function startSelection(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.altKey)
+        altKey = e.altKey;
+    if (e.ctrlKey)
+        ctrlKey = e.ctrlKey;
+    if (!$selection.visible) {
+        localCoord = { x: e.offsetX + 1, y: e.offsetY + 1 };
+        initialGlobalCoord = { x: e.clientX, y: e.clientY };
+        oldGlobalCoord.x = e.clientX;
+        oldGlobalCoord.y = e.clientY;
+        let selectionWidth = 0;
+        let selectionHeight = 0;
+        if (minSelection > 0) {
+            if (imageAspectRatio > selectionAspectRatio) {
+                // use height for min selection calculation
+                selectionHeight = imageHeight * minSelection;
+                selectionWidth = (16.0 * selectionHeight) / 9.0; // TODO: Why is this assuming a 16:9 ratio? That's how it's working Gato, but probably isn't right.
+            }
+            else {
+                // use width for min selection calculation
+                selectionWidth = imageWidth * minSelection;
+                selectionHeight = (9.0 * selectionWidth) / 16.0;
+            }
+            minSelectionWidth = selectionWidth;
+            minSelectionHeight = selectionHeight;
+        }
+        store.draw(e.offsetX, e.offsetY, selectionWidth, selectionHeight, imageWidth, imageHeight);
+        store.setTrack(true);
+    }
+}
+function adjustInitialSelection(e, setVal) {
+    // Getting position and size.
+    if (altKey) {
+        // Pressing alt allows the user to move the selection while creating it.
+        globalOffsetX += e.clientX - oldGlobalCoord.x;
+        globalOffsetY += e.clientY - oldGlobalCoord.y;
+    }
+    // If the user moved the mouse from right to left instead of left to right
+    const invertedHor = e.clientX - (initialGlobalCoord.x + globalOffsetX) < 0;
+    // If the user moved the mouse from bottom to top instead of top to bottom
+    const invertedVer = e.clientY - (initialGlobalCoord.y + globalOffsetY) < 0;
+    let width = Math.abs(e.clientX - (initialGlobalCoord.x + globalOffsetX));
+    let height = Math.abs(e.clientY - (initialGlobalCoord.y + globalOffsetY));
+    let left = localCoord.x + globalOffsetX;
+    let top = localCoord.y + globalOffsetY;
+    if (invertedHor)
+        left -= width;
+    if (invertedVer)
+        top -= height;
+    const leftEdge = left;
+    if (leftEdge < 0 || (leftEdge <= snapDistance && !ctrlKey)) {
+        width += leftEdge;
+        left = 0;
+    }
+    const topEdge = top;
+    if (topEdge < 0 || (topEdge <= snapDistance && !ctrlKey)) {
+        height += topEdge;
+        top = 0;
+    }
+    const rightEdge = imageWidth - width - left;
+    if (rightEdge < 0 || (rightEdge <= snapDistance && !ctrlKey))
+        width += rightEdge;
+    const bottomEdge = imageHeight - height - top;
+    if (bottomEdge < 0 || (bottomEdge <= snapDistance && !ctrlKey))
+        height += bottomEdge;
+    if (width > selectionAspectRatio * height) {
+        if (invertedHor)
+            left += width - selectionAspectRatio * height;
+        width = selectionAspectRatio * height;
+    }
+    else {
+        if (invertedVer)
+            top += height - width / selectionAspectRatio;
+        height = width / selectionAspectRatio;
+    }
+    if (width < minSelectionWidth || height < minSelectionHeight) {
+        width = minSelectionWidth;
+        height = minSelectionHeight;
+    }
+    store.draw(left, top, width, height, imageWidth, imageHeight);
+    setVal($crop);
+}
+function onMouseUp(setVal) {
+    return (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.altKey)
+            altKey = e.altKey;
+        if (e.ctrlKey)
+            ctrlKey = e.ctrlKey;
+        if ($selection.track) {
+            if (initialGlobalCoord.x === e.clientX && initialGlobalCoord.y === e.clientY) {
+                reset(setVal);
+            }
+            else {
+                adjustInitialSelection(e, setVal);
+                store.setShieldVisibility(true);
+                oldGlobalCoord.x = e.clientX;
+                oldGlobalCoord.y = e.clientY;
+            }
+        }
+        else if (e.target === shieldDiv || e.target === image) {
+            reset(setVal);
+        }
+        store.setTrack(false);
+        store.setDrag(false);
+    };
+}
+function onMouseMove(setVal) {
+    return (e) => {
+        if (e.altKey)
+            altKey = e.altKey;
+        if (e.ctrlKey)
+            ctrlKey = e.ctrlKey;
+        if ($selection.track || $selection.drag) {
+            e.preventDefault();
+            pseudoEvent.clientX = e.clientX;
+            pseudoEvent.clientY = e.clientY;
+            if ($selection.track)
+                adjustInitialSelection(pseudoEvent, setVal);
+            else if ($selection.drag)
+                adjustSelectionDrag(pseudoEvent, setVal);
+            oldGlobalCoord.x = e.clientX;
+            oldGlobalCoord.y = e.clientY;
+        }
+    };
+}
+function startDragSelection(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.altKey)
+        altKey = e.altKey;
+    if (e.ctrlKey)
+        ctrlKey = e.ctrlKey;
+    initialGlobalDragCoord = { x: e.clientX, y: e.clientY };
+    initialDragLeft = $selection.left;
+    initialDragTop = $selection.top;
+    store.setDrag(true);
+}
+function onKey(e, setVal) {
+    altKey = e.altKey;
+    ctrlKey = e.ctrlKey;
+    if ($selection.track || $selection.drag) {
+        e.preventDefault();
+        pseudoEvent.preventDefault = function () { };
+        pseudoEvent.clientX = oldGlobalCoord.x;
+        pseudoEvent.clientY = oldGlobalCoord.y;
+        pseudoEvent.altKey = e.altKey;
+        pseudoEvent.ctrlKey = e.ctrlKey;
+    }
+    if ($selection.track)
+        adjustInitialSelection(pseudoEvent, setVal);
+    else if ($selection.drag)
+        onMouseMove.call(pseudoEvent, setVal);
+}
+function onKeyDown(setVal) {
+    return (e) => {
+        if ((!altKey && e.altKey) || (!ctrlKey && e.ctrlKey))
+            onKey(e, setVal);
+    };
+}
+function onKeyUp(setVal) {
+    return (e) => {
+        if ((!altKey && e.altKey) || (!ctrlKey && e.ctrlKey))
+            onKey(e, setVal);
+    };
+}
+function adjustSelectionDrag(e, setVal) {
+    let left = initialDragLeft + e.clientX - initialGlobalDragCoord.x;
+    let top = initialDragTop + e.clientY - initialGlobalDragCoord.y;
+    // Adjusting position to account for edge snapping
+    const leftEdge = left;
+    if (leftEdge < 0 || (leftEdge <= snapDistance && !ctrlKey))
+        left = 0;
+    const topEdge = top;
+    if (topEdge < 0 || (topEdge <= snapDistance && !ctrlKey))
+        top = 0;
+    const rightEdge = imageWidth - $selection.width - left;
+    if (rightEdge < 0 || (rightEdge <= snapDistance && !ctrlKey))
+        left += rightEdge;
+    const bottomEdge = imageHeight - $selection.height - top;
+    if (bottomEdge < 0 || (bottomEdge <= snapDistance && !ctrlKey))
+        top += bottomEdge;
+    store.moveSelectionTo(left, top, imageWidth, imageHeight);
+    setVal($crop);
+}
+function maximize(setVal) {
+    store.maximize(imageWidth, imageHeight, selectionAspectRatio);
+    setVal($crop);
+}
+function reset(setVal) {
+    localCoord = null;
+    initialGlobalCoord = null;
+    store.reset();
+    setVal($crop);
+    altKey = false;
+    ctrlKey = false;
+}
+let storeInitialized = false;
+function init(value) {
+    if (!storeInitialized && imageWidth > 0) {
+        if (value) {
+            store.setCrop(value.imagecropleft, value.imagecroptop, value.imagecropright, value.imagecropbottom, imageWidth, imageHeight);
+        }
+        else {
+            store.maximize(imageWidth, imageHeight, selectionAspectRatio);
+        }
+        storeInitialized = true;
+    }
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {conditional} {helptext} let:value let:setVal>
+  {#if isNotBlank(imageSrc)}
+    {@const _ = init(value)}
+    <div class="cropper-wrapper">
+      <div class="crop-image-container" on:mousedown={startSelection} on:mouseup={onMouseUp(setVal)} on:mousemove={onMouseMove(setVal)} on:keydown={onKeyDown(setVal)} on:keyup={onKeyUp(setVal)} bind:clientWidth={imageWidth} bind:clientHeight={imageHeight} style="max-width: {maxContainerWidth}px">
+        <img bind:this={image} class="crop-image" src={imageSrc} alt=""/>
+        <div class='selectionLine divSelectionHor divSelectionTop' class:visible={$selection.visible} style={isNotNull($selection.left) ? `left: ${$selection.left}px; top: ${$selection.top}px; width: ${$selection.width}px` : ''}></div>
+        <div class='selectionLine divSelectionVer divSelectionRight' class:visible={$selection.visible} style={isNotNull($selection.left) ? `left: ${$selection.left + $selection.width - 1}px; top: ${$selection.top}px; height: ${$selection.height}px` : ''}></div>
+        <div class='selectionLine divSelectionHor divSelectionBottom' class:visible={$selection.visible} style={isNotNull($selection.left) ? `left: ${$selection.left}px; top: ${$selection.top + $selection.height - 1}px; width: ${$selection.width}px` : ''}></div>
+        <div class='selectionLine divSelectionVer divSelectionLeft' class:visible={$selection.visible} style={isNotNull($selection.left) ? `left: ${$selection.left}px; top: ${$selection.top}px; height: ${$selection.height}px` : ''}></div>
+        <img src="{imageSrc}" class='imageCropSelection' alt="" class:visible={$selection.visible} style={isNotNull($selection.left) ? `clip-path: polygon(${widthPercent($selection.left)}% ${heightPercent($selection.top)}%, ${widthPercent($selection.left + $selection.width)}% ${heightPercent($selection.top)}%, ${widthPercent($selection.left + $selection.width)}% ${heightPercent($selection.top + $selection.height)}%, ${widthPercent($selection.left)}% ${heightPercent($selection.top + $selection.height)}%)` : ''} on:mousedown={startDragSelection}/>
+        <div bind:this={shieldDiv} class="divShield" class:visible={$selection.shieldVisible} ></div>
+      </div>
+      <div class="action-buttons">
+        <button class='btn-center-max' on:click={() => maximize(setVal)}>Center and Maximize</button>
+        <button class='btn-clear' on:click={() => reset(setVal)}>Clear</button>
+      </div>
+      <div class="cropper-instructions">
+        Click and drag to select a section of your image to use.
+      </div>
+    </div>
+  {:else}
+    Image not selected
+  {/if}
+</FieldStandard>
+
+<style>
+  .crop-image-container {
+    position: relative;
+  }
+  .crop-image-container .crop-image {
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 3;
+    cursor: crosshair;
+    display: block;
+    position: relative;
+  }
+
+  .selectionLine {
+    visibility: hidden;
+  }
+  .selectionLine.visible {
+    visibility: visible;
+  }
+  .imageCropSelection {
+    visibility: hidden;
+  }
+  .imageCropSelection.visible {
+    visibility: visible;
+  }
+  .imageCropSelection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    z-index: 9;
+    visibility: hidden;
+    overflow: hidden;
+    max-width:100%;
+    max-height: 100%;
+}
+  .divShield {
+    position:       absolute;
+    left:           0;
+    top:            0;
+    background:     #000;
+    z-index:        4;
+    cursor:         default;
+    visibility:     hidden;
+    filter:         opacity(80%);
+    opacity:        0.8;
+    width: 100%;
+    height: 100%;
+  }
+  .divShield.visible {
+    visibility: visible;
+  }
+
+.divSelectionHor {
+    position:       absolute;
+    left:           0;
+    top:            0;
+    width:          1px;
+    height:         1px;
+    font:           1px/1px verdana, sans-serif;
+    background:     repeating-linear-gradient(to right, #000, #000 5px, white 5px, transparent 10px);
+    z-index:        10;
+    cursor:         crosshair;
+    visibility:     hidden;
+}
+.divSelectionVer {
+    position:       absolute;
+    left:           0;
+    top:            0;
+    width:          1px;
+    height:         1px;
+    font:           1px/1px verdana, sans-serif;
+    background:     repeating-linear-gradient(to bottom, #000, #000 5px, white 5px, transparent 10px);
+    z-index:        10;
+    cursor:         crosshair;
+    visibility:     hidden;
+}
+
+</style>

package/imagecropper/FieldImageCropper.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        imageSrc: string;
+        selectionAspectRatio?: number;
+        minSelection?: number;
+        snapDistance?: number;
+        label?: string;
+        required?: boolean;
+        conditional?: boolean | undefined;
+        helptext?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldImageCropperProps = typeof __propDef.props;
+export type FieldImageCropperEvents = typeof __propDef.events;
+export type FieldImageCropperSlots = typeof __propDef.slots;
+export default class FieldImageCropper extends SvelteComponentTyped<FieldImageCropperProps, FieldImageCropperEvents, FieldImageCropperSlots> {
+}
+export {};

package/imagecropper/ImageCropperStore.d.ts

@@ -0,0 +1,15 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { ICropperStore } from './imagecropper';
+export declare class ImageCropperStore extends Store<ICropperStore> {
+    selection: import("@txstate-mws/svelte-store").DerivedStore<import("./imagecropper").ICropSelection, ICropperStore>;
+    crop: import("@txstate-mws/svelte-store").DerivedStore<import("./imagecropper").ImageCropperOutput, ICropperStore>;
+    draw(left: number, top: number, width: number, height: number, imageWidth: number, imageHeight: number): void;
+    setCrop(cropLeft: number, cropTop: number, cropRight: number, cropBottom: number, imageWidth: number, imageHeight: number): void;
+    setTrack(track: boolean): void;
+    setShieldVisibility(vis: boolean): void;
+    setDrag(drag: boolean): void;
+    setSelectionVisibility(visible: boolean): void;
+    moveSelectionTo(left: number, top: number, imageWidth: number, imageHeight: number): void;
+    maximize(imageWidth: number, imageHeight: number, selectionAspectRatio: number): void;
+    reset(): void;
+}

package/imagecropper/ImageCropperStore.js

@@ -0,0 +1,96 @@
+import { Store, derivedStore } from '@txstate-mws/svelte-store';
+export class ImageCropperStore extends Store {
+    selection = derivedStore(this, 'selection');
+    crop = derivedStore(this, 'crop');
+    draw(left, top, width, height, imageWidth, imageHeight) {
+        // calculate new values for crop
+        const cropLeft = left / imageWidth;
+        const cropTop = top / imageHeight;
+        const cropRight = (left + width) / imageWidth;
+        const cropBottom = (top + height) / imageHeight;
+        this.update(v => ({
+            ...v,
+            selection: { ...v.selection, left, top, width, height, visible: true },
+            crop: { imagecropleft: cropLeft, imagecroptop: cropTop, imagecropright: cropRight, imagecropbottom: cropBottom }
+        }));
+    }
+    setCrop(cropLeft, cropTop, cropRight, cropBottom, imageWidth, imageHeight) {
+        // calculate values for left, top, width, height
+        const left = Math.round(cropLeft * imageWidth);
+        const top = Math.round(cropTop * imageHeight);
+        const cr = cropRight <= 0 ? 1 : cropRight;
+        const width = imageWidth * cr - left;
+        const cb = cropBottom <= 0 ? 1 : cropBottom;
+        const height = imageHeight * cb - top;
+        this.update(v => ({
+            ...v,
+            selection: { ...v.selection, left, top, width, height, visible: true, shieldVisible: true },
+            crop: { imagecropleft: cropLeft, imagecroptop: cropTop, imagecropright: cropRight, imagecropbottom: cropBottom }
+        }));
+    }
+    setTrack(track) {
+        this.update(v => ({ ...v, selection: { ...v.selection, track } }));
+    }
+    setShieldVisibility(vis) {
+        this.update(v => ({ ...v, selection: { ...v.selection, shieldVisible: vis } }));
+    }
+    setDrag(drag) {
+        this.update(v => ({ ...v, selection: { ...v.selection, drag } }));
+    }
+    setSelectionVisibility(visible) {
+        this.update(v => ({ ...v, selection: { ...v.selection, visible } }));
+    }
+    moveSelectionTo(left, top, imageWidth, imageHeight) {
+        // calculate crop values using new left and right, current selection width and height
+        const cropLeft = left / imageWidth;
+        const cropTop = top / imageHeight;
+        const cropRight = (left + this.value.selection.width) / imageWidth;
+        const cropBottom = (top + this.value.selection.height) / imageHeight;
+        this.update(v => ({
+            ...v,
+            selection: { ...v.selection, left, top },
+            crop: { imagecropleft: cropLeft, imagecroptop: cropTop, imagecropright: cropRight, imagecropbottom: cropBottom }
+        }));
+    }
+    maximize(imageWidth, imageHeight, selectionAspectRatio) {
+        let cropLeft, cropRight, cropTop, cropBottom;
+        const imageAspectRatio = imageWidth / imageHeight;
+        if (imageAspectRatio > selectionAspectRatio) {
+            const targetWidth = selectionAspectRatio * imageHeight;
+            cropLeft = (Math.round(imageWidth - targetWidth) / 2) / imageWidth;
+            cropTop = 0;
+            cropRight = ((Math.round(imageWidth - targetWidth) / 2) + targetWidth) / imageWidth;
+            cropBottom = 1;
+        }
+        else {
+            const targetHeight = imageWidth / selectionAspectRatio;
+            cropLeft = 0;
+            cropTop = (Math.round(imageHeight - targetHeight) / 2) / imageHeight;
+            cropRight = 1;
+            cropBottom = ((Math.round(imageHeight - targetHeight) / 2) + targetHeight) / imageHeight;
+        }
+        this.setCrop(cropLeft, cropTop, cropRight, cropBottom, imageWidth, imageHeight);
+        this.setSelectionVisibility(true);
+        this.setShieldVisibility(true);
+    }
+    reset() {
+        this.update(v => ({
+            selection: {
+                left: undefined,
+                top: undefined,
+                width: undefined,
+                height: undefined,
+                visible: false,
+                shieldVisible: false,
+                track: false,
+                drag: false
+            },
+            crop: {
+                imagecropbottom: 0,
+                imagecropleft: 0,
+                imagecropright: 0,
+                imagecroptop: 0
+            }
+        }));
+    }
+}

package/imagecropper/imagecropper.d.ts

@@ -0,0 +1,20 @@
+export interface ImageCropperOutput {
+    imagecropleft: number;
+    imagecropright: number;
+    imagecroptop: number;
+    imagecropbottom: number;
+}
+export interface ICropSelection {
+    left: number | undefined;
+    top: number | undefined;
+    width: number | undefined;
+    height: number | undefined;
+    visible: boolean;
+    shieldVisible: boolean;
+    track: boolean;
+    drag: boolean;
+}
+export interface ICropperStore {
+    selection: ICropSelection;
+    crop: ImageCropperOutput;
+}

package/imagecropper/imagecropper.js

@@ -0,0 +1 @@
+export {};

package/imagecropper/index.d.ts

@@ -0,0 +1 @@
+export { default as FieldImageCropper } from './FieldImageCropper.svelte';

package/imagecropper/index.js

@@ -0,0 +1 @@
+export { default as FieldImageCropper } from './FieldImageCropper.svelte';

package/index.d.ts

@@ -40,3 +40,4 @@ export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
+export * from './imagecropper/index.js';

package/index.js

@@ -40,3 +40,4 @@ export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
+export * from './imagecropper/index.js';

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.30",
+  "version": "0.0.32",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.2.1",
@@ -80,6 +80,10 @@
     "./iconpicker/FieldIconPicker.svelte": "./iconpicker/FieldIconPicker.svelte",
     "./iconpicker/iconpicker": "./iconpicker/iconpicker.js",
     "./iconpicker": "./iconpicker/index.js",
+    "./imagecropper/FieldImageCropper.svelte": "./imagecropper/FieldImageCropper.svelte",
+    "./imagecropper/ImageCropperStore": "./imagecropper/ImageCropperStore.js",
+    "./imagecropper/imagecropper": "./imagecropper/imagecropper.js",
+    "./imagecropper": "./imagecropper/index.js",
     ".": "./index.js",
     "./tree/LoadIcon.svelte": "./tree/LoadIcon.svelte",
     "./tree/Tree.svelte": "./tree/Tree.svelte",