feat: add routes & fabric canvas

Subhaday · Dec 27, 2022 · 1257d55 · 1257d55
1 parent 3c35759
commit 1257d55
Show file tree

Hide file tree

Showing 18 changed files with 2,463 additions and 6,006 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
     quotes: ['error', 'single'],
     semi: ['error', 'never'],
     'react/no-unescaped-entities': ['off'],
-    'react/jsx-no-target-blank': ['off']
+    'react/jsx-no-target-blank': ['off'],
+    '@typescript-eslint/no-explicit-any': ['off']
   }
 }
diff --git a/.meteor/packages b/.meteor/packages
@@ -20,3 +20,4 @@ [email protected]  # Update client in development without reloading t
 
 [email protected]             # Define static page content in .html files
 react-meteor-data       # React higher-order component for reactively tracking Meteor data
+nathantreid:css-modules
diff --git a/.meteor/versions b/.meteor/versions
@@ -47,6 +47,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+nathantreid:[email protected]
 [email protected]
 [email protected]
 [email protected]

diff --git a/client/main.css b/client/main.css
@@ -1,4 +1,4 @@
 body {
-  padding: 10px;
+  margin: 0;
   font-family: sans-serif;
 }
diff --git a/client/main.html b/client/main.html
@@ -19,5 +19,5 @@
 </head>
 
 <body>
-  <div id="react-target"></div>
+  <div id="root"></div>
 </body>
diff --git a/client/main.tsx b/client/main.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import { Meteor } from 'meteor/meteor'
-import { render } from 'react-dom'
-import { App } from '/imports/ui/App'
+import { createRoot } from 'react-dom/client'
+import { router } from '../imports/pages/routes'
+import { RouterProvider } from 'react-router-dom'
 
 Meteor.startup(() => {
-  render(<App />, document.getElementById('react-target'))
+  const root = document.getElementById('root') as HTMLDivElement
+  createRoot(root).render(<RouterProvider router={router} />)
 })
diff --git a/imports/pages/board/Board.module.scss b/imports/pages/board/Board.module.scss
@@ -0,0 +1,8 @@
+.page {
+	width: 100vw;
+	height: 100vh;
+	.canvasContainer {
+		width: 100%;
+		height: 100%;
+	}
+}
diff --git a/imports/pages/board/Board.tsx b/imports/pages/board/Board.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import styles from './Board.module.scss'
+import { fabric } from 'fabric'
+
+export function Board() {
+  useEffect(() => {
+    const canvas = new fabric.Canvas('canvas-container', {
+      defaultCursor: 'default',
+      renderOnAddRemove: false,
+      imageSmoothingEnabled: false,
+      backgroundColor: '#F8F8F8',
+      skipOffscreen: true,
+      preserveObjectStacking: true,
+      selection: true,
+      fireRightClick: true
+    })
+    const resizeCanvasToFitWindow = () => {
+      canvas.setWidth(window.innerWidth)
+      canvas.setHeight(window.innerHeight)
+    }
+    resizeCanvasToFitWindow()
+    window.addEventListener('resize', resizeCanvasToFitWindow)
+    window.canvas = canvas
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvasToFitWindow)
+    }
+  }, [])
+
+  return (
+    <div className={styles.page}>
+      <canvas id='canvas-container' className={styles.canvasContainer} height='100%' width='100%' />
+    </div>
+  )
+}
diff --git a/imports/pages/board/index.ts b/imports/pages/board/index.ts
@@ -0,0 +1 @@
+export * from './Board'
diff --git a/imports/pages/routes.tsx b/imports/pages/routes.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { createBrowserRouter } from 'react-router-dom'
+import { Board } from './board'
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Board />
+  },
+  {
+    path: 'about',
+    element: <div>About</div>
+  }
+])
diff --git a/imports/ui/App.tsx b/imports/ui/App.tsx
diff --git a/imports/ui/Hello.tsx b/imports/ui/Hello.tsx
diff --git a/imports/ui/Info.tsx b/imports/ui/Info.tsx
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,3 +20,4 @@ [email protected] # Update client in development without reloading t

		[email protected] # Define static page content in .html files
		react-meteor-data # React higher-order component for reactively tracking Meteor data
		nathantreid:css-modules
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,5 +19,5 @@ @@
     </head>
     <body>
-      <div id="react-target"></div>
+      <div id="root"></div>
     </body>