@@ -35,18 +35,25 @@ const vm = new CoordinateVM({ view, multipleConversions: false });
3535const customWidget = document . createElement ( "div" ) ;
3636customWidget . innerHTML = `
3737<div class="custom-coordinate-conversion">
38+ <calcite-segmented-control id="custom-coordinate-mode">
39+ <calcite-segmented-control-item icon-start="selection-x" value="live" checked>Live</calcite-segmented-control-item>
40+ <calcite-segmented-control-item icon-start="pin" value="capture">Capture</calcite-segmented-control-item>
41+ </calcite-segmented-control>
3842 <calcite-select id="custom-coordinate-select"></calcite-select>
39- <calcite-inline-editable>
43+ <calcite-inline-editable id="custom-coordinate-editable" controls >
4044 <calcite-input id="custom-coordinate-input" placeholder="Enter coordinates"></calcite-input>
4145 </calcite-inline-editable>
42- <calcite-button id="custom-coordinate-capture" icon-start="pin">Capture</calcite-button>
4346</div>
4447` ;
4548
4649view . ui . add ( customWidget , "bottom-right" ) ;
4750
4851const coordinateSelect = document . getElementById ( "custom-coordinate-select" ) ;
4952const coordinateInput = document . getElementById ( "custom-coordinate-input" ) ;
53+ const coordinateMode = document . getElementById ( "custom-coordinate-mode" ) ;
54+ const coordinateEditable = document . getElementById (
55+ "custom-coordinate-editable"
56+ ) ;
5057
5158updateFormats ( ) ;
5259updateCoordinates ( ) ;
@@ -63,6 +70,33 @@ coordinateSelect.addEventListener("calciteSelectChange", (event) => {
6370 vm . activeFormat = event . target . selectedOption . value ;
6471} ) ;
6572
73+ coordinateMode . addEventListener ( "calciteSegmentedControlChange" , ( event ) => {
74+ const value = event . target . value ;
75+ vm . mode = value ;
76+ console . log ( vm . mode ) ;
77+ } ) ;
78+ 79+ async function reverseConvert ( ) {
80+ const value = coordinateInput . value ;
81+ const selectFormat = vm . conversions . at ( 0 ) ?. format ;
82+ const selectIndex =
83+ vm . formats . findIndex ( ( format ) => format . name === selectFormat ?. name ) ?? - 1 ;
84+ const format = vm . formats . getItemAt ( selectIndex ) ;
85+ console . log ( { format } ) ;
86+ const point = await vm . reverseConvert ( value , format ) ;
87+ view . goTo ( point ) ;
88+ }
89+ 90+ coordinateEditable . addEventListener ( "calciteInlineEditableEditConfirm" , ( ) => {
91+ reverseConvert ( ) ;
92+ } ) ;
93+ 94+ coordinateInput . addEventListener ( "keydown" , ( event ) => {
95+ if ( event . key === "Enter" ) {
96+ reverseConvert ( ) ;
97+ }
98+ } ) ;
99+ 66100function updateFormats ( ) {
67101 // const conversionNames = vm.conversions?.map(
68102 // (conversion) => conversion.format?.name
0 commit comments