diff options
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 43 |
1 files changed, 22 insertions, 21 deletions
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> ); |