1 files changed, 66 insertions, 0 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
new file mode 100644
index 000000000..d724421d3
--- /dev/null
+++ b/src/client/views/InkingStroke.tsx
@@ -0,0 +1,66 @@
+import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { InkingControl } from "./InkingControl";
+import { InkTool } from "../../fields/InkField";
+import React = require("react");
+
+
+interface StrokeProps {
+    id: string;
+    line: Array<{ x: number, y: number }>;
+    color: string;
+    width: string;
+    tool: InkTool;
+    deleteCallback: (index: string) => void;
+}
+
+@observer
+export class InkingStroke extends React.Component<StrokeProps> {
+
+    @observable private _strokeTool: InkTool = this.props.tool;
+    @observable private _strokeColor: string = this.props.color;
+    @observable private _strokeWidth: string = this.props.width;
+
+    private _canvasColor: string = "#cdcdcd";
+
+    deleteStroke = (e: React.MouseEvent): 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;
+    }
+
+    createStyle() {
+        switch (this._strokeTool) {
+            // add more tool styles here
+            default:
+                return {
+                    fill: "none",
+                    stroke: this._strokeColor,
+                    strokeWidth: this._strokeWidth + "px",
+                }
+        }
+    }
+
+
+    render() {
+        let pathStyle = this.createStyle();
+        let pathData = this.parseData(this.props.line);
+
+        return (
+            <path className={(this._strokeTool === InkTool.Highlighter) ? "highlight" : ""}
+                d={pathData} style={pathStyle} strokeLinejoin="round" strokeLinecap="round"
+                onMouseOver={this.deleteStroke} onMouseDown={this.deleteStroke} />
+        )
+    }
+}
+\ No newline at end of file