refactor: Animated

packages/json/src/hooks/use-full-json.js

@@ -0,0 +1,18 @@
+import {JsonResource} from '@avocado/resource';
+import {
+  useEffect,
+  useLatus,
+  useState,
+} from '@latus/react';
+
+export default (json) => {
+  const latus = useLatus();
+  const [fullJson, setFullJson] = useState();
+  useEffect(() => {
+    const loadJson = async () => {
+      setFullJson(await JsonResource.extendJson(json));
+    };
+    loadJson();
+  }, [latus, json]);
+  return fullJson;
+};

packages/json/src/index.js

@@ -4,6 +4,7 @@ import reducer from './state/reducer';
 
 export {default as JsonTabs} from './components/json-tabs';
 export {default as JsonComponent} from './components/json';
+export {default as useFullJson} from './hooks/use-full-json';
 export {default as useJsonPatcher} from './hooks/use-json-patcher';
 export * from './state';
 

packages/timing/src/trait-components/animated.jsx

@@ -1,24 +1,11 @@
 import {join} from 'path';
 
-import {
-  Color,
-  Container,
-  Primitives,
-} from '@avocado/graphics';
-import {
-  Vector,
-} from '@avocado/math';
-import {AnimationView} from '@avocado/timing';
 import {
   PropTypes,
   React,
-  useEffect,
-  useLatus,
-  useState,
 } from '@latus/react';
 import {
   Number,
-  Stage,
   Vector as VectorComponent,
 } from '@persea/core';
 import {
@@ -26,70 +13,10 @@ import {
   useJsonPatcher,
 } from '@persea/json';
 
-import AnimationVisualization from '../components/animation-visualization';
+import Animation from './animation';
 
 const Animated = ({json, path}) => {
   const patch = useJsonPatcher();
-  const latus = useLatus();
-  const [animations, setAnimations] = useState({});
-  const [animationViews, setAnimationViews] = useState({});
-  useEffect(() => {
-    const {Animation} = latus.get('%resources');
-    setAnimations({});
-    const loadJson = async () => {
-      const animations = Object.fromEntries(
-        await Promise.all(
-          Object.entries(json.params.animations)
-            .map(async ([key, json]) => [key, await Animation.load(json)]),
-        ),
-      );
-      setAnimations(animations);
-      setAnimationViews(
-        Object.fromEntries(
-          Object.entries(animations)
-            .map(([key, animation]) => {
-              const container = new Container();
-              const view = new AnimationView(animation);
-              container.addChild(view);
-              const drawCross = (primitives, origin, color) => {
-                primitives.drawLine(
-                  origin,
-                  Vector.add(origin, [2, 0]),
-                  Primitives.lineStyle(color, 1),
-                );
-                primitives.drawLine(
-                  origin,
-                  Vector.add(origin, [-1, 0]),
-                  Primitives.lineStyle(color, 1),
-                );
-                primitives.drawLine(
-                  origin,
-                  Vector.add(origin, [1, 2]),
-                  Primitives.lineStyle(color, 1),
-                );
-                primitives.drawLine(
-                  origin,
-                  Vector.add(origin, [1, -1]),
-                  Primitives.lineStyle(color, 1),
-                );
-              };
-              const center = new Primitives();
-              drawCross(center, [0, 0], new Color(255, 255, 255));
-              container.addChild(center);
-              const offset = new Primitives();
-              drawCross(
-                offset,
-                Vector.scale(json.params.animations[key].offset, -1),
-                new Color(255, 255, 0),
-              );
-              container.addChild(offset);
-              return [key, container];
-            }),
-        ),
-      );
-    };
-    loadJson();
-  }, [latus, json]);
   return (
     <div className="animated">
       <div className="label">
@@ -97,17 +24,7 @@ const Animated = ({json, path}) => {
         <JsonTabs
           createPanel={(animation, key) => (
             <>
-              {animations[key] && (
+              <Animation json={animation} />
-                <div className="animated__visualization">
-                  <AnimationVisualization json={animations[key].toJSON()} />
-                  <Stage
-                    renderable={animationViews[key]}
-                    scalable={false}
-                    size={animations[key].frameSize}
-                    ticker={() => {}}
-                  />
-                </div>
-              )}
               <label>
                 Extends
                 <input

packages/timing/src/trait-components/animated.scss

@@ -1,4 +1,4 @@
-.animated__visualization {
+.animated .animation {
   display: flex;
   > .stage {
     padding: 1em;

packages/timing/src/trait-components/animation.jsx

@@ -0,0 +1,103 @@
+import {
+  Color,
+  Container,
+  Primitives,
+} from '@avocado/graphics';
+import {
+  Vector,
+} from '@avocado/math';
+import {AnimationView} from '@avocado/timing';
+import {
+  PropTypes,
+  React,
+  useEffect,
+  useLatus,
+  useState,
+} from '@latus/react';
+import {
+  Stage,
+} from '@persea/core';
+import {
+  useFullJson,
+} from '@persea/json';
+
+import AnimationVisualization from '../components/animation-visualization';
+
+const Animation = ({
+  json,
+}) => {
+  const fullJson = useFullJson(json);
+  const latus = useLatus();
+  const [container, setContainer] = useState({});
+  useEffect(() => {
+    if (!fullJson) {
+      return;
+    }
+    const {Animation} = latus.get('%resources');
+    const loadJson = async () => {
+      const container = new Container();
+      container.addChild(new AnimationView(await Animation.load(fullJson)));
+      const drawCross = (primitives, origin, color) => {
+        primitives.drawLine(
+          origin,
+          Vector.add(origin, [2, 0]),
+          Primitives.lineStyle(color, 1),
+        );
+        primitives.drawLine(
+          origin,
+          Vector.add(origin, [-1, 0]),
+          Primitives.lineStyle(color, 1),
+        );
+        primitives.drawLine(
+          origin,
+          Vector.add(origin, [1, 2]),
+          Primitives.lineStyle(color, 1),
+        );
+        primitives.drawLine(
+          origin,
+          Vector.add(origin, [1, -1]),
+          Primitives.lineStyle(color, 1),
+        );
+      };
+      const center = new Primitives();
+      drawCross(center, [0, 0], new Color(255, 255, 255));
+      container.addChild(center);
+      const offset = new Primitives();
+      drawCross(
+        offset,
+        Vector.scale(fullJson.offset, -1),
+        new Color(255, 255, 0),
+      );
+      container.addChild(offset);
+      setContainer(container);
+      return () => {
+        container.destroy();
+      };
+    };
+    loadJson();
+  }, [fullJson, latus]);
+  if (!fullJson || !container) {
+    return null;
+  }
+  return (
+    <div className="animation">
+      <AnimationVisualization json={fullJson} />
+      <Stage
+        renderable={container}
+        scalable={false}
+        size={fullJson.frameSize}
+        ticker={() => {}}
+      />
+    </div>
+  );
+};
+
+Animation.defaultProps = {};
+
+Animation.displayName = 'Animation';
+
+Animation.propTypes = {
+  json: PropTypes.shape({}).isRequired,
+};
+
+export default Animation;