@dosgato/dialog 0.0.37 → 0.0.38

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) {
@@ -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.37",
+  "version": "0.0.38",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.7",
     "@txstate-mws/svelte-forms": "^1.3.4",