add farm designer map size settings

webpack/account/labs/labs_features_list_data.ts

@@ -33,6 +33,21 @@ export const fetchLabFeatures = (): LabsFeature[] => ([
       widget from the Controls page.`)),
     storageKey: BooleanSetting.hideWebcamWidget,
     value: false
+  },
+  {
+    name: t("Dynamic map size"),
+    description: trim(t(`Change the Farm Designer map size based on axis length.
+      A value must be input in AXIS LENGTH and STOP AT MAX must be enabled in
+      the HARDWARE widget.`)),
+    storageKey: BooleanSetting.dynamicMap,
+    value: false
+  },
+  {
+    name: t("Double default map dimensions"),
+    description: trim(t(`Double the default dimensions of the Farm Designer map
+    for a map with four times the area.`)),
+    storageKey: BooleanSetting.mapXL,
+    value: false
   }
 ].map(fetchRealValue));
 

webpack/farm_designer/__tests__/index_test.ts

@@ -0,0 +1,58 @@
+const mockStorj: Dictionary<boolean> = {};
+
+jest.mock("../../session", () => {
+  return {
+    Session: {
+      getBool: (k: string) => {
+        mockStorj[k] = !!mockStorj[k];
+        return mockStorj[k];
+      }
+    }
+  };
+});
+
+import { Dictionary } from "farmbot";
+import { BooleanSetting } from "../../session_keys";
+import { getDefaultAxisLength, getGridSize } from "../index";
+
+describe("getDefaultAxisLength()", () => {
+  it("returns axis lengths", () => {
+    const axes = getDefaultAxisLength();
+    expect(axes).toEqual({ x: 2900, y: 1400 });
+  });
+
+  it("returns XL axis lengths", () => {
+    mockStorj[BooleanSetting.mapXL] = true;
+    const axes = getDefaultAxisLength();
+    expect(axes).toEqual({ x: 5900, y: 2900 });
+  });
+});
+
+describe("getGridSize()", () => {
+  it("returns default grid size", () => {
+    mockStorj[BooleanSetting.mapXL] = false;
+    const grid = getGridSize({
+      x: { value: 100, isDefault: false },
+      y: { value: 200, isDefault: false }
+    });
+    expect(grid).toEqual({ x: 2900, y: 1400 });
+  });
+
+  it("returns XL grid size", () => {
+    mockStorj[BooleanSetting.mapXL] = true;
+    const grid = getGridSize({
+      x: { value: 100, isDefault: false },
+      y: { value: 200, isDefault: false }
+    });
+    expect(grid).toEqual({ x: 5900, y: 2900 });
+  });
+
+  it("returns grid size using bot size", () => {
+    mockStorj[BooleanSetting.dynamicMap] = true;
+    const grid = getGridSize({
+      x: { value: 100, isDefault: false },
+      y: { value: 200, isDefault: false }
+    });
+    expect(grid).toEqual({ x: 100, y: 200 });
+  });
+});

webpack/farm_designer/index.tsx

@@ -12,10 +12,26 @@ import { isMobile } from "../util";
 import { Session, safeBooleanSettting } from "../session";
 import { NumericSetting, BooleanSetting } from "../session_keys";
 import { isUndefined } from "lodash";
-import { AxisNumberProperty } from "./map/interfaces";
+import { AxisNumberProperty, BotSize } from "./map/interfaces";
 import { getBotSize } from "./map/util";
 
-export const defaultAxisLength: AxisNumberProperty = { x: 2900, y: 1400 };
+export const getDefaultAxisLength = (): AxisNumberProperty => {
+  if (Session.getBool(BooleanSetting.mapXL)) {
+    return { x: 5900, y: 2900 };
+  } else {
+    return { x: 2900, y: 1400 };
+  }
+};
+
+export const getGridSize = (botSize: BotSize) => {
+  if (Session.getBool(BooleanSetting.dynamicMap)) {
+    // Render the map size according to device axis length.
+    return { x: botSize.x.value, y: botSize.y.value };
+  }
+  // Use a default map size.
+  return getDefaultAxisLength();
+};
+
 export const gridOffset: AxisNumberProperty = { x: 50, y: 50 };
 
 @connect(mapStateToProps)
@@ -101,17 +117,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
     const designerTabClasses: string[] = ["active", "visible-xs"];
 
     const botSize = getBotSize(
-      this.props.botMcuParams, this.props.stepsPerMmXY, defaultAxisLength);
-    /**
-     * The next line uses a default for map size (from the top of this file.
-     * To render the map according to device axis length, replace the line
-     * with the next one.
-     * It is recommend to only consider this once device settings are
-     * stored in the API to avoid the map changing size when the device
-     * is offline. Alternatively, this could be a user option (toggle).
-     */
-    const gridSize = defaultAxisLength;
-    // const gridSize = { x: botSize.x.value, y: botSize.y.value };
+      this.props.botMcuParams, this.props.stepsPerMmXY, getDefaultAxisLength());
 
     const stopAtHome = {
       x: !!this.props.botMcuParams.movement_stop_at_home_x,
@@ -170,7 +176,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
           hoveredPlant={this.props.hoveredPlant}
           zoomLvl={Math.round(zoomLevel * 10) / 10}
           botOriginQuadrant={botOriginQuadrant}
-          gridSize={gridSize}
+          gridSize={getGridSize(botSize)}
           gridOffset={gridOffset} />
       </div>
     </div>;

webpack/session_keys.ts

@@ -15,6 +15,8 @@ export enum BooleanSetting {
   disableI18n = "disableI18n",
   confirmStepDeletion = "confirmStepDeletion",
   hideWebcamWidget = "hideWebcamWidget",
+  dynamicMap = "dynamicMap",
+  mapXL = "mapXL",
 }
 
 export enum NumericSetting {