feat: area topo drawing part 1 (#1099)

* WIP: feat: area topo drawing
* add WIP disclaimer, dbl click, scale, and new termination

next.config.js

@@ -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,

package.json

@@ -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",
@@ -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",

src/app/(default)/components/Topo/Topo.tsx

@@ -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)} />
+  )
+}