Skip to content

Commit

Permalink
feat: area topo drawing part 1 (#1099)
Browse files Browse the repository at this point in the history
* WIP: feat: area topo drawing
* add WIP disclaimer, dbl click, scale, and new termination
  • Loading branch information
btmccord authored Feb 22, 2024
1 parent 862760a commit 60ec459
Show file tree
Hide file tree
Showing 14 changed files with 2,089 additions and 1,257 deletions.
4 changes: 3 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ module.exports = {
typescript: {
ignoreBuildErrors: false
},
webpack (config) { // required by @svgr/webpack lib
webpack (config, { isServer }) { // required by @svgr/webpack lib
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'))

config.externals = [...config.externals, isServer ? { canvas: 'canvas', jsdom: 'jsdom', paper: 'paper' } : {}]

config.module.rules.push({
test: /\.svg$/i,
issuer: fileLoaderRule.issuer,
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-popover": "^1.0.3",
"@radix-ui/react-portal": "^1.0.1",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-tabs": "^1.0.1",
"@radix-ui/react-toggle": "^1.0.1",
"@turf/bbox": "^6.5.0",
Expand All @@ -50,6 +51,8 @@
"next": "^13.5.6",
"next-auth": "^4.22.1",
"nprogress": "^0.2.0",
"paper": "^0.12.17",
"paperjs-offset": "^1.0.8",
"rc-slider": "^10.0.0-alpha.5",
"react": "^18.2.0",
"react-content-loader": "^6.2.0",
Expand Down
27 changes: 27 additions & 0 deletions src/app/(default)/components/Topo/Topo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useCallback, useEffect } from 'react'
import { RouteInfo, clearProject, drawTopo, initPaper, zoomViaWheel } from './paperFunctions'

interface TopoProps {
activeRoute: RouteInfo | undefined
image: any
isEditor: boolean
}

export const Topo: React.FC<TopoProps> = ({ activeRoute, image, isEditor }) => {
const canvasCallback = useCallback((node: HTMLCanvasElement) => {
if (node !== null) {
node.addEventListener('wheel', (e: WheelEvent) => { zoomViaWheel(e) }, { passive: false })
initPaper(node, isEditor)
drawTopo(image)
}
}, [])

useEffect(() => {
clearProject()
drawTopo(image)
}, [image])

return (
<canvas className='w-full h-screen-80 border-solid border-2 border-gray-300 rounded' ref={canvasCallback} onKeyUp={e => console.log(e)} />
)
}
Loading

0 comments on commit 60ec459

Please sign in to comment.