State style defined in the data should merge with state style defined globally. Not replace it. #4005

Describe the bug

You can set the style in G6 globally or in the data.

Currently, stateStyles defined in the data replace the nodeStateStyle defined globally. It should behave like styles that merges with defaultNode.

Style defined globally

new G6.Graph({
  // previous options
  defaultNode: {
    style: {
      fill: "red",
      lineWidth: 2
    }
  },
  nodeStateStyles: {
    selected: {
      fill: "green",
      lineWidth: 2
    }
  },
  // following options
})

Style defined in the data

const data = {
  nodes: [
    {
      id: "1",
      label: "Label 1",
      style: {
        fill: "orange"
      },
      stateStyles: {
        selected: {
          fill: "yellow"
        }
      }
    }
    // following nodes
  ]
}   

When you look at the node model

graph.getNodes()[0].getModel().style

// What you get
{
  selected: {
    fill: 'yellow'
  },
  fill: 'orange',
  lineWidth: 2,
}

// What it should be to stay consistent
{
  selected: {
    fill: 'yellow',
    lineWidth: 2,
  }
  fill: 'orange',
  lineWidth: 2,
}

Your Example Website or App

https://codesandbox.io/s/g6-styles-8zpnzb

Steps to Reproduce the Bug or Issue

1. Open the codeSandbox and look at the console.

Expected behavior

Styles should merge instead of override.

Possible issue identification

here

mix() is used instead of deepMix() here