Implement for loop in trace

client/src/components/renderer/parser/parse.ts

@@ -1,14 +1,28 @@
-import { Dictionary as Dict } from "lodash";
+import { Dictionary as Dict, flatMap, range } from "lodash";
 import {
   ComponentDefinition,
   ComponentDefinitionMap,
   IntrinsicComponentMap,
   ParsedComponent,
   ParsedComponentDefinition,
+  TraceComponent,
 } from "protocol";
 import { applyScope } from "./applyScope";
 import { Context, Key } from "./Context";
 import { normalize } from "./normalize";
+
+function parseFor(component: TraceComponent<string, Dict<any>>) {
+  const { $for, ...rest } = component;
+  if ($for) {
+    const { $let = "i", $from = 0, $to = 1, $step = 1 } = $for;
+    return range($from, $to, $step).map((i) =>
+      applyScope(normalize({ [$let]: i }), normalize(rest as any))
+    );
+  } else {
+    return [component];
+  }
+}
+
 /**
  * A parser for a list of Components
  * @param definition a list of Components
@@ -20,11 +34,17 @@ export function parse<T extends IntrinsicComponentMap>(
   components: ComponentDefinitionMap,
   context: Context<T[Key<T>]> = {}
 ): ParsedComponentDefinition<T> {
-  return definition.flatMap((component) => {
-    const { $ } = component;
-    const scoped = applyScope(normalize(context), normalize(component) as any);
-    return $ in components
-      ? parse(components[$], components, scoped)
-      : [scoped as ParsedComponent<Key<T>, T[Key<T>]>];
+  return definition.flatMap((c) => {
+    const { $ } = c;
+    const c2 = parseFor(c);
+    return flatMap(c2, (component) => {
+      const scoped = applyScope(
+        normalize(context),
+        normalize(component) as any
+      );
+      return $ in components
+        ? parse(components[$], components, scoped)
+        : [scoped as ParsedComponent<Key<T>, T[Key<T>]>];
+    });
   });
 }

internal-renderers/src/d2-renderer/D2RendererOptions.ts

@@ -40,7 +40,7 @@ export const defaultD2RendererOptions: D2RendererOptions = {
     height: 64,
   },
   tileSubdivision: 0,
-  refreshInterval: 1000 / 60,
+  refreshInterval: 1000 / 30,
   animationDuration: 150,
   debounceInterval: 75,
   backgroundColor: "#ffffff",

resources/traces/v1.0.5/grid-astar.trace.json

@@ -1,7 +1,6 @@
 {
   "version": "1.0.5",
   "render": {
-    "context": {},
     "components": {
       "tile": [
         {
@@ -15,7 +14,7 @@
       ]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [{ "$": "tile" }] }
+      "main": { "components": [{ "$": "tile" }] }
     },
     "path": {
       "pivot": { "x": "{{$.event.x + 0.5}}", "y": "{{$.event.y + 0.5}}" },

resources/traces/v1.0.5/loop.trace.yaml

@@ -0,0 +1,24 @@
+version: 1.0.5
+render:
+  components:
+    tile:
+      - $: rect
+        width: 1
+        height: 1
+        x: "{{$.event.x + $.i}}"
+        y: "{{$.event.y}}"
+        fill: "{{$.color[$.event.type]}}"
+        $for:
+          $from: 0 # Optional, default 0
+          $to: 10 # Optional, default 1
+          $step: 2 # Optional, default 1
+          $let: i # Optional, default "i"
+  views:
+    main:
+      components:
+        - $: tile
+events:
+  - type: source
+    id: 1736
+    x: 8
+    y: 15

resources/traces/v1.0.5/tile.trace.json

@@ -30,11 +30,7 @@
       ]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [{ "$": "tileboard" }] },
-      "someOtherView": {
-        "renderer": "2d-pixi",
-        "components": [{ "$": "tileboard" }]
-      }
+      "main": { "components": [{ "$": "tileboard" }] }
     }
   },
   "events": [