fixed inking problem - blinking cursors don't play nicely with ink

4 files changed, 20 insertions, 33 deletions

diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index fc871e108..15dfb255a 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -19,19 +19,12 @@ interface InkCanvasProps {
 @observer
 export class InkingCanvas extends React.Component<InkCanvasProps> {
     static InkOffset: number = 50000;
+    private _currentStrokeId: string = "";
     public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean {
-        let inside = false;
-        stroke.pathData.map(val => {
-            if (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset &&
+        return stroke.pathData.reduce((inside, val) => inside ||
+            (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset &&
                 selRect.top < val.y - InkingCanvas.InkOffset && selRect.top + selRect.height > val.y - InkingCanvas.InkOffset)
-                inside = true;
-        });
-        return inside
-    }
-    private _currentStrokeId: string = "";
-
-    constructor(props: Readonly<InkCanvasProps>) {
-        super(props);
+            , false);
     }
 
     @computed
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 87b5c43d8..52111c711 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -21,21 +21,14 @@ export class InkingStroke extends React.Component<StrokeProps> {
     @observable private _strokeColor: string = this.props.color;
     @observable private _strokeWidth: string = this.props.width;
 
-    deleteStroke = (e: React.MouseEvent): void => {
+    deleteStroke = (e: React.PointerEvent): void => {
         if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) {
             this.props.deleteCallback(this.props.id);
         }
     }
 
     parseData = (line: Array<{ x: number, y: number }>): string => {
-        if (line.length === 0) {
-            return "";
-        }
-        const pathData = "M " +
-            line.map(p => {
-                return p.x + " " + p.y;
-            }).join(" L ");
-        return pathData;
+        return !line.length ? "" : "M " + line.map(p => p.x + " " + p.y).join(" L ");
     }
 
     createStyle() {
@@ -57,8 +50,8 @@ export class InkingStroke extends React.Component<StrokeProps> {
 
         return (
             <path className={(this._strokeTool === InkTool.Highlighter) ? "highlight" : ""}
-                d={pathData} style={pathStyle} strokeLinejoin="round" strokeLinecap="round"
-                onMouseOver={this.deleteStroke} onMouseDown={this.deleteStroke} />
+                d={pathData} style={{ ...pathStyle, pointerEvents: "all" }} strokeLinejoin="round" strokeLinecap="round"
+                onPointerOver={this.deleteStroke} onPointerDown={this.deleteStroke} />
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
index 7d6d5aaab..21210be2b 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
@@ -12,12 +12,12 @@
 }
 
 //this is an animation for the blinking cursor!
-@keyframes blink {
-	0% {opacity: 0}
-	49%{opacity: 0}
-	50% {opacity: 1}
-}
+// @keyframes blink {
+// 	0% {opacity: 0}
+// 	49%{opacity: 0}
+// 	50% {opacity: 1}
+// }
 
-#previewCursor {
-     animation: blink 1s infinite;
-}
\ No newline at end of file
+// #previewCursor {
+//      animation: blink 1s infinite;
+// }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
index 339e056a8..877de8846 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../../fields/Document";
 import { Documents } from "../../../documents/Documents";
@@ -84,11 +84,12 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
         let p = this.props.getContainerTransform().transformPoint(this._lastX, this._lastY);
         if (this._visible && this._previewDivRef.current)
             this._previewDivRef.current!.focus();
+        trace();
         return (
-            <div className="previewCursorView" tabIndex={0} ref={this._previewDivRef} onBlur={this.onBlur} onPointerDown={this.onPointerDown}>
+            <div className="previewCursorView" onBlur={this.onBlur} onPointerDown={this.onPointerDown}>
                 {this.props.children}
                 {!this._visible ? (null) :
-                    <div className="previewCursor" id="previewCursor" style={{ transform: `translate(${p[0]}px, ${p[1]}px)` }}>I</div>}
+                    <div className="previewCursor" tabIndex={0} ref={this._previewDivRef} id="previewCursor" style={{ transform: `translate(${p[0]}px, ${p[1]}px)` }}>I</div>}
             </div>
         )
     }