Architecture

[Martin-Pitt]

Make it more clear in code exactly how the architecture of the transform visualiser works.
From what I understand it runs through several 'passes'.

Here is how it currently works:

1. First we parse the raw CSS Transform string using a custom CSS Parser.
   • The parsed CSS transform is an Array of Objects which are definitions of what function it is and and array of arguments, complete with raw Number value & string defining CSS Unit type
   • rotate(50deg) translateY(50%) rotate(-75deg) translateY(-60%) rotate(30deg) scale(0.5) =

     [
     	{ name: "rotate", values: [ [50, "deg"] ] },
     	{ name: "translateY", values: [ [50, "%", "height"] ] },
     	{ name: "rotate", values: [ [-75, "deg"] ] },
     	{ name: "translateY", values: [ [-60, "%", "height"] ] },
     	{ name: "rotate", values: [ [30, "deg"] ] },
     	{ name: "scale", values: [0.5] }
     ]

2. Just before we paint we also initialise the environment and current layout dimensions/coordinates.
3. The first pass is mapping the parsed transform functions to absolute values in the system unit.
   • Array.map(…) against parsed transform array to interpret it to the local layout and simplifying it into more crude primitives for easy forward kinematics
   • We rely on the pre-transform layout dimensions for certain layout-dependant values such as % to parse them into absolute values against the system unit
     • This is so we don't always need to re-parse the full transform string if only the browser width changed or the user wants to interact/inspect the visualisation.
   • Returns something like:

     [
     	{ name: 'rotate', type: 'rotate', x: 0, y: 0, z: 1, a: 0.872… },
     	{ name: 'translateY', type: 'translate', x: 0, y: 50 },
     	{ name: 'rotate', type: 'rotate', x: 0, y: 0, z: 1, a: -1.308… },
     	{ name: 'translateY', type: 'translate', x, y: -60 },
     	{ name: 'rotate', type: 'rotate', x: 0, y: 0, z: 1, a: 0.523… },
     	{ name: 'scale', type: 'scale', x: 0.5, y: 0.5 }
     ]

4. Second pass is then looping through each mapped value, for each one we do two things in sequence:
   1. Forward kinematics to accumulate the new position & orientation
   2. and then draw a visual gizmo on the canvas
   • Array.forEach of the Array returned by the first pass
   • We sequentially:
     1. Compute Forward Kinematics for 1st function, Draw 1st Gizmo
     2. FK of 2nd function, Draw 2nd Gizmo
     3. FK 3rd, Draw 3rd
     4. FK 4th, Draw 4th, etc.