@dosgato/dialog 1.4.4 → 1.5.0

package/dist/code/FieldGraphQLEditor.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { HTMLActionEntry } from '@txstate-mws/svelte-components'
+  import type { GraphQLSchema } from 'graphql'
+  import { FieldStandard } from '..'
+  import GraphQLEditor from './GraphQLEditor.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label = ''
+  export let notNull = false
+  export let defaultValue: any = notNull ? '' : undefined
+  export let rows = 8
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let schema: GraphQLSchema | undefined = undefined
+  export let noMutations = false
+  export let allowInvalid = false
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:messagesid let:helptextid let:deserialize>
+  <GraphQLEditor id={fieldid} bind:inputelement {schema} {noMutations} {allowInvalid} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => { console.log(e.detail); setVal(deserialize?.(e.detail)) }}/>
+</FieldStandard>

package/dist/code/FieldGraphQLEditor.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
+import type { GraphQLSchema } from 'graphql';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        notNull?: boolean;
+        defaultValue?: any;
+        rows?: number;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLElement;
+        related?: true | number;
+        extradescid?: string | undefined;
+        helptext?: string | undefined;
+        schema?: GraphQLSchema | undefined;
+        noMutations?: boolean;
+        allowInvalid?: boolean;
+    };
+    events: {
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldGraphQLEditorProps = typeof __propDef.props;
+export type FieldGraphQLEditorEvents = typeof __propDef.events;
+export type FieldGraphQLEditorSlots = typeof __propDef.slots;
+export default class FieldGraphQLEditor extends SvelteComponentTyped<FieldGraphQLEditorProps, FieldGraphQLEditorEvents, FieldGraphQLEditorSlots> {
+}
+export {};

package/dist/code/FieldTypeScriptEditor.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLActionEntry } from '@txstate-mws/svelte-components'
+  import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
+  import { FieldStandard } from '..'
+  import TypeScriptEditor from './TypeScriptEditor.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label = ''
+  export let notNull = false
+  export let defaultValue: any = notNull ? '' : undefined
+  export let rows = 8
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let preamble = ''
+  export let sandbox = false
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:messagesid let:helptextid>
+  <TypeScriptEditor id={fieldid} bind:inputelement {preamble} {sandbox} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => setVal(e.detail)}/>
+</FieldStandard>

