diff options
Diffstat (limited to 'src/client/views/InkingCanvas.tsx')
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 27 |
1 files changed, 21 insertions, 6 deletions
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index a971264b9..fd9e6826a 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,8 +137,20 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { render() { // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page == -1 || strokeData.page == curPage) + let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Highlighter) + paths.push(<InkingStroke key={id} id={id} + line={strokeData.pathData} + color={strokeData.color} + width={strokeData.width} + tool={strokeData.tool} + deleteCallback={this.removeLine} />) + return paths; + }, [] as JSX.Element[]); + let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Pen) paths.push(<InkingStroke key={id} id={id} line={strokeData.pathData} color={strokeData.color} @@ -147,14 +159,17 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { deleteCallback={this.removeLine} />) return paths; }, [] as JSX.Element[]); - let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; return ( <div className="inkingCanvas" > - <svg className={`inkingCanvas-paths${svgCanvasStyle}`} onPointerDown={this.onPointerDown} > - {paths} - </svg> + <svg className={`inkingCanvas-paths`} onPointerDown={this.onPointerDown} /> {this.props.children} + <svg className={`inkingCanvas-paths-markers`} > + {markerpaths} + </svg> + <svg className={`inkingCanvas-paths-ink`} > + {penpaths} + </svg> </div > ) } |