fix tool labels

webpack/farm_designer/map/__tests__/tool_label_test.ts

@@ -0,0 +1,36 @@
+import { textAnchorPosition } from "../tool_label";
+
+describe("textAnchorPosition()", () => {
+  const START = { anchor: "start", x: 40, y: 10 };
+  const END = { anchor: "end", x: -40, y: 10 };
+  const MIDDLE_TOP = { anchor: "middle", x: 0, y: 60 };
+  const MIDDLE_BOTTOM = { anchor: "middle", x: 0, y: -40 };
+
+  it("returns correct label position: positive x", () => {
+    expect(textAnchorPosition(1, 1)).toEqual(END);
+    expect(textAnchorPosition(1, 2)).toEqual(START);
+    expect(textAnchorPosition(1, 3)).toEqual(START);
+    expect(textAnchorPosition(1, 4)).toEqual(END);
+  });
+
+  it("returns correct label position: negative x", () => {
+    expect(textAnchorPosition(2, 1)).toEqual(START);
+    expect(textAnchorPosition(2, 2)).toEqual(END);
+    expect(textAnchorPosition(2, 3)).toEqual(END);
+    expect(textAnchorPosition(2, 4)).toEqual(START);
+  });
+
+  it("returns correct label position: positive y", () => {
+    expect(textAnchorPosition(3, 1)).toEqual(MIDDLE_TOP);
+    expect(textAnchorPosition(3, 2)).toEqual(MIDDLE_TOP);
+    expect(textAnchorPosition(3, 3)).toEqual(MIDDLE_BOTTOM);
+    expect(textAnchorPosition(3, 4)).toEqual(MIDDLE_BOTTOM);
+  });
+
+  it("returns correct label position: negative y", () => {
+    expect(textAnchorPosition(4, 1)).toEqual(MIDDLE_BOTTOM);
+    expect(textAnchorPosition(4, 2)).toEqual(MIDDLE_BOTTOM);
+    expect(textAnchorPosition(4, 3)).toEqual(MIDDLE_TOP);
+    expect(textAnchorPosition(4, 4)).toEqual(MIDDLE_TOP);
+  });
+});

webpack/farm_designer/map/tool_label.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Color } from "../../ui/index";
+import { ToolPulloutDirection } from "../../interfaces";
+import { BotOriginQuadrant } from "../interfaces";
+
+enum Anchor {
+  start = 0,
+  middleTop = 1,
+  end = 2,
+  middleBottom = 3
+}
+
+export const textAnchorPosition = (
+  pulloutDirection: ToolPulloutDirection,
+  quadrant: BotOriginQuadrant): { x: number, y: number, anchor: string } => {
+  const rawAnchor = () => {
+    switch (pulloutDirection) {
+      case ToolPulloutDirection.POSITIVE_X: return Anchor.start;
+      case ToolPulloutDirection.NEGATIVE_X: return Anchor.end;
+      case ToolPulloutDirection.NEGATIVE_Y: return Anchor.middleTop;
+      case ToolPulloutDirection.POSITIVE_Y: return Anchor.middleBottom;
+      default: return Anchor.start;
+    }
+  };
+  const adjustAnchor = (anchor: Anchor) => {
+    const horizontal = anchor === Anchor.end || anchor === Anchor.start;
+    switch (quadrant) {
+      case 1: return anchor + 2;
+      case 2: return horizontal ? anchor : anchor + 2;
+      case 3: return anchor;
+      case 4: return horizontal ? anchor + 2 : anchor;
+      default: return anchor;
+    }
+  };
+  switch (adjustAnchor(rawAnchor()) % 4) {
+    case Anchor.start: return { anchor: "start", x: 40, y: 10 };
+    case Anchor.end: return { anchor: "end", x: -40, y: 10 };
+    case Anchor.middleTop: return { anchor: "middle", x: 0, y: 60 };
+    case Anchor.middleBottom: return { anchor: "middle", x: 0, y: -40 };
+    default: return { anchor: "start", x: 40, y: 10 };
+  }
+};
+
+interface ToolLabelProps {
+  toolName: string | undefined;
+  hovered: boolean;
+  x: number;
+  y: number;
+  pulloutDirection: ToolPulloutDirection;
+  quadrant: BotOriginQuadrant;
+}
+
+export const ToolLabel = (props: ToolLabelProps) => {
+  const { toolName, hovered, x, y, pulloutDirection, quadrant } = props;
+  const labelAnchor = textAnchorPosition(pulloutDirection, quadrant);
+
+  return <text textAnchor={labelAnchor.anchor}
+    visibility={hovered ? "visible" : "hidden"}
+    x={x}
+    y={y}
+    dx={labelAnchor.x}
+    dy={labelAnchor.y}
+    fontSize={24}
+    fill={Color.darkGray}>
+    {toolName}
+  </text>;
+};

webpack/farm_designer/map/tool_slot_point.tsx

@@ -3,9 +3,8 @@ import { SlotWithTool } from "../../resources/interfaces";
 import { getXYFromQuadrant } from "./util";
 import { MapTransformProps } from "./interfaces";
 import * as _ from "lodash";
-import { Color } from "../../ui/index";
-import { ToolPulloutDirection } from "../../interfaces";
 import { ToolbaySlot, ToolNames, Tool } from "./tool_graphics";
+import { ToolLabel } from "./tool_label";
 
 export interface TSPProps {
   slot: SlotWithTool;
@@ -45,9 +44,6 @@ export class ToolSlotPoint extends
       hovered: this.state.hovered,
       setHoverState: this.setHover
     };
-    const labelAnchor = pullout_direction === ToolPulloutDirection.NEGATIVE_X
-      ? "end"
-      : "start";
     return <g id={"toolslot-" + id}>
       {pullout_direction &&
         <ToolbaySlot
@@ -62,16 +58,13 @@ export class ToolSlotPoint extends
           tool={this.reduceToolName(toolName)}
           toolProps={toolProps} />}
 
-      <text textAnchor={labelAnchor}
-        visibility={this.state.hovered ? "visible" : "hidden"}
+      <ToolLabel
+        toolName={toolName}
+        hovered={this.state.hovered}
         x={qx}
         y={qy}
-        dx={labelAnchor === "start" ? 40 : -40}
-        dy={10}
-        fontSize={24}
-        fill={Color.darkGray}>
-        {toolName}
-      </text>
+        pulloutDirection={pullout_direction}
+        quadrant={quadrant} />
     </g>;
   }
 }