package/dist/code/FieldTypeScriptEditor.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        notNull?: boolean;
+        defaultValue?: any;
+        rows?: number;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLElement;
+        related?: true | number;
+        extradescid?: string | undefined;
+        helptext?: string | undefined;
+        preamble?: string;
+        sandbox?: boolean;
+    };
+    events: {
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldTypeScriptEditorProps = typeof __propDef.props;
+export type FieldTypeScriptEditorEvents = typeof __propDef.events;
+export type FieldTypeScriptEditorSlots = typeof __propDef.slots;
+export default class FieldTypeScriptEditor extends SvelteComponentTyped<FieldTypeScriptEditorProps, FieldTypeScriptEditorEvents, FieldTypeScriptEditorSlots> {
+}
+export {};

package/dist/code/GraphQLEditor.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { type HTMLActionEntry, passActions } from '@txstate-mws/svelte-components'
+  import type { EditorView, ViewUpdate } from '@codemirror/view'
+
+  import type { GraphQLSchema } from 'graphql'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { getDescribedBy } from '..'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let rows = 8
+  export let schema: GraphQLSchema | undefined = undefined
+  export let noMutations = false
+  export let allowInvalid = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement | undefined = undefined
+  export let extradescid: string | undefined = undefined
+  export let helptextid: string | undefined = undefined
+  export let messagesid: string | undefined = undefined
+  export let valid: boolean | undefined = undefined
+  export let invalid: boolean | undefined = undefined
+  export let value: any
+
+  const dispatch = createEventDispatcher()
+
+  let editorInvalid = false
+  let updateCode: (code: string) => void
+  let updateEditorSchema: (schema?: GraphQLSchema) => void
+  let editorelement: HTMLElement | undefined
+  let editor: EditorView
+  onMount(async () => {
+    const { EditorView, minimalSetup } = await import('codemirror')
+    const { EditorState } = await import('@codemirror/state')
+    const { indentWithTab } = await import('@codemirror/commands')
+    const { lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap, hoverTooltip } = await import('@codemirror/view')
+    const { autocompletion, completionKeymap, closeBracketsKeymap } = await import('@codemirror/autocomplete')
+    const { setDiagnosticsEffect } = await import('@codemirror/lint')
+    const { indentOnInput } = await import('@codemirror/language')
+    const { graphql, updateSchema, getSchema, offsetToPos } = await import('cm6-graphql')
+    const { getHoverInformation, getDiagnostics } = await import('graphql-language-service')
+    const { GraphQLSchema: GQLSchema, GraphQLObjectType, GraphQLString } = await import('graphql')
+
+    function stripMutations (s?: GraphQLSchema): GraphQLSchema | undefined {
+      if (!s || !noMutations) return s
+      const config = s.toConfig()
+      const emptyMutation = new GraphQLObjectType({ name: 'Mutation', fields: { _: { type: GraphQLString } } })
+      const types = config.types.filter(t => t.name !== 'Mutation')
+      return new GQLSchema({ ...config, mutation: emptyMutation, types: [...types, emptyMutation] })
+    }
+
+    const graphqlHover = hoverTooltip((view, pos) => {
+      const s = getSchema(view.state)
+      if (!s) return null
+      const queryText = view.state.doc.toString()
+      const cursor = offsetToPos(view.state.doc, pos)
+      const info = getHoverInformation(s, queryText, cursor, undefined, { useMarkdown: false })
+      const content = Array.isArray(info) ? info.map(i => typeof i === 'string' ? i : i.value).join('\n') : typeof info === 'string' ? info : ''
+      if (!content) return null
+      return {
+        pos,
+        above: true,
+        create () {
+          const dom = document.createElement('div')
+          dom.style.cssText = 'padding: 4px 8px; font-size: 0.85em; font-family: monospace; white-space: pre-wrap;'
+          dom.textContent = content
+          return { dom }
+        }
+      }
+    })
+
+    editor = new EditorView({
+      extensions: [
+        minimalSetup,
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        autocompletion(),
+        indentOnInput(),
+        graphqlHover,
+        ...graphql(stripMutations(schema)),
+        EditorState.transactionFilter.of(tr => {
+          if (!tr.newDoc.toString().trim() && tr.effects.some(e => e.is(setDiagnosticsEffect))) {
+            return { changes: tr.changes, effects: tr.effects.filter(e => !e.is(setDiagnosticsEffect)) }
+          }
+          return tr
+        }),
+        keymap.of([...completionKeymap, ...closeBracketsKeymap, indentWithTab]),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            const newval = editor.state.doc.toString()
+            if (value === newval) return
+            if (!allowInvalid) {
+              const effectiveSchema = getSchema(v.state)
+              if (!effectiveSchema || !newval.trim() || getDiagnostics(newval, effectiveSchema).some(e => e.severity === 1)) {
+                editorInvalid = true
+                dispatch('change', '')
+                return
+              }
+            }
+            editorInvalid = false
+            dispatch('change', newval)
+          }
+        })
+      ],
+      parent: editorelement
+    })
+    updateEditorSchema = (s?: GraphQLSchema) => { updateSchema(editor, stripMutations(s)) }
+    updateCode = code => {
+      if (editorInvalid) return
+      if (editor.state.doc.toString() !== code) editor.update([editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: code } })])
+    }
+    inputelement = editorelement?.querySelector('.cm-content') ?? undefined
+    if (id) inputelement?.setAttribute('id', id)
+    if (className) inputelement?.classList.add(...className.split(' '), ...[])
+    updateValidState()
+  })
+  onDestroy(() => {
+    editor?.destroy()
+  })
+  $: updateCode?.(value ?? '')
+  $: updateEditorSchema?.(schema)
+  function updateValidState (..._: any[]) {
+    inputelement?.setAttribute('aria-invalid', String(!!invalid))
+    const descby = getDescribedBy([messagesid, helptextid, extradescid])
+    if (descby) inputelement?.setAttribute('aria-describedby', descby)
+    else inputelement?.removeAttribute('aria-describedby')
+  }
+  $: updateValidState(invalid, messagesid)
+</script>
+
+<div bind:this={editorelement} style:--cm-editor-minh="{rows * 1.5}em" class:valid class:invalid on:paste on:focusout use:passActions={use}></div>
+
+<style>
+  div {
+    background-color: white;
+  }
+  div :global(.cm-content), div :global(.cm-gutter) {
+    min-height: var(--cm-editor-minh, 10em);
+  }
+
+  div :global(.cm-scroller) {
+    overflow: auto;
+    resize: vertical;
+  }
+</style>

