[deepamehta-devel] custom renderer question

[Jörg Richter]

HTML based topic rendering BREAKTHROUGH (#505).

HTML based topic rendering has reached a crucial state. It can now friendly coexist with Canvas based topic rendering. A DM View Customizer can be HTML-based, or Canvas-based, or hybrid. Various View Customizers (possibly provided by different DM plugins) can be active at the same time and perform together.

Note: also with HTML based topic rendering a Canvas is always involved, mainly for drawing the associations.

For the moment a DM View Customizer provides 7 hooks (all are optional):

General:
    - update_topic() -- sync the view once the model has changed (topic content change or retype)
    - move_topic() -- sync the view once the model has changed (topic position change)
Canvas based:
    - draw_topic() -- draw a topic on the canvas
    - on_mousedown() -- intercept mouse events on the canvas
HTML based:
    - topic_dom() -- provide the topic's basic DOM
    - topic_dom_appendix() -- modify the topic DOM once it is added to the document
    - topic_dom_draggable_handle() -- configure which part of the topic DOM initiates dragging

To demonstrate HTML based topic rendering the demo Box Renderer plugin is now divided into 2 plugins:
    https://github.com/jri/dm4-box-renderer-canvas
    https://github.com/jri/dm4-box-renderer-html

So the known dm4-box-renderer (which is now defunct) is actually renamed to dm4-box-renderer-canvas. The new dm4-box-renderer-html provides the very same look & feel but renders topics as HTML. So you can e.g. inspect the topic DOM in the Web Console as usual.

HTML based topic rendering has several advantages. Because drawing, event handling and object click detection is performed natively by the browser, implementing a HTML based DM View Customizer is much more comfortable due to the power of the DOM. Furthermore the topic style is customizable via CSS. In contrast on a Canvas there are no objects, just pixels. It means laborious work for the View Customizer developer to emulate clickable and movable objects on a Canvas.

The heart of the Canvas based Box Renderer consist of 100 lines of code (mostly boring geometry calculations). The HTML version consist of 50 lines of code (mostly handy jQuery DOM manipulations).

You have 3 choices:
- Do not install a Box Renderer and get the "classic" DM look & feel (which should be as stable as before).
- Install the Canvas Box Renderer to get Torsten's "modern" look & feel (should be stable as well).
- Install the HTML Box Renderer to get (nearly) the very same modern look & feel (there are still minor issues).
You can even install both Box Renderers together to get a mixed experience. This is not very useful in this case, just to demonstrate the flexibility.

Testing all 3 scenarios is very appreciated.

Everything is available in DM's and the respective Box Renderer's master branches.

Cheers,
Jörg