Theming #

const nodes = ref<Node[]>([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 250, y: 5 },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
  
  { 
    id: '2', 
    label: 'Node 2', 
    position: { x: 100, y: 100 }, 
    
    /* 
     * You can also use a function which will receive your current element as it's input.
     * Useful if you want to add styles if the element is selected
     */
    style: (el) => {
      if (el.selected) return { background: 'purple' }
      return { background: 'green' }
    }
  },
])

const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  
  // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
  
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])