the last change seems to cause some major performance problem, so reverting.

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 >
         )