My primary goal was to minimise all calls to the canvas api at runtime.
The object structure is based on IFD -> Page -> Widget
IFD:
- - holds the canvas instance
- has the 2 timer loops 20Hz and 2Hz
- the button function onClick(key)
Page:
- - parse the svg
- init all widgets
- provide the update20Hz(now,dt) and update2Hz(now,dt) function
- provide the setVisible(bool) function
- the button function onClick(key)
Widget:
- - provide the setVisible(bool) function
The setVisible(bool) function:
- - toggle the visibility of the canvas elements.
- set/remove all listeners needed by this object.
- register/unregister button callbacks.
So if a object is not visible there should be no call to the canvas api.
The update20Hz/update2Hz are selectively used by the widgets to avoid foreach calls in the Page.
At initialization time the page parse the svg and creates the widgets by pushing the "root-group" into the widget. I thought one svg per page is better to maintain.
The widget collects the needed elements by "getElementById()" and stores it for later use.
So at runtime there should be no "getElementById()" call and only the necessary animation calls of the visible objects are pumped.
The widget selects the way it updates the canvas.
Via update20Hz, update2Hz, listener or direct button callback.
NOTE: This sounds like a reusable framework but the encapsulation isn't as far and its optimised for the internal need.
There are some calls going over parents where no interface is "rechable" or defined.