-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
596 additions
and
566 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 15 additions & 15 deletions
30
src-client/src/lib/components/editor/ComputedValue.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,67 @@ | ||
| <script lang="ts"> | ||
| import { Edge, type WritableEdge } from "svelvet"; | ||
| import { structures, type ParameterStructure, typeToDefinition, instanceFromId } from "../../lib/nodes"; | ||
| import { get } from "svelte/store"; | ||
| import { blendColors } from "../../lib/color"; | ||
| import { Edge, type WritableEdge } from 'svelvet'; | ||
| import { type ParameterStructure, instanceFromId } from '$lib/nodes'; | ||
| import { blendColors } from '$lib/color'; | ||
| import { state as s } from '$lib/state.svelte'; | ||
| let ref: SVGPathElement | undefined = undefined; | ||
| let edge: WritableEdge; | ||
| let ref: SVGPathElement | undefined = $state(); | ||
| let edge: WritableEdge | undefined = $state(); | ||
| $: source = findParameter(edge?.source.id, false); | ||
| $: target = findParameter(edge?.target.id, true); | ||
| let source = $derived(findParameter(edge?.source.id, false)); | ||
| let target = $derived(findParameter(edge?.target.id, true)); | ||
| $: startColor = typeToDefinition(source?.type ?? "")?.color?.hex ?? "#ffffff"; | ||
| $: midwayColor = blendColors(startColor, stopColor, 0.5); | ||
| $: stopColor = typeToDefinition(target?.type ?? "")?.color?.hex ?? "#ffffff"; | ||
| let sourceType = $derived( | ||
| s.workspace?.types.find((t) => t.type.replace('&', '') == source?.type.replace('&', '')) | ||
| ); | ||
| $: gradientName = `gradient-${edge?.target.id ?? "default"}`; | ||
| let targetType = $derived( | ||
| s.workspace?.types.find((t) => t.type.replace('&', '') == target?.type.replace('&', '')) | ||
| ); | ||
| function findParameter(id: string | null, isInput: boolean): ParameterStructure | undefined { | ||
| if (id == null) return undefined; | ||
| let startColor = $derived(sourceType?.color?.hex ?? '#ffffff'); | ||
| let stopColor = $derived(targetType?.color?.hex ?? '#ffffff'); | ||
| let midwayColor = $derived(blendColors(startColor, stopColor, 0.5)); | ||
| let parameterId = id.split("/")[0].substring(2); // remove "A-" | ||
| let instanceId = id.split("/")[1].substring(2); // remove "N-" | ||
| let gradientName = $derived(`gradient-${edge?.target.id ?? 'default'}`); | ||
| let instance = instanceFromId(instanceId); | ||
| let structure = get(structures).find((s) => s.nodeType == instance?.nodeType); | ||
| function findParameter( | ||
| id: `A-${string}` | undefined | null, | ||
| isInput: boolean | ||
| ): ParameterStructure | undefined { | ||
| if (id == null) return undefined; | ||
| if (isInput) { | ||
| return structure?.inputs.find((p) => p.id == parameterId); | ||
| } else { | ||
| return structure?.outputs.find((p) => p.id == parameterId); | ||
| } | ||
| } | ||
| let parameterId = id.split('/')[0].substring(2); // remove "A-" | ||
| let instanceId = id.split('/')[1].substring(2); // remove "N-" | ||
| let instance = instanceFromId(instanceId); | ||
| let structure = s.workspace?.structures.find((s) => s.nodeType == instance?.nodeType); | ||
| if (isInput) { | ||
| return structure?.inputs.find((p) => p.id == parameterId); | ||
| } else { | ||
| return structure?.outputs.find((p) => p.id == parameterId); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <Edge bind:edge let:path let:destroy edgeClick={() => alert("Edge clicked")}> | ||
| <!-- Define a gradient that goes from the source color to the target color --> | ||
| <defs> | ||
| <linearGradient id={gradientName} x1="0%" y1="0%" x2="100%" y2="0%"> | ||
| <stop offset="0%" stop-color={startColor} /> | ||
| <stop offset="50%" stop-color={midwayColor} /> | ||
| <stop offset="100%" stop-color={stopColor} /> | ||
| </linearGradient> | ||
| </defs> | ||
|
|
||
| <path bind:this={ref} d={path} style:--gradient-name={`url(#${gradientName})`} /> | ||
| <Edge bind:edge let:path let:destroy edgeClick={() => alert('Edge clicked')}> | ||
| <!-- Define a gradient that goes from the source color to the target color --> | ||
| <defs> | ||
| <linearGradient id={gradientName} x1="0%" y1="0%" x2="100%" y2="0%"> | ||
| <stop offset="0%" stop-color={startColor} /> | ||
| <stop offset="50%" stop-color={midwayColor} /> | ||
| <stop offset="100%" stop-color={stopColor} /> | ||
| </linearGradient> | ||
| </defs> | ||
|
|
||
| <path bind:this={ref} d={path} style:--gradient-name={`url(#${gradientName})`} /> | ||
| </Edge> | ||
|
|
||
| <style lang="scss"> | ||
| path { | ||
| // Gradient fill based on the source and target colors | ||
| stroke: var(--gradient-name); | ||
| stroke-width: 4px; | ||
| z-index: 1; | ||
| } | ||
| path { | ||
| // Gradient fill based on the source and target colors | ||
| stroke: var(--gradient-name); | ||
| stroke-width: 4px; | ||
| z-index: 1; | ||
| } | ||
| </style> |
Oops, something went wrong.