Skip to content

Commit 8dd2a60

Browse files
trevorgerhardttrevorgerhardt
committed
Fix pickable nodes
1 parent ac076ed commit 8dd2a60

File tree

6 files changed

+53
-49
lines changed

6 files changed

+53
-49
lines changed

‎apps/osm-merge/src/hooks/log.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { activeTasksAtom } from "@/state/status"
33
import { useAtomValue, useSetAtom } from "jotai"
44
import { useCallback } from "react"
55

6-
export default function useStartTask() {
6+
export default function useStartTaskLog() {
77
const setTasks = useSetAtom(activeTasksAtom)
88
const logMessage = useSetAtom(addLogMessageAtom)
99

‎apps/osm-merge/src/hooks/map.ts‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
PathLayer,
1313
ScatterplotLayer,
1414
} from "@deck.gl/layers"
15-
import useStartTask from "./log"
15+
import useStartTaskLog from "./log"
1616
import { bboxPolygon } from "@turf/turf"
1717

1818
export function useFitBoundsOnChange(bbox?: GeoBbox2D) {
@@ -85,7 +85,7 @@ export function useBitmapTileLayer(osm?: Osm | null) {
8585
}
8686

8787
export function usePickableOsmTileLayer(osm?: Osm | null) {
88-
const startTask = useStartTask()
88+
const startTaskLog = useStartTaskLog()
8989
const osmWorker = useOsmWorker()
9090

9191
const [selectedEntity, setSelectedEntity] = useAtom(selectedEntityAtom)
@@ -102,7 +102,7 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
102102
extent: bbox,
103103
getTileData: async (tile) => {
104104
if (tile.index.z < MIN_PICKABLE_ZOOM) {
105-
const task = startTask(
105+
const taskLog = startTaskLog(
106106
`generating bitmap for tile ${tile.index.z}/${tile.index.x}/${tile.index.y}`,
107107
"debug",
108108
)
@@ -113,7 +113,7 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
113113
tile.index,
114114
BITMAP_TILE_SIZE,
115115
)
116-
task.end(
116+
taskLog.end(
117117
`bitmap for tile ${tile.index.z}/${tile.index.x}/${tile.index.y} generated`,
118118
"debug",
119119
)
@@ -122,7 +122,7 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
122122

123123
// Show pickable data
124124
const bbox = tile.bbox as GeoBoundingBox
125-
const task = startTask(
125+
const taskLog = startTaskLog(
126126
`generating data for tile ${tile.index.z}/${tile.index.x}/${tile.index.y}`,
127127
"debug",
128128
)
@@ -132,7 +132,7 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
132132
bbox.east,
133133
bbox.north,
134134
])
135-
task.end(
135+
taskLog.end(
136136
`tile data for ${tile.index.z}/${tile.index.x}/${tile.index.y} generated`,
137137
"debug",
138138
)
@@ -174,38 +174,6 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
174174
)
175175
}
176176

177-
if ("nodes" in data) {
178-
layers.push(
179-
new ScatterplotLayer({
180-
id: `${tilePrefix}:nodes`,
181-
data: {
182-
length: data.nodes.positions.length / 2,
183-
attributes: {
184-
getPosition: { value: data.nodes.positions, size: 2 },
185-
ids: data.nodes.ids,
186-
},
187-
},
188-
pickable: true,
189-
autoHighlight: true,
190-
radiusUnits: "meters",
191-
getRadius: 3,
192-
radiusMinPixels: 1,
193-
radiusMaxPixels: 10,
194-
getFillColor: [255, 255, 255, 255],
195-
highlightColor: [255, 0, 0, 255 * 0.5],
196-
onClick: (info) => {
197-
console.log("ScatterplotLayer.onClick", info)
198-
if (info.picked) {
199-
const nodeId = data.nodes.ids.at(info.index)
200-
if (nodeId) {
201-
setSelectedEntity(osm.nodes.getById(nodeId))
202-
}
203-
return true
204-
}
205-
},
206-
}),
207-
)
208-
}
209177
if ("ways" in data) {
210178
layers.push(
211179
new PathLayer({
@@ -239,6 +207,40 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
239207
)
240208
}
241209

210+
if ("nodes" in data) {
211+
layers.push(
212+
new ScatterplotLayer({
213+
id: `${tilePrefix}:nodes`,
214+
data: {
215+
length: data.nodes.positions.length / 2,
216+
attributes: {
217+
getPosition: { value: data.nodes.positions, size: 2 },
218+
},
219+
},
220+
pickable: true,
221+
autoHighlight: true,
222+
radiusUnits: "meters",
223+
getRadius: 3,
224+
radiusMinPixels: 1,
225+
radiusMaxPixels: 10,
226+
getFillColor: [255, 255, 255, 255],
227+
highlightColor: [255, 0, 0, 255 * 0.5],
228+
onClick: (info) => {
229+
if (info.picked) {
230+
const nodeId = data.nodes.ids.at(info.index)
231+
console.log("ScatterplotLayer.onClick", nodeId, info)
232+
if (nodeId) {
233+
setSelectedEntity(osm.nodes.getById(nodeId))
234+
} else {
235+
setSelectedEntity(null)
236+
}
237+
return true
238+
}
239+
},
240+
}),
241+
)
242+
}
243+
242244
if (
243245
process.env.NODE_ENV === "development" &&
244246
tile.bbox &&
@@ -263,7 +265,7 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
263265
return layers
264266
},
265267
})
266-
}, [osm, osmWorker, setSelectedEntity, startTask])
268+
}, [osm, osmWorker, setSelectedEntity, startTaskLog])
267269

