toolslot direction
This commit is contained in:
parent
41b911d576
commit
0dfd4aa56d
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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) }));
|
||||
}}
|
||||
|
|
Loading…
Reference in a new issue