You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

111 lines
3.3 KiB

<script lang="ts" context="module">
const KIND_ICONS: Record<ScriptLineEditable["kind"], IconName> = {
"if": "chevron_right",
"select": "filter",
"assign": "swatch_book",
"set": "pen",
}
</script>
<script lang="ts">
import { BLANK_STATE, copyState } from "$lib/models/device";
import { toEditableScriptLine, type ScriptLineEditable } from "$lib/models/script";
import type { IconName } from "../Icon.svelte";
import BFormDeleteOption from "../bforms/BFormDeleteOption.svelte";
import BFormLine from "../bforms/BFormLine.svelte";
import BFormOption from "../bforms/BFormOption.svelte";
import BFormParameter from "../bforms/BFormParameter.svelte";
import ScriptAssignmentState from "./ScriptAssignmentState.svelte";
import ScriptBlock from "./ScriptBlock.svelte";
import ScriptCondition from "./ScriptCondition.svelte";
import ScriptEffect from "./ScriptEffect.svelte";
import ScriptLineBlock from "./ScriptLineBlock.svelte";
import ScriptMatch from "./ScriptMatch.svelte";
import ScriptSet from "./ScriptSet.svelte";
export let value: ScriptLineEditable;
function deleteState(index: number) {
value.effect.states = [
...value.effect.states.slice(0, index),
...value.effect.states.slice(index + 1),
];
if (value.effect.states.length === 0) {
value.effect.states = [{...BLANK_STATE}];
}
}
function addState() {
value.effect.states = [
...value.effect.states,
copyState(value.effect.states[value.effect.states.length - 1]),
];
}
function addThen() {
value.then = [
...value.then,
toEditableScriptLine({if: {
condition: { scope: "global", key: "", op: "eq" },
then: [],
else: [],
}})
]
}
function addElse() {
value.else = [
...value.else,
toEditableScriptLine({if: {
condition: { scope: "global", key: "", op: "eq" },
then: [],
else: [],
}})
]
}
</script>
<BFormLine>
<BFormOption unclickable state icon={KIND_ICONS[value.kind]}>
<BFormParameter
narrow
label="Op"
type="select"
bind:value={value.kind}
options={[
{label: "If", value: "if"},
{label: "Assign", value: "assign"},
{label: "Set", value: "set"},
{label: "Select", value: "select"},
]}
/>
</BFormOption>
{#if value.kind === "assign" || value.kind === "select"}
<ScriptMatch bind:matchKind={value.matchKind} bind:matchValue={value.matchValue} />
{/if}
{#if value.kind === "assign"}
<ScriptEffect bind:value={value.effect} />
{/if}
{#if value.kind === "if"}
<ScriptCondition bind:value={value.condition} />
{/if}
{#if value.kind === "set"}
<ScriptSet bind:key={value.key} bind:scope={value.scope} bind:value={value.value} />
{/if}
<BFormDeleteOption on:delete />
</BFormLine>
{#if value.kind === "assign"}
<ScriptBlock on:add={addState} add label="States">
{#each value.effect.states as state, i}
<ScriptAssignmentState bind:value={state} deletable on:delete={() => deleteState(i)} />
{/each}
</ScriptBlock>
{/if}
{#if value.kind === "select" || value.kind === "if"}
<ScriptLineBlock on:add={addThen} add label="Then" bind:value={value.then} />
{/if}
{#if value.kind === "if"}
<ScriptLineBlock on:add={addElse} add label="Else" bind:value={value.else} />
{/if}