From a257a76a1c54ffb64f95eea3894ee2b6ae35cbf7 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Sat, 2 Jul 2022 15:49:42 -0700
Subject: Update DocumentDecorations.tsx

---
 src/client/views/DocumentDecorations.tsx | 43 ++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 59675c986..8b83eaeb2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -57,7 +57,9 @@ 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;
+    @observable private _isRotating: boolean = false;
+    @observable private _isRounding: boolean = false;
+    @observable private _isResizing: boolean = false;
 
     constructor(props: any) {
         super(props);
@@ -271,6 +273,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
      */
     @action
     onRadiusDown = (e: React.PointerEvent): void => {
+        this._isRounding = true;
         this._resizeUndo = UndoManager.StartBatch('DocDecs set radius');
         // Call util move event function
         setupMoveUpEvents(
@@ -293,17 +296,20 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     );
                 return false;
             }, // moveEvent
-            e => this._resizeUndo?.end(), // upEvent
+            action(e => {
+                this._isRounding = false;
+                this._resizeUndo?.end()
+            }), // upEvent
             e => {} // clickEvent
         );
     };
 
     @action
     onRotateDown = (e: React.PointerEvent): void => {
-        this._showRotationPath = true;
+        this._isRotating = 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 };
+        const centerPoint = { X: (this.Bounds.x + this.Bounds.r) / 2, Y: (this.Bounds.y + this.Bounds.b) / 2 };
         setupMoveUpEvents(
             this,
             e,
@@ -318,12 +324,12 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 }
                 return false;
             }, // moveEvent
-            () => {
+            action(() => {
                 console.log('up')
-                action(() => this._showRotationPath = false);
+                this._isRotating = false;
                 rotateUndo?.end();
                 UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
-            }, // upEvent
+            }), // upEvent
             emptyFunction
         );
     };
@@ -645,9 +651,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         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 radiusHandleLocation = Math.min(radiusHandle, maxDist);
         const reachedMax:boolean = numbersAlmostEqual(radiusHandleLocation, maxDist);
-        console.log(reachedMax);
+        console.log("reachedMax: ", reachedMax);
         return (
             <div className={`documentDecorations${colorScheme}`}>
                 <div
@@ -669,13 +675,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     }}
                 />
                 {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? null : (
-                    <>
+                    <div>
                         <div
                             className="documentDecorations-container"
                             key="container"
                             style={{
-                                transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
-                                transformOrigin: `50% 50%`,
+                                transform: `translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
+                                transformOrigin: `50% calc(50% + 10px)`,
                                 width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
                                 height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px',
                             }}>
@@ -683,7 +689,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             {titleArea}
                             {hideOpenButton ? null : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Tab (ctrl: as alias, shift: in new collection)')}
                             {hideResizers ? null : (
-                                <>
+                                <div>
                                     <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
                                     <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
                                     <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
@@ -700,17 +706,12 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                             {'⟲'}
                                         </div>
                                     )}
-                                    {this._showRotationPath == true && (
-                                        <div className={`documentDecorations-rotationPath`}>
-
-                                        </div>
-                                    )}
                                     <div key="rad" style={{
-                                        background: `${reachedMax ? Colors.ERROR_RED : undefined}`,
+                                        background: `${reachedMax === true ? Colors.ERROR_RED : undefined}`,
                                         left:`${radiusHandleLocation + 3}`,
                                         top:`${radiusHandleLocation + 23}`
                                     }} className={`documentDecorations-borderRadius`} onPointerDown={this.onRadiusDown} onContextMenu={e => e.preventDefault()} />
-                                </>
+                                </div>
                             )}
 
                             {hideDocumentButtonBar ? null : (
@@ -724,7 +725,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                 </div>
                             )}
                         </div>
-                    </>
+                    </div>
                 )}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2