ink controls resize on hover

1 files changed, 71 insertions, 70 deletions

diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 5c5395984..720a89334 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -32,51 +32,52 @@ export class InkStrokeProperties {
         const inks = SelectionManager.Views().filter(i => Document(i.rootDoc).type === DocumentType.INK);
         return inks.length ? inks : undefined;
     }
-    @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);
-        });
-    }
+
+    // @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.
@@ -191,7 +192,7 @@ export class InkStrokeProperties {
      */
     @undoBatch
     @action
-    rotate = (angle: number) => {
+    rotateInk = (angle: number) => {
         this.applyFunction((doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: 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));
@@ -301,29 +302,29 @@ export class InkStrokeProperties {
             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 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;
-    }
+    // /**
+    //  * 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;
+    // }
 }
\ No newline at end of file