refactoring

1 files changed, 58 insertions, 147 deletions

diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 720a89334..a5c028730 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -1,5 +1,4 @@
 import { action, computed, observable } from "mobx";
-import { ColorState } from 'react-color';
 import { Doc, Field, Opt } from "../../fields/Doc";
 import { Document } from "../../fields/documentSchemas";
 import { InkField, InkData, PointData } from "../../fields/InkField";
@@ -11,80 +10,62 @@ import { undoBatch } from "../util/UndoManager";
 export class InkStrokeProperties {
     static Instance: InkStrokeProperties | undefined;
 
-    private _lastFill = "#D0021B";
-    private _lastLine = "#D0021B";
-    private _lastDash = "2";
-
     @observable _lock = false;
-    @observable _controlBtn = false;
-    @observable _currPoint = -1;
+    @observable _controlButton = false;
+    @observable _currentPoint = -1;
 
     constructor() {
         InkStrokeProperties.Instance = this;
     }
 
+    @computed get selectedInk() {
+        const inks = SelectionManager.Views().filter(i => Document(i.rootDoc).type === DocumentType.INK);
+        return inks.length ? inks : undefined;
+    }
+
     getField(key: string) {
         return this.selectedInk?.reduce((p, i) =>
             (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>);
     }
 
-    @computed get selectedInk() {
-        const inks = SelectionManager.Views().filter(i => Document(i.rootDoc).type === DocumentType.INK);
-        return inks.length ? inks : undefined;
+    /**
+     * Helper function that enables other functions to be applied to a particular ink instance.
+     * @param func The inputted function.
+     * @param requireCurrPoint Indicates whether the current selected point is needed.
+     */
+     applyFunction = (func: (doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { X: number, Y: number }[] | undefined, requireCurrPoint: boolean = false) => {
+        var appliedFunc = false;
+        this.selectedInk?.forEach(action(inkView => {
+            if (this.selectedInk?.length === 1 && (!requireCurrPoint || this._currentPoint !== -1)) {
+                const doc = Document(inkView.rootDoc);
+                if (doc.type === DocumentType.INK && doc.width && doc.height) {
+                    const ink = Cast(doc.data, InkField)?.inkData;
+                    if (ink) {
+                        const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
+                        const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
+                        const ptsXscale = NumCast(doc._width) / (oldXrange.max - oldXrange.min);
+                        const ptsYscale = NumCast(doc._height) / (oldYrange.max - oldYrange.min);
+                        const newPoints = func(doc, ink, ptsXscale, ptsYscale);
+                        if (newPoints) {
+                            const newXrange = (xs => ({ min: Math.min(...xs), max: Math.max(...xs) }))(newPoints.map(p => p.X));
+                            const newYrange = (ys => ({ min: Math.min(...ys), max: Math.max(...ys) }))(newPoints.map(p => p.Y));
+                            doc._width = (newXrange.max - newXrange.min) * ptsXscale;
+                            doc._height = (newYrange.max - newYrange.min) * ptsYscale;
+                            doc.x = (oldXrange.coord + (newXrange.min - oldXrange.min) * ptsXscale);
+                            doc.y = (oldYrange.coord + (newYrange.min - oldYrange.min) * ptsYscale);
+                            Doc.GetProto(doc).data = new InkField(newPoints);
+                            appliedFunc = true;
+                        }
+                    }
+                }
+            }
+        }));
+        return appliedFunc;
     }
 
-    // @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; }
-    // @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; }
-    // @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; }
-    // @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; }
-    // @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; }
-    // @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
-    // @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
-    // @computed get widthStk() { return this.getField("strokeWidth") || "1"; }
-    // @computed get markHead() { return this.getField("strokeStartMarker") || ""; }
-    // @computed get markTail() { return this.getField("strokeEndMarker") || ""; }
-    // @computed get shapeHgt() { return this.getField("_height"); }
-    // @computed get shapeWid() { return this.getField("_width"); }
-    // @computed get shapeXps() { return this.getField("x"); }
-    // @computed get shapeYps() { return this.getField("y"); }
-    // @computed get shapeRot() { return this.getField("rotation"); }
-    // set unFilled(value) { this.colorFil = value ? "" : this._lastFill; }
-    // set solidFil(value) { this.unFilled = !value; }
-    // set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); }
-    // set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); }
-    // set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); }
-    // set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); }
-    // set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; }
-    // set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; }
-    // set dashdStk(value) {
-    //     value && (this._lastDash = value) && (this.unStrokd = false);
-    //     this.selectedInk?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined);
-    // }
-    // set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); }
-    // set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); }
-    // set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); }
-    // set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); }
-    // set shapeWid(value) {
-    //     this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
-    //         const oldWidth = NumCast(i.rootDoc._width);
-    //         i.rootDoc._width = Number(value);
-    //         this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth);
-    //     });
-    // }
-    // set shapeHgt(value) {
-    //     this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
-    //         const oldHeight = NumCast(i.rootDoc._height);
-    //         i.rootDoc._height = Number(value);
-    //         this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight);
-    //     });
-    // }
-
     /**
      * Adds a new control point to the ink instance when editing its format.
-     * @param x The x-coordinate of the current new point.
-     * @param y The y-coordinate of the current new point.
-     * @param pts The list containing all of the points to be added in PointData form.
-     * @param index The index of the current new point.
+     * @param index The index of the new point.
      * @param control The list of all control points of the ink.
      */
     @undoBatch
@@ -114,7 +95,7 @@ export class InkStrokeProperties {
                         for (var i = spNum; i < ink.length; i++) {
                             newPoints.push({ X: ink[i].X, Y: ink[i].Y });
                         }
-                        this._currPoint = -1;
+                        this._currentPoint = -1;
                         Doc.GetProto(doc).data = new InkField(newPoints);
                     }
                 }
@@ -123,56 +104,20 @@ export class InkStrokeProperties {
     }
 
     /**
-     * Helper function that enables other functions to be applied to a particular ink instance.
-     * @param func The inputted function.
-     * @param requireCurrPoint Indicates whether the current selected point is needed.
-     * @returns The applied function.
-     */
-    applyFunction = (func: (doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { X: number, Y: number }[] | undefined, requireCurrPoint: boolean = false) => {
-        var appliedFunc = false;
-        this.selectedInk?.forEach(action(inkView => {
-            if (this.selectedInk?.length === 1 && (!requireCurrPoint || this._currPoint !== -1)) {
-                const doc = Document(inkView.rootDoc);
-                if (doc.type === DocumentType.INK && doc.width && doc.height) {
-                    const ink = Cast(doc.data, InkField)?.inkData;
-                    if (ink) {
-                        const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
-                        const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
-                        const ptsXscale = NumCast(doc._width) / (oldXrange.max - oldXrange.min);
-                        const ptsYscale = NumCast(doc._height) / (oldYrange.max - oldYrange.min);
-                        const newPoints = func(doc, ink, ptsXscale, ptsYscale);
-                        if (newPoints) {
-                            const newXrange = (xs => ({ min: Math.min(...xs), max: Math.max(...xs) }))(newPoints.map(p => p.X));
-                            const newYrange = (ys => ({ min: Math.min(...ys), max: Math.max(...ys) }))(newPoints.map(p => p.Y));
-                            doc._width = (newXrange.max - newXrange.min) * ptsXscale;
-                            doc._height = (newYrange.max - newYrange.min) * ptsYscale;
-                            doc.x = (oldXrange.coord + (newXrange.min - oldXrange.min) * ptsXscale);
-                            doc.y = (oldYrange.coord + (newYrange.min - oldYrange.min) * ptsYscale);
-                            Doc.GetProto(doc).data = new InkField(newPoints);
-                            appliedFunc = true;
-                        }
-                    }
-                }
-            }
-        }));
-        return appliedFunc;
-    }
-
-    /**
      * Deletes the points of the current ink instance.
      * @returns The changed x- and y-coordinates of the control points.
      */
     @undoBatch
     @action
     deletePoints = () => this.applyFunction((doc: Doc, ink: InkData) => {
-        var newPoints: { X: number, Y: number }[] = [];
-        const toRemove = Math.floor(((this._currPoint + 2) / 4));
-        for (var i = 0; i < ink.length; i++) {
+        const newPoints: { X: number, Y: number }[] = [];
+        const toRemove = Math.floor(((this._currentPoint + 2) / 4));
+        for (let i = 0; i < ink.length; i++) {
             if (Math.floor((i + 2) / 4) !== toRemove && (toRemove !== 0 || i > 3)) {
                 newPoints.push({ X: ink[i].X, Y: ink[i].Y });
             }
         }
-        this._currPoint = -1;
+        this._currentPoint = -1;
         if (newPoints.length < 4) return undefined;
         if (newPoints.length === 4) {
             const newerPoints: { X: number, Y: number }[] = [];
@@ -183,7 +128,7 @@ export class InkStrokeProperties {
             return newerPoints;
         }
         return newPoints;
-    }, true);
+    }, true)
 
     /**
      * Rotates the points of the current ink instance by a certain angle degree.
@@ -193,7 +138,7 @@ export class InkStrokeProperties {
     @undoBatch
     @action
     rotateInk = (angle: number) => {
-        this.applyFunction((doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => {
+        this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
             const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
             const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
             const centerPoint = { X: (oldXrange.min + oldXrange.max) / 2, Y: (oldYrange.min + oldYrange.max) / 2 };
@@ -234,7 +179,7 @@ export class InkStrokeProperties {
                 }
             }
             return newPoints;
-        });
+        })
 
     /**
      * Rotates the target point about the origin point for a given angle (radians).
@@ -247,7 +192,7 @@ export class InkStrokeProperties {
         const newY = Math.sin(angle) * target.X + Math.cos(angle) * target.Y;
         target.X = newX + origin.X;
         target.Y = newY + origin.Y;
-        return target
+        return target;
     }
 
     /**
@@ -277,54 +222,20 @@ export class InkStrokeProperties {
     @action
     moveHandle = (deltaX: number, deltaY: number, handleIndex: number) =>
         this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
-            const newPoints: { X: number, Y: number }[] = [];
             const order = handleIndex % 4;
-            let newHandlePoint = { X: 0, Y: 0 };
-
-            for (var i = 0; i < ink.length; i++) {
-                if (handleIndex === i) {
-                    newHandlePoint = { X: ink[i].X - deltaX / xScale, Y: ink[i].Y - deltaY / yScale };
-                    newPoints.push({ X: newHandlePoint.X, Y: newHandlePoint.Y });
-                } else {
-                    newPoints.push({ X: ink[i].X, Y: ink[i].Y });
-                }
-            }
-
+            const oldHandlePoint = ink[handleIndex];
+            const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
+            ink[handleIndex] = newHandlePoint;
+            
+            // Rotating opposite handle (first and final control point only have one handle).
             if (handleIndex !== 1 && handleIndex !== ink.length - 2) {
-                const oldHandlePoint = ink[handleIndex];
                 let oppositeHandlePoint = order === 1 ? ink[handleIndex - 3] : ink[handleIndex + 3];
                 const controlPoint = order === 1 ? ink[handleIndex - 1] : ink[handleIndex + 1];
                 const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
                 oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
-                order === 1 ? newPoints[handleIndex - 3] = oppositeHandlePoint : newPoints[handleIndex + 3] = oppositeHandlePoint;
+                order === 1 ? ink[handleIndex - 3] = oppositeHandlePoint : ink[handleIndex + 3] = oppositeHandlePoint;
             }
 
-            return newPoints;
-        });
-
-    // /**
-    //  * Changes the color of the border of the ink instance.
-    //  * @param color The new hex value to change the border to.
-    //  * @returns true.
-    //  */
-    // @undoBatch
-    // @action
-    // switchStk = (color: ColorState) => {
-    //     const val = String(color.hex);
-    //     this.colorStk = val;
-    //     return true;
-    // }
-
-    // /**
-    //  * Changes the color of the fill of the ink instance.
-    //  * @param color The new hex value to change the fill to.
-    //  * @returns true.
-    //  */
-    // @undoBatch
-    // @action
-    // switchFil = (color: ColorState) => {
-    //     const val = String(color.hex);
-    //     this.colorFil = val;
-    //     return true;
-    // }
+            return ink;
+        })
 }
\ No newline at end of file