Migrations

From 0.x to 1.x

In v1, NodeComponent owns the visual wrapper of every node. Padding, text color, background, border, border radius, shadow, transition and selected or invalid states are now defined by the library and configured through CSS variables.

Move reusable node wrapper styles from custom node components to application styles. Keep custom node component styles focused on internal layout, form controls, labels, connector placement and other content details.

Set node variables on ng-draw-flow to configure all nodes. For one node or a group of nodes, pass className in the node object and override variables through that class.

    
      ng-draw-flow { --df-node-background: #fff; --df-node-color: #111; --df-node-padding: 0.75rem 1rem; --df-node-border:
0.0625rem solid #d0d2ce; --df-node-border-radius: 0.5rem; --df-node-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
--df-node-selected-border-color: #156ed4; --df-node-invalid-border-color: #f04438; }

.warning-node { --df-node-background: #fff7ed; --df-node-border-color: #f97316; }

    

      
        Copy