Initial

PdfMarker/wwwroot/js/balloonCanvas.js

@@ -0,0 +1,48 @@
+window.balloonCanvas = {
+
+    resizeToIframe: function () {
+        const iframe = document.querySelector("iframe");
+        const canvas = document.getElementById("balloonCanvas");
+        if (!iframe || !canvas) return;
+
+        const rect = iframe.getBoundingClientRect();
+
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+    },
+
+    clear: function () {
+        const canvas = document.getElementById("balloonCanvas");
+        if (!canvas) return;
+
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    },
+
+    draw: function (balloons) {
+        const canvas = document.getElementById("balloonCanvas");
+        if (!canvas) return;
+
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        balloons.forEach(b => {
+            const x = b.x * canvas.width;
+            const y = b.y * canvas.height;
+
+            ctx.beginPath();
+            ctx.arc(x, y, 12, 0, 2 * Math.PI);
+            ctx.fillStyle = b.selected ? "#ffe5e5" : "#ffffff";
+            ctx.strokeStyle = "#000000";
+            ctx.lineWidth = 2;
+            ctx.fill();
+            ctx.stroke();
+
+            ctx.fillStyle = "#000000";
+            ctx.font = "12px Arial";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(b.number.toString(), x, y);
+        });
+    }
+};