-
Notifications
You must be signed in to change notification settings - Fork 323
/
hovered_plant.tsx
89 lines (83 loc) · 2.77 KB
/
hovered_plant.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import * as React from "react";
import { DesignerState } from "../../interfaces";
import { transformXY, round } from "../util";
import { MapTransformProps, TaggedPlant } from "../interfaces";
import { SpreadCircle } from "../layers/spread/spread_layer";
import { Circle } from "../layers/plants/circle";
import { noop } from "lodash";
/**
* For showing the map plant hovered in the plant panel.
* This component must be rendered after (in front of) the plant layer
* and before (behind) the drag helper component.
*/
export interface HoveredPlantProps {
visible: boolean;
spreadLayerVisible: boolean;
currentPlant: TaggedPlant | undefined;
designer: DesignerState;
hoveredPlant: TaggedPlant | undefined;
isEditing: boolean;
mapTransformProps: MapTransformProps;
dragging: boolean;
animate: boolean;
}
export class HoveredPlant extends
React.Component<HoveredPlantProps, {}> {
/** Safe fallbacks if no hovered plant is found. */
get plantInfo() {
if (this.props.hoveredPlant) {
const { id, x, y, radius } = this.props.hoveredPlant.body;
return { id, x, y, radius };
} else {
return { id: 0, x: 0, y: 0, radius: 1 };
}
}
render() {
const {
currentPlant, mapTransformProps, dragging, isEditing, visible, designer,
animate, spreadLayerVisible
} = this.props;
const { icon } = designer.hoveredPlant;
const hovered = !!icon;
const { id, x, y, radius } = this.plantInfo;
const { qx, qy } = transformXY(round(x), round(y), mapTransformProps);
const scaledRadius = currentPlant ? radius : radius * 1.2;
const alpha = dragging ? 0.4 : 1.0;
return <g id="hovered-plant">
{visible && hovered &&
<g id={"hovered-plant-" + id}>
{currentPlant &&
<g id="selected-plant-spread-indicator">
<SpreadCircle
plant={currentPlant}
key={currentPlant.uuid}
mapTransformProps={mapTransformProps}
visible={!spreadLayerVisible}
animate={animate} />
</g>}
<g id="plant-indicator">
<Circle
className={"plant-indicator"}
x={qx}
y={qy}
r={scaledRadius}
selected={true} />
</g>
<g id="hovered-plant-icon">
<image
visibility={hovered ? "visible" : "hidden"}
style={isEditing ? {} : { pointerEvents: "none" }}
onClick={noop}
className="hovered-plant-copy"
opacity={alpha}
x={qx - scaledRadius}
y={qy - scaledRadius}
width={scaledRadius * 2}
height={scaledRadius * 2}
xlinkHref={icon} />
</g>
</g>
}
</g>;
}
}