diff options
| -rw-r--r-- | src/client/views/InkingCanvas.scss | 8 | ||||
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 25 |
2 files changed, 7 insertions, 26 deletions
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index abe6990b6..0e2d7f8c1 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,6 +1,6 @@ @import "global_variables"; -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { +.inkingCanvas-paths, .inkingCanvas-paths-none { position: absolute; top: -50000px; left: -50000px; @@ -17,12 +17,8 @@ pointer-events: auto; } -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { +.inkingCanvas-paths-none { pointer-events: none; - z-index: 10000; // overlays ink on top of everything cursor: "arrow"; } -.inkingCanvas-paths-markers { - mix-blend-mode: multiply; -} diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index fd9e6826a..9ae3ade47 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,20 +137,8 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { render() { // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - 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) + let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if (strokeData.page == -1 || strokeData.page == curPage) paths.push(<InkingStroke key={id} id={id} line={strokeData.pathData} color={strokeData.color} @@ -159,16 +147,13 @@ 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`} onPointerDown={this.onPointerDown} /> {this.props.children} - <svg className={`inkingCanvas-paths-markers`} > - {markerpaths} - </svg> - <svg className={`inkingCanvas-paths-ink`} > - {penpaths} + <svg className={`inkingCanvas-paths${svgCanvasStyle}`} onPointerDown={this.onPointerDown} > + {paths} </svg> </div > ) |