aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx40
-rw-r--r--src/client/views/GestureOverlay.tsx19
-rw-r--r--src/client/views/InkingStroke.tsx6
-rw-r--r--src/client/views/MainView.tsx3
4 files changed, 50 insertions, 18 deletions
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<HTMLInputElement>();
@@ -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 (<div className="documentDecorations" style={{ background: CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : "" }} >
<div className="documentDecorations-background" style={{
@@ -473,6 +502,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
}}>
{!canDelete ? <div /> : 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<FieldViewProps, InkDocume
const inkLine = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false);
// Thin blue line indicating that the current ink stroke is selected.
- const selectedLine = InteractionUtils.CreatePolyline(data, left, top, Colors.MEDIUM_BLUE, strokeWidth, strokeWidth / 6, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
- StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false);
+ // const selectedLine = InteractionUtils.CreatePolyline(data, left, top, Colors.MEDIUM_BLUE, strokeWidth, strokeWidth / 6, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
+ // StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false);
// Invisible polygonal line that enables the ink to be selected by the user.
const clickableLine = InteractionUtils.CreatePolyline(data, left, top, "transparent", strokeWidth, strokeWidth + 15, StrCast(this.layoutDoc.strokeBezier),
StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, scaleX, scaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", 0.0, true);
@@ -145,7 +145,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
{clickableLine}
{inkLine}
- {this.props.isSelected() ? selectedLine : ""}
+ {/* {this.props.isSelected() ? selectedLine : ""} */}
{this.props.isSelected() && this._properties?._controlButton ?
<>
<InkControls
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b0b8d7f41..1ce363b0a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,7 @@ import { SearchBox } from './search/SearchBox';
import { DefaultStyleProvider, DashboardStyleProvider, StyleProp } from './StyleProvider';
import { TopBar } from './topbar/TopBar';
import { Colors } from './global/globalEnums';
+import { DocumentType } from '../documents/DocumentTypes';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -592,7 +593,7 @@ export class MainView extends React.Component {
<CaptureManager />
<GroupManager />
<GoogleAuthenticationManager />
- <DocumentDecorations boundsLeft={this.leftOffset} boundsTop={this.topOffset} />
+ <DocumentDecorations PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} boundsLeft={this.leftOffset} boundsTop={this.topOffset} />
{this.search}
{LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
{DocumentLinksButton.LinkEditorDocView ? <LinkMenu docView={DocumentLinksButton.LinkEditorDocView} changeFlyout={emptyFunction} /> : (null)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:10:29 +0000