package/dist/code/GraphQLEditor.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+import type { GraphQLSchema } from 'graphql';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        rows?: number;
+        schema?: GraphQLSchema | undefined;
+        noMutations?: boolean;
+        allowInvalid?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLElement | undefined;
+        extradescid?: string | undefined;
+        helptextid?: string | undefined;
+        messagesid?: string | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
+        value: any;
+    };
+    events: {
+        paste: ClipboardEvent;
+        focusout: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GraphQLEditorProps = typeof __propDef.props;
+export type GraphQLEditorEvents = typeof __propDef.events;
+export type GraphQLEditorSlots = typeof __propDef.slots;
+export default class GraphQLEditor extends SvelteComponentTyped<GraphQLEditorProps, GraphQLEditorEvents, GraphQLEditorSlots> {
+}
+export {};

package/dist/code/TypeScriptEditor.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import { type HTMLActionEntry, passActions } from '@txstate-mws/svelte-components'
+  import type { EditorView, ViewUpdate } from '@codemirror/view'
+  import type { CompletionSource } from '@codemirror/autocomplete'
+  import type { CompilerOptions } from 'typescript'
+  import type { Diagnostic } from '@codemirror/lint'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { getDescribedBy } from '..'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let rows = 8
+  export let preamble = ''
+  export let sandbox = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement | undefined = undefined
+  export let extradescid: string | undefined = undefined
+  export let helptextid: string | undefined = undefined
+  export let messagesid: string | undefined = undefined
+  export let valid: boolean | undefined = undefined
+  export let invalid: boolean | undefined = undefined
+  export let value: any
+
+  const dispatch = createEventDispatcher()
+
+  const PREAMBLE_PATH = '/preamble.ts'
+  const FILE_PATH = '/input.ts'
+
+  let updateCode: (code: string) => void
+  let updatePreamble: (preamble: string) => void
+  let editorelement: HTMLElement | undefined
+  let editor: EditorView
+  onMount(async () => {
+    const [
+      { EditorView, minimalSetup },
+      { indentWithTab },
+      { lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap },
+      { autocompletion, completionKeymap, closeBracketsKeymap },
+      { indentOnInput },
+      { javascript },
+      { tsFacet, tsSync, tsHover },
+      ts,
+      { createDefaultMapFromCDN, createSystem, createVirtualTypeScriptEnvironment }
+    ] = await Promise.all([
+      import('codemirror'),
+      import('@codemirror/commands'),
+      import('@codemirror/view'),
+      import('@codemirror/autocomplete'),
+      import('@codemirror/language'),
+      import('@codemirror/lang-javascript'),
+      import('@valtown/codemirror-ts'),
+      import('typescript'),
+      import('@typescript/vfs')
+    ])
+
+    const compilerOptions: CompilerOptions = {
+      target: ts.ScriptTarget.ES2024,
+      module: ts.ModuleKind.ESNext,
+      lib: ['es2024'],
+      strict: true
+    }
+
+    const fsMap = await createDefaultMapFromCDN(compilerOptions, ts.version, true, ts, undefined, fetch)
+    fsMap.set(PREAMBLE_PATH, preamble)
+    fsMap.set(FILE_PATH, value ?? '')
+
+    // knownLibFilesForCompilerOptions may include legacy files not on CDN
+    // ensure all expected lib files exist so TS doesn't throw
+    // note: @typescript/vfs has a bug where empty string content is treated as
+    // missing (falsy check in getScriptSnapshot), so we use a space
+    const { knownLibFilesForCompilerOptions } = await import('@typescript/vfs')
+    for (const lib of knownLibFilesForCompilerOptions(compilerOptions, ts)) {
+      if (!fsMap.has('/' + lib)) fsMap.set('/' + lib, ' ')
+    }
+
+    fsMap.set(PREAMBLE_PATH, preamble || ' ')
+    fsMap.set(FILE_PATH, value || ' ')
+
+    const system = createSystem(fsMap)
+    const env = createVirtualTypeScriptEnvironment(system, [PREAMBLE_PATH, FILE_PATH], ts, compilerOptions)
+
+    const tsComplete: CompletionSource = context => {
+      const content = env.getSourceFile(FILE_PATH)?.getFullText()
+      if (!content) return null
+      const line = context.state.doc.lineAt(context.pos)
+      const textBefore = line.text.slice(0, context.pos - line.from)
+      const wordMatch = textBefore.match(/\w*$/v)
+      const dotMatch = textBefore.match(/\.\s*$/v)
+      if (!wordMatch?.[0] && !dotMatch && !context.explicit) return null
+      const from = context.pos - (wordMatch?.[0].length ?? 0)
+      const completions = env.languageService.getCompletionsAtPosition(FILE_PATH, context.pos, {})
+      if (!completions) return null
+      return {
+        from,
+        options: completions.entries.map(entry => ({
+          label: entry.name,
+          type: entry.kind
+        }))
+      }
+    }
+
+    const { linter } = await import('@codemirror/lint')
+    const importPattern = /\b(import|require)\s*(\(|['"]|\{?\s*['"])/gv
+    const sandboxLinter = linter(view => {
+      if (!sandbox) return []
+      const diagnostics: Diagnostic[] = []
+      const doc = view.state.doc
+      for (let i = 1; i <= doc.lines; i++) {
+        const line = doc.line(i)
+        let match: RegExpExecArray | null
+        importPattern.lastIndex = 0
+        while ((match = importPattern.exec(line.text)) !== null) {
+          diagnostics.push({
+            from: line.from + match.index,
+            to: line.from + match.index + match[0].length,
+            severity: 'error',
+            message: 'Imports are not allowed in this editor'
+          })
+        }
+      }
+      return diagnostics
+    })
+
+    editor = new EditorView({
+      extensions: [
+        minimalSetup,
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        javascript({ typescript: true }),
+        autocompletion({ override: [tsComplete] }),
+        sandboxLinter,
+        indentOnInput(),
+        tsFacet.of({ env, path: FILE_PATH }),
+        tsSync(),
+        tsHover(),
+        keymap.of([...completionKeymap, ...closeBracketsKeymap, indentWithTab]),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            const newval = editor.state.doc.toString()
+            if (value !== newval) dispatch('change', newval)
+          }
+        })
+      ],
+      parent: editorelement
+    })
+    updatePreamble = (text: string) => {
+      env.updateFile(PREAMBLE_PATH, text)
+    }
+    updateCode = code => {
+      if (editor.state.doc.toString() !== code) editor.update([editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: code } })])
+    }
+    inputelement = editorelement?.querySelector('.cm-content') ?? undefined
+    if (id) inputelement?.setAttribute('id', id)
+    if (className) inputelement?.classList.add(...className.split(' '), ...[])
+    updateValidState()
+  })
+  onDestroy(() => {
+    editor?.destroy()
+  })
+  $: updateCode?.(value ?? '')
+  $: updatePreamble?.(preamble)
+  function updateValidState (..._: any[]) {
+    inputelement?.setAttribute('aria-invalid', String(!!invalid))
+    const descby = getDescribedBy([messagesid, helptextid, extradescid])
+    if (descby) inputelement?.setAttribute('aria-describedby', descby)
+    else inputelement?.removeAttribute('aria-describedby')
+  }
+  $: updateValidState(invalid, messagesid)
+</script>
+
+<div bind:this={editorelement} style:--cm-editor-minh="{rows * 1.5}em" class:valid class:invalid on:paste on:focusout use:passActions={use}></div>
+
+<style>
+  div {
+    background-color: white;
+  }
+  div :global(.cm-content), div :global(.cm-gutter) {
+    min-height: var(--cm-editor-minh, 10em);
+  }
+
+  div :global(.cm-scroller) {
+    overflow: auto;
+    resize: vertical;
+  }
+</style>

