@dosgato/dialog 0.0.33 → 0.0.34

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.5",
-    "@txstate-mws/svelte-forms": "^1.2.1",
+    "@txstate-mws/svelte-components": "^1.3.7",
+    "@txstate-mws/svelte-forms": "^1.3.3",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
@@ -12,15 +12,15 @@
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "^1.0.0-next.5",
+    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/kit": "^1.0.1",
+    "@sveltejs/package": "^1.0.1",
     "@types/codeflask": "^1.4.3",
-    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-config-standard-with-typescript": "^24.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.5.20",
+    "svelte-check": "^3.0.1",
+    "svelte-preprocess": "^5.0.0",
+    "svelte2tsx": "^0.6.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
@@ -75,15 +75,14 @@
     "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
     "./colorpicker/colorpicker": "./colorpicker/colorpicker.js",
     "./colorpicker": "./colorpicker/index.js",
+    "./cropper/FieldCropper.svelte": "./cropper/FieldCropper.svelte",
+    "./cropper/cropper": "./cropper/cropper.js",
+    "./cropper": "./cropper/index.js",
     "./fileIcons": "./fileIcons.js",
     "./helpers": "./helpers.js",
     "./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",

package/tree/LoadIcon.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  LoadIconEvents */
 /** @typedef {typeof __propDef.slots}  LoadIconSlots */
 export default class LoadIcon extends SvelteComponentTyped<{
-    size?: string;
+    size?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type LoadIconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        size?: string;
+        size?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tree/Tree.svelte.d.ts

@@ -4,22 +4,22 @@ import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, Move
 declare class __sveltets_Render<T extends TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
-        nodeClass?: (itm: T) => string;
-        singleSelect?: boolean;
-        enableResize?: boolean;
+        nodeClass?: ((itm: T) => string) | undefined;
+        singleSelect?: boolean | undefined;
+        enableResize?: boolean | undefined;
         /**
            * this `itemType` prop is here for typescript only
            *
            * it will allow users to specify T
            *
            * we are able to determine T from the store prop, but not everyone will use the store prop
-           */ itemType?: T;
-        fetchChildren?: FetchChildrenFn<T>;
-        dragEligible?: DragEligibleFn<T>;
-        moveHandler?: MoveHandlerFn<T>;
-        copyHandler?: CopyHandlerFn<T>;
-        dropEffect?: DropEffectFn<T>;
-        store?: TreeStore<T>;
+           */ itemType?: T | undefined;
+        fetchChildren?: FetchChildrenFn<T> | undefined;
+        dragEligible?: DragEligibleFn<T> | undefined;
+        moveHandler?: MoveHandlerFn<T> | undefined;
+        copyHandler?: CopyHandlerFn<T> | undefined;
+        dropEffect?: DropEffectFn<T> | undefined;
+        store?: TreeStore<T> | undefined;
     };
     events(): {
         choose: CustomEvent<T>;
@@ -31,6 +31,6 @@ export type TreeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T
 export type TreeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
 export type TreeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
 export default class Tree<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeProps<T>, TreeEvents<T>, TreeSlots<T>> {
-    get itemType(): T;
+    get itemType(): T & {};
 }
 export {};

package/tree/TreeNode.svelte

@@ -310,7 +310,10 @@ $: if ($dragging) {
       </div>
     {/each}
     <ScreenReaderOnly>
-      command enter select multiple, shift enter select all from last selection
+      up down to navigate
+      {#if item.hasChildren && showChildren}, left arrow to hide children{/if}
+      {#if item.hasChildren && !showChildren}, right arrow to show children{/if}
+      {#if $selected.size > 0}, command-enter to select multiple, shift-enter to select all from last selection{/if}
     </ScreenReaderOnly>
   </div>
   {#if showChildren && item.children}

package/tree/TreeNode.svelte.d.ts

@@ -5,14 +5,14 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
         headerSizes: Store<string[]>;
-        nodeClass?: (itm: T) => string;
+        nodeClass?: ((itm: T) => string) | undefined;
         item: TypedTreeItem<T>;
         posinset: number;
         setsize: number;
         level: number;
-        next: TypedTreeItem<T>;
-        prev: TypedTreeItem<T>;
-        parent?: TypedTreeItem<T>;
+        next: TypedTreeItem<T> | undefined;
+        prev: TypedTreeItem<T> | undefined;
+        parent?: TypedTreeItem<T> | undefined;
     };
     events(): {
         choose: CustomEvent<any>;

package/tree/treestore.d.ts

@@ -48,12 +48,12 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     #private;
     fetchChildren: FetchChildrenFn<T>;
     treeElement?: HTMLElement;
-    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[], ITreeStore<T>>;
+    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[] | undefined, ITreeStore<T>>;
     draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
-    selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean | undefined, ITreeStore<T>>;
     selected: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
-    focused: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>, ITreeStore<T>>;
+    focused: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T> | undefined, ITreeStore<T>>;
     copied: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
     headerOverride: import("@txstate-mws/svelte-store").DerivedStore<Record<string, string>, ITreeStore<T>>;
     moveHandler?: MoveHandlerFn<T>;
@@ -79,14 +79,14 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     refresh(item?: TypedTreeItem<T>, skipNotify?: boolean): Promise<void>;
     focus(item: TypedTreeItem<T> | undefined, notify?: boolean): void;
     select(item: TypedTreeItem<T>, { clear, notify, toggle }: {
-        clear?: boolean;
-        notify?: boolean;
-        toggle?: boolean;
+        clear?: boolean | undefined;
+        notify?: boolean | undefined;
+        toggle?: boolean | undefined;
     }): void;
     selectById(id: string, { clear, notify, toggle }: {
-        clear?: boolean;
-        notify?: boolean;
-        toggle?: boolean;
+        clear?: boolean | undefined;
+        notify?: boolean | undefined;
+        toggle?: boolean | undefined;
     }): void;
     deselect(notify?: boolean): void;
     isSelected(item: TypedTreeItem<T>): boolean;
@@ -96,22 +96,22 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     toggle(item: TypedTreeItem<T>): Promise<void>;
     viewUnder(item?: TypedTreeItem<T>): Promise<void>;
     dragStart(item: TypedTreeItem<T>): void;
-    protected _drop(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean, userWantsRecursive: boolean | undefined): Promise<boolean>;
-    drop(item: TypedTreeItem<T>, above: boolean, userWantsCopy: any): Promise<boolean>;
+    protected _drop(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean, userWantsRecursive: boolean | undefined): Promise<boolean | undefined>;
+    drop(item: TypedTreeItem<T>, above: boolean, userWantsCopy: any): Promise<boolean | undefined>;
     collectAncestors(item: TypedTreeItem<T>): TypedTreeItem<T>[];
     root(item: TypedTreeItem<T>): TypedTreeItem<T>;
-    findCommonParent(items: TypedTreeItem<T>[]): TypedTreeItem<T>;
+    findCommonParent(items: TypedTreeItem<T>[]): TypedTreeItem<T> | undefined;
     dragEligible(selectedItems: TypedTreeItem<T>[], userWantsCopy: boolean): boolean;
     protected _dropEffect(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
     dropEffect(item: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
     cut(): void;
     copy(): void;
-    cutEligible(): boolean;
-    copyEligible(): boolean;
+    cutEligible(): boolean | undefined;
+    copyEligible(): boolean | undefined;
     cancelCopy(): void;
-    pasteEligible(above?: boolean): boolean;
+    pasteEligible(above?: boolean): boolean | 0;
     pasteEffect(above?: boolean): "none" | "copy" | "move";
-    paste(above?: boolean, userWantsRecursive?: boolean): Promise<boolean>;
+    paste(above?: boolean, userWantsRecursive?: boolean): Promise<boolean | undefined>;
     setHeaderOverride(id: string, width: string): void;
     resetHeaderOverride(): void;
 }

package/tree/treestore.js

@@ -103,7 +103,7 @@ export class TreeStore extends ActiveStore {
             this.addLookup(children);
             // if the focused item disappeared in the refresh, we need to replace it,
             // as without a focus the tree becomes invisible to keyboard nav
-            if (!this.value.itemsById[this.value.focused?.id])
+            if (!this.value.itemsById[this.value.focused?.id ?? ''])
                 this.focus(this.value.selectedItems.slice(-1)[0] ?? this.value.rootItems?.[0], true);
         }
         finally {
@@ -205,8 +205,8 @@ export class TreeStore extends ActiveStore {
         const commonparent = this.findCommonParent([...selectedItems, item]);
         try {
             const result = dropEffect === 'move'
-                ? await this.moveHandler(selectedItems, item, above)
-                : await this.copyHandler(selectedItems, item, above, userWantsRecursive);
+                ? await this.moveHandler?.(selectedItems, item, above)
+                : await this.copyHandler?.(selectedItems, item, above, userWantsRecursive);
             await this.openAndRefresh(item);
             await this.refresh(commonparent);
             return result;

package/imagecropper/FieldImageCropper.svelte

@@ -1,380 +0,0 @@
-<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 = {
-    src: '',
-    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 && 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) {
-    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, 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;
-    }
-}
-</script>
-
-<FieldStandard bind:id {label} {path} {required} {conditional} {helptext} let:value let:setVal>
-  {#if isNotBlank(imageSrc)}
-    {@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=""/>
-        <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 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.
-      </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

@@ -1,25 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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>;
-    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;
-    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;
-}