Spaces:
Running
Running
Make boxes update on the UI.
Browse files
web/src/NodeWithParams.svelte
CHANGED
@@ -1,24 +1,23 @@
|
|
1 |
<script lang="ts">
|
2 |
import { getContext } from 'svelte';
|
3 |
-
import { type NodeProps,
|
4 |
import LynxKiteNode from './LynxKiteNode.svelte';
|
5 |
import NodeParameter from './NodeParameter.svelte';
|
6 |
type $$Props = NodeProps;
|
7 |
export let id: $$Props['id'];
|
8 |
export let data: $$Props['data'];
|
9 |
-
const { updateNodeData } = useSvelteFlow();
|
10 |
-
const updateNodeInternals = useUpdateNodeInternals();
|
11 |
$: metaParams = data.meta?.params;
|
12 |
$: store = getContext('LynxKite store');
|
13 |
function setParam(name, newValue) {
|
14 |
const i = $store.workspace.nodes.findIndex((n) => n.id === id);
|
15 |
$store.workspace.nodes[i].data.params[name] = newValue;
|
16 |
-
updateNodeInternals();
|
17 |
}
|
18 |
-
$: params = data?.params ? Object.entries(data.params) : [];
|
|
|
|
|
19 |
</script>
|
20 |
|
21 |
-
<LynxKiteNode {
|
22 |
{#each params as [name, value]}
|
23 |
<NodeParameter
|
24 |
{name}
|
|
|
1 |
<script lang="ts">
|
2 |
import { getContext } from 'svelte';
|
3 |
+
import { type NodeProps, useNodes } from '@xyflow/svelte';
|
4 |
import LynxKiteNode from './LynxKiteNode.svelte';
|
5 |
import NodeParameter from './NodeParameter.svelte';
|
6 |
type $$Props = NodeProps;
|
7 |
export let id: $$Props['id'];
|
8 |
export let data: $$Props['data'];
|
|
|
|
|
9 |
$: metaParams = data.meta?.params;
|
10 |
$: store = getContext('LynxKite store');
|
11 |
function setParam(name, newValue) {
|
12 |
const i = $store.workspace.nodes.findIndex((n) => n.id === id);
|
13 |
$store.workspace.nodes[i].data.params[name] = newValue;
|
|
|
14 |
}
|
15 |
+
$: params = $nodes && data?.params ? Object.entries(data.params) : [];
|
16 |
+
const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
|
17 |
+
$: props = $nodes && $$props;
|
18 |
</script>
|
19 |
|
20 |
+
<LynxKiteNode {...props}>
|
21 |
{#each params as [name, value]}
|
22 |
<NodeParameter
|
23 |
{name}
|
web/src/NodeWithVisualization.svelte
CHANGED
@@ -1,17 +1,17 @@
|
|
1 |
<script lang="ts">
|
2 |
-
import { type NodeProps } from '@xyflow/svelte';
|
3 |
import NodeWithParams from './NodeWithParams.svelte';
|
4 |
import { Chart } from 'svelte-echarts';
|
5 |
import { init } from 'echarts';
|
6 |
type $$Props = NodeProps;
|
7 |
export let data: $$Props['data'];
|
8 |
-
|
|
|
|
|
9 |
</script>
|
10 |
|
11 |
<NodeWithParams {...$$props}>
|
12 |
-
{
|
13 |
-
<Chart {init} options={display} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
|
14 |
-
{/if}
|
15 |
</NodeWithParams>
|
16 |
<style>
|
17 |
</style>
|
|
|
1 |
<script lang="ts">
|
2 |
+
import { useNodes, type NodeProps } from '@xyflow/svelte';
|
3 |
import NodeWithParams from './NodeWithParams.svelte';
|
4 |
import { Chart } from 'svelte-echarts';
|
5 |
import { init } from 'echarts';
|
6 |
type $$Props = NodeProps;
|
7 |
export let data: $$Props['data'];
|
8 |
+
|
9 |
+
const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
|
10 |
+
$: D = $nodes && data;
|
11 |
</script>
|
12 |
|
13 |
<NodeWithParams {...$$props}>
|
14 |
+
<Chart {init} options={D?.display?.value || {}} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
|
|
|
|
|
15 |
</NodeWithParams>
|
16 |
<style>
|
17 |
</style>
|