Skip to content

Commit

Permalink
feat(ui): Segment selection improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hypfer
Hypfer committed Oct 27, 2022
1 parent 5bb3fae commit cc34e20
Show file tree
Hide file tree
Showing 14 changed files with 436 additions and 273 deletions.
44 changes: 40 additions & 4 deletions frontend/src/map/EditMap.tsx
View file
Expand Up @@ -68,8 +68,8 @@ class EditMap extends Map<EditMapProps, EditMapState> {
this.drawableComponentsMutex.take(async () => {
this.drawableComponents = [];

await this.mapLayerRenderer.draw(this.props.rawMap, this.props.theme);
this.drawableComponents.push(this.mapLayerRenderer.getCanvas());
await this.mapLayerManager.draw(this.props.rawMap, this.props.theme);
this.drawableComponents.push(this.mapLayerManager.getCanvas());

this.updateStructures(this.props.mode);

Expand Down Expand Up @@ -228,7 +228,7 @@ class EditMap extends Map<EditMapProps, EditMapState> {

this.updateState();

this.draw();
this.redrawLayers();
}

protected onMapUpdate() : void {
Expand All @@ -244,7 +244,43 @@ class EditMap extends Map<EditMapProps, EditMapState> {
protected onTap(evt: any): boolean | void {
// Only allow map interaction while the robot is docked
if (this.props.robotStatus.value === "docked") {
return super.onTap(evt);
if (super.onTap(evt)) {
return true;
}

if (
this.props.mode === "segments" &&
this.state.cuttingLine === undefined
) {
const {x, y} = this.relativeCoordinatesToCanvas(evt.x0, evt.y0);
const tappedPointInMapSpace = this.ctxWrapper.mapPointToCurrentTransform(x, y);

const intersectingSegmentId = this.mapLayerManager.getIntersectingSegment(tappedPointInMapSpace.x, tappedPointInMapSpace.y);

if (intersectingSegmentId) {
const segmentLabels = this.structureManager.getMapStructures().filter(s => {
return s.type === SegmentLabelMapStructure.TYPE;
}) as Array<SegmentLabelMapStructure>;

const matchedSegmentLabel = segmentLabels.find(l => {
return l.id === intersectingSegmentId;
});

if (
this.state.selectedSegmentIds.length < 2 ||
this.state.selectedSegmentIds.includes(intersectingSegmentId)
) {
if (matchedSegmentLabel) {
matchedSegmentLabel.onTap();

this.updateState();
this.redrawLayers();

return true;
}
}
}
}
}
}

Expand Down
54 changes: 44 additions & 10 deletions frontend/src/map/LiveMap.tsx
View file
Expand Up @@ -51,25 +51,59 @@ class LiveMap extends Map<LiveMapProps, LiveMapState> {

protected onTap(evt: TapTouchHandlerEvent): boolean | void {
if (super.onTap(evt)) {
return;
return true;
}

const {x, y} = this.relativeCoordinatesToCanvas(evt.x0, evt.y0);
const tappedPointInMapSpace = this.ctxWrapper.mapPointToCurrentTransform(x, y);


if (this.props.supportedCapabilities[Capability.GoToLocation]) {
this.structureManager.getClientStructures().forEach(s => {
if (s.type === GoToTargetClientStructure.TYPE) {
this.structureManager.removeClientStructure(s);
}
});

if (this.structureManager.getClientStructures().length === 0 && this.state.selectedSegmentIds.length === 0) {
if (
this.structureManager.getClientStructures().filter(s => {
return s.type !== GoToTargetClientStructure.TYPE;
}).length === 0 &&
this.state.selectedSegmentIds.length === 0 &&
evt.duration >= TapTouchHandlerEvent.LONG_PRESS_DURATION
) {
this.structureManager.getClientStructures().forEach(s => {
if (s.type === GoToTargetClientStructure.TYPE) {
this.structureManager.removeClientStructure(s);
}
});
this.structureManager.addClientStructure(new GoToTargetClientStructure(tappedPointInMapSpace.x, tappedPointInMapSpace.y));


this.updateState();
this.draw();

return true;
}
}

if (
this.state.zones.length === 0 &&
this.state.goToTarget === undefined
) {
const intersectingSegmentId = this.mapLayerManager.getIntersectingSegment(tappedPointInMapSpace.x, tappedPointInMapSpace.y);

if (intersectingSegmentId) {
const segmentLabels = this.structureManager.getMapStructures().filter(s => {
return s.type === SegmentLabelMapStructure.TYPE;
}) as Array<SegmentLabelMapStructure>;

const matchedSegmentLabel = segmentLabels.find(l => {
return l.id === intersectingSegmentId;
});


if (matchedSegmentLabel) {
matchedSegmentLabel.onTap();

this.updateState();
this.redrawLayers();

return true;
}
}
}
}
Expand Down Expand Up @@ -113,7 +147,7 @@ class LiveMap extends Map<LiveMapProps, LiveMapState> {
});
this.updateState();

this.draw();
this.redrawLayers();
}}
/>
}
Expand Down
45 changes: 13 additions & 32 deletions frontend/src/map/Map.tsx
View file
@@ -1,6 +1,6 @@
import React, {createRef} from "react";
import {RawMapData, RawMapEntityType} from "../api";
import {MapLayerRenderer} from "./MapLayerRenderer";
import {MapLayerManager} from "./MapLayerManager";
import {PathDrawer} from "./PathDrawer";
import {TouchHandler} from "./utils/touch_handling/TouchHandler";
import StructureManager from "./StructureManager";
Expand Down Expand Up @@ -52,7 +52,7 @@ const SCROLL_PARAMETERS = {
class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
protected readonly canvasRef: React.RefObject<HTMLCanvasElement>;
protected structureManager: StructureManager;
protected mapLayerRenderer: MapLayerRenderer;
protected mapLayerManager: MapLayerManager;
protected canvas!: HTMLCanvasElement;
protected ctxWrapper!: Canvas2DContextTrackingWrapper;
protected readonly resizeListener: () => void;
Expand Down Expand Up @@ -82,7 +82,7 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
this.structureManager = new StructureManager();
this.structureManager.setPixelSize(this.props.rawMap.pixelSize);

this.mapLayerRenderer = new MapLayerRenderer();
this.mapLayerManager = new MapLayerManager();

this.state = {
selectedSegmentIds: [] as Array<string>
Expand Down Expand Up @@ -214,6 +214,12 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
});
}

protected redrawLayers() : void {
this.mapLayerManager.draw(this.props.rawMap, this.props.theme).then(() => {
this.draw();
});
}

render(): JSX.Element {
return (
<Container style={{overflow: "hidden"}}>
Expand All @@ -239,8 +245,8 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
this.drawableComponentsMutex.take(async () => {
this.drawableComponents = [];

await this.mapLayerRenderer.draw(this.props.rawMap, this.props.theme);
this.drawableComponents.push(this.mapLayerRenderer.getCanvas());
await this.mapLayerManager.draw(this.props.rawMap, this.props.theme);
this.drawableComponents.push(this.mapLayerManager.getCanvas());

const pathsImage = await PathDrawer.drawPaths( {
paths: this.props.rawMap.entities.filter(e => {
Expand Down Expand Up @@ -299,6 +305,8 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
});
}

this.mapLayerManager.setSelectedSegmentIds(updatedSelectedSegmentIds);

this.setState({
selectedSegmentIds: updatedSelectedSegmentIds,
} as S & MapState);
Expand Down Expand Up @@ -398,33 +406,6 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
return true;
}

const mapStructuresHandledTap = this.structureManager.getMapStructures().some(structure => {
const result = structure.tap(tappedPointInScreenSpace, currentTransform);

if (result.requestDraw === true) {
drawRequested = true;
}

if (result.stopPropagation) {
if (result.deleteMe === true) {
this.structureManager.removeMapStructure(structure);
}


this.updateState();

this.draw();

return true;
} else {
return false;
}
});

if (mapStructuresHandledTap) {
return true;
}

//only draw if any structure was changed
let didUpdateStructures = false;
this.structureManager.getClientStructures().forEach(s => {
Expand Down

0 comments on commit cc34e20

Please sign in to comment.