aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/GestureOverlay.tsx30
-rw-r--r--src/client/views/InkingStroke.tsx30
-rw-r--r--src/client/views/collections/collectionFreeForm/FormatShapePane.tsx76
3 files changed, 118 insertions, 18 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 30df7cf9a..a9fc20174 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -817,21 +817,21 @@ export default class GestureOverlay extends Touchable {
// const b = firsty - m * firstx;
this._points.push({ X: firstx, Y: firsty });
this._points.push({ X: firstx, Y: firsty });
-
- this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
- this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
- this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
- this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
-
- this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
- this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
- this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
- this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
-
- this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
- this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
- this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
- this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
+ //removed points
+ // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
+ // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
+ // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
+ // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b });
+
+ // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
+ // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
+ // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
+ // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b });
+
+ // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
+ // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
+ // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
+ // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b });
this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b });
this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b });
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 6c5eda256..f0505ed95 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -52,8 +52,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
FormatShapePane.Instance.Pinned = true;
}
- private _prevX = 0;
- private _prevY = 0;
+ public _prevX = 0;
+ public _prevY = 0;
private _controlNum = 0;
@action
onControlDown = (e: React.PointerEvent, i: number): void => {
@@ -67,6 +67,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
@action
changeCurrPoint = (i: number) => {
FormatShapePane.Instance._currPoint = i;
+ document.addEventListener("keydown", this.delPts, true);
}
@action
@@ -86,6 +87,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
this._controlUndo?.end();
this._controlUndo = undefined;
}
+ @action
+ delPts = (e: KeyboardEvent | React.PointerEvent | undefined) => {
+ if (e instanceof KeyboardEvent ? e.key === "-" : true) {
+ FormatShapePane.Instance.deletePoints();
+ }
+ }
+
public static MaskDim = 50000;
render() {
@@ -115,6 +123,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
"none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true);
+ //points for adding
+ const apoints = InteractionUtils.CreatePoints(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);
+
var controlPoints: { X: number, Y: number, I: number }[] = [];
var handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = [];
var handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = [];
@@ -146,11 +160,20 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
// }
const dotsize = String(Math.max(width * scaleX, height * scaleY) / 40);
+ const addpoints = apoints.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={dotsize} stroke="invisible" stroke-width={String(Number(dotsize) / 2)} fill="invisible"
+ onPointerDown={(e) => { FormatShapePane.Instance.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">
<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" />
+ onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll"
+ />
</svg>);
const handles = handlePoints.map((pts, i) =>
@@ -193,6 +216,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
</defs>
{hpoints}
{points}
+ {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? addpoints : ""}
{FormatShapePane.Instance._controlBtn && this.props.isSelected() ? controls : ""}
{FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handles : ""}
{FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handleLines : ""}
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 6263be261..c53e4de0f 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -163,6 +163,82 @@ export default class FormatShapePane extends AntimodeMenu {
@undoBatch
@action
+ addPoints = (x: number, y: number, pts: { X: number, Y: number }[], index: number, control: { X: number, Y: number }[]) => {
+ this.selectedInk?.forEach(action(inkView => {
+ if (this.selectedInk?.length === 1) {
+ const doc = Document(inkView.rootDoc);
+ if (doc.type === DocumentType.INK) {
+ const ink = Cast(doc.data, InkField)?.inkData;
+ if (ink) {
+ const newPoints: { X: number, Y: number }[] = [];
+ var counter = 0;
+ for (var k = 0; k < index; k++) {
+ for (var l = 0; l < control.length; l++) {
+ if (pts[k].X === control[l].X && pts[k].Y === control[l].Y) {
+ counter++;
+ }
+ }
+ }
+ //decide where to put the new coordinate
+ const spNum = Math.floor(counter / 2) * 4 + 2;
+
+ for (var i = 0; i < spNum; i++) {
+ newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+ }
+ for (var j = 0; j < 4; j++) {
+ newPoints.push({ X: x, Y: y });
+
+ }
+ for (var i = spNum; i < ink.length; i++) {
+ newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+ }
+ this._currPoint = -1;
+ doc.data = new InkField(newPoints);
+ }
+ }
+ }
+ }));
+ }
+
+ @undoBatch
+ @action
+ deletePoints = () => {
+ this.selectedInk?.forEach(action(inkView => {
+ if (this.selectedInk?.length === 1 && this._currPoint !== -1) {
+ const doc = Document(inkView.rootDoc);
+ if (doc.type === DocumentType.INK) {
+ const ink = Cast(doc.data, InkField)?.inkData;
+ if (ink && ink.length > 4) {
+ const newPoints: { X: number, Y: number }[] = [];
+
+ console.log(ink.length, this._currPoint, Math.floor((this._currPoint + 2) / 4));
+
+ const toRemove = Math.floor(((this._currPoint + 2) / 4));
+ for (var i = 0; i < ink.length; i++) {
+ if (Math.floor((i + 2) / 4) !== toRemove) {
+ console.log(i, toRemove);
+ newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+ }
+ }
+ this._currPoint = -1;
+ doc.data = new InkField(newPoints);
+ if (newPoints.length === 4) {
+ const newerPoints: { X: number, Y: number }[] = [];
+ newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
+ newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
+ newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
+ newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
+ doc.data = new InkField(newerPoints);
+
+ }
+ }
+ }
+ }
+ }));
+ }
+
+ @undoBatch
+ @action
rotate = (angle: number) => {
const _centerPoints: { X: number, Y: number }[] = [];
SelectionManager.SelectedDocuments().forEach(action(inkView => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 23:47:47 +0000