From 7b95b70a10b062f46c7e3d6d2956f8fb664d4512 Mon Sep 17 00:00:00 2001 From: Inga Date: Sat, 18 Nov 2023 17:54:40 +0000 Subject: [PATCH] implemented label editing --- .eslintrc.cjs | 7 +- src/routePlanner/map.tsx | 2 +- src/routePlanner/marker.tsx | 15 ++- src/routePlanner/style.css | 3 +- src/routePlanner/types.ts | 30 ++--- src/routePlanner/useMarkers.test.ts | 182 ++++++++++++++++------------ src/routePlanner/useMarkers.ts | 71 +++++++++-- 7 files changed, 193 insertions(+), 117 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7e9e12e..7ee2d0f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -22,12 +22,9 @@ module.exports = { 'error', { ignoreArrowShorthand: true }, ], - /*'@typescript-eslint/no-invalid-void-type': [ + '@typescript-eslint/restrict-template-expressions': [ 'error', - { allowAsThisParameter: true }, + { allowNever: true }, ], - '@typescript-eslint/interface-name-prefix': 'off', - '@typescript-eslint/explicit-function-return-type': 'off', - '@typescript-eslint/explicit-module-boundary-types': 'off',*/ }, }; diff --git a/src/routePlanner/map.tsx b/src/routePlanner/map.tsx index 90c420f..b8fc07c 100644 --- a/src/routePlanner/map.tsx +++ b/src/routePlanner/map.tsx @@ -85,7 +85,7 @@ export const MapComponent = ({ markers, onMapClick }: MapProps) => { permanent: true, direction: 'center', className: 'text', - content: marker.label, + content: marker.shortLabel, }, circle, ) diff --git a/src/routePlanner/marker.tsx b/src/routePlanner/marker.tsx index 237b2e5..72513d3 100644 --- a/src/routePlanner/marker.tsx +++ b/src/routePlanner/marker.tsx @@ -1,15 +1,24 @@ +import { useCallback } from 'preact/hooks'; import { MarkerProps } from './types'; export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => { + const changeLongLabel = useCallback(() => { + const newLongLabel = prompt('Enter new label', marker.longLabel); + if (newLongLabel?.length) { + marker.changeLongLabel(newLongLabel); + } + }, [marker]); + return (
  • - {`Waypoint ${marker.label} (${marker.key.substring(0, 4)})`} + {`Waypoint ${marker.shortLabel} (${marker.longLabel})`} + diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css index 2af03b9..abe97f6 100644 --- a/src/routePlanner/style.css +++ b/src/routePlanner/style.css @@ -20,7 +20,7 @@ section.route-planner > section.markers { } section.route-planner > section.markers ol { - padding: 0 + padding: 0; } section.route-planner > section.markers li::before { @@ -45,6 +45,7 @@ section.route-planner > section.markers li .buttons { section.route-planner > section.markers li button { background: transparent; border: 0; + color: white; cursor: pointer; } diff --git a/src/routePlanner/types.ts b/src/routePlanner/types.ts index 678b4ef..f85397a 100644 --- a/src/routePlanner/types.ts +++ b/src/routePlanner/types.ts @@ -5,29 +5,17 @@ export type Marker = Waypoint & { remove: () => void; moveUp: () => void; moveDown: () => void; - label: string; + changeLongLabel: (newLongLabel: string) => void; + /** + * Should be at most 1-2 characters (to be displayed on map markers), can change at any time + */ + shortLabel: string; + /** + * Displayed in the list, should only change when explicitly requested by user + */ + longLabel: string; }; -type GenericReducerAction = { - type: TType; - data: TData; -}; - -export type ReducerAction = - | GenericReducerAction< - 'add', - { - coordinates: Coordinates; - remove: (key: string) => void; - moveUp: (key: string) => void; - moveDown: (key: string) => void; - } - > - | GenericReducerAction<'remove', { key: string }> - | GenericReducerAction<'moveUp', { key: string }> - | GenericReducerAction<'moveDown', { key: string }> - | GenericReducerAction<'reorder', { oldIndex: number; newIndex: number }>; - export type ReorderMarkersParams = { oldIndex: number; newIndex: number; diff --git a/src/routePlanner/useMarkers.test.ts b/src/routePlanner/useMarkers.test.ts index e8e69f6..79a1ac2 100644 --- a/src/routePlanner/useMarkers.test.ts +++ b/src/routePlanner/useMarkers.test.ts @@ -1,6 +1,10 @@ import t from 'tap'; -import { Marker, ReducerAction } from './types'; -import { createChangeStateMethods, markersReducer } from './useMarkers.js'; +import { Marker } from './types'; +import { + ReducerAction, + createChangeStateMethods, + markersReducer, +} from './useMarkers.js'; // Testing entire `useMarkers` custom hook would require us to create test preact components here // and render them into virtual DOM and check the results, which is just too much hassle @@ -38,9 +42,11 @@ const createReducersWithFivePoints = () => { const markerPattern = { key: String, + longLabel: String, moveUp: Function, moveDown: Function, remove: Function, + changeLongLabel: Function, }; void t.test('reducer', (t) => { @@ -58,11 +64,11 @@ void t.test('reducer methods', (t) => { void t.test('create markers with correct labels', (t) => { const reducers = createReducersWithFivePoints(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -71,10 +77,10 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[0]?.remove(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates2 }, - { ...markerPattern, label: '2', coordinates: coordinates3 }, - { ...markerPattern, label: '3', coordinates: coordinates4 }, - { ...markerPattern, label: '4', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates5 }, ]); t.end(); }); @@ -83,10 +89,10 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[2]?.remove(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates4 }, - { ...markerPattern, label: '4', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates5 }, ]); t.end(); }); @@ -95,10 +101,10 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[4]?.remove(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, ]); t.end(); }); @@ -107,11 +113,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[0]?.moveUp(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -120,11 +126,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[0]?.moveDown(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates2 }, - { ...markerPattern, label: '2', coordinates: coordinates1 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -133,11 +139,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[1]?.moveUp(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates2 }, - { ...markerPattern, label: '2', coordinates: coordinates1 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -146,11 +152,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[1]?.moveDown(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates3 }, - { ...markerPattern, label: '3', coordinates: coordinates2 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -159,11 +165,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[2]?.moveUp(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates3 }, - { ...markerPattern, label: '3', coordinates: coordinates2 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -172,11 +178,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[2]?.moveDown(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates4 }, - { ...markerPattern, label: '4', coordinates: coordinates3 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -185,11 +191,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[3]?.moveUp(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates4 }, - { ...markerPattern, label: '4', coordinates: coordinates3 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -198,11 +204,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[3]?.moveDown(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates5 }, - { ...markerPattern, label: '5', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates4 }, ]); t.end(); }); @@ -211,11 +217,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[4]?.moveUp(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates5 }, - { ...markerPattern, label: '5', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates4 }, ]); t.end(); }); @@ -224,11 +230,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.getMarkers()[4]?.moveDown(); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates2 }, - { ...markerPattern, label: '3', coordinates: coordinates3 }, - { ...markerPattern, label: '4', coordinates: coordinates4 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -237,11 +243,11 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.reorderMarkers({ oldIndex: 1, newIndex: 3 }); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates3 }, - { ...markerPattern, label: '3', coordinates: coordinates4 }, - { ...markerPattern, label: '4', coordinates: coordinates2 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); @@ -250,11 +256,29 @@ void t.test('reducer methods', (t) => { const reducers = createReducersWithFivePoints(); reducers.reorderMarkers({ oldIndex: 3, newIndex: 1 }); t.matchOnlyStrict(reducers.getMarkers(), [ - { ...markerPattern, label: '1', coordinates: coordinates1 }, - { ...markerPattern, label: '2', coordinates: coordinates4 }, - { ...markerPattern, label: '3', coordinates: coordinates2 }, - { ...markerPattern, label: '4', coordinates: coordinates3 }, - { ...markerPattern, label: '5', coordinates: coordinates5 }, + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '3', coordinates: coordinates2 }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates3 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, + ]); + t.end(); + }); + + void t.test('renames marker', (t) => { + const reducers = createReducersWithFivePoints(); + reducers.getMarkers()[2]?.changeLongLabel('new label'); + t.matchOnlyStrict(reducers.getMarkers(), [ + { ...markerPattern, shortLabel: '1', coordinates: coordinates1 }, + { ...markerPattern, shortLabel: '2', coordinates: coordinates2 }, + { + ...markerPattern, + shortLabel: '3', + coordinates: coordinates3, + longLabel: 'new label', + }, + { ...markerPattern, shortLabel: '4', coordinates: coordinates4 }, + { ...markerPattern, shortLabel: '5', coordinates: coordinates5 }, ]); t.end(); }); diff --git a/src/routePlanner/useMarkers.ts b/src/routePlanner/useMarkers.ts index 8278334..0eefe58 100644 --- a/src/routePlanner/useMarkers.ts +++ b/src/routePlanner/useMarkers.ts @@ -2,37 +2,74 @@ import { nanoid } from 'nanoid'; import { Dispatch, useMemo, useReducer } from 'preact/hooks'; import { reorderElements } from '../shared/collections.js'; import { Coordinates } from '../shared/types'; -import { Marker, ReducerAction, ReorderMarkersParams } from './types'; +import { Marker, ReorderMarkersParams } from './types'; + +type GenericReducerAction = { + type: TType; + data: TData; +}; + +type GenericMarkerChangeReducerAction = { + type: TType; + data: TData & { key: string }; +}; + +export type ReducerAction = + | GenericReducerAction< + 'add', + { + coordinates: Coordinates; + remove: (key: string) => void; + moveUp: (key: string) => void; + moveDown: (key: string) => void; + changeLongLabel: (key: string, newLongLabel: string) => void; + } + > + | GenericMarkerChangeReducerAction<'remove'> + | GenericMarkerChangeReducerAction<'moveUp'> + | GenericMarkerChangeReducerAction<'moveDown'> + | GenericMarkerChangeReducerAction< + 'changeLongLabel', + { newLongLabel: string } + > + | GenericReducerAction<'reorder', { oldIndex: number; newIndex: number }>; const reindexMarkers = (markers: Marker[]) => markers.map((marker, i) => { - const newLabel = `${i + 1}`; - if (marker.label === newLabel) { + const newShortLabel = `${i + 1}`; + if (marker.shortLabel === newShortLabel) { return marker; } return { ...marker, - label: newLabel, + shortLabel: newShortLabel, }; }); +const handleDefaultCase = (discriminator: never): never => { + throw new Error(`Unsupported type ${discriminator}`); +}; + export const markersReducer = ( markers: Marker[], action: ReducerAction, ): Marker[] => { const type = action.type; - switch (action.type) { + switch (type) { case 'add': { const key = nanoid(10); return reindexMarkers([ ...markers, { key, - label: 'placeholder', + shortLabel: 'placeholder', + longLabel: key.substring(0, 4), remove: () => action.data.remove(key), moveUp: () => action.data.moveUp(key), moveDown: () => action.data.moveDown(key), + changeLongLabel: (newLongLabel: string) => + action.data.changeLongLabel(key, newLongLabel), coordinates: action.data.coordinates, }, ]); @@ -66,6 +103,18 @@ export const markersReducer = ( reorderElements(markers, oldIndex, oldIndex + 1), ); } + case 'changeLongLabel': { + return markers.map((marker) => { + if (marker.key !== action.data.key) { + return marker; + } + + return { + ...marker, + longLabel: action.data.newLongLabel, + }; + }); + } case 'reorder': { return reindexMarkers( reorderElements( @@ -76,7 +125,7 @@ export const markersReducer = ( ); } default: - throw new Error(`Unsupported type ${type}`); + return handleDefaultCase(type); } }; @@ -110,6 +159,12 @@ export const createChangeStateMethods = ( data: { key }, }); + const changeMarkerLongLabel = (key: string, newLongLabel: string) => + dispatchMarkers({ + type: 'changeLongLabel', + data: { key, newLongLabel }, + }); + const addMarker = (coordinates: Coordinates) => dispatchMarkers({ type: 'add', @@ -118,6 +173,7 @@ export const createChangeStateMethods = ( moveUp: moveMarkerUp, moveDown: moveMarkerDown, remove: removeMarker, + changeLongLabel: changeMarkerLongLabel, }, }); @@ -127,6 +183,7 @@ export const createChangeStateMethods = ( moveMarkerDown, removeMarker, addMarker, + changeMarkerLongLabel, }; };