feat: add creation of nodes and edges

src/index.ts

@@ -1,4 +1,4 @@
-import { Application, Sprite, Assets } from 'pixi.js';
+import { Application, Sprite, Assets, Graphics, GraphicsContext, FederatedPointerEvent } from 'pixi.js';
 import Bunny from './bunny.png';
 import './style.css';
 
@@ -33,19 +33,69 @@ import './style.css';
 
     const bunny = Sprite.from(Bunny);
 
-    // Setup the position of the bunny
-    bunny.x = app.renderer.width / 5;
-    bunny.y = app.renderer.height / 5;
-    bunny.width = app.renderer.width / 5;
-    bunny.height = app.renderer.height / 5;
+    const resizeBunny = () => {
+        // Setup the position of the bunny
+        bunny.x = app.renderer.width / 5;
+        bunny.y = app.renderer.height / 5;
+        bunny.width = app.renderer.width / 5;
+        bunny.height = app.renderer.height / 5;
+    }
+
+    resizeBunny();
 
     // Rotate around the center
     bunny.anchor.x = 0.5;
     bunny.anchor.y = 0.5;
 
-    // Add the bunny to the scene we are building
+    let rect = new Graphics()
+        .rect(0, 0, app.renderer.width, app.renderer.height)
+        .fill(0xe3e2e1);
+
+    const resizeRect = () => {
+        rect.width = app.renderer.width;
+        rect.height = app.renderer.height;
+    }
+
+    // Add the objects to the scene we are building
+    app.stage.addChild(rect);
     app.stage.addChild(bunny);
 
+    const circleContext = new GraphicsContext().circle(0, 0, 10).fill(0xff0000);
+
+    let lineStart: { x: number, y: number } = null;
+
+    const circleOnClick = (e: FederatedPointerEvent, circle: Graphics) => {
+        console.log("clicked on circle", e);
+        if (!e.altKey) {
+            return;
+        }
+        e.stopPropagation();
+        if (lineStart === null) {
+            lineStart = { x: circle.x, y: circle.y };
+        } else {
+            const line = new Graphics()
+                .moveTo(lineStart.x, lineStart.y)
+                .lineTo(circle.x, circle.y)
+                .stroke({ width: 2, color: 0 });
+            rect.addChildAt(line, 0);
+            lineStart = null;
+        }
+    };
+
+    rect.on('click', (e) => {
+        console.log("clicked on rect", e);
+        if (!e.altKey) {
+            const circle = new Graphics(circleContext);
+            circle.x = e.globalX;
+            circle.y = e.globalY;
+            rect.addChild(circle);
+            circle.on('click', (e) => circleOnClick(e, circle));
+            circle.eventMode = 'static';
+        }
+    });
+
+    rect.eventMode = 'static';
+
     // Listen for frame updates
     app.ticker.add(() => {
         // each frame we spin the bunny around a bit
@@ -56,10 +106,8 @@ import './style.css';
         // Resize the renderer
         app.renderer.resize(window.innerWidth, window.innerHeight);
 
-        bunny.x = app.renderer.width / 2;
-        bunny.y = app.renderer.height / 2;
-        bunny.width = app.renderer.width / 2;
-        bunny.height = app.renderer.height / 2;
+        resizeBunny();
+        resizeRect();
     }
 
     window.addEventListener('resize', resize);