diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/InkControls.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/InkHandles.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 4 |
3 files changed, 13 insertions, 13 deletions
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx index 46377380a..b62239c4f 100644 --- a/src/client/views/InkControls.tsx +++ b/src/client/views/InkControls.tsx @@ -96,8 +96,8 @@ export class InkControls extends React.Component<InkControlProps> { } } const addedPoints = this.props.addedPoints; - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; - + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; + const rectHdlSize = this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4; return ( <> {addedPoints.map((pts, i) => @@ -119,11 +119,11 @@ export class InkControls extends React.Component<InkControlProps> { {controlPoints.map((control, i) => <svg height="10" width="10" key={`ctrl${i}`}> <rect - x={(control.X - left - strokeWidth / 2) * scaleX} - y={(control.Y - top - strokeWidth / 2) * scaleY} - height={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3} - width={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3} - strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE} + x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize / 2} + y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize / 2} + height={rectHdlSize} + width={rectHdlSize} + strokeWidth={screenSpaceLineWidth / 2} stroke={Colors.MEDIUM_BLUE} fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE} onPointerDown={(e) => { this.changeCurrPoint(control.I); diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index b9f75f8d7..4e3a842d0 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -83,7 +83,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 ( <> @@ -92,7 +92,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)} @@ -108,7 +108,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} @@ -116,7 +116,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>)} </> diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 771419937..06d15a108 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -146,12 +146,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume inkDoc={inkDoc} data={screenPts} addedPoints={addedPoints} - format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]} + format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]} ScreenToLocalTransform={this.props.ScreenToLocalTransform} /> <InkHandles inkDoc={inkDoc} data={screenPts} - format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]} + format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]} ScreenToLocalTransform={this.props.ScreenToLocalTransform} /> </> : ""} </div> |