ClippingBoxes Context (#13)

Contextを<Stage>内にブリッジする

src/ClippingBoxes.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { Image } from "react-konva";
+import { useBoxesProps } from "./contextData";
 
 const ClippingBoxes: React.FC<{
   currentFrame: CanvasImageSource;
-  boxesProps: BoxProps[]; // TODO: コンテキストにするとレンダリングされないのを治す
-}> = ({ currentFrame, boxesProps }) => {
+}> = ({ currentFrame }) => {
+  const boxesProps = useBoxesProps();
+
   return (
     <>
       {(() =>

src/OutputArea.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Stage, Layer, Image } from "react-konva";
 import ClippingBoxes from "./ClippingBoxes";
-import { useBoxesProps } from "./contextData";
+import { useBoxesProps, boxesPropsContext } from "./contextData";
 
 const OutputArea: React.FC<{
   layoutSize: RectSize;
   baseCanvas: CanvasImageSource;
 }> = ({ layoutSize, baseCanvas }) => {
-  // TODO: 子に渡しているだけのため消したい
+  // Contextは<Stage>を通り抜けないためブリッジする必要がある
   const boxesProps = useBoxesProps();
 
   return (
@@ -16,10 +16,12 @@ const OutputArea: React.FC<{
       width={layoutSize.width}
       height={layoutSize.height}
     >
-      <Layer>
-        <Image image={baseCanvas} />
-        <ClippingBoxes currentFrame={baseCanvas} boxesProps={boxesProps} />
-      </Layer>
+      <boxesPropsContext.Provider value={boxesProps}>
+        <Layer>
+          <Image image={baseCanvas} />
+          <ClippingBoxes currentFrame={baseCanvas} />
+        </Layer>
+      </boxesPropsContext.Provider>
     </Stage>
   );
 };