From 8bc17cecdfce184e5a426dc2332d3c9ad0406f58 Mon Sep 17 00:00:00 2001 From: vkalev Date: Sat, 10 Jul 2021 11:13:42 -0500 Subject: fixed adding point bug with breaking handle tangency --- src/client/views/InkStrokeProperties.ts | 69 ++++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 18 deletions(-) (limited to 'src/client/views/InkStrokeProperties.ts') diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index 812e8ff6e..4ec03c560 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -1,7 +1,7 @@ import { action, computed, observable } from "mobx"; import { Doc, Field, Opt } from "../../fields/Doc"; import { Document } from "../../fields/documentSchemas"; -import { InkField, InkData, PointData } from "../../fields/InkField"; +import { InkField, InkData, PointData, ControlPoint } from "../../fields/InkField"; import { Cast, NumCast } from "../../fields/Types"; import { DocumentType } from "../documents/DocumentTypes"; import { SelectionManager } from "../util/SelectionManager"; @@ -13,6 +13,7 @@ export class InkStrokeProperties { @observable _lock = false; @observable _controlButton = false; @observable _currentPoint = -1; + @observable _brokenIndices: number[] = []; constructor() { InkStrokeProperties.Instance = this; @@ -73,6 +74,7 @@ export class InkStrokeProperties { 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 newPoint = { X: x, Y: y }; const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK) { const ink = Cast(doc.data, InkField)?.inkData; @@ -88,12 +90,25 @@ export class InkStrokeProperties { for (var i = 0; i < spNum; i++) { ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y }); } - for (var j = 0; j < 4; j++) { - newPoints.push({ X: x, Y: y }); - } + // Updating the indices of the control points whose handle tangency has been broken. + this._brokenIndices = this._brokenIndices.map((control) => { + if (control >= spNum) { + return control + 4; + } else { + return control; + } + }); + + // const [handleA, handleB] = this.getNewHandlePoints(newPoint, pts[index-1], pts[index+1]); + newPoints.push(newPoint); + newPoints.push(newPoint); + newPoints.push(newPoint); + newPoints.push(newPoint); + for (var i = spNum; i < ink.length; i++) { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } this._currentPoint = -1; Doc.GetProto(doc).data = new InkField(newPoints); @@ -103,6 +118,20 @@ export class InkStrokeProperties { })); } + getNewHandlePoints = (newControl: PointData, a: PointData, b: PointData) => { + // find midpoint between the left and right control point of new control + // rotate midpoint by +-pi/2 to get new handle points + // multiplying x-y coordinates of both by 10/L where L is its current magnitude + const angle = this.angleChange(a, b, newControl); + const midpoint = this.rotatePoint(a, newControl, angle/2); + // const handleA = this.rotatePoint(midpoint, newControl, -Math.PI/2); + // const handleB = this.rotatePoint(midpoint, newControl, -Math.PI/2); + const handleA = { X: midpoint.X + (20 * Math.cos(-Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(-Math.PI/2)) }; + const handleB = { X: midpoint.X + (20 * Math.cos(Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(Math.PI/2)) }; + + return [handleA, handleB]; + } + /** * Deletes the points of the current ink instance. * @returns The changed x- and y-coordinates of the control points. @@ -195,23 +224,27 @@ export class InkStrokeProperties { return target; } + angleBetweenTwoVectors = (vectorA: PointData, vectorB: PointData) => { + const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y); + const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y); + // Normalizing the vectors. + vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA }; + vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB }; + const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y; + return Math.acos(dotProduct); + } + /** * Finds the angle difference (in radians) between two vectors relative to an arbitrary origin. */ angleChange = (a: PointData, b: PointData, origin: PointData) => { // Finding vector representation of inputted points relative to new origin. - let vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y }; - let vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y }; + const vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y }; + const vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y }; const crossProduct = vectorB.X * vectorA.Y - vectorB.Y * vectorA.X; // Determining whether rotation is clockwise or counterclockwise. const sign = crossProduct < 0 ? 1 : -1; - const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y); - const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y); - // Normalizing the vectors. - vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA }; - vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB }; - const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y; - const theta = Math.acos(dotProduct); + const theta = this.angleBetweenTwoVectors(vectorA, vectorB); return sign * theta; } @@ -220,20 +253,20 @@ export class InkStrokeProperties { */ @undoBatch @action - moveHandle = (deltaX: number, deltaY: number, handleIndex: number, brokenIndices: number[]) => + moveHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) => this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => { const order = handleIndex % 4; const oldHandlePoint = ink[handleIndex]; + let oppositeHandlePoint = ink[oppositeHandleIndex]; + const controlPoint = ink[controlIndex]; const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale }; ink[handleIndex] = newHandlePoint; // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle). - if (!brokenIndices.includes(handleIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) { - let oppositeHandlePoint = order === 1 ? ink[handleIndex - 3] : ink[handleIndex + 3]; - const controlPoint = order === 1 ? ink[handleIndex - 1] : ink[handleIndex + 1]; + if (!this._brokenIndices.includes(controlIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) { const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint); oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle); - order === 1 ? ink[handleIndex - 3] = oppositeHandlePoint : ink[handleIndex + 3] = oppositeHandlePoint; + ink[oppositeHandleIndex] = oppositeHandlePoint; } return ink; -- cgit v1.2.3-70-g09d2