virtual farmbot trail option

webpack/farm_designer/map/__tests__/virtual_farmbot_test.tsx

@@ -1,8 +1,22 @@
+const mockStorj: Dictionary<boolean> = {};
+
+jest.mock("../../../session", () => {
+  return {
+    Session: {
+      getBool: (k: string) => {
+        mockStorj[k] = !!mockStorj[k];
+        return mockStorj[k];
+      },
+    }
+  };
+});
+
 import * as React from "react";
 import { VirtualFarmBot } from "../virtual_farmbot";
 import { shallow } from "enzyme";
 import { VirtualFarmBotProps } from "../interfaces";
 import { BotOriginQuadrant } from "../../interfaces";
+import { Dictionary } from "farmbot";
 
 describe("<VirtualFarmBot/>", () => {
   function fakeProps(): VirtualFarmBotProps {
@@ -63,4 +77,29 @@ describe("<VirtualFarmBot/>", () => {
     expect(UTM.cx).toEqual(100);
     expect(UTM.cy).toEqual(200);
   });
+
+  it("shows trail", () => {
+    mockStorj["displayTrail"] = true;
+    sessionStorage["virtualTrail"] = JSON.stringify([
+      { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }, { x: 4, y: 4 }]);
+    const p = fakeProps();
+    p.mapTransformProps.quadrant = 2;
+    const wrapper = shallow(<VirtualFarmBot {...p } />);
+    const lines = wrapper.find("#trail").find("line");
+    expect(lines.length).toEqual(4);
+    expect(lines.first().props()).toEqual({
+      id: "trail-line-1",
+      stroke: "red",
+      strokeOpacity: 0.25,
+      strokeWidth: 0.5,
+      x1: 2, x2: 1, y1: 2, y2: 1
+    });
+    expect(lines.last().props()).toEqual({
+      id: "trail-line-4",
+      stroke: "red",
+      strokeOpacity: 1,
+      strokeWidth: 2,
+      x1: 0, x2: 4, y1: 0, y2: 4
+    });
+  });
 });

webpack/farm_designer/map/virtual_farmbot.tsx

@@ -1,6 +1,21 @@
 import * as React from "react";
 import { getXYFromQuadrant, getMapSize } from "./util";
 import { VirtualFarmBotProps } from "./interfaces";
+import { Session } from "../../session";
+import { BooleanSetting } from "../../session_keys";
+import * as _ from "lodash";
+
+type TrailRecord = Record<"x" | "y", number | undefined>;
+
+function getNewTrailArray(update: TrailRecord) {
+  const key = "virtualTrail"; // sessionStorage location
+  const trailLength = 100;
+  const arr = JSON.parse(_.get(sessionStorage, key, "[]")); // get array
+  if (arr.length > (trailLength - 1)) { arr.shift(); } // max length reached
+  if (!_.isEqual(_.last(arr), update)) { arr.push(update); } // unique addition
+  sessionStorage.setItem(key, JSON.stringify(arr)); // save array
+  return arr;
+}
 
 export function VirtualFarmBot(props: VirtualFarmBotProps) {
   const { x, y } = props.botPosition;
@@ -8,6 +23,11 @@ export function VirtualFarmBot(props: VirtualFarmBotProps) {
   const { quadrant, gridSize } = mapTransformProps;
   const mapSize = getMapSize(gridSize, plantAreaOffset);
   const { qx, qy } = getXYFromQuadrant((x || 0), (y || 0), quadrant, gridSize);
+
+  const displayTrail = Session.getBool(BooleanSetting.displayTrail);
+  const update = { x, y };
+  const array = displayTrail ? getNewTrailArray(update) : [];
+
   return <g id="virtual-farmbot">
     <rect id="gantry"
       x={qx - 10}
@@ -22,5 +42,20 @@ export function VirtualFarmBot(props: VirtualFarmBotProps) {
       r={35}
       fillOpacity={0.75}
       fill={"#434343"} />
+    {displayTrail &&
+      <g id="trail">
+        {array.map((cur: TrailRecord, i: number) => {
+          const prev = array[i - 1]; // previous trail coordinate
+          const opacity = Math.round((i / (array.length - 1)) * 100) / 100;
+          if (i > 0 && _.isNumber(prev.x) && _.isNumber(prev.y)
+            && _.isNumber(cur.x) && _.isNumber(cur.y)) {
+            const p1 = getXYFromQuadrant(cur.x, cur.y, quadrant, gridSize);
+            const p2 = getXYFromQuadrant(prev.x, prev.y, quadrant, gridSize);
+            return <line id={`trail-line-${i}`} key={i}
+              stroke="red" strokeOpacity={opacity} strokeWidth={opacity * 2}
+              x1={p1.qx} y1={p1.qy} x2={p2.qx} y2={p2.qy} />;
+          }
+        })}
+      </g>}
   </g>;
 }

webpack/session_keys.ts

@@ -18,6 +18,7 @@ export enum BooleanSetting {
   dynamicMap = "dynamicMap",
   mapXL = "mapXL",
   disableAnimations = "disableAnimations",
+  displayTrail = "displayTrail",
 }
 
 export enum NumericSetting {