aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/GestureOverlay.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/GestureOverlay.tsx')
-rw-r--r--src/client/views/GestureOverlay.tsx48
1 files changed, 29 insertions, 19 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index bbf21f22c..f28485e43 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -14,6 +14,7 @@ import { DocUtils } from "../documents/Documents";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { InteractionUtils } from "../util/InteractionUtils";
import { Scripting } from "../util/Scripting";
+import { SelectionManager } from "../util/SelectionManager";
import { Transform } from "../util/Transform";
import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
import "./GestureOverlay.scss";
@@ -23,7 +24,6 @@ import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
import { Touchable } from "./Touchable";
import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import { SelectionManager } from "../util/SelectionManager";
@observer
export class GestureOverlay extends Touchable {
@@ -31,7 +31,7 @@ export class GestureOverlay extends Touchable {
@observable public InkShape: string = "";
@observable public SavedColor?: string;
- @observable public SavedWidth?: string;
+ @observable public SavedWidth?: number;
@observable public Tool: ToolglassTools = ToolglassTools.None;
@observable private _thumbX?: number;
@@ -494,6 +494,7 @@ export class GestureOverlay extends Touchable {
if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen].includes(CurrentUserUtils.SelectedTool)) {
this._points.push({ X: e.clientX, Y: e.clientY });
setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
+ // if (CurrentUserUtils.SelectedTool === InkTool.Highlighter) SetActiveInkColor("rgba(245, 230, 95, 0.75)");
}
}
@@ -588,8 +589,9 @@ export class GestureOverlay extends Touchable {
this.makePolygon(this.InkShape, false);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
this._points = [];
- if (!CollectionFreeFormViewChrome.Instance._keepPrimitiveMode) {
+ if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
this.InkShape = "";
+ Doc.UserDoc().activeInkTool = InkTool.None;
}
}
// if we're not drawing in a toolglass try to recognize as gesture
@@ -625,6 +627,9 @@ export class GestureOverlay extends Touchable {
}
+ const dist = Math.sqrt((controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) +
+ (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y));
+ if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
this._points = controlPoints;
this.dispatchGesture(GestureUtils.Gestures.Stroke);
@@ -687,25 +692,26 @@ export class GestureOverlay extends Touchable {
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 });
+
break;
+
case "triangle":
this._points.push({ X: left, Y: bottom });
this._points.push({ X: left, Y: bottom });
@@ -733,12 +739,8 @@ export class GestureOverlay extends Touchable {
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));
- // 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 });
+ // Dividing the circle into four equal sections, and fitting each section to a cubic Bézier curve.
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) });
@@ -754,13 +756,18 @@ export class GestureOverlay extends Touchable {
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 });
+
break;
case "line":
- if (Math.abs(firstx - lastx) < 20) {
+ if (Math.abs(firstx - lastx) < 10 && Math.abs(firsty - lasty) > 10) {
lastx = firstx;
}
- if (Math.abs(firsty - lasty) < 20) {
+ if (Math.abs(firsty - lasty) < 10 && Math.abs(firstx - lastx) > 10) {
lasty = firsty;
}
this._points.push({ X: firstx, Y: firsty });
@@ -834,20 +841,23 @@ export class GestureOverlay extends Touchable {
B.bottom = B.bottom + width / 2;
B.width += width;
B.height += width;
+ const fillColor = ActiveFillColor();
+ const strokeColor = fillColor && fillColor !== "transparent" ? fillColor : ActiveInkColor();
return [
this.props.children,
this._palette,
[this._strokes.map((l, i) => {
const b = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 };//this.getBounds(l, true);
return <svg key={i} width={b.width} height={b.height} style={{ transform: `translate(${b.left}px, ${b.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
- {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width,
- ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(),
- ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
+ {InteractionUtils.CreatePolyline(l, b.left, b.top, strokeColor, width, width, "miter", "round",
+ ActiveInkBezierApprox(), "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(),
+ ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
</svg>;
}),
this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height}
style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
- {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
+ {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, "miter", "round", "",
+ "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
</svg>]
];
}
@@ -952,7 +962,7 @@ Scripting.addGlobal(function setPen(width: any, color: any, fill: any, arrowStar
Scripting.addGlobal(function resetPen() {
runInAction(() => {
SetActiveInkColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)");
- SetActiveInkWidth(GestureOverlay.Instance.SavedWidth ?? "2");
+ SetActiveInkWidth(GestureOverlay.Instance.SavedWidth?.toString() ?? "2");
});
}, "resets the pen tool");
Scripting.addGlobal(function createText(text: any, x: any, y: any) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-21 04:26:50 +0000