early image wip

whiteboard.html

@@ -8,6 +8,7 @@
     {% load static %}
     <link rel="icon" href="{% static 'favicon.ico' %}">
     <link rel="stylesheet" href="{% static 'index-style.css' %}" ">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
     {% block scripts %}
         {% include "sentry_replay.html" %}
     {% endblock %}
@@ -106,8 +107,32 @@
               </div>
             <h2 style="text-align: center;">{{ whiteboard.title }}</h2>   
             <canvas id="whiteboard" width="800" height="600"></canvas>
+            <input type="file" id="imageUpload" accept="image/*" />
 
             <script>
+                let imagesOnCanvas = []; // Stores added image objects
+                let draggingImage = null;
+                let dragOffsetX = 0;
+                let dragOffsetY = 0;
+
+                document.getElementById('imageUpload').addEventListener('change', function (e) {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                const img = new Image();
+                img.onload = () => {
+                    const imageObj = {
+                    img,
+                    x: 100,
+                    y: 100,
+                    width: img.width * 0.3,
+                    height: img.height * 0.3,
+                    };
+                    imagesOnCanvas.push(imageObj);
+                    redrawCanvas();
+                };
+                img.src = URL.createObjectURL(file);
+                });
                     document.getElementById('export-png').addEventListener('click', function() {
                     const canvas = document.getElementById('whiteboard');
                     if (!canvas) {
@@ -215,8 +240,13 @@
                     const x = e.offsetX;
                     const y = e.offsetY;
                     
+                    if (draggingImage) {
+                        draggingImage.x = x - dragOffsetX;
+                        draggingImage.y = y - dragOffsetY;
+                        redrawCanvas(); // re-renders images and strokes
+                        return;
+                    }
                     if (deleteMode) {
-                    // Detect and delete stroke
                         for (let i = 0; i < savedStrokes.length; i++) {
                         const stroke = savedStrokes[i];
                         for (const point of stroke.points || stroke) {
@@ -232,6 +262,21 @@
                         return;
                     }
 
+                    for (let i = imagesOnCanvas.length - 1; i >= 0; i--) {
+                        const img = imagesOnCanvas[i];
+                        if (
+                        x >= img.x &&
+                        x <= img.x + img.width &&
+                        y >= img.y &&
+                        y <= img.y + img.height
+                        ) {
+                        draggingImage = img;
+                        dragOffsetX = x - img.x;
+                        dragOffsetY = y - img.y;
+                        return; // Don’t start drawing if dragging an image
+                        }
+                    }
+
                     drawing = true;
                     currentStroke = [{ x, y }];
                     });
@@ -258,11 +303,29 @@
 
             function redrawCanvas() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Draw images
+            for (const imgObj of imagesOnCanvas) {
+                ctx.drawImage(imgObj.img, imgObj.x, imgObj.y, imgObj.width, imgObj.height);
+            }
+
+            // Draw strokes
             savedStrokes.forEach(drawStroke);
             }
             canvas.addEventListener('mousemove', (e) => {
+                const x = e.offsetX;
+                const y = e.offsetY;
+
+                if (draggingImage) {
+                    draggingImage.x = x - dragOffsetX;
+                    draggingImage.y = y - dragOffsetY;
+                    redrawCanvas();
+                    return;
+                }
+
                 if (!drawing) return;
-                    const point = { x: e.offsetX, y: e.offsetY };
+
+                const point = { x, y };
                 currentStroke.push(point);
 
                 ctx.lineWidth = 2;
@@ -277,20 +340,29 @@
                 });
             
                 canvas.addEventListener('mouseup', () => {
+                if (draggingImage) {
+                    draggingImage = null;
+                    return;
+                }
+
                 if (!drawing) return;
                 drawing = false;
-                    console.log('Stroke points:', currentStroke);
                 saveStrokeToServer(currentStroke);
                 });
 
                 canvas.addEventListener('mouseleave', () => {
+                if (draggingImage) {
+                    draggingImage = null;
+                    return;
+                }
+
                 if (drawing) {
                     drawing = false;
-                        console.log('Stroke points:', currentStroke);
                     saveStrokeToServer(currentStroke);
                 }
                 });
 
+            
                 function saveStrokeToServer(stroke) {
                     fetch(`/whiteboard/{{ whiteboard.id }}/save-stroke/`, {
                         method: 'POST',