Merge pull request #794 from browngraphicslab/ink_edits

fixed circle & stroke from appearing thicker on control points mode.

3 files changed, 35 insertions, 78 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 4a203d41f..f58277717 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -229,7 +229,7 @@ export namespace InteractionUtils {
     export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
         if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
             //pointer is up (first and last points are the same)
-            if (shape === "arrow" || shape === "line") {
+            if (shape === "arrow" || shape === "line" || shape === "circle") {
                 //if arrow or line, the two end points should be the starting and the ending point
                 var left = points[0].X;
                 var top = points[0].Y;
@@ -251,7 +251,7 @@ export namespace InteractionUtils {
             left = points[0].X;
             bottom = points[points.length - 1].Y;
             top = points[0].Y;
-            if (shape !== "arrow" && shape !== "line") {
+            if (shape !== "arrow" && shape !== "line" && shape !== "circle") {
                 //switch left/right and top/bottom if needed
                 if (left > right) {
                     const temp = right;
@@ -299,50 +299,34 @@ export namespace InteractionUtils {
 
                 return points;
             case "circle":
-                // const centerX = (right + left) / 2;
-                // const centerY = (bottom + top) / 2;
-                // const radius = bottom - centerY;
-
-                // for (var y = top; y < bottom; y++) {
-                //     const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
-                //     points.push({ X: x, Y: y });
-                // }
-                // for (var y = bottom; y > top; y--) {
-                //     const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
-                //     const newX = centerX - (x - centerX);
-                //     points.push({ X: newX, Y: y });
-                // }
-                // points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top });
-                const centerX = (right + left) / 2;
-                const centerY = (bottom + top) / 2;
-                if ((bottom - centerY) < (right - centerX)) {
-                    const radius = bottom - centerY;
-                    for (var y = top; y < bottom; y++) {
+
+
+                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;
                         points.push({ X: x, Y: y });
                     }
-                    for (var y = bottom; y > top; 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);
                         points.push({ X: newX, Y: y });
                     }
-                    points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top });
+                    points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) });
 
                 } else {
-                    //right = bottom
-                    //left = top
-                    const radius = right - centerX;
-                    for (var x = left; x < right; x++) {
+                    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;
                         points.push({ X: x, Y: y });
                     }
-                    for (var x = right; x > left; x--) {
+                    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);
                         points.push({ X: x, Y: newY });
                     }
-                    points.push({ X: left, Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((left - centerX), 2))) + centerY });
-
+                    points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY });
 
                 }
                 return points;
@@ -365,7 +349,6 @@ export namespace InteractionUtils {
             //     points.push({ X: x2, Y: y2 });
             //     return points;
             case "line":
-
                 points.push({ X: left, Y: top });
                 points.push({ X: right, Y: bottom });
                 return points;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 6af3a40cf..97dfb7c50 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -695,7 +695,7 @@ export class GestureOverlay extends Touchable {
             left = this._points[0].X;
             bottom = this._points[this._points.length - 2].Y;
             top = this._points[0].Y;
-            if (shape !== "arrow" && shape !== "line") {
+            if (shape !== "arrow" && shape !== "line" && shape !== "circle") {
                 if (left > right) {
                     const temp = right;
                     right = left;
@@ -754,65 +754,38 @@ export class GestureOverlay extends Touchable {
 
                 break;
             case "circle":
-                // const centerX = (right + left) / 2;
-                // const centerY = (bottom + top) / 2;
-                // const radius = bottom - centerY;
-
-
-                // for (var y = top; y < 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 = bottom; y > top; 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((top - centerY), 2))) + centerX, Y: top });
-                // this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 });
-
-                const centerX = (right + left) / 2;
-                const centerY = (bottom + top) / 2;
-                if ((bottom - centerY) < (right - centerX)) {
-                    const radius = bottom - centerY;
-                    for (var y = top; y < bottom; y++) {
+
+                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 = bottom; y > top; 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((top - centerY), 2))) + centerX, Y: top });
-                    this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 });
+                    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 });
+
 
                 } else {
-                    //right = bottom
-                    //left = top
-                    const radius = right - centerX;
-                    for (var x = left; x < right; x++) {
+                    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 = right; x > left; x--) {
+                    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: left, Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((left - centerX), 2))) + centerY });
-                    this._points.push({ X: left, Y: (Math.sqrt(Math.pow(radius, 2) - (Math.pow((left - centerX), 2))) + centerY) - 1 });
-
+                    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) {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index da98eca73..186406424 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -47,6 +47,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     private _controlNum = 0;
     @action
     onControlDown = (e: React.PointerEvent, i: number): void => {
+        //TODO:renew points before controlling 
         setupMoveUpEvents(this, e, this.onControlMove, this.onControlup, (e) => { });
         this._controlUndo = UndoManager.StartBatch("DocDecs set radius");
         this._prevX = e.clientX;
@@ -160,20 +161,20 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
 
         const addpoints = apoints.map((pts, i) =>
             <svg height="10" width="10" key={`add${i}`}>
-                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="invisible" strokeWidth={String(Number(dotsize) / 2)} fill="invisible"
+                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke="invisible" strokeWidth={String(Number(dotsize) / 2)} fill="invisible"
                     onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll"
                 />
             </svg>);
 
         const controls = controlPoints.map((pts, i) =>
             <svg height="10" width="10" key={`ctrl${i}`}>
-                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="red"
+                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="red"
                     onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll"
                 />
             </svg>);
         const handles = handlePoints.map((pts, i) =>
             <svg height="10" width="10" key={`hdl${i}`}>
-                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="green"
+                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="green"
                     onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} />
             </svg>);
         const handleLines = handleLine.map((pts, i) =>
@@ -189,8 +190,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
 
         return (
             <svg className="inkingStroke"
-                width={width}
-                height={height}
+                width={Math.max(width, height)}
+                height={Math.max(width, height)}
                 style={{
                     pointerEvents: this.props.Document.isInkMask ? "all" : "none",
                     transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined,