-
Notifications
You must be signed in to change notification settings - Fork 95
drawingLibNotes
jdittrich edited this page Jul 20, 2020
·
9 revisions
- How are primary objects and UI (e.g. handles, tooltips, etc.) separated, if at all?
- How snappy is drag and drop?
There seem to be several genres of libraries
- Libraries that focus diagramming applications (draw2d, mxgraph): They bring along almost all parts needed but they can be a bit tricky if you go against their prescribed way (after all, they are for diagramming). So e.g. nesting elements can be a bit cumbersome.
- Interactive Drawing Libraries (konva.js, paper.js): They bring a lot of well working primitives for working with shapes, interactions and animations. The downside is that, if HTML would do fine (particularly for text rendering or defining components!), they do need to reimplement everything since they draw on canvas.
- general purpose MVVMs (vue.js, react): Bring along rather few helps for drag based interactivity. So all the questions of who-drags-what and mapping mouse input and element positions based on pan and zoom need to be done manually. Work with HTML, so all that works there can be used.
- General purpose MVVM, no special purpose
- Framework for diagramming applications
- Depends on jQuery and Raphael
- The library follows a class-ish structure. The class methods are often empty and to be overwritten by the instances. See, e.g. command which then is extended by the instances
There is a command stack. All commands extend the command class. For each command (e.g. add) there seems to be a counter-command (e.g. remove.
Note: How are the commands called?
- converts to canvas coordinates to get positions (see e.g. this canvas method)
Object Oriented API 2d canvas library implemented in type script
- Base class of Node from which shapes, layers and even stage inherit
- Among other things, provides the methods for drag and drop, destroy, clone.
- Container holds things, stage, layers inherit from it
- No undo-redo included