Morphic.js - programming guide
Last updated at 9:34 am UTC on 7 August 2020
Description:
https://github.com/jmoenig/morphic.js/blob/master/morphic.js#L216
Morphic.js provides a JavaScript library for lively GUIs inside single HTML Canvas elements. Each such canvas element functions as a "world" in which other visible shapes ("morphs") can be positioned and manipulated, often directly and interactively by the user.
Morphs are tree nodes and may contain any number of submorphs ("children").
All things visible in a morphic World are morphs themselves, i.e. all text rendering, blinking cursors, entry fields, menus, buttons, sliders, windows and dialog boxes etc. are created with morphic.js rather than using HTML DOM elements, and as a consequence can be changed and adjusted by the programmer regardless of proprietary browser behavior.
Each World has an - invisible - "Hand" resembling the mouse cursor (or the user's finger on touch screens) which handles mouse events, and may also have a keyboardReceiver to handle key events.
The basic idea of Morphic is to continuously run display cycles and to incrementally update the screen by only redrawing those World regions which have been "dirtied" since the last redraw. Before each shape is processed for redisplay it gets the chance to perform a "step" procedure, thus allowing for an illusion of concurrency.
