fix lock + reactivity on ctrl + fix optionValuesKeys

This commit is contained in:
Ruben Fiszel
2023-03-18 15:52:46 +01:00
parent d570ef58ac
commit e45917c020
12 changed files with 33 additions and 27 deletions
@@ -11,7 +11,7 @@
import { getContext } from 'svelte'
import { initOutput } from '../../editor/appUtils'
import type { AppInputs, Runnable } from '../../inputType'
import type { AppViewerContext } from '../../types'
import type { AppViewerContext, InlineScript } from '../../types'
import { computeGlobalContext, eval_like } from './eval'
import InputValue from './InputValue.svelte'
import RefreshButton from './RefreshButton.svelte'
@@ -51,8 +51,8 @@
$: autoRefresh && handleAutorefresh()
if (recomputable || autoRefresh) {
$runnableComponents[id] = async () => {
await executeComponent(true)
$runnableComponents[id] = async (inlineScript?: InlineScript) => {
await executeComponent(true, inlineScript)
}
$runnableComponents = $runnableComponents
}
@@ -135,7 +135,7 @@
return schemaStripped as Schema
}
async function executeComponent(noToast = false) {
async function executeComponent(noToast = false, inlineScriptOverride?: InlineScript) {
if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
outputs?.loading?.set(true)
try {
@@ -188,8 +188,11 @@
}
if (runnable?.type === 'runnableByName') {
const { inlineScript } = runnable
// console.log(inlineScript?.content)
console.log(inlineScriptOverride)
const { inlineScript } = inlineScriptOverride
? { inlineScript: inlineScriptOverride }
: runnable
if (inlineScript) {
requestBody['raw_code'] = {
content: inlineScript.content,
@@ -13,7 +13,8 @@
ConnectingInput,
EditorBreakpoint,
EditorMode,
FocusedGrid
FocusedGrid,
InlineScript
} from '../types'
import AppEditorHeader from './AppEditorHeader.svelte'
import GridEditor from './GridEditor.svelte'
@@ -60,7 +61,9 @@
})
const history = initHistory(app)
const runnableComponents = writable<Record<string, () => Promise<void>>>({})
const runnableComponents = writable<
Record<string, (inlineScript?: InlineScript) => Promise<void>>
>({})
const errorByComponent = writable<Record<string, { error: string; componentId: string }>>({})
const focusedGrid = writable<FocusedGrid | undefined>(undefined)
const pickVariableCallback: Writable<((path: string) => void) | undefined> = writable(undefined)
@@ -11,7 +11,7 @@
import Component from './component/Component.svelte'
import { deepEqual } from 'fast-equals'
import { push } from '$lib/history'
import { expandGriditem} from './appUtils'
import { expandGriditem, findGridItem } from './appUtils'
import Grid from '../svelte-grid/Grid.svelte'
export let policy: Policy
@@ -180,8 +180,9 @@
locked={isFixed(dataItem)}
on:delete={() => removeGridElement(dataItem.data)}
on:lock={() => {
if (dataItem.data) {
toggleFixed(dataItem)
const gridItem = findGridItem($app, dataItem.data.id)
if (gridItem) {
toggleFixed(gridItem)
}
$app = $app
}}
@@ -189,6 +190,7 @@
push(history, $app)
$selectedComponent = dataItem.data.id
expandGriditem($app.grid, dataItem, $breakpoint)
$app = $app
}}
/>
</div>
@@ -57,8 +57,9 @@
}
function lock(dataItem: GridItem) {
if (dataItem) {
toggleFixed(dataItem)
let fComponent = findGridItem($app, dataItem.data.id)
if (fComponent) {
fComponent = toggleFixed(fComponent)
}
$app = $app
}
@@ -54,8 +54,6 @@
$: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId)
$: hasError = componentWithErrors.includes(component.id)
console.log('component', component)
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -185,7 +185,7 @@
btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
on:click={async () => {
runLoading = true
await $runnableComponents[id]?.()
await $runnableComponents[id]?.(inlineScript)
runLoading = false
}}
>
@@ -219,7 +219,7 @@
cmdEnterAction={async () => {
inlineScript.content = editor?.getCode() ?? ''
runLoading = true
await $runnableComponents[id]?.()
await $runnableComponents[id]?.(inlineScript)
runLoading = false
}}
on:change={async (e) => {
@@ -241,7 +241,7 @@
bind:this={simpleEditor}
cmdEnterAction={async () => {
runLoading = true
await $runnableComponents[id]?.()
await $runnableComponents[id]?.(inlineScript)
runLoading = false
}}
class="h-full"
@@ -30,7 +30,6 @@
let subgrid = `${component.id}-${index}`
for (const item of $app!.subgrids![subgrid]) {
const components = deleteGridItem($app, item.data, subgrid, false)
console.log(components)
for (const key in components) {
delete $runnableComponents[key]
}
@@ -28,7 +28,7 @@
export let fieldType: InputType
export let subFieldType: InputType | undefined
export let format: string | undefined
export let optionValuesKeys: keyof typeof staticValues | undefined
export let optionValuesKey: keyof typeof staticValues | undefined
const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
</script>
@@ -123,7 +123,7 @@
<StaticInputEditor
{fieldType}
{subFieldType}
{optionValuesKeys}
{optionValuesKey}
{format}
bind:componentInput
/>
@@ -29,7 +29,7 @@
fieldType={meta?.['fieldType']}
subFieldType={meta?.['subFieldType']}
format={meta?.['format']}
optionValuesKeys={meta?.['optionValuesKeys']}
optionValuesKey={meta?.['optionValuesKey']}
tooltip={meta?.['tooltip']}
onlyStatic={meta?.['onlyStatic']}
/>
@@ -15,7 +15,7 @@
export let componentInput: StaticInput<any> | undefined
export let fieldType: InputType | undefined = undefined
export let subFieldType: InputType | undefined = undefined
export let optionValuesKeys: keyof typeof staticValues | undefined = undefined
export let optionValuesKey: keyof typeof staticValues | undefined = undefined
export let format: string | undefined = undefined
export let noVariablePicker: boolean = false
@@ -34,9 +34,9 @@
<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
{:else if fieldType === 'boolean'}
<Toggle bind:checked={componentInput.value} />
{:else if fieldType === 'select' && optionValuesKeys}
{:else if fieldType === 'select' && optionValuesKey}
<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
{#each staticValues[optionValuesKeys] || [] as option}
{#each staticValues[optionValuesKey] || [] as option}
<option value={option}>
{option}
</option>
@@ -18,7 +18,7 @@ const columnConfiguration: ColumnConfiguration = [
const gridColumns = columnConfiguration.map((value) => value[1])
function toggleFixed(component: GridItem): GridItem {
const nValue = !component[gridColumns[0]].fixed
const nValue = !(component[gridColumns[0]]?.fixed ?? false)
gridColumns.forEach((column: number) => {
component[column].fixed = nValue
})
+1 -1
View File
@@ -132,7 +132,7 @@ export type AppViewerContext = {
mode: Writable<EditorMode>
connectingInput: Writable<ConnectingInput>
breakpoint: Writable<EditorBreakpoint>
runnableComponents: Writable<Record<string, () => Promise<void>>>
runnableComponents: Writable<Record<string, (inlineScript?: InlineScript) => Promise<void>>>
staticExporter: Writable<Record<string, () => any>>
appPath: string
workspace: string