added resize handlers and linted document decorations

5 files changed, 107 insertions, 59 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index b87980397..6699aa133 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -677,7 +677,22 @@ export function StopEvent(e: React.PointerEvent | React.MouseEvent) {
     e.preventDefault();
 }
 
+/**
+ * Helper method for converting pixel string eg. '32px' into number eg. 32
+ * @param value: string with 'px' ending
+ * @returns value: number
+ * 
+ * Example:
+ * '32px' -> 32
+ */
+export function numberValue(value: string | undefined):number {
+    if (value == undefined) return 0;
+    return parseInt(value);
+}
 
+export function numbersAlmostEqual(num1: number, num2: number) {
+    return Math.abs( num1 - num2 ) < 0.2;
+}
 
 export function setupMoveUpEvents(
     target: object,
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 135d6d001..af4ceb0b5 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,6 +1,8 @@
 @import 'global/globalCssVariables';
 
 $linkGap: 3px;
+$headerHeight: 20px;
+$resizeHandler: 8px;
 
 .documentDecorations-Dark,
 .documentDecorations {
@@ -16,8 +18,8 @@ $linkGap: 3px;
     top: 0;
     left: 0;
     display: grid;
-    grid-template-rows: 20px 8px 1fr 8px;
-    grid-template-columns: 8px 1fr 8px;
+    grid-template-rows: $headerHeight $resizeHandler 1fr $resizeHandler;
+    grid-template-columns: $resizeHandler 1fr $resizeHandler;
     pointer-events: none;
 
     .documentDecorations-centerCont {
@@ -82,29 +84,44 @@ $linkGap: 3px;
         grid-column: 3;
     }
 
-    .documentDecorations-rotation,
+    // Rotation handler
+    .documentDecorations-rotation {
+        border-radius: 100%;
+        height: 30;
+        width: 30;
+        right: -10;
+        top: 50%;
+        z-index: 1000000;
+        position: absolute;
+        pointer-events: all;
+        cursor: pointer;
+        background: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-size: 30px;
+    }
+
+    // Border radius handler
     .documentDecorations-borderRadius {
-        grid-column: 3;
-        grid-row: 4;
+        position: absolute;
         border-radius: 100%;
-        background: black;
-        height: 8;
-        right: -12;
-        top: 12;
-        position: relative;
+        background: $medium-gray;
+        height: 10;
+        width: 10;
         pointer-events: all;
         cursor: nwse-resize;
-
-        .borderRadiusTooltip {
-            width: 10px;
-            height: 10px;
-            position: absolute;
-        }
     }
 
-    .documentDecorations-rotation {
-        background: transparent;
-        right: -15;
+    .documentDecorations-rotationPath {
+        position: absolute;
+        width: 100%;
+        height: 0;
+        transform: translate(0px, -25%);
+        padding-bottom: 100%;
+        border-radius: 100%;
+        border: solid $medium-gray 10px;
     }
 
     .documentDecorations-topLeftResizer,
@@ -146,30 +163,6 @@ $linkGap: 3px;
         grid-column: 3;
     }
 
-    .documentDecorations-rotation,
-    .documentDecorations-borderRadius {
-        grid-column: 3;
-        grid-row: 4;
-        border-radius: 100%;
-        background: black;
-        height: 8;
-        right: -12;
-        top: 12;
-        position: relative;
-        pointer-events: all;
-        cursor: nwse-resize;
-
-        .borderRadiusTooltip {
-            width: 10px;
-            height: 10px;
-            position: absolute;
-        }
-    }
-    .documentDecorations-rotation {
-        background: transparent;
-        right: -15;
-    }
-
     .documentDecorations-topLeftResizer,
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 17e135689..59675c986 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -10,7 +10,7 @@ import { InkField } from '../../fields/InkField';
 import { ComputedField, ScriptField } from '../../fields/ScriptField';
 import { Cast, FieldValue, NumCast, StrCast } from '../../fields/Types';
 import { GetEffectiveAcl } from '../../fields/util';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents, numberValue, numbersAlmostEqual } from '../../Utils';
 import { Docs } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
@@ -30,6 +30,7 @@ import { DocumentView } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { ImageBox } from './nodes/ImageBox';
 import React = require('react');
+import { Colors } from './global/globalEnums';
 
 @observer
 export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> {
@@ -56,6 +57,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @observable public pushIcon: IconProp = 'arrow-alt-circle-up';
     @observable public pullIcon: IconProp = 'arrow-alt-circle-down';
     @observable public pullColor: string = 'white';
+    @observable private _showRotationPath: boolean = false;
 
     constructor(props: any) {
         super(props);
@@ -262,27 +264,43 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     };
 
     onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
-
+ 
+    /**
+     * Handles setting up events when user clicks on the border radius editor
+     * @param e PointerEvent
+     */
+    @action
     onRadiusDown = (e: React.PointerEvent): void => {
         this._resizeUndo = UndoManager.StartBatch('DocDecs set radius');
+        // Call util move event function
         setupMoveUpEvents(
-            this,
-            e,
+            this, // target
+            e, // pointerEvent
             (e, down) => {
-                const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
+                const x = this.Bounds.x + 3;
+                const y = this.Bounds.y + 3;
+                const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
+                let dist = Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y));
+                if (e.clientX < x && e.clientY < y) dist = 0
                 SelectionManager.Views()
                     .map(dv => dv.props.Document)
-                    .map(doc => (doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)))
-                    .map(d => (d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`));
+                    .map(doc => {
+                        const docMax = Math.min(NumCast(doc.width)/2, NumCast(doc.height)/2);
+                        const ratio = dist/maxDist;
+                        const radius = Math.min(1, ratio) * docMax;
+                        doc.borderRounding = `${radius}px`;
+                    }
+                    );
                 return false;
-            },
-            e => this._resizeUndo?.end(),
-            e => {}
+            }, // moveEvent
+            e => this._resizeUndo?.end(), // upEvent
+            e => {} // clickEvent
         );
     };
 
     @action
     onRotateDown = (e: React.PointerEvent): void => {
+        this._showRotationPath = true;
         const rotateUndo = UndoManager.StartBatch('rotatedown');
         const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
         const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
@@ -299,11 +317,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     SelectionManager.Views().forEach(dv => (dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - (angle * 180) / Math.PI));
                 }
                 return false;
-            },
+            }, // moveEvent
             () => {
+                console.log('up')
+                action(() => this._showRotationPath = false);
                 rotateUndo?.end();
                 UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
-            },
+            }, // upEvent
             emptyFunction
         );
     };
@@ -614,11 +634,20 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
         bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
 
+        // Rotation constants: Only allow rotation on ink and images
         const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
-        const resizerScheme = colorScheme ? 'documentDecorations-resizer' + colorScheme : '';
-
         const rotation = NumCast(seldoc.rootDoc._jitterRotation);
+        
+        const resizerScheme = colorScheme ? 'documentDecorations-resizer' + colorScheme : '';
 
+        // Radius constants
+        const borderRadius = numberValue(StrCast(seldoc.rootDoc.borderRounding));
+        const docMax = Math.min(NumCast(seldoc.rootDoc.width)/2, NumCast(seldoc.rootDoc.height)/2);
+        const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
+        const radiusHandle = (borderRadius / docMax) * maxDist;
+        const radiusHandleLocation = Math.min(radiusHandle, maxDist)
+        const reachedMax:boolean = numbersAlmostEqual(radiusHandleLocation, maxDist);
+        console.log(reachedMax);
         return (
             <div className={`documentDecorations${colorScheme}`}>
                 <div
@@ -646,7 +675,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             key="container"
                             style={{
                                 transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
-                                transformOrigin: `8px 26px`,
+                                transformOrigin: `50% 50%`,
                                 width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
                                 height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px',
                             }}>
@@ -671,7 +700,16 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                             {'⟲'}
                                         </div>
                                     )}
-                                    <div key="br" className={`documentDecorations-borderRadius`} onPointerDown={this.onRadiusDown} onContextMenu={e => e.preventDefault()} />
+                                    {this._showRotationPath == true && (
+                                        <div className={`documentDecorations-rotationPath`}>
+
+                                        </div>
+                                    )}
+                                    <div key="rad" style={{
+                                        background: `${reachedMax ? Colors.ERROR_RED : undefined}`,
+                                        left:`${radiusHandleLocation + 3}`,
+                                        top:`${radiusHandleLocation + 23}`
+                                    }} className={`documentDecorations-borderRadius`} onPointerDown={this.onRadiusDown} onContextMenu={e => e.preventDefault()} />
                                 </>
                             )}
 
diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx
index 56779c37c..610c2b102 100644
--- a/src/client/views/global/globalEnums.tsx
+++ b/src/client/views/global/globalEnums.tsx
@@ -8,6 +8,7 @@ export enum Colors {
     MEDIUM_BLUE_ALT = "#4476f73d", // REDUCED OPACITY
     LIGHT_BLUE = "#BDDDF5",
     PINK = "#E0217D",
+    ERROR_RED = "#ff0033",
     YELLOW = "#F5D747",
     DROP_SHADOW = "#32323215",
 }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index bedc97575..284584a3d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -170,6 +170,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 width: this.panelWidth(),
                 height: this.panelHeight(),
                 transform: this.transform,
+                transformOrigin: '50% 50%',
                 transition: this.dataProvider?.transition ?? (this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition)),
                 zIndex: this.ZInd,
                 mixBlendMode: mixBlendMode,