Add files via upload

Author: AlexanderBaggett

canvasExample.js

@@ -0,0 +1,156 @@
+import React, { useState, useEffect,useRef } from "react";
+import debounce from 'lodash.debounce';
+
+
+const CanvasExample = props => {
+
+    const {toggle, addressInfo, backgroundImage,  ...rest} = props;
+    const canvasRef = useRef(null);
+    const [coordinates,setCoordinates] = useState([]);
+    const [polyComplete,setPolyComplete] = useState(false);
+    const hitboxSize =4;
+    const black ="rgb(0,0,0)";
+    const lightGreen = "rgba(0,255,0,0.2)";
+
+
+    useEffect(()=>{
+        debounce(() =>{
+            clearScreen();
+          },50);
+        
+    },[canvasRef.current])
+
+
+    const clearScreen = () =>{
+        let ctx = canvasRef.current.getContext("2d");
+        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    }
+    
+
+    useEffect( () => { 
+        //draw dots if there is 1 or more coordinates
+        if(coordinates.length>=1){
+            reDrawDots();
+        }
+        //draw lines if there are 2 or more coordinates
+        if(coordinates.length>=2){
+            reDrawLines();
+        }
+    },[coordinates])
+
+
+    const reDrawLines = () => {
+        let ctx = canvasRef.current.getContext("2d");
+        ctx.beginPath();
+        let first = true;
+        for(let i =0; i<coordinates.length; i++) {
+            let coord= coordinates[i];
+            if(first){
+                ctx.moveTo(coord.x,coord.y);
+                first=false;
+            }
+            else{
+                ctx.lineTo(coord.x,coord.y);
+            }
+        }
+        if(polyComplete){
+            ctx.closePath();
+            ctx.fillStyle = lightGreen;
+            ctx.fill();
+        }
+        ctx.stroke();
+    }
+
+    const reDrawDots = () => {
+        let ctx = canvasRef.current.getContext("2d");
+        for(let i =0; i<coordinates.length; i++) {
+            let coord= coordinates[i];
+            ctx.beginPath();
+            ctx.arc(coord.x,coord.y,hitboxSize,0, 2*Math.PI);
+            ctx.fillStyle = black;
+            ctx.fill();
+        }
+    }
+
+
+    const canvasClick = e => {
+        if(!polyComplete) {          
+            let first = coordinates[0];
+            let rect = canvasRef.current.getBoundingClientRect(); 
+            //client x any y are just window coords we need the coords relative to inside the canvas
+
+            let current = {x: Math.round(e.clientX  - rect.left), y: Math.round(e.clientY  - rect.top)};
+            let deepcopy = Array.from(coordinates);
+
+            //check to see if we are close enough to complete the polygon
+            if(first){
+                let distX= Math.abs(current.x - first.x);
+                let distY= Math.abs(current.y - first.y);
+                if(distX <= hitboxSize 
+                && distY <= hitboxSize
+                && deepcopy.length>2) {
+                    //if we are close enough, do not add the last coordinate, 
+                    // just complete the polygon
+                    setPolyComplete(true);
+                } else{
+                    //add the coordinate, draw the line, draw the dot
+                    deepcopy.push(current);
+                }
+            }
+            else{
+                //add the coordinate, draw the dot
+                deepcopy.push(current);
+            }
+            setCoordinates(deepcopy);
+        }
+    }
+
+
+    const resetCoords = () => {
+        clearScreen();
+        setCoordinates([]);
+        setPolyComplete(false);
+    }
+
+    const undo = () => {
+        clearScreen();
+        setCoordinates(coordinates.slice(0,-1));
+        setPolyComplete(false);
+    }
+
+    const finish = async  () => {
+
+        if(coordinates!=[]){
+            const coords= coordinates.map(c =>c.x +" " +c.y).toString();
+            //your api call here to save the coords
+        }
+    }
+
+
+    return (
+    <div>
+        {backgroundImage &&
+            <canvas
+            ref = {canvasRef}
+            onClick = {(e) => canvasClick(e) }
+            width={1000}
+            height={700}
+            style ={{borderWidth:"1px",borderColor:"black",borderStyle:"solid"
+                    ,background: 'url('+backgroundImage+')'   }}
+            > 
+
+            </canvas>
+        }
+
+        <div style={{display:'flex',flex:1,flexDirection:'row',width:'100%',paddingTop:'1rem'}}>
+            <div style={{ display:'flex', flex:1, flexDirection:'row', width:'100%'}}>
+                <button  title="Undo" onClick={() =>undo()}/>
+                <button  title="Reset" onClick={() =>resetCoords()}/>
+                <button  title="Complete" onClick={() =>finish()}/>
+            </div>
+        </div>
+    </div>
+    );
+
+}
+export default CanvasExample;