Skip to content

Commit

Permalink
v0.3.12 (#49)
Browse files Browse the repository at this point in the history 
- Event on contextmenu
- Delete last point
  • Loading branch information
@NicolasChampionRoadCare
NicolasChampionRoadCare authored Jan 19, 2022
1 parent d289eb7 commit 6cebc4d
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 36 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@thetribe/react-components",
"version": "0.3.11",
"version": "0.3.12",
"description": "Library of generic React components",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
Expand Down
48 changes: 36 additions & 12 deletions src/annotation-engine/stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const useEngineStateMachine = (
const isModeCreation = () => !isModeEdition() && numberOfPoints > 0;
const isModeInactif = () => !isModeCreation() && !isModeEdition();
// key codes map for shape validation (polygon and polylines)
const shapeFinishedOnKeyCodes = ['Space'];
const shapeFinishedOnKeyCodes = ['Space', 'Enter'];
const cancelOnKeyCodes = ['Escape'];

const initState = () => ({
Expand All @@ -133,6 +133,7 @@ const useEngineStateMachine = (
// Cancel edition
setAnnotationToEdit(undefined);
// Cancel creation
setShapeType('INACTIVE');
refAE.current?.cancelCreation();
};

Expand Down Expand Up @@ -231,6 +232,8 @@ const useEngineStateMachine = (
}
}

const isLeftClick = (event: Events) => event.event.button === 0;
const isRightClick = (event: Events) => event.event.button === 2;
const createNewPoint = (at: Coordinates, operations: Operations): number => operations.addPoint(at);

const shapeFinished = (currentGeometry: Coordinates[]) => {
Expand All @@ -245,13 +248,23 @@ const useEngineStateMachine = (
styleOps.setStyleExclusivelyToAnnotationId(clickStyle, id);
};

const keyDownEvent = (event: KeyDownEvent) => {
const keyPreventDefault = (event: KeyDownEvent) => {
if (event.event.code === 'Space') {
// avoid page scrolldown on space key up
event.event.preventDefault();
}
}

const keyDownEventWhileCreation = (event:KeyDownEvent , operations:Operations)=> {
switch(event.event.key) {
case "Backspace": {
const lastPoint = operations.deleteLastPoint();
styleOps.setStyleExclusivelyToPointId(hiddenStyle, lastPoint.toString());
break;
}
default:
break;
}
}
const keyUpEvent = (event: KeyUpEvent) => {
if (shapeFinishedOnKeyCodes.includes(event.event.code) && isGeometryReadyToBeManuallyCompleted(event.currentGeometry.length)) {
shapeFinished(event.currentGeometry);
Expand All @@ -274,9 +287,10 @@ const useEngineStateMachine = (
if (isModeInactif()) {
switch (event.type) {
case 'mouse_down_on_annotation_event':
setSelectedItemId(event.annotationsId[0]);
styleOps.setStyleExclusivelyToAnnotationId(clickStyle, event.annotationsId[0]);

if (isLeftClick(event)) {
setSelectedItemId(event.annotationsId[0]);
styleOps.setStyleExclusivelyToAnnotationId(clickStyle, event.annotationsId[0]);
}
break;

case 'mouse_move_on_annotation_event': {
Expand All @@ -303,22 +317,30 @@ const useEngineStateMachine = (
}
if (isModeCreation()) {
switch (event.type) {

case 'context_menu_event':
event.event.preventDefault();
break;
case 'key_down_event':
keyDownEvent(event);
keyDownEventWhileCreation(event, operations);
keyPreventDefault(event);
break;
case 'key_up_event':
keyUpEvent(event);
break;
case 'mouse_down_on_annotation_event':
case 'mouse_down_on_existing_point_event':
case 'mouse_down_event':
if (event.currentGeometry.length === 0) {
case 'mouse_down_event': {
if (isLeftClick(event) && event.currentGeometry.length === 0) {
operations.addPoint(event.at);
styleOps.setStyleExclusivelyToPointId(hiddenStyle, '0');
}
styleOps.removeStyleFromPointsByStyleNames(hiddenStyle.name);
if (isRightClick(event)) {
const lastPoint = operations.deleteLastPoint();
styleOps.setStyleExclusivelyToPointId(hiddenStyle, lastPoint.toString());
}
break;
}
case 'mouse_move_on_existing_point_event':
if (isPolygonReadyToBeManuallyCompletedByClickOnFirstPoint(event.currentGeometry, event.pointIds)) {
styleOps.setStyleExclusivelyToPointId(highlightStyle, '0');
Expand All @@ -345,7 +367,9 @@ const useEngineStateMachine = (
}
break;
case 'mouse_up_event':
mouseUpEvent(event, operations);
if(isLeftClick(event)) {
mouseUpEvent(event, operations);
}
break;
case 'context_menu_event':
event.event.preventDefault()
Expand All @@ -357,7 +381,7 @@ const useEngineStateMachine = (
if (isModeEdition()) {
switch (event.type) {
case 'key_down_event':
keyDownEvent(event);
keyPreventDefault(event);
break;
case 'key_up_event':
keyUpEvent(event);
Expand Down
51 changes: 28 additions & 23 deletions src/annotation-engine/use-annotation-engine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export type Events =
| MouseUpOnExistingPointEvent
| MouseWheelEvent
| contextMenuEvent;

export type OnEvent = (event: Events, operations: Operations) => void;

export interface MouseDownEvent {
Expand Down Expand Up @@ -129,6 +129,7 @@ export interface Operations {
movePoint(pointId: PointId, to: Coordinates): void;
finishCurrentLine(): void;
drawOnCanvas(draw: (context2d: CanvasRenderingContext2D) => void): void;
deleteLastPoint(): number;
}

const useAnnotationEngine = ({
Expand Down Expand Up @@ -171,8 +172,8 @@ const useAnnotationEngine = ({
}

if (!isPointAnnotation(pathData)) {
return pathData.lines.some((line) => renderingContext?.isPointInStroke(line, x, y))
}
return pathData.lines.some((line) => renderingContext?.isPointInStroke(line, x, y));
}

return false;
}
Expand Down Expand Up @@ -268,6 +269,7 @@ const useAnnotationEngine = ({
const currentCanvasRef = canvasRef.current;
let delayDraw: Array<(context2d: CanvasRenderingContext2D) => void> = [];
const operations: Operations = {
// -1 is here because he return also the index of the array of points
addPoint: (at: Coordinates) => annotationToEditPointsRef.current.push(at) - 1,
movePoint: (pointId: PointId, to: Coordinates): void => {
annotationToEditPointsRef.current[pointId] = to;
Expand All @@ -278,14 +280,19 @@ const useAnnotationEngine = ({
drawOnCanvas: (draw: (context2d: CanvasRenderingContext2D) => void) => {
delayDraw.push(draw);
},
deleteLastPoint: () => {
annotationToEditPointsRef.current.splice((annotationToEditPointsRef.current).length - 2, 1);

return annotationToEditPointsRef.current.length - 1;
}
};

const clickedExistingPointsIds = (coordinates: Array<Coordinates>, clickAt: Coordinates): Array<PointId> => {
const newCoordinates = [...coordinates];
if (!annotationToEdit) {
newCoordinates.pop()
newCoordinates.pop();
}

return newCoordinates
.map((coordinate, idx) => ({ coordinate, idx }))
.filter(({ coordinate }) => areCoordinatesInsideCircle(coordinate, clickAt, EXISTING_POINT_RADIUS_DETECTION))
Expand Down Expand Up @@ -321,8 +328,8 @@ const useAnnotationEngine = ({
event,
},
operations,
);
} else {
);
} else {
const currentGeometry = [...annotationToEditPointsRef.current];
onEvent(
{
Expand Down Expand Up @@ -360,8 +367,8 @@ const useAnnotationEngine = ({
},
operations,
)
}
}


if (clickedPointIds.length > 0) {
return onEvent(
Expand All @@ -374,8 +381,8 @@ const useAnnotationEngine = ({
},
operations,
);
}
}

return onEvent(
{
type: 'mouse_down_event',
Expand All @@ -385,7 +392,7 @@ const useAnnotationEngine = ({
},
operations,
);

});

const handleMouseMove = (event: MouseEvent) =>
Expand All @@ -400,7 +407,7 @@ const useAnnotationEngine = ({

return ({ id, style });
})

return onEvent(
{
type: 'mouse_move_on_annotation_event',
Expand All @@ -425,8 +432,7 @@ const useAnnotationEngine = ({
},
operations,
);
}

}
return onEvent(
{
type: 'mouse_move_event',
Expand Down Expand Up @@ -477,15 +483,14 @@ const useAnnotationEngine = ({

const handleContextMenu = (event: MouseEvent) =>
handleEvent(() => {
onEvent(
{
type: 'context_menu_event',
event,
},
operations,
);
onEvent(
{
type: 'context_menu_event',
event,
},
operations,
);
});

if (currentCanvasRef) {
const canvasRenderingContext = currentCanvasRef.getContext('2d');

Expand Down
3 changes: 3 additions & 0 deletions src/basic-annotation-engine/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ const BasicAnnotationEngine: FC<AnnotationEngineProps> = ({
}
}
break;
case 'context_menu_event':
event.event.preventDefault();
break;
case 'mouse_up_on_existing_point_event':
case 'mouse_up_event':
if (state.current.dragOngoing) {
Expand Down

0 comments on commit 6cebc4d

Please sign in to comment.