aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/InteractionUtils.tsx45
-rw-r--r--src/client/views/GestureOverlay.tsx57
-rw-r--r--src/client/views/InkingStroke.tsx6
3 files changed, 32 insertions, 76 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..d8860a392 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -160,7 +160,7 @@ 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} 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>);
@@ -189,8 +189,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,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 10:55:50 +0000