diff options
Diffstat (limited to 'src/client/views/InkControls.tsx')
| -rw-r--r-- | src/client/views/InkControls.tsx | 120 |
1 files changed, 63 insertions, 57 deletions
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx index 6213a4075..4df7ee813 100644 --- a/src/client/views/InkControls.tsx +++ b/src/client/views/InkControls.tsx @@ -1,20 +1,22 @@ import React = require("react"); -import { observable, action } from "mobx"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { setupMoveUpEvents, emptyFunction } from "../../Utils"; -import { UndoManager } from "../util/UndoManager"; -import { ControlPoint, InkData, PointData } from "../../fields/InkField"; -import { Transform } from "../util/Transform"; -import { Colors } from "./global/globalEnums"; import { Doc } from "../../fields/Doc"; +import { ControlPoint, InkData, PointData } from "../../fields/InkField"; import { listSpec } from "../../fields/Schema"; import { Cast } from "../../fields/Types"; +import { setupMoveUpEvents } from "../../Utils"; +import { Transform } from "../util/Transform"; +import { UndoManager } from "../util/UndoManager"; +import { Colors } from "./global/globalEnums"; +import { InkStrokeProperties } from "./InkStrokeProperties"; export interface InkControlProps { inkDoc: Doc; - data: InkData; - addedPoints: PointData[]; + inkCtrlPoints: InkData; + screenCtrlPoints: InkData; + inkStrokeSamplePts: PointData[]; + screenStrokeSamplePoints: PointData[]; format: number[]; ScreenToLocalTransform: () => Transform; } @@ -87,56 +89,60 @@ export class InkControls extends React.Component<InkControlProps> { if (!formatInstance) return (null); // Accessing the current ink's data and extracting all control points. - const data = this.props.data; - const controlPoints: ControlPoint[] = []; - if (data.length >= 4) { - for (let i = 0; i <= data.length - 4; i += 4) { - controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); - controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); - } + const scrData = this.props.screenCtrlPoints; + const sreenCtrlPoints: ControlPoint[] = []; + for (let i = 0; i <= scrData.length - 4; i += 4) { + sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i }); + sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 }); + } + + const inkData = this.props.inkCtrlPoints; + const inkCtrlPts: ControlPoint[] = []; + for (let i = 0; i <= inkData.length - 4; i += 4) { + inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i }); + inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 }); } - const addedPoints = this.props.addedPoints; - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; - return ( - <> - {addedPoints.map((pts, i) => - <svg height="10" width="10" key={`add${i}`}> - <circle - cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - r={strokeWidth / 1.5} - stroke={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"} - strokeWidth={0} fill={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"} - onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }} - onMouseEnter={() => this.onEnterAddPoint(i)} - onMouseLeave={this.onLeaveAddPoint} - pointerEvents="all" - cursor="all-scroll" - /> - </svg> - )} - {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 * 1.5 : strokeWidth} - width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} - strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE} - fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE} - onPointerDown={(e) => { - this.changeCurrPoint(control.I); - this.onControlDown(e, control.I); - }} - onMouseEnter={() => this.onEnterControl(i)} - onMouseLeave={this.onLeaveControl} - pointerEvents="all" - cursor="default" - /> - </svg> - )} - </> + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; + const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4; + return (<svg> + {/* should really have just one circle here that represents the neqraest point on the stroke to the users hover point. + This points should be passed as a prop from InkingStroke's UI which should set it in its onPointerOver method */} + {this.props.screenStrokeSamplePoints.map((pts, i) => + <circle key={i} + cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} + cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} + r={screenSpaceLineWidth * 4} + fill={this._overAddPoint === i ? "#00007777" : "transparent"} + stroke={this._overAddPoint === i ? "#00007777" : "transparent"} + strokeWidth={0} + onPointerDown={() => formatInstance?.addPoints(this.props.inkStrokeSamplePts[i].X, this.props.inkStrokeSamplePts[i].Y, this.props.inkStrokeSamplePts, i, inkCtrlPts)} + onMouseEnter={() => this.onEnterAddPoint(i)} + onMouseLeave={this.onLeaveAddPoint} + pointerEvents="all" + cursor="all-scroll" + /> + )} + {sreenCtrlPoints.map((control, i) => + <rect key={i} + x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2} + y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2} + height={rectHdlSize(i)} + width={rectHdlSize(i)} + strokeWidth={screenSpaceLineWidth / 2} + stroke={Colors.MEDIUM_BLUE} + fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE} + onPointerDown={(e) => { + this.changeCurrPoint(control.I); + this.onControlDown(e, control.I); + }} + onMouseEnter={() => this.onEnterControl(i)} + onMouseLeave={this.onLeaveControl} + pointerEvents="all" + cursor="default" + /> + )} + </svg> ); } }
\ No newline at end of file |