refactor: export CanvasContextProvider to follow established context pattern

As noted [in the review](
https://github.com/drawdb-io/drawdb/pull/148#discussion_r1681584836
), I disagree with this pattern. However, I will follow it to get
these features added.

src/components/EditorCanvas/Area.jsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button, Popover, Input } from "@douyinfe/semi-ui";
 import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
 import {
@@ -9,6 +9,7 @@ import {
   State,
 } from "../../data/constants";
 import {
+  useCanvas,
   useLayout,
   useSettings,
   useUndoRedo,
@@ -19,7 +20,6 @@ import {
 import ColorPalette from "../ColorPicker";
 import { useTranslation } from "react-i18next";
 import { useHover } from "usehooks-ts";
-import { CanvasContext } from "../../context/CanvasContext";
 
 export default function Area({
   data,
@@ -33,7 +33,7 @@ export default function Area({
     pointer: {
       spaces: { diagram: pointer },
     },
-  } = useContext(CanvasContext);
+  } = useCanvas();
   const { layout } = useLayout();
   const { settings } = useSettings();
   const { setSaveState } = useSaveState();

src/components/EditorCanvas/Canvas.jsx

@@ -11,6 +11,7 @@ import Area from "./Area";
 import Relationship from "./Relationship";
 import Note from "./Note";
 import {
+  useCanvas,
   useSettings,
   useTransform,
   useDiagram,
@@ -22,14 +23,13 @@ import {
 } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { diagram } from "../../data/heroDiagram";
-import { CanvasContext, useCanvasContextProviderValue } from "../../context/CanvasContext";
 import { useEventListener } from "usehooks-ts";
 
 export default function Canvas() {
   const { t } = useTranslation();
 
   const canvasRef = useRef(null);
-  const canvasContextValue = useCanvasContextProviderValue(canvasRef);
+  const canvasContextValue = useCanvas();
   const {
     canvas: { viewBox },
     pointer,
@@ -481,7 +481,6 @@ export default function Canvas() {
   const theme = localStorage.getItem("theme");
 
   return (
-    <CanvasContext.Provider value={canvasContextValue}>
     <div className="flex-grow h-full touch-none" id="canvas">
       <div
         className="w-full h-full"
@@ -644,6 +643,5 @@ export default function Canvas() {
         </div>
       )}
     </div>
-    </CanvasContext.Provider>
   );
 }

src/components/Workspace.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import ControlPanel from "./EditorHeader/ControlPanel";
 import Canvas from "./EditorCanvas/Canvas";
+import { CanvasContextProvider } from "../context/CanvasContext";
 import SidePanel from "./EditorSidePanel/SidePanel";
 import { DB, State } from "../data/constants";
 import { db } from "../data/db";
@@ -362,7 +363,9 @@ export default function WorkSpace() {
           <SidePanel resize={resize} setResize={setResize} width={width} />
         )}
         <div className="relative w-full h-full overflow-hidden">
+          <CanvasContextProvider className="h-full w-full">
             <Canvas saveState={saveState} setSaveState={setSaveState} />
+          </CanvasContextProvider>
           {!(layout.sidebar || layout.toolbar || layout.header) && (
             <div className="fixed right-5 bottom-4">
               <FloatingControls />

src/context/CanvasContext.jsx

@@ -1,5 +1,5 @@
 import { useTransform } from "../hooks";
-import { createContext, useCallback, useMemo, useState } from "react";
+import { createContext, useCallback, useMemo, useRef, useState } from "react";
 import { useEventListener, useResizeObserver } from "usehooks-ts";
 
 export const CanvasContext = createContext({
@@ -34,10 +34,11 @@ export const CanvasContext = createContext({
   },
 });
 
-export function useCanvasContextProviderValue(canvasRef) {
+export function CanvasContextProvider({ children, ...attrs }) {
+  const canvasWrapRef = useRef(null);
   const { transform } = useTransform();
   const canvasSize = useResizeObserver({
-    ref: canvasRef,
+    ref: canvasWrapRef,
     box: "content-box",
   });
   const screenSize = useMemo(
@@ -133,11 +134,11 @@ export function useCanvasContextProviderValue(canvasRef) {
   }
 
   // Important for touch screen devices!
-  useEventListener("pointerdown", detectPointerMovement, canvasRef);
+  useEventListener("pointerdown", detectPointerMovement, canvasWrapRef);
 
-  useEventListener("pointermove", detectPointerMovement, canvasRef);
+  useEventListener("pointermove", detectPointerMovement, canvasWrapRef);
 
-  return {
+  const contextValue = {
     canvas: {
       screenSize,
       viewBox,
@@ -155,4 +156,12 @@ export function useCanvasContextProviderValue(canvasRef) {
       setStyle: setPointerStyle,
     },
   };
+
+  return (
+    <CanvasContext.Provider value={contextValue}>
+      <div {...attrs} ref={canvasWrapRef}>
+        {children}
+      </div>
+    </CanvasContext.Provider>
+  )
 }

src/hooks/index.js

@@ -1,4 +1,5 @@
 export { default as useAreas } from "./useAreas";
+export { default as useCanvas } from "./useCanvas";
 export { default as useLayout } from "./useLayout";
 export { default as useNotes } from "./useNotes";
 export { default as useSaveState } from "./useSaveState";

src/hooks/useCanvas.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { CanvasContext } from "../context/CanvasContext";
+
+export default function useCanvas() {
+  return useContext(CanvasContext);
+}