diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 1 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 44 |
2 files changed, 30 insertions, 15 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2500eafab..2d82ffdf9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -984,6 +984,7 @@ export namespace Docs { I.strokeEndMarker = arrowEnd; I.strokeDash = dash; I.tool = tool; + I.fitWidth = true; I['text-align'] = 'center'; I.title = 'ink'; I.x = options.x as number; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 91fb4e4df..d79cf014d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -310,6 +310,15 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P e => {} // clickEvent ); }; + + setRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => { + const newloccentern = seldocview.props.ScreenToLocalTransform().transformPoint(rotCenter[0], rotCenter[1]); + const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2]; + const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.rootDoc._jitterRotation) / 180) * Math.PI); + seldocview.rootDoc.rotateCenterX = final.x / NumCast(seldocview.layoutDoc._width); + seldocview.rootDoc.rotateCenterY = final.y / NumCast(seldocview.layoutDoc._height); + }; + @action onRotateCenterDown = (e: React.PointerEvent): void => { this._isRotating = true; @@ -318,15 +327,10 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - const newloccentern = seldocview.props.ScreenToLocalTransform().transformPoint(this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]); - const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2]; - const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.rootDoc._jitterRotation) / 180) * Math.PI); - seldocview.rootDoc.rotateCenterX = final.x / NumCast(seldocview.layoutDoc._width); - seldocview.rootDoc.rotateCenterY = final.y / NumCast(seldocview.layoutDoc._height); - + this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]); return false; }), // moveEvent - action(() => {}), // upEvent + action(action(() => (this._isRotating = false))), // upEvent action((e, doubleTap) => { if (doubleTap) { seldocview.rootDoc.rotateCenterX = 0.5; @@ -342,8 +346,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P const rcScreen = { X: this.rotCenter[0], Y: this.rotCenter[1] }; const rotateUndo = UndoManager.StartBatch('rotatedown'); const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke); - const centerPoint = { X: (this.Bounds.x + this.Bounds.r) / 2, Y: (this.Bounds.y + this.Bounds.b) / 2 }; + const centerPoint = this.rotCenter.slice(); const infos = new Map<Doc, { unrotatedDocPos: { x: number; y: number }; startRotCtr: { x: number; y: number }; accumRot: number }>(); + const seldocview = SelectionManager.Views()[0]; SelectionManager.Views().forEach(dv => { const accumRot = (NumCast(dv.rootDoc._jitterRotation) / 180) * Math.PI; const localRotCtr = dv.props.ScreenToLocalTransform().transformPoint(rcScreen.X, rcScreen.Y); @@ -372,18 +377,25 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] }; const deltaAng = InkStrokeProperties.angleChange(movedPoint, previousPoint, rcScreen); if (selectedInk.length) { - deltaAng && InkStrokeProperties.Instance.rotateInk(selectedInk, -deltaAng, centerPoint); + deltaAng && InkStrokeProperties.Instance.rotateInk(selectedInk, deltaAng, rcScreen); + this.setRotateCenter(seldocview, centerPoint); } else { infoRot(deltaAng); } return false; }, // moveEvent action(() => { - const dv = SelectionManager.Views()[0]; - const oldRotation = NumCast(dv.rootDoc._jitterRotation); + const oldRotation = NumCast(seldocview.rootDoc._jitterRotation); const diff = oldRotation - Math.round(oldRotation / 45) * 45; if (Math.abs(diff) < 5) { - infoRot(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true); + if (selectedInk.length) { + InkStrokeProperties.Instance.rotateInk(selectedInk, ((Math.round(oldRotation / 45) * 45 - oldRotation) / 180) * Math.PI, rcScreen); + } else { + infoRot(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true); + } + } + if (selectedInk.length) { + this.setRotateCenter(seldocview, centerPoint); } this._isRotating = false; rotateUndo?.end(); @@ -830,9 +842,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P top: this.Bounds.y, pointerEvents: 'none', }}> - <div className="documentDecorations-rotation" style={{ pointerEvents: 'all' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}> - <IconButton icon={<FaUndo />} isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} /> - </div> + {this._isRotating ? null : ( + <div className="documentDecorations-rotation" style={{ pointerEvents: 'all' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}> + <IconButton icon={<FaUndo />} isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} /> + </div> + )} </div> {!this._showRotCenter ? null : ( <div |