aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/InteractionUtils.tsx23
-rw-r--r--src/client/views/GestureOverlay.tsx77
-rw-r--r--src/client/views/InkingStroke.tsx20
3 files changed, 109 insertions, 11 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 1d7655748..31b2a56e6 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -99,8 +99,8 @@ export namespace InteractionUtils {
if (shape) { //if any of the shape are true
pts = makePolygon(shape, points);
}
- else if (points.length > 9 && points[3].X === points[4].X && points[7].X === points[8].X) {
- for (var i = 0; i < points.length; i += 4) {
+ else if (points.length >= 5 && points[3].X === points[4].X) {
+ for (var i = 0; i < points.length - 3; i += 4) {
const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]];
for (var t = 0; t < 1; t += 0.01) {
const point = beziercurve(t, array);
@@ -223,10 +223,28 @@ export namespace InteractionUtils {
points.push({ X: left, Y: top });
return points;
case "triangle":
+ // points.push({ X: left, Y: bottom });
+ // points.push({ X: right, Y: bottom });
+ // points.push({ X: (right + left) / 2, Y: top });
+ // points.push({ X: left, Y: bottom });
+
+ points.push({ X: left, Y: bottom });
points.push({ X: left, Y: bottom });
+
+ points.push({ X: right, Y: bottom });
points.push({ X: right, Y: bottom });
+ points.push({ X: right, Y: bottom });
+ points.push({ X: right, Y: bottom });
+
+ points.push({ X: (right + left) / 2, Y: top });
points.push({ X: (right + left) / 2, Y: top });
+ points.push({ X: (right + left) / 2, Y: top });
+ points.push({ X: (right + left) / 2, Y: top });
+
+ points.push({ X: left, Y: bottom });
points.push({ X: left, Y: bottom });
+
+
return points;
case "circle":
const centerX = (right + left) / 2;
@@ -262,6 +280,7 @@ 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 90d8b370e..2eec8ed6a 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -703,18 +703,53 @@ export default class GestureOverlay extends Touchable {
//must be (points[0].X,points[0]-1)
case "rectangle":
this._points.push({ X: left, Y: top });
+ this._points.push({ X: left, Y: top });
+
+ this._points.push({ X: right, Y: top });
this._points.push({ X: right, Y: top });
+ this._points.push({ X: right, Y: top });
+ this._points.push({ X: right, Y: top });
+
this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+
+ this._points.push({ X: left, Y: bottom });
+ this._points.push({ X: left, Y: bottom });
this._points.push({ X: left, Y: bottom });
+ this._points.push({ X: left, Y: bottom });
+
+ this._points.push({ X: left, Y: top });
this._points.push({ X: left, Y: top });
- this._points.push({ X: left, Y: top - 1 });
+ // this._points.push({ X: left, Y: top });
+ // this._points.push({ X: left, Y: top });
+
+ // this._points.push({ X: left, Y: top - 1 });
break;
case "triangle":
+ // this._points.push({ X: left, Y: bottom });
+ // this._points.push({ X: right, Y: bottom });
+ // this._points.push({ X: (right + left) / 2, Y: top });
+ // this._points.push({ X: left, Y: bottom });
+ // this._points.push({ X: left, Y: bottom - 1 });
+ this._points.push({ X: left, Y: bottom });
this._points.push({ X: left, Y: bottom });
+
this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+
+ this._points.push({ X: (right + left) / 2, Y: top });
+ this._points.push({ X: (right + left) / 2, Y: top });
this._points.push({ X: (right + left) / 2, Y: top });
+ this._points.push({ X: (right + left) / 2, Y: top });
+
+ this._points.push({ X: left, Y: bottom });
this._points.push({ X: left, Y: bottom });
- this._points.push({ X: left, Y: bottom - 1 });
+
+
break;
case "circle":
const centerX = (right + left) / 2;
@@ -731,10 +766,48 @@ export default class GestureOverlay extends Touchable {
}
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: centerX, Y: top });
+ // this._points.push({ X: centerX + radius / 2, Y: top });
+
+ // this._points.push({ X: right, Y: top + radius / 2 });
+ // this._points.push({ X: right, Y: top + radius });
+ // this._points.push({ X: right, Y: top + radius });
+ // this._points.push({ X: right, Y: bottom - radius / 2 });
+
+ // this._points.push({ X: right - radius / 2, Y: bottom });
+ // this._points.push({ X: right - radius, Y: bottom });
+ // this._points.push({ X: right - radius, Y: bottom });
+ // this._points.push({ X: left + radius / 2, Y: bottom });
+
+ // this._points.push({ X: left, Y: bottom - radius / 2 });
+ // this._points.push({ X: left, Y: bottom - radius });
+ // this._points.push({ X: left, Y: bottom - radius });
+ // this._points.push({ X: left, Y: top + radius / 2 });
+
+ // this._points.push({ X: left + radius / 2, Y: top });
+ // this._points.push({ X: left + radius, Y: top });
+
+
+
+
+
+
+
break;
case "line":
this._points.push({ X: left, Y: top });
+
+ this._points.push({ X: left, Y: top });
+
+ // this._points.push({ X: right, Y: bottom });
+ // this._points.push({ X: right, Y: bottom });
+ // this._points.push({ X: right, Y: bottom });
+ // this._points.push({ X: right, Y: bottom });
+
+
this._points.push({ X: right, Y: bottom });
+ this._points.push({ X: right, Y: bottom });
+
// this._points.push({ X: right, Y: bottom - 1 });
break;
case "arrow":
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 974921be8..22c89b6da 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -94,10 +94,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const scaleX = (this.props.PanelWidth() - strokeWidth) / (width - strokeWidth);
const scaleY = (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth);
const strokeColor = StrCast(this.layoutDoc.color, "");
+
const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
+
const hpoints = InteractionUtils.CreatePolyline(data, left, top,
this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
@@ -106,42 +108,46 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const controlPoints: { X: number, Y: number, I: number }[] = [];
const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = [];
const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = [];
-
- if (data.length > 5) {
+ if (data.length >= 4) {
for (var i = 0; i <= data.length - 4; i += 4) {
controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 });
handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 });
handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 });
}
+
handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 });
- for (var i = 2; i < data.length - 2; i += 4) {
+ for (var i = 2; i < data.length - 4; i += 4) {
+
handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
+
}
handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 });
}
+ const dotsize = String(Math.min(width * scaleX, height * scaleY) / 40);
+
const controls = controlPoints.map((pts, i) =>
<svg height="10" width="10">
- <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r="5" stroke="black" stroke-width="1" fill="red"
+ <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" stroke-width={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">
- <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r="5" stroke="black" stroke-width="1" fill="green"
+ <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" stroke-width={String(Number(dotsize) / 2)} fill="green"
onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
</svg>);
const handleLines = handleLine.map((pts, i) =>
<svg height="100" width="100">
<line x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
- x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="black" stroke-width="1"
+ x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" stroke-width={String(Number(dotsize) / 2)}
display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
<line x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
- x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="black" stroke-width="1"
+ x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" stroke-width={String(Number(dotsize) / 2)}
display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
</svg>);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 03:25:10 +0000