Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b6c1fa6

Browse files
committed
steps
1 parent 4a9c8a9 commit b6c1fa6

File tree

2 files changed

+202
-4
lines changed

2 files changed

+202
-4
lines changed

‎coordinate-fluent-react-js/index.html

Lines changed: 198 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,206 @@
4848
<div slot="content">
4949
<calcite-accordion selection-mode="single" scale="l">
5050
<calcite-accordion-item expanded heading="1. TODO" description="TODO" icon-start="group-layout-elements">
51-
<esri-demo-code language="js" source="TODO"></esri-demo-code>
51+
<esri-demo-code language="jsx" source="import &quot;@arcgis/core/assets/esri/themes/light/main.css&quot;;
52+
53+
import { useMapView } from &quot;./hooks/useMapView&quot;;
54+
import { useCoordinateConversionVM } from &quot;./hooks/useCoordinateConversionVM&quot;;
55+
import FluentCoordinateConversion from &quot;./components/FluentCoordinateConversion&quot;;
56+
57+
function App() {
58+
const { mapViewRef, mapView } = useMapView(
59+
{
60+
basemap: {
61+
portalItem: {
62+
id: &quot;826498a48bd0424f9c9315214f2165d4&quot;, // Colored Pencil basemap,
63+
},
64+
},
65+
},
66+
{
67+
center: [-116.545601, 33.830517],
68+
zoom: 12,
69+
}
70+
);
71+
72+
const { coordinateConversionViewModel } = useCoordinateConversionVM(mapView);
73+
74+
return (
75+
&lt;div className=&quot;App&quot; ref={mapViewRef}&gt;
76+
&lt;FluentCoordinateConversion vm={coordinateConversionViewModel} /&gt;
77+
&lt;/div&gt;
78+
);
79+
}
80+
81+
export default App;"></esri-demo-code>
5282
</calcite-accordion-item>
5383
<calcite-accordion-item heading="2. TODO" description="TODO" icon-start="list">
54-
<esri-demo-code language="js" source="TODO"></esri-demo-code>
84+
<esri-demo-code language="jsx" source="import { useEffect, useState } from &quot;react&quot;;
85+
import { watch } from &quot;@arcgis/core/core/reactiveUtils&quot;;
86+
87+
export function useActiveDisplayCoordinate(vm) {
88+
const [activeDisplayCoordinate, setActiveDisplayCoordinate] = useState();
89+
90+
useEffect(() =&gt; {
91+
const handle = watch(
92+
() =&gt; vm?.conversions?.getItemAt(0)?.displayCoordinate,
93+
(displayCoordinate) =&gt;
94+
setActiveDisplayCoordinate(displayCoordinate ?? &quot;&quot;),
95+
{ initial: true }
96+
);
97+
98+
return function cleanUp() {
99+
handle?.remove();
100+
};
101+
}, [vm]);
102+
103+
return { activeDisplayCoordinate };
104+
}
105+
"></esri-demo-code>
106+
</calcite-accordion-item>
107+
<calcite-accordion-item heading="3. TODO" description="TODO" icon-start="list">
108+
<esri-demo-code language="jsx" source="import { useEffect, useState } from &quot;react&quot;;
109+
import { watch } from &quot;@arcgis/core/core/reactiveUtils&quot;;
110+
111+
export function useActiveFormat(vm) {
112+
const [activeFormat, setActiveFormat] = useState();
113+
114+
useEffect(() =&gt; {
115+
const handle = watch(
116+
() =&gt; vm?.conversions?.getItemAt(0)?.format,
117+
(format) =&gt; setActiveFormat(format),
118+
{ initial: true }
119+
);
120+
121+
return function cleanUp() {
122+
handle?.remove();
123+
};
124+
}, [vm]);
125+
126+
return { activeFormat };
127+
}
128+
"></esri-demo-code>
129+
</calcite-accordion-item>
130+
<calcite-accordion-item heading="4. TODO" description="TODO" icon-start="list">
131+
<esri-demo-code language="jsx" source="import { FluentProvider, Input, Menu /*...*/} from &quot;@fluentui/react-components&quot;;
132+
import * as React from &quot;react&quot;;
133+
import { useState } from &quot;react&quot;;
134+
import { Edit24Regular, Settings24Regular, Location24Regular, } from &quot;@fluentui/react-icons&quot;;
135+
import Conversion from &quot;@arcgis/core/widgets/CoordinateConversion/support/Conversion&quot;;
136+
137+
export default function FluentCoordinateConversion({ vm }) {
138+
const { activeFormat } = useActiveFormat(vm);
139+
const { activeDisplayCoordinate } = useActiveDisplayCoordinate(vm);
140+
// ...
141+
const inputNode = (
142+
&lt;Input
143+
placeholder=&quot;Enter coordinates&quot;
144+
className=&quot;input&quot;
145+
defaultValue={activeDisplayCoordinate}
146+
onKeyDown={(event) =&gt; {
147+
if (event.key === &quot;Enter&quot;) {
148+
reverseConvert({
149+
vm,
150+
value: event.target.value,
151+
activeFormat,
152+
});
153+
}
154+
}}
155+
/&gt;
156+
);
157+
158+
const textNode = (
159+
&lt;Text className=&quot;text&quot;&gt;{activeDisplayCoordinate || &quot;No position&quot;}&lt;/Text&gt;
160+
);
161+
162+
const menuListNode = (
163+
&lt;MenuList&gt;
164+
{vm?.formats?.toArray().map((format) =&gt; (
165+
&lt;MenuItemRadio name=&quot;format&quot; value={format.name} key={format.name}&gt;
166+
{format.name.toLowerCase()}
167+
&lt;/MenuItemRadio&gt;
168+
))}
169+
&lt;/MenuList&gt;
170+
);
171+
172+
const menuTriggerNode = (
173+
&lt;MenuTrigger&gt;
174+
&lt;ToolbarButton aria-label=&quot;Formats&quot; icon={&lt;Settings24Regular /&gt;} /&gt;
175+
&lt;/MenuTrigger&gt;
176+
);
177+
178+
return (
179+
&lt;div className=&quot;fluent-coordinate-conversion&quot;&gt;
180+
&lt;FluentProvider theme={webDarkTheme}&gt;
181+
&lt;Toolbar
182+
checkedValues={toolbarCheckedValues}
183+
aria-label=&quot;Default&quot;
184+
onCheckedValueChange={onToolbarChange}
185+
&gt;
186+
&lt;Switch
187+
label=&quot;Capture&quot;
188+
onChange={(_event, data) =&gt; {
189+
vm.mode = data.checked ? &quot;capture&quot; : &quot;live&quot;;
190+
}}
191+
/&gt;
192+
&lt;ToolbarDivider /&gt;
193+
&lt;Location24Regular /&gt;
194+
{showEditing ? inputNode : textNode}
195+
&lt;ToolbarToggleButton
196+
aria-label=&quot;Edit Coordinate&quot;
197+
name=&quot;editing&quot;
198+
value=&quot;edit&quot;
199+
icon={&lt;Edit24Regular /&gt;}
200+
/&gt;
201+
&lt;ToolbarDivider /&gt;
202+
&lt;Menu
203+
hasCheckmarks
204+
onCheckedValueChange={onFormatChange}
205+
checkedValues={formatCheckedValues}
206+
&gt;
207+
{menuTriggerNode}
208+
&lt;MenuPopover&gt;{menuListNode}&lt;/MenuPopover&gt;
209+
&lt;/Menu&gt;
210+
&lt;/Toolbar&gt;
211+
&lt;Toaster toasterId={toasterId} /&gt;
212+
&lt;/FluentProvider&gt;
213+
&lt;/div&gt;
214+
);
215+
}"></esri-demo-code>
216+
</calcite-accordion-item>
217+
<calcite-accordion-item heading="6. TODO" description="TODO" icon-start="list">
218+
<esri-demo-code language="jsx" source=" async function reverseConvert({ vm, value, activeFormat }) {
219+
try {
220+
const point = await vm.reverseConvert(value, activeFormat);
221+
vm.view.goTo(point);
222+
} catch (e) {
223+
toastError();
224+
}
225+
}
226+
227+
const toasterId = useId(&quot;toaster&quot;);
228+
const { dispatchToast } = useToastController(toasterId);
229+
230+
const toastError = () =&gt;
231+
dispatchToast(
232+
&lt;Toast&gt;
233+
&lt;ToastTitle&gt;Error&lt;/ToastTitle&gt;
234+
&lt;ToastBody&gt;Invalid coordinates entered.&lt;/ToastBody&gt;
235+
&lt;/Toast&gt;,
236+
{ intent: &quot;error&quot; }
237+
);"></esri-demo-code>
238+
</calcite-accordion-item>
239+
<calcite-accordion-item heading="7. TODO" description="TODO" icon-start="list">
240+
<esri-demo-code language="css" source=".fluent-coordinate-conversion {
241+
position: absolute;
242+
bottom: 31px;
243+
right: 15px;
244+
}
245+
246+
.fluent-coordinate-conversion .text,
247+
.fluent-coordinate-conversion .input {
248+
width: 250px;
249+
}
250+
"></esri-demo-code>
55251
</calcite-accordion-item>
56252
</calcite-accordion>
57253
</div>

‎coordinate-fluent-react-js/src/App.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import "./App.css";
22
import "@arcgis/core/assets/esri/themes/light/main.css";
33

44
import { useMapView } from "./hooks/useMapView";
5-
import { useCoordinateConversion } from "./hooks/useCoordinateConversion";
65
import { useCoordinateConversionVM } from "./hooks/useCoordinateConversionVM";
76
import FluentCoordinateConversion from "./components/FluentCoordinateConversion";
87

8+
// default coordinate conversion widget
9+
import { useCoordinateConversion } from "./hooks/useCoordinateConversion";
10+
911
function App() {
1012
const { mapViewRef, mapView } = useMapView(
1113
{
@@ -21,7 +23,7 @@ function App() {
2123
}
2224
);
2325

24-
useCoordinateConversion(mapView);
26+
useCoordinateConversion(mapView);// setup default coordinate conversion widget
2527

2628
const { coordinateConversionViewModel } = useCoordinateConversionVM(mapView);
2729

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /