magilus / jsdot Goto Github PK

This works combining JS and CSS.

What is not possible is to define new styles at runtime. Even if this feature 
would be available, we would need some way to make those styles persistent. 
E.g. by storing them in the graph representation.

Implement a stencil factory which allows code reuse when creating new stencils.

jsdot.fromJSON(.)
jsdot.toJSON()

also allow it to merge the loaded graph with the existing one.

Node shape

  _________________
 /                 \
/                   \
\                   /
 \_________________/

Fire before* events before the actual graph events.

When one of these handlers returns false the operation is aborted.

To showcase the library capabilities, you should add a small demo widget on
the homepage with a link to the full demo on another wiki page

Could use marker-mid to visualise them.
They should also be draggable and be saved inside the edge.

How easy is it to attach event handlers to nodes through the API? This way,
some user-defined code can be written to react to the mouse interactions
with the graph (for example, if you use the library to show the navigation
graph of the site, double clicking on the node takes you to the page
represented by the node)

add edges with both a marker-end and a marker-start

What happened to the very nice idea of allowing to put custom HTML content
inside the SVG nodes?

Add a checkbox in the toolbar to switch on/off the graph directed flag

Events are registered with jsdot.addEventHandler and triggered with 
jsdot.fireEvent.

This can easily be exposed on the API.

When the basic editor features are implemented and the view gets updated in 
response to editor and model events this ticket can be closed.

When the container has an absolute position the offsetParent for the toolbar is 
the container itself, whereas when the position is not absolute the 
offsetParent is the body.
This causes a misplacement of the toolbar on startup.

The 'center' layout doesn't scale anymore, since it uses the svg container size 
as a constraint, but now the container is allowed to grow.

Introduced by r248.

Make the delete tool selection-aware:
when something is selected delete it instead of switching to delete-mode.

On the other hand, when nothing is selected, change the mouse cursor such that 
it indicates that what is clicked next will be removed.

When aligning left or top a selection containing a concave hexagon the 
resulting coordinates are wrong.

getBBox() of a concave hexagon returns the leftmost coordinate of the shape 
(which is negative) instead of the left side of the bounding box.

the same happens with convex hexagons!

Document how new stencils can be added.

The svg may be allowed to be bigger than the container by giving it fixed 
dimensions and setting 'overflow: auto' on the container.
The should also be made to scroll automatically when dragging something.

Still it would be interesting to have zoom and pan abilities implemented using 
svg transformations.

When something is selected, dragging on the background moves the selected 
elements. Instead should do nothing (or start box selection).
When dragging a deselected element moves the already selected elements, instead 
it should clear the selection and move the element under the cursor. 

The view is separated, but it is left open which features shall be part of the 
view.

Dragging will be available in view-only but disabled by default.

Layout will not be in the view-only. But they might be useful: e.g. give a 
graph to the view and tell with which algorithm it should be displayed, the 
resulting view still being static.

When a view is created it should draw the whole graph.

Problem in function
jsdot_load_svg_shapes
defined in shapes.js

When using XMLHttpRequest the file to load (shapes.svg) must be in the same 
folder as the html file. Instead, it should be in ../img/

This is a limitation in a workaround: if, when adding e.g. a marker-end using a 
url(), the browser would load the referenced file, then we wouldn't even need 
this function.

Note that using url(../img/shapes.svg#Arrow) works in FF when viewing a static 
svg (where the marker-end is not added by js but already resent).

Reproduce:
1. in menu select node
2. select "help"
4. quit by clicking the X in the upper right corner of the poopup
3. click on the drawing area

A node is drawn, even thought the node tool is not selected.

Either nothing should be drawn or the node tool should still be selected.

The same happens with edges and other "no-state" tools.

node shape

 ___________________
 \                 /
  \               /
  /               \
 /_________________\

Use the id of the div to which it is attached to identify an instance of JSDot.
That shall also be used as prefix for each other id generated by the instance.

When dragging on the background draw a box and select the elements which lay 
inside this box.

This can be implemented as a listener, like JSDot.Drag is done.

Don't forget to make a public (possibly single .js file) release :-)

It would be great to be able to choose (and possibly switch) the shape of
the graph nodes to rectangles as in the early days of the project