Skip to content

Commit 6cebc4d

Browse files
NicolasChampionRoadCareNicolasChampionRoadCare
authored
v0.3.12 (#49)
- Event on contextmenu - Delete last point
1 parent d289eb7 commit 6cebc4d

4 files changed

Lines changed: 68 additions & 36 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@thetribe/react-components",
3-
"version": "0.3.11",
3+
"version": "0.3.12",
44
"description": "Library of generic React components",
55
"main": "dist/bundle.js",
66
"types": "dist/index.d.ts",

‎src/annotation-engine/stories.tsx‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const useEngineStateMachine = (
118118
const isModeCreation = () => !isModeEdition() && numberOfPoints > 0;
119119
const isModeInactif = () => !isModeCreation() && !isModeEdition();
120120
// key codes map for shape validation (polygon and polylines)
121-
const shapeFinishedOnKeyCodes = ['Space'];
121+
const shapeFinishedOnKeyCodes = ['Space', 'Enter'];
122122
const cancelOnKeyCodes = ['Escape'];
123123

124124
const initState = () => ({
@@ -133,6 +133,7 @@ const useEngineStateMachine = (
133133
// Cancel edition
134134
setAnnotationToEdit(undefined);
135135
// Cancel creation
136+
setShapeType('INACTIVE');
136137
refAE.current?.cancelCreation();
137138
};
138139

@@ -231,6 +232,8 @@ const useEngineStateMachine = (
231232
}
232233
}
233234

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

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

248-
const keyDownEvent = (event: KeyDownEvent) => {
251+
const keyPreventDefault = (event: KeyDownEvent) => {
249252
if (event.event.code === 'Space') {
250253
// avoid page scrolldown on space key up
251254
event.event.preventDefault();
252255
}
253256
}
254-
257+
const keyDownEventWhileCreation = (event:KeyDownEvent , operations:Operations)=> {
258+
switch(event.event.key) {
259+
case "Backspace": {
260+
const lastPoint = operations.deleteLastPoint();
261+
styleOps.setStyleExclusivelyToPointId(hiddenStyle, lastPoint.toString());
262+
break;
263+
}
264+
default:
265+
break;
266+
}
267+
}
255268
const keyUpEvent = (event: KeyUpEvent) => {
256269
if (shapeFinishedOnKeyCodes.includes(event.event.code) && isGeometryReadyToBeManuallyCompleted(event.currentGeometry.length)) {
257270
shapeFinished(event.currentGeometry);
@@ -274,9 +287,10 @@ const useEngineStateMachine = (
274287
if (isModeInactif()) {
275288
switch (event.type) {
276289
case 'mouse_down_on_annotation_event':
277-
setSelectedItemId(event.annotationsId[0]);
278-
styleOps.setStyleExclusivelyToAnnotationId(clickStyle, event.annotationsId[0]);
279-
290+
if (isLeftClick(event)) {
291+
setSelectedItemId(event.annotationsId[0]);
292+
styleOps.setStyleExclusivelyToAnnotationId(clickStyle, event.annotationsId[0]);
293+
}
280294
break;
281295

282296
case 'mouse_move_on_annotation_event': {
@@ -303,22 +317,30 @@ const useEngineStateMachine = (
303317
}
304318
if (isModeCreation()) {
305319
switch (event.type) {
306-
320+
case 'context_menu_event':
321+
event.event.preventDefault();
322+
break;
307323
case 'key_down_event':
308-
keyDownEvent(event);
324+
keyDownEventWhileCreation(event, operations);
325+
keyPreventDefault(event);
309326
break;
310327
case 'key_up_event':
311328
keyUpEvent(event);
312329
break;
313330
case 'mouse_down_on_annotation_event':
314331
case 'mouse_down_on_existing_point_event':
315-
case 'mouse_down_event':
316-
if (event.currentGeometry.length === 0) {
332+
case 'mouse_down_event': {
333+
if (isLeftClick(event) && event.currentGeometry.length === 0) {
317334
operations.addPoint(event.at);
318335
styleOps.setStyleExclusivelyToPointId(hiddenStyle, '0');
319336
}
320337
styleOps.removeStyleFromPointsByStyleNames(hiddenStyle.name);
338+
if (isRightClick(event)) {
339+
const lastPoint = operations.deleteLastPoint();
340+
styleOps.setStyleExclusivelyToPointId(hiddenStyle, lastPoint.toString());
341+
}
321342
break;
343+
}
322344
case 'mouse_move_on_existing_point_event':
323345
if (isPolygonReadyToBeManuallyCompletedByClickOnFirstPoint(event.currentGeometry, event.pointIds)) {
324346
styleOps.setStyleExclusivelyToPointId(highlightStyle, '0');
@@ -345,7 +367,9 @@ const useEngineStateMachine = (
345367
}
346368
break;
347369
case 'mouse_up_event':
348-
mouseUpEvent(event, operations);
370+
if(isLeftClick(event)) {
371+
mouseUpEvent(event, operations);
372+
}
349373
break;
350374
case 'context_menu_event':
351375
event.event.preventDefault()
@@ -357,7 +381,7 @@ const useEngineStateMachine = (
357381
if (isModeEdition()) {
358382
switch (event.type) {
359383
case 'key_down_event':
360-
keyDownEvent(event);
384+
keyPreventDefault(event);
361385
break;
362386
case 'key_up_event':
363387
keyUpEvent(event);

‎src/annotation-engine/use-annotation-engine.ts‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export type Events =
3232
| MouseUpOnExistingPointEvent
3333
| MouseWheelEvent
3434
| contextMenuEvent;
35-
35+
3636
export type OnEvent = (event: Events, operations: Operations) => void;
3737

3838
export interface MouseDownEvent {
@@ -129,6 +129,7 @@ export interface Operations {
129129
movePoint(pointId: PointId, to: Coordinates): void;
130130
finishCurrentLine(): void;
131131
drawOnCanvas(draw: (context2d: CanvasRenderingContext2D) => void): void;
132+
deleteLastPoint(): number;
132133
}
133134

134135
const useAnnotationEngine = ({
@@ -171,8 +172,8 @@ const useAnnotationEngine = ({
171172
}
172173

173174
if (!isPointAnnotation(pathData)) {
174-
return pathData.lines.some((line) => renderingContext?.isPointInStroke(line, x, y))
175-
}
175+
return pathData.lines.some((line) => renderingContext?.isPointInStroke(line, x, y));
176+
}
176177

177178
return false;
178179
}
@@ -268,6 +269,7 @@ const useAnnotationEngine = ({
268269
const currentCanvasRef = canvasRef.current;
269270
let delayDraw: Array<(context2d: CanvasRenderingContext2D) => void> = [];
270271
const operations: Operations = {
272+
// -1 is here because he return also the index of the array of points
271273
addPoint: (at: Coordinates) => annotationToEditPointsRef.current.push(at) - 1,
272274
movePoint: (pointId: PointId, to: Coordinates): void => {
273275
annotationToEditPointsRef.current[pointId] = to;
@@ -278,14 +280,19 @@ const useAnnotationEngine = ({
278280
drawOnCanvas: (draw: (context2d: CanvasRenderingContext2D) => void) => {
279281
delayDraw.push(draw);
280282
},
283+
deleteLastPoint: () => {
284+
annotationToEditPointsRef.current.splice((annotationToEditPointsRef.current).length - 2, 1);
285+
286+
return annotationToEditPointsRef.current.length - 1;
287+
}
281288
};
282289

283290
const clickedExistingPointsIds = (coordinates: Array<Coordinates>, clickAt: Coordinates): Array<PointId> => {
284291
const newCoordinates = [...coordinates];
285292
if (!annotationToEdit) {
286-
newCoordinates.pop()
293+
newCoordinates.pop();
287294
}
288-
295+
289296
return newCoordinates
290297
.map((coordinate, idx) => ({ coordinate, idx }))
291298
.filter(({ coordinate }) => areCoordinatesInsideCircle(coordinate, clickAt, EXISTING_POINT_RADIUS_DETECTION))
@@ -321,8 +328,8 @@ const useAnnotationEngine = ({
321328
event,
322329
},
323330
operations,
324-
);
325-
} else {
331+
);
332+
} else {
326333
const currentGeometry = [...annotationToEditPointsRef.current];
327334
onEvent(
328335
{
@@ -360,8 +367,8 @@ const useAnnotationEngine = ({
360367
},
361368
operations,
362369
)
363-
}
364-
370+
}
371+
365372

366373
if (clickedPointIds.length > 0) {
367374
return onEvent(
@@ -374,8 +381,8 @@ const useAnnotationEngine = ({
374381
},
375382
operations,
376383
);
377-
}
378-
384+
}
385+
379386
return onEvent(
380387
{
381388
type: 'mouse_down_event',
@@ -385,7 +392,7 @@ const useAnnotationEngine = ({
385392
},
386393
operations,
387394
);
388-
395+
389396
});
390397

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

401408
return ({ id, style });
402409
})
403-
410+
404411
return onEvent(
405412
{
406413
type: 'mouse_move_on_annotation_event',
@@ -425,8 +432,7 @@ const useAnnotationEngine = ({
425432
},
426433
operations,
427434
);
428-
}
429-
435+
}
430436
return onEvent(
431437
{
432438
type: 'mouse_move_event',
@@ -477,15 +483,14 @@ const useAnnotationEngine = ({
477483

478484
const handleContextMenu = (event: MouseEvent) =>
479485
handleEvent(() => {
480-
onEvent(
481-
{
482-
type: 'context_menu_event',
483-
event,
484-
},
485-
operations,
486-
);
486+
onEvent(
487+
{
488+
type: 'context_menu_event',
489+
event,
490+
},
491+
operations,
492+
);
487493
});
488-
489494
if (currentCanvasRef) {
490495
const canvasRenderingContext = currentCanvasRef.getContext('2d');
491496

‎src/basic-annotation-engine/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ const BasicAnnotationEngine: FC<AnnotationEngineProps> = ({
6464
}
6565
}
6666
break;
67+
case 'context_menu_event':
68+
event.event.preventDefault();
69+
break;
6770
case 'mouse_up_on_existing_point_event':
6871
case 'mouse_up_event':
6972
if (state.current.dragOngoing) {

0 commit comments

Comments
 (0)