diff options
Diffstat (limited to 'src/client/views/InkHandles.tsx')
| -rw-r--r-- | src/client/views/InkHandles.tsx | 25 |
1 files changed, 11 insertions, 14 deletions
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index 0b24c3c32..afe94cdfb 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -1,22 +1,20 @@ import React = require("react"); -import { observable, action } from "mobx"; +import { action } from "mobx"; import { observer } from "mobx-react"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { setupMoveUpEvents, emptyFunction } from "../../Utils"; -import { UndoManager } from "../util/UndoManager"; -import { InkData, HandlePoint, HandleLine } from "../../fields/InkField"; -import { Transform } from "../util/Transform"; import { Doc } from "../../fields/Doc"; -import { listSpec } from "../../fields/Schema"; +import { HandleLine, HandlePoint, InkData } from "../../fields/InkField"; import { List } from "../../fields/List"; +import { listSpec } from "../../fields/Schema"; import { Cast } from "../../fields/Types"; +import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import { Transform } from "../util/Transform"; +import { UndoManager } from "../util/UndoManager"; import { Colors } from "./global/globalEnums"; -import { GestureOverlay } from "./GestureOverlay"; +import { InkStrokeProperties } from "./InkStrokeProperties"; export interface InkHandlesProps { inkDoc: Doc; data: InkData; - shape?: string; format: number[]; ScreenToLocalTransform: () => Transform; } @@ -70,7 +68,6 @@ export class InkHandles extends React.Component<InkHandlesProps> { // Accessing the current ink's data and extracting all handle points and handle lines. const data = this.props.data; - const shape = this.props.shape; const handlePoints: HandlePoint[] = []; const handleLines: HandleLine[] = []; if (data.length >= 4) { @@ -85,7 +82,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); } } - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; return ( <> @@ -94,7 +91,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - r={strokeWidth / 2} + r={screenSpaceLineWidth * 2} strokeWidth={0} fill={Colors.MEDIUM_BLUE} onPointerDown={(e) => this.onHandleDown(e, pts.I)} @@ -110,7 +107,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} + strokeWidth={screenSpaceLineWidth} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> <line x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} @@ -118,7 +115,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} + strokeWidth={screenSpaceLineWidth} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> </svg>)} </> |