Remove overlap feature
This commit is contained in:
parent
a87fdf6cdb
commit
27aef0ce22
|
@ -54,24 +54,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes overlap-warning {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
fill-opacity: 0.15;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
fill-opacity: 0.2;
|
||||
stroke-opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
fill-opacity: 0.15;
|
||||
stroke-opacity: 0.6 ;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
|
|
|
@ -216,11 +216,6 @@
|
|||
transform-origin: center;
|
||||
}
|
||||
|
||||
.overlap-circle {
|
||||
animation: overlap-warning 1.5s infinite linear;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.garden-map-legend {
|
||||
position: fixed;
|
||||
top: 110px;
|
||||
|
|
|
@ -1,58 +0,0 @@
|
|||
import * as React from "react";
|
||||
import { SpreadOverlapHelper } from "../spread_overlap_helper";
|
||||
import { shallow } from "enzyme";
|
||||
import { SpreadOverlapHelperProps } from "../interfaces";
|
||||
import { fakePlant } from "../../../__test_support__/fake_state/resources";
|
||||
|
||||
describe("<SpreadOverlapHelper/>", () => {
|
||||
function fakeProps(): SpreadOverlapHelperProps {
|
||||
return {
|
||||
quadrant: 2,
|
||||
plant: fakePlant(),
|
||||
dragging: false,
|
||||
zoomLvl: 1.8,
|
||||
activeDragXY: { x: undefined, y: undefined, z: undefined }
|
||||
};
|
||||
}
|
||||
|
||||
it("renders no overlap indicator", () => {
|
||||
const p = fakeProps();
|
||||
p.dragging = false;
|
||||
p.plant.body.x = 100;
|
||||
p.plant.body.y = 100;
|
||||
p.activeDragXY = { x: 600, y: 1000, z: 0 };
|
||||
const wrapper = shallow(<SpreadOverlapHelper {...p } />);
|
||||
expect(wrapper.find(".overlap-circle").props().fill).toEqual("none");
|
||||
});
|
||||
|
||||
it("renders yellow overlap indicator", () => {
|
||||
const p = fakeProps();
|
||||
p.dragging = false;
|
||||
p.plant.body.x = 100;
|
||||
p.plant.body.y = 100;
|
||||
p.activeDragXY = { x: 300, y: 100, z: 0 };
|
||||
const wrapper = shallow(<SpreadOverlapHelper {...p } />);
|
||||
expect(wrapper.find(".overlap-circle").props().fill).toEqual("yellow");
|
||||
});
|
||||
|
||||
it("renders orange overlap indicator", () => {
|
||||
const p = fakeProps();
|
||||
p.dragging = false;
|
||||
p.plant.body.x = 200;
|
||||
p.plant.body.y = 200;
|
||||
p.activeDragXY = { x: 100, y: 200, z: 0 };
|
||||
const wrapper = shallow(<SpreadOverlapHelper {...p } />);
|
||||
expect(wrapper.find(".overlap-circle").props().fill).toEqual("orange");
|
||||
});
|
||||
|
||||
it("renders red overlap indicator", () => {
|
||||
const p = fakeProps();
|
||||
p.dragging = false;
|
||||
p.plant.body.x = 100;
|
||||
p.plant.body.y = 100;
|
||||
p.activeDragXY = { x: 100, y: 100, z: 0 };
|
||||
const wrapper = shallow(<SpreadOverlapHelper {...p } />);
|
||||
expect(wrapper.find(".overlap-circle").props().fill).toEqual("red");
|
||||
});
|
||||
|
||||
});
|
|
@ -4,7 +4,6 @@ import { cachedCrop, DEFAULT_ICON, svgToUrl } from "../../open_farm/index";
|
|||
import { Circle } from "./circle";
|
||||
import { round, getXYFromQuadrant } from "./util";
|
||||
import { DragHelpers } from "./drag_helpers";
|
||||
import { SpreadOverlapHelper } from "./spread_overlap_helper";
|
||||
|
||||
export class GardenPlant extends
|
||||
React.Component<GardenPlantProps, Partial<GardenPlantState>> {
|
||||
|
@ -31,13 +30,6 @@ export class GardenPlant extends
|
|||
|
||||
return <g>
|
||||
|
||||
<SpreadOverlapHelper
|
||||
dragging={dragging}
|
||||
plant={plant}
|
||||
quadrant={quadrant}
|
||||
zoomLvl={zoomLvl}
|
||||
activeDragXY={activeDragXY} />
|
||||
|
||||
<Circle
|
||||
className="plant-indicator"
|
||||
x={qx}
|
||||
|
|
|
@ -42,11 +42,3 @@ export interface DragHelpersProps {
|
|||
zoomLvl: number;
|
||||
activeDragXY: BotPosition | undefined;
|
||||
}
|
||||
|
||||
export interface SpreadOverlapHelperProps {
|
||||
dragging: boolean;
|
||||
plant: Readonly<TaggedPlantPointer>;
|
||||
quadrant: BotOriginQuadrant;
|
||||
zoomLvl: number;
|
||||
activeDragXY: BotPosition | undefined;
|
||||
}
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
import * as React from "react";
|
||||
import { SpreadOverlapHelperProps } from "./interfaces";
|
||||
import { round, getXYFromQuadrant } from "./util";
|
||||
import { isUndefined } from "util";
|
||||
import { BotPosition } from "../../devices/interfaces";
|
||||
|
||||
enum Overlap {
|
||||
NONE = "none",
|
||||
SMALL = "yellow",
|
||||
MEDIUM = "orange",
|
||||
LARGE = "red",
|
||||
}
|
||||
|
||||
export function SpreadOverlapHelper(props: SpreadOverlapHelperProps) {
|
||||
|
||||
function getOverlap
|
||||
(activeXYZ: BotPosition | undefined, plantXYZ: BotPosition): Overlap {
|
||||
if (activeXYZ && !isUndefined(activeXYZ.x) && !isUndefined(activeXYZ.y)) {
|
||||
// Plant editing (dragging) is occuring
|
||||
const activeXY = { x: round(activeXYZ.x), y: round(activeXYZ.y) };
|
||||
const distance = Math.sqrt(Math.pow((activeXY.x - plantXYZ.x), 2) +
|
||||
Math.pow((activeXY.y - plantXYZ.y), 2));
|
||||
// Change "radius * 3|6|9" to "(spread1 + spread2) * 0.3|0.6|0.9"
|
||||
if (distance < radius * 3) {
|
||||
return Overlap.LARGE;
|
||||
}
|
||||
if (distance < radius * 6) {
|
||||
return Overlap.MEDIUM;
|
||||
}
|
||||
if (distance < radius * 9) {
|
||||
return Overlap.SMALL;
|
||||
}
|
||||
}
|
||||
return Overlap.NONE;
|
||||
}
|
||||
|
||||
const { dragging, plant, quadrant, activeDragXY } = props;
|
||||
const { radius, x, y } = plant.body;
|
||||
|
||||
const { qx, qy } = getXYFromQuadrant(round(x), round(y), quadrant);
|
||||
const gardenCoord: BotPosition = { x: round(x), y: round(y), z: 0 };
|
||||
|
||||
return <g id="overlap-circle">
|
||||
{!dragging && // Non-active plants
|
||||
<circle
|
||||
className="overlap-circle"
|
||||
cx={qx}
|
||||
cy={qy}
|
||||
r={radius * 5}
|
||||
fill={getOverlap(activeDragXY, gardenCoord)}
|
||||
stroke={getOverlap(activeDragXY, gardenCoord)}
|
||||
fillOpacity="0.3" />}
|
||||
</g>;
|
||||
}
|
Loading…
Reference in a new issue