package/dist/code/TypeScriptEditor.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        rows?: number;
+        preamble?: string;
+        sandbox?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLElement | undefined;
+        extradescid?: string | undefined;
+        helptextid?: string | undefined;
+        messagesid?: string | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
+        value: any;
+    };
+    events: {
+        paste: ClipboardEvent;
+        focusout: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TypeScriptEditorProps = typeof __propDef.props;
+export type TypeScriptEditorEvents = typeof __propDef.events;
+export type TypeScriptEditorSlots = typeof __propDef.slots;
+export default class TypeScriptEditor extends SvelteComponentTyped<TypeScriptEditorProps, TypeScriptEditorEvents, TypeScriptEditorSlots> {
+}
+export {};

package/dist/code/index.d.ts

@@ -1 +1,3 @@
 export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
+export { default as FieldGraphQLEditor } from './FieldGraphQLEditor.svelte';
+export { default as FieldTypeScriptEditor } from './FieldTypeScriptEditor.svelte';

package/dist/code/index.js

@@ -1 +1,3 @@
 export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
+export { default as FieldGraphQLEditor } from './FieldGraphQLEditor.svelte';
+export { default as FieldTypeScriptEditor } from './FieldTypeScriptEditor.svelte';

package/dist/colorpicker/FieldColorPicker.svelte

@@ -11,8 +11,8 @@
   export { className as class }
   export let path: string
   export let options: ColorPickerOption[]
-  export let addAllOption: boolean = false
-  export let label: string = ''
+  export let addAllOption = false
+  export let label = ''
   export let required = false
   export let notNull = false
   export let defaultValue: any = notNull ? (addAllOption ? 'alternating' : options[0].value) : undefined

package/dist/cropper/FieldCropper.svelte

@@ -12,9 +12,9 @@
   export let id: string | undefined = undefined
   export let path: string
   export let imageSrc: string | undefined
-  export let selectionAspectRatio: number = 1
-  export let minSelection: number = 0 // percentage of image, a value 0-1
-  export let label: string = ''
+  export let selectionAspectRatio = 1
+  export let minSelection = 0 // percentage of image, a value 0-1
+  export let label = ''
   export let required = false
   export let conditional: boolean | undefined = undefined
   export let helptext: string | undefined = undefined
@@ -29,7 +29,7 @@
 
   $: cropperStore.setOutput($val)
   function reactToOutput (...args: any[]) {
-    if (mounted) store.setField(finalPath, $output)
+    if (mounted) void store.setField(finalPath, $output)
   }
   $: reactToOutput($output)
 
@@ -132,12 +132,10 @@
     if (initialLoad) {
       initialVal = e.target.src
       initialLoad = false
-    } else {
-      if (e.target.src !== initialVal || srcChanged) {
-        await tick()
-        cropperStore.maximize()
-        srcChanged = true
-      }
+    } else if (e.target.src !== initialVal || srcChanged) {
+      await tick()
+      cropperStore.maximize()
+      srcChanged = true
     }
   }
 </script>

