Merge pull request #46 from ls1intum/17-create-canvas

feat: 17 create canvas

library/lib/App.tsx

@@ -1,14 +1,55 @@
-import { useState } from "react"
+import {
+  ReactFlow,
+  ReactFlowInstance,
+  ReactFlowProvider,
+  type Node,
+  type Edge,
+  Background,
+  BackgroundVariant,
+  Controls,
+  MiniMap,
+} from "@xyflow/react"
 
-export function App() {
-  const [count, setCount] = useState(0)
+import "@xyflow/react/dist/style.css"
+import { MAX_SCALE_TO_ZOOM_IN, MIN_SCALE_TO_ZOOM_OUT } from "./contants"
 
+const initialNodes: Node[] = [
+  { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
+  { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
+]
+const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }]
+
+interface AppProps {
+  onReactFlowInit: (instance: ReactFlowInstance) => void
+}
+
+function App({ onReactFlowInit }: AppProps) {
   return (
-    <div>
-      Library Count:{count}
-      <button onClick={() => setCount(count + 1)}>
-        Increment From Library
-      </button>
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ReactFlow
+        nodes={initialNodes}
+        edges={initialEdges}
+        onInit={onReactFlowInit}
+        fitView
+        minZoom={MIN_SCALE_TO_ZOOM_OUT}
+        maxZoom={MAX_SCALE_TO_ZOOM_IN}
+      >
+        <Background variant={BackgroundVariant.Lines} />
+        <MiniMap zoomable pannable />
+        <Controls />
+      </ReactFlow>
     </div>
   )
 }
+
+export function AppWithProvider({
+  onReactFlowInit,
+}: {
+  onReactFlowInit: (instance: ReactFlowInstance) => void
+}) {
+  return (
+    <ReactFlowProvider>
+      <App onReactFlowInit={onReactFlowInit} />
+    </ReactFlowProvider>
+  )
+}

library/lib/contants.ts

@@ -0,0 +1,2 @@
+export const MIN_SCALE_TO_ZOOM_OUT = 0.4
+export const MAX_SCALE_TO_ZOOM_IN = 2.5

library/lib/index.tsx

@@ -1,16 +1,28 @@
 import ReactDOM from "react-dom/client"
-import { App } from "./App"
+import { AppWithProvider } from "./App"
+import { ReactFlowInstance, type Node } from "@xyflow/react"
+export { type Node } from "@xyflow/react"
 
 export class Apollon2 {
   private root: ReactDOM.Root | null = null
+  private reactFlowInstance: ReactFlowInstance | null = null
 
   constructor(element: HTMLElement) {
     this.root = ReactDOM.createRoot(element)
-    this.root.render(<App />)
+    this.root.render(
+      <AppWithProvider onReactFlowInit={this.setReactFlowInstance.bind(this)} />
+    )
   }
 
-  public getRandomNumber(): number {
-    return Math.random() * 100
+  private setReactFlowInstance(instance: ReactFlowInstance) {
+    this.reactFlowInstance = instance
+  }
+
+  public getNodes(): Node[] {
+    if (this.reactFlowInstance) {
+      return this.reactFlowInstance?.getNodes()
+    }
+    return []
   }
 
   public dispose() {

library/package.json

@@ -17,6 +17,9 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix ."
   },
+  "dependencies": {
+    "@xyflow/react": "12.3.6"
+  },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -29,7 +32,8 @@
     "globals": "15.13.0",
     "typescript": "5.7.2",
     "typescript-eslint": "8.18.1",
-    "vite": "6.0.1",
-    "vite-plugin-dts": "4.3.0"
+    "vite": "6.0.3",
+    "vite-plugin-dts": "4.3.0",
+    "vite-plugin-lib-inject-css": "^2.1.1"
   }
 }

library/vite.config.ts

@@ -2,9 +2,10 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import dts from "vite-plugin-dts"
 import { resolve } from "path"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
 
 export default defineConfig({
-  plugins: [react(), dts({ include: ["lib"] })],
+  plugins: [react(), dts({ include: ["lib"] }), libInjectCss()],
   build: {
     copyPublicDir: false,
     lib: {