From 5cc44b3f687aba2fce865f11904803a9470c9eb5 Mon Sep 17 00:00:00 2001
From: llama <100429699+iamllama@users.noreply.github.com>
Date: Thu, 8 May 2025 22:20:00 +0800
Subject: [PATCH] Make IO polygon markers centred and transparent (#3989)

* make polygon markers centred and transparent

* centre active line

* set perPixelTargetFind per object, and not on the canvas

otherwise it can't be overridden for a specific object
see https://github.com/fabricjs/fabric.js/blob/4c305baae69fd998e783195fd23453fd05187e5a/src/canvas.class.js#L786
---
 ts/routes/image-occlusion/mask-editor.ts        |  2 +-
 ts/routes/image-occlusion/tools/tool-polygon.ts | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/ts/routes/image-occlusion/mask-editor.ts b/ts/routes/image-occlusion/mask-editor.ts
index 251df2503..70918dee0 100644
--- a/ts/routes/image-occlusion/mask-editor.ts
+++ b/ts/routes/image-occlusion/mask-editor.ts
@@ -95,7 +95,7 @@ function initCanvas(): fabric.Canvas {
     undoStack.setCanvas(canvas);
     // find object per-pixel basis rather than according to bounding box,
     // allow click through transparent area
-    canvas.perPixelTargetFind = true;
+    fabric.Object.prototype.perPixelTargetFind = true;
     // Disable uniform scaling
     canvas.uniformScaling = false;
     canvas.uniScaleKey = "none";
diff --git a/ts/routes/image-occlusion/tools/tool-polygon.ts b/ts/routes/image-occlusion/tools/tool-polygon.ts
index 11ef633bd..ca3556375 100644
--- a/ts/routes/image-occlusion/tools/tool-polygon.ts
+++ b/ts/routes/image-occlusion/tools/tool-polygon.ts
@@ -87,22 +87,23 @@ const addPoint = (canvas: fabric.Canvas, options): void => {
 
     const point = new fabric.Circle({
         radius: 5,
-        fill: "#ffffff",
+        fill: "transparent",
         stroke: "#333333",
-        strokeWidth: 0.5,
-        originX: "left",
-        originY: "top",
+        strokeWidth: 1.5,
+        originX: "center",
+        originY: "center",
         left: origX,
         top: origY,
         selectable: false,
         hasBorders: false,
         hasControls: false,
         objectCaching: false,
+        perPixelTargetFind: false,
     });
 
     if (pointsList.length === 0) {
         point.set({
-            fill: "red",
+            stroke: "red",
         });
     }
 
@@ -112,8 +113,8 @@ const addPoint = (canvas: fabric.Canvas, options): void => {
         strokeWidth: 2,
         fill: "#999999",
         stroke: "#999999",
-        originX: "left",
-        originY: "top",
+        originX: "center",
+        originY: "center",
         selectable: false,
         hasBorders: false,
         hasControls: false,