diff options
| -rw-r--r-- | src/client/views/InkingCanvas.scss | 11 | ||||
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 28 |
2 files changed, 28 insertions, 11 deletions
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 0e2d7f8c1..fa8b8798a 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,14 +1,11 @@ @import "global_variables"; -.inkingCanvas-paths, .inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { position: absolute; top: -50000px; left: -50000px; width: 100000px; height: 100000px; - .highlight { - mix-blend-mode: multiply; - } .inkingCanvas-children { transform: translate(50000px, 50000px); pointer-events: none; @@ -17,8 +14,12 @@ pointer-events: auto; } -.inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { 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 9ae3ade47..86a7a4456 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, trace } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../fields/Document"; import { FieldWaiting } from "../../fields/Field"; @@ -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,13 +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" : ""; + trace(); return ( <div className="inkingCanvas" > + <svg className={`inkingCanvas-paths`} onPointerDown={this.onPointerDown} /> {this.props.children} - <svg className={`inkingCanvas-paths${svgCanvasStyle}`} onPointerDown={this.onPointerDown} > - {paths} + <svg className={`inkingCanvas-paths-markers`} > + {markerpaths} + </svg> + <svg className={`inkingCanvas-paths-ink`} > + {penpaths} </svg> </div > ) |