@dosgato/dialog 0.0.32 → 0.0.33

package/FieldChooserLink.svelte

@@ -46,12 +46,19 @@ function onChange(setVal) {
         hide();
     };
 }
-async function userUrlEntry() {
+let timer;
+function userUrlEntry() {
+    clearTimeout(timer);
+    timer = setTimeout(userUrlEntryDebounced.bind(this), 300);
+}
+async function userUrlEntryDebounced() {
     const url = this.value;
     store.clearPreview();
     let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
+        if (url !== this.value)
+            return;
         if (item) {
             found = true;
             if ((item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
@@ -93,7 +100,11 @@ async function userUrlEntry() {
 }
 async function updateSelected(..._) {
     if ($value && selectedAsset?.id !== $value) {
-        selectedAsset = await chooserClient.findById($value);
+        const valueBeforeFind = $value;
+        const asset = await chooserClient.findById($value);
+        if ($value !== valueBeforeFind)
+            return;
+        selectedAsset = asset;
         try {
             if (!selectedAsset)
                 selectedAsset = { type: 'raw', id: $value, url: chooserClient.valueToUrl?.($value) ?? $value };

package/imagecropper/FieldImageCropper.svelte

@@ -33,6 +33,7 @@ function heightPercent(val) {
     return val / imageHeight * 100;
 }
 const defaultSelection = {
+    src: '',
     selection: {
         left: undefined,
         top: undefined,
@@ -53,7 +54,8 @@ const defaultSelection = {
 let imageWidth;
 let imageHeight;
 $: imageAspectRatio = imageWidth / imageHeight;
-$: maxContainerWidth = (image ? Math.min(image.width, 700) : '700');
+$: maxContainerWidth = ((image && imageWidth > 0 && imageHeight > 0) ? Math.min(image.width, 700) : '700');
+$: store.setSrc(imageSrc, imageWidth, imageHeight, selectionAspectRatio);
 const store = new ImageCropperStore(defaultSelection);
 const { selection, crop } = store;
 function startSelection(e) {
@@ -257,13 +259,14 @@ function reset(setVal) {
     ctrlKey = false;
 }
 let storeInitialized = false;
-function init(value) {
-    if (!storeInitialized && imageWidth > 0) {
+function init(value, setVal) {
+    if (!storeInitialized && imageWidth > 0 && imageHeight > 0) {
         if (value) {
             store.setCrop(value.imagecropleft, value.imagecroptop, value.imagecropright, value.imagecropbottom, imageWidth, imageHeight);
         }
         else {
             store.maximize(imageWidth, imageHeight, selectionAspectRatio);
+            setVal($crop);
         }
         storeInitialized = true;
     }
@@ -272,7 +275,7 @@ function init(value) {
 
 <FieldStandard bind:id {label} {path} {required} {conditional} {helptext} let:value let:setVal>
   {#if isNotBlank(imageSrc)}
-    {@const _ = init(value)}
+    {@const _ = init(value, setVal)}
     <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=""/>
@@ -284,8 +287,8 @@ function init(value) {
         <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>
+        <button type="button" class='btn-center-max' on:click={() => maximize(setVal)}>Center and Maximize</button>
+        <button type="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.

package/imagecropper/ImageCropperStore.d.ts

@@ -3,6 +3,7 @@ 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>;
+    setSrc(src: string, imageWidth: number, imageHeight: number, selectionAspectRatio: number): void;
     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;

package/imagecropper/ImageCropperStore.js

@@ -2,6 +2,13 @@ import { Store, derivedStore } from '@txstate-mws/svelte-store';
 export class ImageCropperStore extends Store {
     selection = derivedStore(this, 'selection');
     crop = derivedStore(this, 'crop');
+    setSrc(src, imageWidth, imageHeight, selectionAspectRatio) {
+        this.maximize(imageWidth, imageHeight, selectionAspectRatio);
+        this.update(v => ({
+            ...v,
+            src
+        }));
+    }
     draw(left, top, width, height, imageWidth, imageHeight) {
         // calculate new values for crop
         const cropLeft = left / imageWidth;
@@ -75,6 +82,7 @@ export class ImageCropperStore extends Store {
     }
     reset() {
         this.update(v => ({
+            ...v,
             selection: {
                 left: undefined,
                 top: undefined,

package/imagecropper/imagecropper.d.ts

@@ -15,6 +15,7 @@ export interface ICropSelection {
     drag: boolean;
 }
 export interface ICropperStore {
+    src: string;
     selection: ICropSelection;
     crop: ImageCropperOutput;
 }

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.32",
+  "version": "0.0.33",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.2.1",