Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ability to click and auto scroll to card from minimap

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-05 11:13:07 -04:00
parent 665e82ca43
commit da2c0efefd
1 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/MiniMap.tsx
View File

@ -31,6 +31,8 @@ export function MiniMap() {
return () => window.removeEventListener('scroll', _handleScroll) return () => window.removeEventListener('scroll', _handleScroll)
}, []) }, [])
return ( return (
<div ref={el} style={{ <div ref={el} style={{
position: 'fixed', position: 'fixed',
@ -45,33 +47,44 @@ export function MiniMap() {
{Object.keys(notes.notes.value).map((noteKey: Card['id']) => { {Object.keys(notes.notes.value).map((noteKey: Card['id']) => {
const note = notes.notes.value[noteKey] const note = notes.notes.value[noteKey]
function _handleItemClick(_e: MouseEvent) {
window.scrollTo({
left: note.position.x - ((viewportWidth / 2) - (note.dimensions.w / 2)),
top: note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2)),
behavior: 'smooth'
})
}
return ( return (
<div <div className={"bg-gray-500 hover:bg-blue-500 cursor-pointer"}
onclick={_handleItemClick}
style={{ style={{
position: 'absolute', position: 'absolute',
width: `${note.dimensions.w / _MAP_SCALE_FACTOR}px`, width: `${note.dimensions.w / _MAP_SCALE_FACTOR}px`,
height: `${note.dimensions.h / _MAP_SCALE_FACTOR}px`, height: `${note.dimensions.h / _MAP_SCALE_FACTOR}px`,
top: `${(note.position.y / _MAP_SCALE_FACTOR)}px`, top: `${(note.position.y / _MAP_SCALE_FACTOR)}px`,
left: `${(note.position.x / _MAP_SCALE_FACTOR)}px`, left: `${(note.position.x / _MAP_SCALE_FACTOR)}px`,
backgroundColor: "#666",
border: '1px solid #222', border: '1px solid #222',
borderRadius: '2px' borderRadius: '2px',
zIndex: `${LayerEnum.MINIMAP + 1}`
}} }}
></div> ></div>
) )
})} })}
<div style={{ <div
position: 'absolute', className={'bg-blue-200 bg-opacity-10'}
width: `${viewportWidth / _MAP_SCALE_FACTOR}px`, style={{
height: `${viewportHeight / _MAP_SCALE_FACTOR}px`, position: 'absolute',
top: `${scrollY.value / _MAP_SCALE_FACTOR}px`, width: `${viewportWidth / _MAP_SCALE_FACTOR}px`,
left: `${scrollX.value / _MAP_SCALE_FACTOR}px`, height: `${viewportHeight / _MAP_SCALE_FACTOR}px`,
border: '1px solid #777', top: `${scrollY.value / _MAP_SCALE_FACTOR}px`,
zIndex: `${LayerEnum.MINIMAP}`, left: `${scrollX.value / _MAP_SCALE_FACTOR}px`,
backgroundColor: '#fff1', border: '1px solid #777',
borderRadius: '2px' zIndex: `${LayerEnum.MINIMAP}`,
}}></div> borderRadius: '2px'
}}></div>
</div > </div >
) )
} }