Drag not working while defining the view port

[proud whale]

This would be my first view and on click I want to show the whole flow on the right side

<@&782949287105396747> Can you please help me with this?

[drifting bronze]

I want to make the whole flow draggable it not working when I am defining the view port
When using the viewport prop you're switching to a controlled viewport, meaning you'll have to move it yourself basically (there's a onViewportChange prop you can use for that)

If you just want to define a default viewport (what the viewport should be like initially) you can just use the defaultViewport prop

[proud whale]

@drifting bronze
import { FlowImg } from "../../../utilities/flowsImages/signUpFlow";
import { SignupImage } from "../../../utilities/svg";

// Initial nodes for the SignIn flow
export const initialSignInNodes = [
{
id: 'signInNode1',
type: 'custom',
data: {
label: 'Custom Node',
imageUrl: FlowImg?.signupImageA,
svgImg: <SignupImage /> ,
handles: [
{ type: 'source', position: 'Right', id: 'singHandle-1' },
{ type: 'source', position: 'Bottom', id: 'singHandle-1A' },
]
},
position: { x: -300, y: 0 },
draggable: false, // Prevents dragging
}]

why this is not taking svg code?
svgImg: <SignupImage /> ,

any idea 🤔

[drifting bronze]

No idea what you mean tbh

Start by explaining what the exact issue here is and what isn't working and I might be able to help you out ^^

[proud whale]

I have made a simple custom node in which I need to show the svg image. Which is in the component I am importing (ie: import { SignupImage } from "../../../utilities/svg";)
And I am passing it to my initialSignInNodes with ( svgImg: <SignupImage /> ,) key.

Error I am getting is:
signInFlow.js:12 Uncaught SyntaxError: Unexpected token '<' (at signInFlow.js:12:21)

I am working on the react vite envirnment, I have check the svg code which is correct.

[drifting bronze]

Are you sure you're using a JSX/TSX file? 🤔

[proud whale]

Yes, that's what I was thinking. It shouldn't cause any problems since it's just a simple component call.

[drifting bronze]

Works fine for me in a sandbox tbh.

Here's an example.

Might wanna compare differences with your app, might be you've made some minor mistake that breaks it ^^

[proud whale]

Exact same thing I am doing the only difference is I am using jsx instead of typescript

[drifting bronze]

signInFlow.js:12 Uncaught SyntaxError: Unexpected token '<' (at signInFlow.js:12:21)
Says you're using a .js file not a .jsx file

[proud whale]

Yes I am importing the Json from the js file. Let try it by changing it to jsx

Nope nothing happened. You make a individual component and import directly on the page. I am using a .js file inwhich I am defining the init node and flow and importing that to my componet.

Here's my file Hope this will give you an idea what I am doing

[drifting bronze]

Not sure what I'm supposed to deduce from that big file tbh

Also works fine for me in a .js file environment, see this example here.

[proud whale]

@drifting bronze Buddy, I appreciate your approach, and it works well for adding a single SVG. However, in my case, I have 20 nodes, each containing various information and multiple SVGs. To manage this complexity and handle different triggers for each node, it might be more efficient to create individual files rather than using a single signInflow.js file.

This way, we can better organize the nodes and ensure that each one is triggered correctly based on specific action.