Merge branch 'master' into schema-view-En-Hua

1 files changed, 26 insertions, 29 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 491bf18b2..bbf21f22c 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -634,7 +634,7 @@ export class GestureOverlay extends Touchable {
         } else {
             this._points = [];
         }
-        CollectionFreeFormViewChrome.Instance.primCreated();
+        CollectionFreeFormViewChrome.Instance?.primCreated();
     }
 
     makePolygon = (shape: string, gesture: boolean) => {
@@ -726,39 +726,36 @@ export class GestureOverlay extends Touchable {
 
                 break;
             case "circle":
-
+                // Approximation of a circle using 4 Bézier curves in which the constant "c" reduces the maximum radial drift to 0.019608%,
+                // making the curves indistinguishable from a circle.
+                // Source: https://spencermortensen.com/articles/bezier-circle/
+                const c = 0.551915024494;
                 const centerX = (Math.max(left, right) + Math.min(left, right)) / 2;
                 const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2;
                 const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom));
-                if (centerX - Math.min(left, right) < centerY - Math.min(top, bottom)) {
-                    for (var y = Math.min(top, bottom); y < Math.max(top, bottom); y++) {
-                        const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
-                        this._points.push({ X: x, Y: y });
-                    }
-                    for (var y = Math.max(top, bottom); y > Math.min(top, bottom); y--) {
-                        const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
-                        const newX = centerX - (x - centerX);
-                        this._points.push({ X: newX, Y: y });
-                    }
-                    this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) });
-                    this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) - 1 });
+                // Dividing the circle into four equal sections, and fitting each section to a cubic Bézier curve.   
+                this._points.push({ X: centerX - radius, Y: centerY });
+                this._points.push({ X: centerX - radius, Y: centerY + (c * radius) });
+                this._points.push({ X: centerX - (c * radius), Y: centerY + radius });
+                this._points.push({ X: centerX, Y: centerY + radius });
+
+                this._points.push({ X: centerX, Y: centerY + radius });
+                this._points.push({ X: centerX + (c * radius), Y: centerY + radius });
+                this._points.push({ X: centerX + radius, Y: centerY + (c * radius) });
+                this._points.push({ X: centerX + radius, Y: centerY });
+
+                this._points.push({ X: centerX + radius, Y: centerY });
+                this._points.push({ X: centerX + radius, Y: centerY - (c * radius) });
+                this._points.push({ X: centerX + (c * radius), Y: centerY - radius });
+                this._points.push({ X: centerX, Y: centerY - radius });
+
+                this._points.push({ X: centerX, Y: centerY - radius });
+                this._points.push({ X: centerX - (c * radius), Y: centerY - radius });
+                this._points.push({ X: centerX - radius, Y: centerY - (c * radius) });
+                this._points.push({ X: centerX - radius, Y: centerY });
 
-
-                } else {
-                    for (var x = Math.min(left, right); x < Math.max(left, right); x++) {
-                        const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY;
-                        this._points.push({ X: x, Y: y });
-                    }
-                    for (var x = Math.max(left, right); x > Math.min(left, right); x--) {
-                        const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY;
-                        const newY = centerY - (y - centerY);
-                        this._points.push({ X: x, Y: newY });
-                    }
-                    this._points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY });
-                    this._points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY - 1 });
-
-                }
                 break;
+
             case "line":
                 if (Math.abs(firstx - lastx) < 20) {
                     lastx = firstx;