alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use $derived(useStore()) in plugin components

Browse Source
This commit is contained in:
peterkogo
2025-05-15 13:56:15 +02:00
parent 8f3b98a964
commit 2cb0ee881e
5 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/actions/portal/portal.svelte.ts
+1
View File
@@ -15,6 +15,7 @@ function tryToMount(node: Element, domNode: Element | null, target: Portal | und
} }
export function portal(node: Element, target: Portal | undefined) { export function portal(node: Element, target: Portal | undefined) {
// TODO: does this work if called outside of SvelteFlow
const store = useStore(); const store = useStore();
let previousTarget: Portal | undefined = target; let previousTarget: Portal | undefined = target;
packages/svelte/src/lib/container/Panel/Panel.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
let { position = 'top-right', style, class: className, children, ...rest }: PanelProps = $props(); let { position = 'top-right', style, class: className, children, ...rest }: PanelProps = $props();
const store = useStore(); let store = $derived(useStore());
let positionClasses = $derived(`${position}`.split('-')); let positionClasses = $derived(`${position}`.split('-'));
</script> </script>
packages/svelte/src/lib/plugins/Background/Background.svelte
+4 -4
View File
@@ -25,11 +25,11 @@
class: className class: className
}: BackgroundProps = $props(); }: BackgroundProps = $props();
const store = useStore(); let store = $derived(useStore());
const isDots = $derived(variant === BackgroundVariant.Dots); let isDots = $derived(variant === BackgroundVariant.Dots);
const isCross = $derived(variant === BackgroundVariant.Cross); let isCross = $derived(variant === BackgroundVariant.Cross);
const gapXY: number[] = $derived(Array.isArray(gap) ? gap : [gap, gap]); let gapXY: number[] = $derived(Array.isArray(gap) ? gap : [gap, gap]);
let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`); let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`);
let scaledGap = $derived([ let scaledGap = $derived([
packages/svelte/src/lib/plugins/Controls/Controls.svelte
+6 -7
View File
@@ -31,7 +31,7 @@
...rest ...rest
}: ControlsProps = $props(); }: ControlsProps = $props();
const store = useStore(); let store = $derived(useStore());
const buttonProps = { const buttonProps = {
bgColor: buttonBgColor, bgColor: buttonBgColor,
@@ -41,7 +41,7 @@
borderColor: buttonBorderColor borderColor: buttonBorderColor
}; };
let isInteractive = $state( let isInteractive = $derived(
store.nodesDraggable || store.nodesConnectable || store.elementsSelectable store.nodesDraggable || store.nodesConnectable || store.elementsSelectable
); );
let minZoomReached = $derived(store.viewport.zoom <= store.minZoom); let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
@@ -61,11 +61,10 @@
}; };
const onToggleInteractivity = () => { const onToggleInteractivity = () => {
isInteractive = !isInteractive; let interactive = !isInteractive;
store.nodesDraggable = interactive;
store.nodesDraggable = isInteractive; store.nodesConnectable = interactive;
store.nodesConnectable = isInteractive; store.elementsSelectable = interactive;
store.elementsSelectable = isInteractive;
}; };
</script> </script>
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
...rest ...rest
}: MiniMapProps = $props(); }: MiniMapProps = $props();
let store = useStore(); let store = $derived(useStore());
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor); const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);