From 8cb650d9fb542465525c198c1f93f6aba7256e0b Mon Sep 17 00:00:00 2001 From: vkalev Date: Thu, 2 Sep 2021 12:04:02 -0400 Subject: working on moving ink UI to DocumentDecorations --- src/client/views/DocumentDecorations.tsx | 40 ++++++++++++++++++++++++++++---- src/client/views/GestureOverlay.tsx | 19 ++++++++------- src/client/views/InkingStroke.tsx | 6 ++--- src/client/views/MainView.tsx | 3 ++- 4 files changed, 50 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 118d2e7c7..244d14f3a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -28,9 +28,11 @@ import { DocumentView } from "./nodes/DocumentView"; import React = require("react"); import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { DateField } from '../../fields/DateField'; +import { InteractionUtils } from '../util/InteractionUtils'; +import { Colors } from './global/globalEnums'; @observer -export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> { +export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> { static Instance: DocumentDecorations; private _resizeHdlId = ""; private _keyinput = React.createRef(); @@ -391,10 +393,10 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] })) .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => { Doc.GetProto(doc).data = new InkField(inkPts.map(ipt => // (new x — oldx) + newWidth * (oldxpoint /oldWidth) - ({ - X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width, - Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height - }))); + ({ + X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width, + Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height + }))); Doc.SetNativeWidth(doc, undefined); Doc.SetNativeHeight(doc, undefined); }); @@ -453,7 +455,34 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b const borderRadiusDraggerWidth = 15; 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)); + const useRotation = seldoc.rootDoc.type === DocumentType.INK; + const docView = SelectionManager.Views().lastElement().docView; + let selectedLine = null; + + if (useRotation && docView) { + const inkData = Cast(SelectionManager.Views().lastElement().rootDoc.data, InkField)?.inkData ?? [{ X: 0, Y: 0 }]; + const inkDoc = SelectionManager.Views().lastElement().layoutDoc; + + inkData.map((point) => { docView.screenToLocal().inverse().transformPoint(point.X, point.Y); }); + + const strokeWidth = 4; + const lineTop = Math.min(...inkData.map(p => p.Y)); + const lineBottom = Math.max(...inkData.map(p => p.Y)); + const lineLeft = Math.min(...inkData.map(p => p.X)); + const lineRight = Math.max(...inkData.map(p => p.X)); + const left = lineLeft - strokeWidth / 2; + const top = lineTop - strokeWidth / 2; + const right = lineRight + strokeWidth / 2; + const bottom = lineBottom + strokeWidth / 2; + const width = Math.max(1, right - left); + const height = Math.max(1, bottom - top); + const scaleX = width === strokeWidth ? 1 : (this.props.PanelWidth - strokeWidth) / (width - strokeWidth); + const scaleY = height === strokeWidth ? 1 : (this.props.PanelHeight - strokeWidth) / (height - strokeWidth); + + selectedLine = InteractionUtils.CreatePolyline(inkData, left, top, Colors.MEDIUM_BLUE, 4, 4, StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"), + StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker), StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false); + } return (
{!canDelete ?
: topBtn("close", "times", undefined, this.onCloseClick, "Close")} {seldoc.props.hideDecorationTitle || seldoc.props.Document.type === DocumentType.EQUATION ? (null) : titleArea} + {selectedLine} {seldoc.props.hideResizeHandles || seldoc.props.Document.type === DocumentType.EQUATION ? (null) : <> {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index c77521572..d0059dacc 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -688,25 +688,26 @@ export class GestureOverlay extends Touchable { case "rectangle": this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); - this._points.push({ X: right, Y: top }); this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: top }); this._points.push({ X: right, Y: top }); - this._points.push({ X: right, Y: bottom }); this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); this._points.push({ X: right, Y: bottom }); - this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); - this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); + break; + case "triangle": this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); @@ -736,11 +737,6 @@ export class GestureOverlay extends Touchable { const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom)); // Dividing the circle into four equal sections, and fitting each section to a cubic Bézier curve. - this._points.push({ X: centerX - radius, Y: centerY }); - this._points.push({ X: centerX - radius, Y: centerY + (c * radius) }); - this._points.push({ X: centerX - (c * radius), Y: centerY + radius }); - this._points.push({ X: centerX, Y: centerY + radius }); - this._points.push({ X: centerX, Y: centerY + radius }); this._points.push({ X: centerX + (c * radius), Y: centerY + radius }); this._points.push({ X: centerX + radius, Y: centerY + (c * radius) }); @@ -756,6 +752,11 @@ export class GestureOverlay extends Touchable { this._points.push({ X: centerX - radius, Y: centerY - (c * radius) }); this._points.push({ X: centerX - radius, Y: centerY }); + this._points.push({ X: centerX - radius, Y: centerY }); + this._points.push({ X: centerX - radius, Y: centerY + (c * radius) }); + this._points.push({ X: centerX - (c * radius), Y: centerY + radius }); + this._points.push({ X: centerX, Y: centerY + radius }); + break; case "line": diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7200d6da1..b619f858e 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -115,8 +115,8 @@ export class InkingStroke extends ViewBoxBaseComponent - + {this.search} {LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.LinkEditorDocView ? : (null)} -- cgit v1.2.3-70-g09d2