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 b08fb66

Browse files
committed
WIP
1 parent 7aa644a commit b08fb66

File tree

9 files changed

+1549
-36
lines changed

9 files changed

+1549
-36
lines changed

‎coordinate-calcite/calcite-coordinate.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function createCustomCoordinateConversion(view) {
6262
const value = coordinateInput.value;
6363
try {
6464
const point = await vm.reverseConvert(value, activeFormat);
65-
view.goTo(point);
65+
vm.view.goTo(point);
6666
} catch (e) {
6767
coordinateInput.status = "invalid";
6868
}

‎coordinate/package-lock.json

Lines changed: 1355 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coordinate/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"dependencies": {
66
"@arcgis/core": "^4.29.5",
7+
"@fluentui/react-components": "^9.46.7",
78
"@testing-library/jest-dom": "^5.17.0",
89
"@testing-library/react": "^13.4.0",
910
"@testing-library/user-event": "^13.5.0",

‎coordinate/src/App.js

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

4-
// import CoordinateVM from "@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
54
import { useMapView } from "./hooks/useMapView";
65
import { useCoordinateConversion } from "./hooks/useCoordinateConversion";
6+
import { useCoordinateConversionVM } from "./hooks/useCoordinateConversionVM";
7+
import FluentCoordinateConversion from "./components/FluentCoordinateConversion";
78

89
function App() {
9-
const { ref, mapView } = useMapView(
10+
const { mapViewRef, mapView } = useMapView(
1011
{
1112
basemap: {
1213
portalItem: {
@@ -22,7 +23,13 @@ function App() {
2223

2324
useCoordinateConversion(mapView);
2425

25-
return <div className="App" ref={ref} />;
26+
const { coordinateConversionViewModel } = useCoordinateConversionVM(mapView);
27+
28+
return (
29+
<div className="App" ref={mapViewRef}>
30+
<FluentCoordinateConversion vm={coordinateConversionViewModel} />
31+
</div>
32+
);
2633
}
2734

2835
export default App;
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.fluent-coordinate-conversion {
2+
position: absolute;
3+
bottom: 31px;
4+
right: 15px;
5+
}
6+
7+
.fluent-coordinate-conversion .text {
8+
width: 250px;
9+
text-align: right;
10+
}
11+
12+
.fluent-coordinate-conversion .input {
13+
width: 250px;
14+
text-align: right;
15+
}
Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import {
2+
FluentProvider,
3+
webDarkTheme,
4+
Toolbar,
5+
ToolbarButton,
6+
ToolbarToggleButton,
7+
ToolbarDivider,
8+
Menu,
9+
MenuTrigger,
10+
MenuPopover,
11+
MenuList,
12+
MenuItem,
13+
Text,
14+
Input,
15+
Switch,
16+
} from "@fluentui/react-components";
17+
import * as React from "react";
18+
import { useEffect, useState } from "react";
19+
import {
20+
Edit24Regular,
21+
Settings24Regular,
22+
Location24Regular,
23+
} from "@fluentui/react-icons";
24+
25+
import { watch } from "@arcgis/core/core/reactiveUtils.js";
26+
27+
import "./FluentCoordinateConversion.css";
28+
29+
async function reverseConvert({ vm, value, activeFormat }) {
30+
//coordinateEditable.editingEnabled = false;
31+
//const value = coordinateInput.value;
32+
try {
33+
const point = await vm.reverseConvert(value, activeFormat);
34+
vm.view.goTo(point);
35+
} catch (e) {
36+
//coordinateInput.status = "invalid";
37+
}
38+
}
39+
40+
export default function FluentCoordinateConversion({ vm }) {
41+
const [activeFormat, setActiveFormat] = useState();
42+
43+
useEffect(() => {
44+
const handle = watch(
45+
() => vm?.conversions?.getItemAt(0)?.format,
46+
(format) => setActiveFormat(format),
47+
{ initial: true }
48+
);
49+
50+
return function cleanUp() {
51+
handle?.remove();
52+
};
53+
}, [vm]);
54+
55+
const [activeDisplayCoordinate, setActiveDisplayCoordinate] = useState();
56+
57+
useEffect(() => {
58+
const handle = watch(
59+
() => vm?.conversions?.getItemAt(0)?.displayCoordinate,
60+
(displayCoordinate) =>
61+
setActiveDisplayCoordinate(displayCoordinate ?? ""),
62+
{ initial: true }
63+
);
64+
65+
return function cleanUp() {
66+
handle?.remove();
67+
};
68+
}, [vm]);
69+
70+
console.log({ vm, reverseConvert, activeFormat });
71+
72+
const [checkedValues, setCheckedValues] = useState({
73+
editing: [],
74+
});
75+
76+
const onChange = (e, { name, checkedItems }) => {
77+
setCheckedValues((s) => {
78+
return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
79+
});
80+
};
81+
82+
const showEditing = checkedValues.editing.includes("edit");
83+
84+
return (
85+
<div className="fluent-coordinate-conversion">
86+
<FluentProvider theme={webDarkTheme}>
87+
<Toolbar
88+
checkedValues={checkedValues}
89+
aria-label="Default"
90+
onCheckedValueChange={onChange}
91+
>
92+
<Location24Regular />
93+
{!showEditing ? (
94+
<Text className="text">
95+
{activeDisplayCoordinate || "No position"}
96+
</Text>
97+
) : null}
98+
{showEditing ? (
99+
<Input className="input" value={activeDisplayCoordinate} />
100+
) : null}
101+
<ToolbarDivider />
102+
<ToolbarToggleButton
103+
aria-label="Edit Coordinate"
104+
name="editing"
105+
value="edit"
106+
icon={<Edit24Regular />}
107+
/>
108+
<ToolbarDivider />
109+
<Switch
110+
label="Capture"
111+
onChange={(_event, data) => {
112+
vm.mode = data.checked ? "capture" : "live";
113+
}}
114+
/>
115+
<ToolbarDivider />
116+
<Menu>
117+
<MenuTrigger>
118+
<ToolbarButton
119+
aria-label="Formats"
120+
icon={<Settings24Regular />}
121+
/>
122+
</MenuTrigger>
123+
<MenuPopover>
124+
<MenuList>
125+
<MenuItem>New </MenuItem>
126+
<MenuItem>New Window</MenuItem>
127+
<MenuItem disabled>Open File</MenuItem>
128+
<MenuItem>Open Folder</MenuItem>
129+
</MenuList>
130+
</MenuPopover>
131+
</Menu>
132+
</Toolbar>
133+
</FluentProvider>
134+
</div>
135+
);
136+
}
Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,20 @@
1-
import { useRef,useEffect,useState } from "react";
1+
import { useEffect } from "react";
22
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
33

4-
const destroyCoordinateConversion = (coordinateConversion) => {
5-
if (!coordinateConversion) {
6-
return;
7-
}
8-
9-
coordinateConversion.destroy();
10-
};
11-
12-
export function useCoordinateConversion(mapView) {
13-
const ref = useRef(null);
14-
15-
const [coordinateConversion, setCoordinateConversion] = useState();
16-
4+
export function useCoordinateConversion(view) {
175
useEffect(() => {
18-
const widget = new CoordinateConversion({ view: mapView });
6+
const widget = new CoordinateConversion({ view });
197

20-
if (mapView?.ui) {
21-
mapView.ui.add(widget, "bottom-left");
8+
if (view?.ui) {
9+
view.ui.add(widget, "bottom-left");
2210
}
2311

24-
setCoordinateConversion(widget);
25-
2612
return function cleanUp() {
27-
if (mapView?.ui) {
28-
mapView.ui.remove(widget);
13+
if (view?.ui) {
14+
view.ui.remove(widget);
2915
}
30-
destroyCoordinateConversion(widget);
31-
};
32-
}, [mapView]);
3316

34-
return { ref, coordinateConversion };
17+
widget?.destroy();
18+
};
19+
}, [view]);
3520
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useEffect, useState } from "react";
2+
import CoordinateVM from "@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
3+
4+
export function useCoordinateConversionVM(mapView) {
5+
const [coordinateConversionViewModel, setVM] = useState();
6+
7+
useEffect(() => {
8+
const vm = new CoordinateVM({ view: mapView, multipleConversions: false });
9+
10+
setVM(vm);
11+
12+
return function cleanUp() {
13+
vm?.destroy();
14+
};
15+
}, [mapView]);
16+
17+
return { coordinateConversionViewModel };
18+
}

‎coordinate/src/hooks/useMapView.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const destroyMapView = (view) => {
2020
};
2121

2222
export function useMapView(mapProperties, mapViewProperties) {
23-
const ref = useRef(null);
23+
const mapViewRef = useRef(null);
2424

2525
const [mapView, setMapView] = useState();
2626

@@ -37,7 +37,7 @@ export function useMapView(mapProperties, mapViewProperties) {
3737
return;
3838
}
3939

40-
mapView.container = ref.current;
40+
mapView.container = mapViewRef.current;
4141

4242
setMapView(mapView);
4343
}
@@ -51,5 +51,5 @@ export function useMapView(mapProperties, mapViewProperties) {
5151
};
5252
}, []);
5353

54-
return { ref, mapView };
54+
return { mapViewRef, mapView };
5555
}

0 commit comments

Comments
(0)

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