package/dist/cropper/cropper.js

@@ -4,9 +4,7 @@ const edgeSensitivity = 4;
 export class CropperStore extends Store {
     // coordinates of the selection edges relative to the top left of the draw area, in pixels
     // e.g. { left: 0, right: 10 } means the selection is 10 pixels wide
-    selection = derivedStore(this, v => {
-        return this.convertToPx(v.selection, v.width, v.height);
-    });
+    selection = derivedStore(this, v => 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) {
@@ -39,8 +37,8 @@ export class CropperStore extends Store {
                 selection.bottom = centerY + newHeight / 2;
                 // shrink the box until its width and height are less than the width and height of the drawing area
                 // maintaining the center
-                let selWidth = selection.right - selection.left;
-                let selHeight = selection.bottom - selection.top;
+                const selWidth = selection.right - selection.left;
+                const selHeight = selection.bottom - selection.top;
                 if (selWidth > v.width || selHeight > v.height) {
                     const scale = Math.min(v.width / selWidth, v.height / selHeight);
                     const cX = (selection.left + selection.right) / 2;
@@ -82,12 +80,12 @@ export class CropperStore extends Store {
                     right: Math.abs(selection.right - x) < edgeSensitivity,
                     bottom: Math.abs(selection.bottom - y) < edgeSensitivity
                 };
-                if ((r.drag.edge.left && r.drag.edge.top) ||
-                    (r.drag.edge.top && r.drag.edge.right) ||
-                    (r.drag.edge.right && r.drag.edge.bottom) ||
-                    (r.drag.edge.bottom && r.drag.edge.left) ||
-                    (x > selection.left && x < selection.right &&
-                        y > selection.top && y < selection.bottom))
+                if ((r.drag.edge.left && r.drag.edge.top)
+                    || (r.drag.edge.top && r.drag.edge.right)
+                    || (r.drag.edge.right && r.drag.edge.bottom)
+                    || (r.drag.edge.bottom && r.drag.edge.left)
+                    || (x > selection.left && x < selection.right
+                        && y > selection.top && y < selection.bottom))
                     r.drag.selection = selection;
             }
             return r;