1.4.1 • Published 2 years ago
@mattiash/grid-graph v1.4.1
grid-graph
Built from component template at https://github.com/gojutin/svelte-custom-element.
Usage
grid-graph is a custom element that should be possible to use in any web framework and also in plain html.
Example
<grid-graph nodes="..." connectors='...'/>
nodes
should be a json-encoded string containing a two-dimensional array of nodes.
Each node is an object with the following properties:
- id - an identifier for the node. Used as the label of the node and when defining connectors.
- color - optional text-color for the node. Default #383d41
- background - optional background for the node. Default #e2e3e5.
- border - optional border for the node. Default none.
;[[{ id: 'A' }, { id: 'B' }], [undefined, { id: 'C' }]]
connectors
shall be an array of connector objects. Each connector object has the following properties:
- from - the id of a node
- to - the id of a node
- color - the color of the connector. Default: #444.
;[{ from: 'A', to: 'B' }, { from: 'A', to: 'C' }]
The grid-graph element emits a nodeclick
whenever the user clicks a node,
with the id of the node in event.detail.nodeId.
See public/index.html
for a complete example.
See @mattiash/grid-graph-placement for a module that automatically places out your nodes on a grid.
Styling
The grid-graph can be styled with css variables.
<grid-graph style="--node-margin: 5px 30px; --node-padding: 2px 10px">
</grid-graph>
Development
npm run dev
Production
npm run build