[WIP]

src/App.tsx

@@ -9,7 +9,19 @@ import { cameraSize, videoConstraints } from "./defaultConfig";
 
 const App: React.FC = () => {
   const [baseCanvas, setBaseCanvas] = useState(createCanvas(cameraSize));
-  const [boxesProps, setBoxesProps] = useState<BoxProps[]>([]);
+  const [boxesProps, setBoxesProps] = useState<BoxProps[]>([
+    {
+      key: 0,
+      srcX: 50,
+      srcY: 100,
+      srcWidth: 1000,
+      srcHeight: 500,
+      showX: 50,
+      showY: 100,
+      showWidth: 1000,
+      showHeight: 500,
+    },
+  ]);
 
   const cameraRef = useRef<Webcam>(null);
   const frameInterval = useRef<NodeJS.Timeout>();

src/ClippingBoxes.tsx

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

src/OutputArea.tsx

@@ -18,7 +18,7 @@ const OutputArea: React.FC<{
     >
       <Layer>
         <Image image={baseCanvas} />
-        <ClippingBoxes currentFrame={baseCanvas} boxesProps={boxesProps} />
+        <ClippingBoxes currentFrame={baseCanvas} _boxesProps={boxesProps} />
       </Layer>
     </Stage>
   );