Skip to content

Commit

Permalink
feat: add reactflow instance initilization back
Browse files Browse the repository at this point in the history
  • Loading branch information
egenerse committed Dec 27, 2024
1 parent cad3a1a commit c77b0cc
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
12 changes: 9 additions & 3 deletions library/lib/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
MarkerType,
ConnectionLineType,
ConnectionMode,
ReactFlowInstance,
} from "@xyflow/react"

import "@xyflow/react/dist/style.css"
Expand All @@ -29,7 +30,11 @@ const defaultEdgeOptions: DefaultEdgeOptions = {
style: { strokeWidth: 2 },
}

function App() {
interface AppProps {
onReactFlowInit: (instance: ReactFlowInstance) => void
}

function App({ onReactFlowInit }: AppProps) {
return (
<div style={{ width: "100vw", height: "100vh" }}>
<ReactFlow
Expand All @@ -40,6 +45,7 @@ function App() {
connectionLineType={ConnectionLineType.SmoothStep}
connectionMode={ConnectionMode.Loose}
fitView
onInit={(instance) => onReactFlowInit(instance)}
minZoom={MIN_SCALE_TO_ZOOM_OUT}
maxZoom={MAX_SCALE_TO_ZOOM_IN}
>
Expand All @@ -51,10 +57,10 @@ function App() {
)
}

export function AppWithProvider() {
export function AppWithProvider({ onReactFlowInit }: AppProps) {
return (
<ReactFlowProvider>
<App />
<App onReactFlowInit={onReactFlowInit} />
</ReactFlowProvider>
)
}
8 changes: 7 additions & 1 deletion library/lib/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@ export class Apollon2 {

constructor(element: HTMLElement) {
this.root = ReactDOM.createRoot(element)
this.root.render(<AppWithProvider />)
this.root.render(
<AppWithProvider onReactFlowInit={this.setReactFlowInstance.bind(this)} />
)
}

private setReactFlowInstance(instance: ReactFlowInstance) {
this.reactFlowInstance = instance
}

public getNodes(): Node[] {
Expand Down

0 comments on commit c77b0cc

Please sign in to comment.