ShapeNode: Use actual shapes instead of raster, write custom triangle logic

frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts

@@ -54,42 +54,20 @@ export class ShapeNode extends NetworkedNode {
 
     switch (shapeType) {
       case ShapeType.CIRCLE:
-        const circleShape = new Konva.Circle({
-          radius: 50,
+        shape = new Konva.Ellipse({
+          x: 50,
+          y: 50,
+          radiusX: 50,
+          radiusY: 50,
           ...transform,
           fill: color,
           strokeScaleEnabled: false,
           draggable: true,
         });
-
-        // Convert circle to image
-        const dataURL = circleShape.toDataURL();
-        const imageObj = new Image();
-        imageObj.src = dataURL;
-
-        shape = new Konva.Image({
-          image: imageObj,
-          x: circleShape.x(),
-          y: circleShape.y(),
-          width: circleShape.width(),
-          height: circleShape.height(),
-          ...transform,
-          fill: "transparent",
-          strokeScaleEnabled: false,
-          draggable: true,
-        });
-
-        imageObj.onload = () => {
-          this.mediaLayerRef.draw();
-          loaded();
-        };
-
-        // Clean up the temporary circle
-        circleShape.destroy();
         break;
 
       case ShapeType.SQUARE:
-        const squareShape = new Konva.Rect({
+        shape = new Konva.Rect({
           width: 100,
           height: 100,
           ...transform,
@@ -97,67 +75,27 @@ export class ShapeNode extends NetworkedNode {
           strokeScaleEnabled: false,
           draggable: true,
         });
-
-        // Convert square to image
-        const squareDataURL = squareShape.toDataURL();
-        const squareImageObj = new Image();
-        squareImageObj.src = squareDataURL;
-
-        shape = new Konva.Image({
-          image: squareImageObj,
-          x: squareShape.x(),
-          y: squareShape.y(),
-          width: squareShape.width(),
-          height: squareShape.height(),
-          ...transform,
-          fill: "transparent",
-          strokeScaleEnabled: false,
-          draggable: true,
-        });
-
-        squareImageObj.onload = () => {
-          this.mediaLayerRef.draw();
-          loaded();
-        };
-
-        // Clean up the temporary square
-        squareShape.destroy();
         break;
 
       case ShapeType.TRIANGLE:
-        const triangleShape = new Konva.RegularPolygon({
-          sides: 3,
-          radius: 50,
+        shape = new Konva.Shape({
+          x: 0,
+          y: 0,
+          width: 25,
+          height: 50,
           ...transform,
           fill: color,
           strokeScaleEnabled: false,
           draggable: true,
+          sceneFunc: (context, shape) => {
+            context.beginPath();
+            context.moveTo(shape.width() / 2, 0);
+            context.lineTo(shape.width(), shape.height());
+            context.lineTo(0, shape.height());
+            context.closePath();
+            context.fillStrokeShape(shape);
+          }
         });
-
-        // Convert triangle to image
-        const triangleDataURL = triangleShape.toDataURL();
-        const triangleImageObj = new Image();
-        triangleImageObj.src = triangleDataURL;
-
-        shape = new Konva.Image({
-          image: triangleImageObj,
-          x: triangleShape.x(),
-          y: triangleShape.y(),
-          width: triangleShape.width(),
-          height: triangleShape.height(),
-          ...transform,
-          fill: "transparent",
-          strokeScaleEnabled: false,
-          draggable: true,
-        });
-
-        triangleImageObj.onload = () => {
-          this.mediaLayerRef.draw();
-          loaded();
-        };
-
-        // Clean up the temporary triangle
-        triangleShape.destroy();
         break;
 
       default: