perf: schedule update logic

src/etoile/schedule/index.ts

@@ -46,22 +46,31 @@ export class Schedule extends Box {
   // execute all graph elements
   execute(render: Render, graph: Display = this) {
     render.ctx.save()
-    let matrix = graph.matrix
+    const matrix = graph.matrix
     this.applyTransform(matrix)
+
     if (graph instanceof Box) {
-      const cap = graph.elements.length
+      const elements = graph.elements
+      const cap = elements.length
+      const matrices = new Array(cap)
       for (let i = 0; i < cap; i++) {
-        const element = graph.elements[i]
-        matrix = element.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
+        const element = elements[i]
+        matrices[i] = element.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
         if (element instanceof Graph) {
-          matrix.transform(element.x, element.y, element.scaleX, element.scaleY, element.rotation, element.skewX, element.skewY)
+          matrices[i].transform(element.x, element.y, element.scaleX, element.scaleY, element.rotation, element.skewX, element.skewY)
         }
+      }
+      for (let i = 0; i < cap; i++) {
+        const element = elements[i]
+        this.applyTransform(matrices[i])
         this.execute(render, element)
       }
     }
+
     if (graph instanceof Graph) {
       graph.render(render.ctx)
     }
+
     render.ctx.restore()
   }
 }