feat: boxes

packages/timing/src/resource-controllers/animation/index.jsx

@@ -70,6 +70,23 @@ const AnimationComponent = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [Animation, join(uri, path), resource]);
   const fps = 1 / resource.frameRate;
+  const boxes = [];
+  for (let y = 0; y < resource.directionCount; ++y) {
+    for (let x = 0; x < resource.frameCount; ++x) {
+      boxes.push(
+        <span
+          className="animation__frame-box"
+          key={`${y}-${x}`}
+          style={{
+            height: `${resource.frameSize[1]}px`,
+            left: 1 + x * resource.frameSize[0],
+            width: `${resource.frameSize[0]}px`,
+            top: 1 + y * resource.frameSize[1],
+          }}
+        />,
+      );
+    }
+  }
   return (
     <div className="animation-renderer">
       <div className="animation__visualization">
@@ -77,10 +94,13 @@ const AnimationComponent = ({
           <span className="animation__frame-count">{resource.frameCount}</span>
           <div className="animation__image-horizontal">
             <span className="animation__direction-count">{resource.directionCount}</span>
-            <img
-              alt="animation"
-              src={join('/projects', project, resource.imageUri)}
-            />
+            <div className="animation__image">
+              <img
+                alt="animation"
+                src={join('/projects', project, resource.imageUri)}
+              />
+              {boxes}
+            </div>
           </div>
         </div>
         <Stage

packages/timing/src/resource-controllers/animation/index.scss

@@ -31,9 +31,17 @@
   display: flex;
 }
 
-.animation__visualization img {
-  border-left: 1px solid #333;
-  border-top: 1px solid #333;
+.animation__image {
+  position: relative;
+  img {
+    border-left: 1px solid #333;
+    border-top: 1px solid #333;
+  }
+}
+
+.animation__frame-box {
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
 .animation__frame-rate {