diff options
Diffstat (limited to 'src/client/views/InkingCanvas.tsx')
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 1cfa8d644..0037b95d0 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -78,7 +78,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { this.previousState = new Map(this.inkData); - if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { + if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) { // start the new line, saves a uuid to represent the field of the stroke this._currentStrokeId = Utils.GenerateGuid(); const data = this.inkData; @@ -87,7 +87,8 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { color: InkingControl.Instance.selectedColor, width: InkingControl.Instance.selectedWidth, tool: InkingControl.Instance.selectedTool, - page: NumCast(this.props.Document.curPage, -1) + displayTimecode: NumCast(this.props.Document.currentTimecode, -1), + creationTime: new Date().getTime() }); this.inkData = data; } @@ -120,7 +121,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { onPointerMove = (e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); - if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { + if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) { let data = this.inkData; // add points to new line as it is being drawn let strokeData = data.get(this._currentStrokeId); if (strokeData) { @@ -150,9 +151,9 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { @computed get drawnPaths() { - let curPage = NumCast(this.props.Document.curPage, -1); + let curTimecode = NumCast(this.props.Document.currentTimecode, -1); let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page === -1 || (Math.abs(Math.round(strokeData.page) - Math.round(curPage)) < 3)) { + if (strokeData.displayTimecode === -1 || (Math.abs(Math.round(strokeData.displayTimecode) - Math.round(curTimecode)) < 3)) { paths.push(<InkingStroke key={id} id={id} line={strokeData.pathData} count={strokeData.pathData.length} @@ -161,6 +162,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { color={strokeData.color} width={strokeData.width} tool={strokeData.tool} + creationTime={strokeData.creationTime} deleteCallback={this.removeLine} />); } return paths; @@ -181,9 +183,11 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { render() { let svgCanvasStyle = InkingControl.Instance.selectedTool !== InkTool.None && !this.props.Document.isBackground ? "canSelect" : "noSelect"; + let cursor = svgCanvasStyle === "canSelect" ? (InkingControl.Instance.selectedTool === InkTool.Eraser || + InkingControl.Instance.selectedTool === InkTool.Scrubber ? "pointer" : "default") : undefined; return ( <div className="inkingCanvas"> - <div className={`inkingCanvas-${svgCanvasStyle}`} onPointerDown={this.onPointerDown} /> + <div className={`inkingCanvas-${svgCanvasStyle}`} onPointerDown={this.onPointerDown} style={{ cursor: cursor }} /> {this.props.children()} {this.drawnPaths} </div > |
