toolslot direction

webpack/farm_designer/map/__tests__/tool_slot_point_test.tsx

@@ -64,4 +64,17 @@ describe("<ToolSlotPoint/>", () => {
     expect(wrapper.find("#seed-tray").find("circle").length).toEqual(2);
   });
 
+  it("doesn't render toolbay slot", () => {
+    const p = fakeProps();
+    p.slot.toolSlot.body.pullout_direction = undefined;
+    const wrapper = shallow(<ToolSlotPoint {...p } />);
+    expect(wrapper.find("use").length).toEqual(0);
+  });
+
+  it("renders toolbay slot", () => {
+    const p = fakeProps();
+    p.slot.toolSlot.body.pullout_direction = 1;
+    const wrapper = shallow(<ToolSlotPoint {...p } />);
+    expect(wrapper.find("use").length).toEqual(1);
+  });
 });

webpack/farm_designer/map/tool_slot_point.tsx

@@ -4,6 +4,8 @@ import { getXYFromQuadrant } from "./util";
 import { MapTransformProps } from "./interfaces";
 import * as _ from "lodash";
 import { Color } from "../../ui/index";
+import { trim } from "../../util";
+import { ToolPulloutDirection } from "../../interfaces";
 
 export interface TSPProps {
   slot: SlotWithTool;
@@ -21,16 +23,21 @@ export class ToolSlotPoint extends
     hovered: false
   };
 
+  angles = [0, 0, 180, 270, 90];
+
   get slot() { return this.props.slot; }
 
   render() {
-    const { id, x, y } = this.slot.toolSlot.body;
+    const { id, x, y, pullout_direction } = this.slot.toolSlot.body;
     const { quadrant, gridSize } = this.props.mapTransformProps;
     const { qx, qy } = getXYFromQuadrant(x, y, quadrant, gridSize);
     const toolName = this.slot.tool ? this.slot.tool.body.name : "no tool";
     const seedBin = _.includes((toolName || "").toLowerCase(), "seed bin");
     const seedTray = _.includes((toolName || "").toLowerCase(), "seed tray");
     const seedTrayRect = getXYFromQuadrant(x, y, quadrant, gridSize);
+    const labelAnchor = pullout_direction === ToolPulloutDirection.NEGATIVE_X
+      ? "end"
+      : "start";
     return <g id={"toolslot-" + id}>
       <defs>
         <radialGradient id="SeedBinGradient">
@@ -41,8 +48,26 @@ export class ToolSlotPoint extends
           x={0} y={0} width={0.25} height={0.25}>
           <circle cx={6} cy={6} r={5} fill="url(#SeedBinGradient)" />
         </pattern>
+        <g id={"toolbay-slot-" + id}
+          fillOpacity={0.25}
+          fill={Color.mediumGray}>
+          <path d={trim(`M${qx + 50} ${qy + 50}
+          h -150 v -100 h 150 v 15.5
+          a 5 5 0 0 1 -2.5 2.5
+          h -61.5
+          a 35 35 0 0 0 0 64
+          h 61.5
+          a 5 5 0 0 1 2.5 2.5
+          z`)} />
+        </g>
       </defs>
 
+      {pullout_direction &&
+        <use style={{ pointerEvents: "none" }}
+          xlinkHref={"#toolbay-slot-" + id}
+          transform={
+            `rotate(${this.angles[pullout_direction]}, ${qx}, ${qy})`} />}
+
       {seedBin &&
         <g id="seed-bin" key={this.slot.toolSlot.uuid}
           onMouseOver={() => this.setState({ hovered: true })}
@@ -87,7 +112,7 @@ export class ToolSlotPoint extends
           fill={this.state.hovered ? Color.darkGray : Color.mediumGray} />
       }
 
-      <text
+      <text textAnchor={labelAnchor}
         visibility={this.state.hovered ? "visible" : "hidden"}
         x={qx}
         y={qy}

webpack/interfaces.ts

@@ -92,9 +92,18 @@ export interface PlantPointer extends BasePoint {
   pointer_type: "Plant";
 }
 
+export enum ToolPulloutDirection {
+  NONE = 0,
+  POSITIVE_X = 1,
+  NEGATIVE_X = 2,
+  POSITIVE_Y = 3,
+  NEGATIVE_Y = 4,
+}
+
 export interface ToolSlotPointer extends BasePoint {
   tool_id: number | undefined;
   pointer_type: "ToolSlot";
+  pullout_direction?: ToolPulloutDirection;
 }
 
 export interface GenericPointer extends BasePoint {

webpack/tools/components/toolbay_form.tsx

@@ -19,6 +19,7 @@ import { ToolBayHeader } from "./toolbay_header";
 import { ToolTips } from "../../constants";
 import * as _ from "lodash";
 import { BotPosition } from "../../devices/interfaces";
+import { ToolPulloutDirection } from "../../interfaces";
 
 export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
 
@@ -58,6 +59,19 @@ export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
     }
   }
 
+  changePulloutDirection = (dispatch: Function, slot: TaggedToolSlotPointer) =>
+    () => {
+      const newDirection = (
+        old: ToolPulloutDirection | undefined): ToolPulloutDirection => {
+        if (_.isNumber(old) && old < 4) { return old + 1; }
+        return ToolPulloutDirection.NONE;
+      };
+      dispatch(edit(slot,
+        { pullout_direction: newDirection(slot.body.pullout_direction) }));
+    }
+
+  iconDirections = ["none", "right", "left", "up", "down"];
+
   render() {
     const { toggle, dispatch, toolSlots, botPosition } = this.props;
 
@@ -86,9 +100,15 @@ export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
           <ToolBayHeader />
           {this.props.getToolSlots().map(
             (slot: TaggedToolSlotPointer, index: number) => {
+              const { x, y, z, pullout_direction } = slot.body;
               return <Row key={index}>
                 <Col xs={2}>
-                  <label>{index + 1}</label>
+                  <label onClick={this.changePulloutDirection(dispatch, slot)}>
+                    {index + 1}
+                  </label>
+                  {_.isNumber(pullout_direction) &&
+                    <i className={`fa fa-arrow-circle-${
+                      this.iconDirections[pullout_direction]}`} />}
                   <button
                     className="blue fb-button"
                     title={this.positionButtonTitle(botPosition)}
@@ -98,7 +118,7 @@ export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
                 </Col>
                 <Col xs={2}>
                   <BlurableInput
-                    value={(slot.body.x || 0).toString()}
+                    value={(x || 0).toString()}
                     onCommit={(e) => {
                       dispatch(edit(slot, { x: parseInt(e.currentTarget.value, 10) }));
                     }}
@@ -106,7 +126,7 @@ export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
                 </Col>
                 <Col xs={2}>
                   <BlurableInput
-                    value={(slot.body.y || 0).toString()}
+                    value={(y || 0).toString()}
                     onCommit={(e) => {
                       dispatch(edit(slot, { y: parseInt(e.currentTarget.value, 10) }));
                     }}
@@ -114,7 +134,7 @@ export class ToolBayForm extends React.Component<ToolBayFormProps, {}> {
                 </Col>
                 <Col xs={2}>
                   <BlurableInput
-                    value={(slot.body.z || 0).toString()}
+                    value={(z || 0).toString()}
                     onCommit={(e) => {
                       dispatch(edit(slot, { z: parseInt(e.currentTarget.value, 10) }));
                     }}