xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
21.54k stars 1.43k forks source link

FitViewOptions not working with Controls component #4201

Closed ChevalMonsieur closed 1 week ago

ChevalMonsieur commented 3 weeks ago

Describe the Bug

On svelteflow, when using the fitViewOptions for fitView, if you put fitViewOptions as a prop to the Controls component like this :

<Controls {fitViewOptions} showLock={false}>

with a fitViewOptions that look like this :

const fitViewOptions = {
    duration: 400,
};

it doesn't do anything except throwing a warning <Controls> was created with unknown prop 'fitViewOptions'

fitViewOptions works if I call it like this in fitView however :

fitView(fitViewOptions);

and the documentation looks like saying you can put fitViewOptions as a prop in Controls just as showLock image

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Create a component in your svelte app
  2. put a component inside
  3. create a fitViewParameter prop like I did earlier and put it inside the component
  4. launch the app and see the warning

Expected behavior

The options put in parameter of fitViewOptions should have been integrated to the fitView button on the Controls component and shouldn't throw a warning

Screenshots or Videos

No response

Platform

Additional context

No response

ChevalMonsieur commented 3 weeks ago

A workaround for this :

        <Controls showFitView={false} showLock={false}>
            <ControlButton on:click={fitViewWithOptions}>SVG</ControlButton>
        </Controls>

with fitViewWithOptions being :

function fitViewWithOptions() {
    fitView(fitViewOptions);
}
moklick commented 3 weeks ago

I think the docs are wrong here. There are not fitViewOptions for the Controls component. However we will see if we can add it.