1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | import theConfig from '../../../data/Config.js'; |
26 | import theTravelNotesData from '../../../data/TravelNotesData.js'; |
27 | import theTranslator from '../../../core/uiLib/Translator.js'; |
28 | import theDataSearchEngine from '../../../data/DataSearchEngine.js'; |
29 | import theGeometry from '../../../core/lib/Geometry.js'; |
30 | import theUtilities from '../../../core/uiLib/Utilities.js'; |
31 | |
32 | import TempWayPointMarkerELData from '../TempWayPointMarkerEL/TempWayPointMarkerELData.js'; |
33 | import TempWayPointMarkerMouseOutEL from '../TempWayPointMarkerEL/TempWayPointMarkerMouseOutEL.js'; |
34 | import TempWayPointMarkerDragStartEL from '../TempWayPointMarkerEL/TempWayPointMarkerDragStartEL.js'; |
35 | import TempWayPointMarkerContextMenuEL from '../TempWayPointMarkerEL/TempWayPointMarkerContextMenuEL.js'; |
36 | import TempWayPointMarkerClickEL from '../TempWayPointMarkerEL/TempWayPointMarkerClickEL.js'; |
37 | import TempWayPointMarkerDragEndEL from '../TempWayPointMarkerEL/TempWayPointMarkerDragEndEL.js'; |
38 | |
39 | import { NOT_FOUND, ZERO, ONE, TWO, WAY_POINT_ICON_SIZE } from '../../../main/Constants.js'; |
40 | |
41 | import { LeafletDivIcon, LeafletMarker, LeafletDomEvent } from '../../../leaflet/LeafletImports.js'; |
42 | |
43 | |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | class EditedRouteMouseOverEL { |
50 | |
51 | |
52 | |
53 | |
54 | |
55 | |
56 | static #showDragTooltip = ONE; |
57 | |
58 | |
59 | |
60 | |
61 | |
62 | |
63 | static handleEvent ( mouseEvent ) { |
64 | const route = theDataSearchEngine.getRoute ( mouseEvent.target.objId ); |
65 | TempWayPointMarkerELData.initialLatLng = [ mouseEvent.latlng.lat, mouseEvent.latlng.lng ]; |
66 | if ( TempWayPointMarkerELData.marker ) { |
67 | TempWayPointMarkerELData.marker.setLatLng ( mouseEvent.latlng ); |
68 | } |
69 | else { |
70 | |
71 | |
72 | TempWayPointMarkerELData.marker = new LeafletMarker ( |
73 | mouseEvent.latlng, |
74 | { |
75 | icon : new LeafletDivIcon ( |
76 | { |
77 | iconSize : [ WAY_POINT_ICON_SIZE, WAY_POINT_ICON_SIZE ], |
78 | iconAnchor : [ |
79 | WAY_POINT_ICON_SIZE / TWO, |
80 | WAY_POINT_ICON_SIZE |
81 | ], |
82 | html : '<div class="TravelNotes-Map-WayPoint TravelNotes-Map-WayPointTmp' + |
83 | '"></div><div class="TravelNotes-Map-WayPointText">?</div>', |
84 | className : 'TravelNotes-Map-WayPointStyle' |
85 | } |
86 | ), |
87 | draggable : true |
88 | } |
89 | ); |
90 | |
91 | |
92 | let tooltipText = ''; |
93 | if ( |
94 | NOT_FOUND === theConfig.route.showDragTooltip |
95 | || |
96 | EditedRouteMouseOverEL.#showDragTooltip <= theConfig.route.showDragTooltip |
97 | ) { |
98 | EditedRouteMouseOverEL.#showDragTooltip ++; |
99 | tooltipText = theTranslator.getText ( 'EditedRouteMouseOverEL - Drag and drop to add a waypoint' ) + ' - '; |
100 | } |
101 | tooltipText += route.computedName + ' - '; |
102 | let distance = theGeometry.getClosestLatLngDistance ( route, [ mouseEvent.latlng.lat, mouseEvent.latlng.lng ] ) |
103 | .distance; |
104 | distance += route.chainedDistance; |
105 | tooltipText += theUtilities.formatDistance ( distance ); |
106 | |
107 | TempWayPointMarkerELData.marker.bindTooltip ( tooltipText ); |
108 | TempWayPointMarkerELData.marker.getTooltip ( ).options.offset = [ ZERO, ZERO ]; |
109 | |
110 | |
111 | TempWayPointMarkerELData.marker.addTo ( theTravelNotesData.map ); |
112 | |
113 | |
114 | LeafletDomEvent.on ( |
115 | TempWayPointMarkerELData.marker, |
116 | 'mouseout', |
117 | TempWayPointMarkerMouseOutEL.handleEvent |
118 | ); |
119 | LeafletDomEvent.on ( |
120 | TempWayPointMarkerELData.marker, |
121 | 'dragstart', |
122 | TempWayPointMarkerDragStartEL.handleEvent |
123 | ); |
124 | LeafletDomEvent.on ( |
125 | TempWayPointMarkerELData.marker, |
126 | 'dragend', |
127 | TempWayPointMarkerDragEndEL.handleEvent |
128 | ); |
129 | LeafletDomEvent.on ( |
130 | TempWayPointMarkerELData.marker, |
131 | 'contextmenu', |
132 | TempWayPointMarkerContextMenuEL.handleEvent |
133 | ); |
134 | LeafletDomEvent.on ( |
135 | TempWayPointMarkerELData.marker, |
136 | 'click', |
137 | TempWayPointMarkerClickEL.handleEvent |
138 | ); |
139 | } |
140 | } |
141 | } |
142 | |
143 | export default EditedRouteMouseOverEL; |
144 | |
145 | |
146 | |