268270
return {
269271
layer,

‎apps/osm-merge/src/hooks/osm.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as Comlink from "comlink"
44
import { useAtom, useAtomValue, useSetAtom } from "jotai"
55
import { Osm } from "osm.ts"
66
import { useEffect, useMemo, useState } from "react"
7-
import useStartTask from "./log"
7+
import useStartTaskLog from "./log"
88
import { useFitBoundsOnChange } from "./map"
99
import { osmAtomFamily } from "@/state/osm"
1010

@@ -25,7 +25,7 @@ export function useOsmFile(id: string, file: File | null) {
2525
const [osm, setOsm] = useAtom(osmAtomFamily(id))
2626
const [isLoading, setIsLoading] = useState(false)
2727
const osmWorker = useOsmWorker()
28-
const startTask = useStartTask()
28+
const startTask = useStartTaskLog()
2929
const bbox = useMemo(() => osm?.bbox(), [osm])
3030

3131
useFitBoundsOnChange(bbox)

‎apps/osm-merge/src/pages/merge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import useStartTask from "@/hooks/log"
1+
import useStartTaskLog from "@/hooks/log"
22
import {
33
useBitmapTileLayer,
44
usePickableOsmTileLayer,
@@ -53,7 +53,7 @@ export default function Merge() {
5353
const osmWorker = useOsmWorker()
5454
const [isTransitioning, startTransition] = useTransition()
5555
const [changes, setChanges] = useState<OsmChanges | null>(null)
56-
const startTask = useStartTask()
56+
const startTask = useStartTaskLog()
5757
const map = useAtomValue(mapAtom)
5858

5959
const baseTileLayer = useBitmapTileLayer(baseOsm)

‎apps/osm-merge/src/workers/osm.worker.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
} from "osm.ts"
1212
import * as Performance from "osm.ts/performance"
1313

14+
// TODO: Use a "WorkerCache" instead of `this.[]` structure
15+
1416
const osmWorker = {
1517
log: (message: string, type: StatusType) =>
1618
type === "error" ? console.error(message) : console.log(message),

‎packages/osm.ts/src/osm.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -139,15 +139,15 @@ export class Osm {
139139
const nodeCandidates = this.nodes.withinBbox(bbox)
140140
const nodePositions = new Float64Array(nodeCandidates.length * 2)
141141
const ids = new IdArrayType(nodeCandidates.length)
142-
let pIndex = 0
143-
for (const nodeIndex of nodeCandidates) {
142+
for (let i = 0; i < nodeCandidates.length; i++) {
143+
const nodeIndex = nodeCandidates[i]
144144
// Skip nodes with no tags, likely just a way node
145145
if (!this.nodes.tags.hasTags(nodeIndex)) continue
146146

147147
const [lon, lat] = this.nodes.getNodeLonLat({ index: nodeIndex })
148-
ids[pIndex] = this.nodes.ids.at(nodeIndex)
149-
nodePositions[pIndex++] = lon
150-
nodePositions[pIndex++] = lat
148+
ids[i] = this.nodes.ids.at(nodeIndex)
149+
nodePositions[i * 2] = lon
150+
nodePositions[i * 2 + 1] = lat
151151
}
152152
console.timeEnd("Osm.getNodesInBbox")
153153
return {

0 commit comments

Comments
 (0)