# 设置节点样式

本节将介绍如何更新当前激活节点的样式。

样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是`setStyle`方法，通过第三个参数进行指定：

```js
// 设置常态样式
node.setStyle('样式属性', '样式值')

// 设置激活样式
node.setStyle('样式属性', '样式值', true)
```

## 设置常态样式

### 设置文字样式

文字样式目前支持：`字体`、`字号`、`行高`、`颜色`、`加粗`、`斜体`、`划线`。

这些样式选择的UI界面都需要你自行开发，然后调用节点的`setStyle`方法更新。

同样首先需要监听节点的激活事件来换取当前激活的节点：

```js
const activeNodes = shallowRef([])
mindMap.on('node_active', (node, activeNodeList) => {
    activeNodes.value = activeNodeList
})
```

```js
// 设置字体
activeNodes.value.forEach(node => {
    node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
})

// 设置字号
activeNodes.value.forEach(node => {
    node.setStyle('fontSize', 16)
})

// 设置行高
activeNodes.value.forEach(node => {
    node.setStyle('lineHeight', 1.5)
})

// 设置颜色
activeNodes.value.forEach(node => {
    node.setStyle('color', '#fff')
})

// 设置加粗
activeNodes.value.forEach(node => {
    node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
})

// 设置划线
activeNodes.value.forEach(node => {
    // 下划线
    node.setStyle('textDecoration', 'underline')
    // 删除线
    node.setStyle('textDecoration', 'line-through')
    // 上划线
    node.setStyle('textDecoration', 'overline')
})
```

### 设置边框样式

边框样式支持设置：`颜色`、`虚线`、`线宽`、`圆角`。

设置边框样式前请先检查线宽是否被设置成了0。

```js
// 设置边框颜色
activeNodes.value.forEach(node => {
    node.setStyle('borderColor', '#000')
})

// 设置边框虚线
activeNodes.value.forEach(node => {
    node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
})

// 设置边框宽度
activeNodes.value.forEach(node => {
    node.setStyle('borderWidth', 2)
})

// 设置边框圆角
activeNodes.value.forEach(node => {
    node.setStyle('borderRadius', 5)
})
```

### 设置背景样式

背景样式也就是背景颜色。

```js
activeNodes.value.forEach(node => {
    node.setStyle('fillColor', '#fff')
})
```

### 设置形状样式

目前支持以下形状：

```js
[
  {
    name: '矩形',
    value: 'rectangle'
  },
  {
    name: '菱形',
    value: 'diamond'
  },
  {
    name: '平行四边形',
    value: 'parallelogram'
  },
  {
    name: '圆角矩形',
    value: 'roundedRectangle'
  },
  {
    name: '八角矩形',
    value: 'octagonalRectangle'
  },
  {
    name: '外三角矩形',
    value: 'outerTriangularRectangle'
  },
  {
    name: '内三角矩形',
    value: 'innerTriangularRectangle'
  },
  {
    name: '椭圆',
    value: 'ellipse'
  },
  {
    name: '圆',
    value: 'circle'
  }
]
```

设置形状前请先确认边框宽度是否被设置成了0。

```js
activeNodes.value.forEach(node => {
    node.setStyle('shape', 'circle')
})
```

### 设置线条样式

节点线条支持设置：`颜色`、`虚线`、`线宽`。

```js
// 设置线条颜色
activeNodes.value.forEach(node => {
    node.setStyle('lineColor', '#000')
})

// 设置线条虚线
activeNodes.value.forEach(node => {
    node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
})

// 设置线条宽度
activeNodes.value.forEach(node => {
    node.setStyle('lineWidth', 3)
})
```

### 设置节点内边距

节点内边距支持设置水平和垂直方向的内边距。

```js
activeNodes.value.forEach(node => {
    node.setStyle('paddingX', 50)
    node.setStyle('paddingY', 50)
})
```

## 设置激活样式

激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：

```js
import { supportActiveStyle } from 'simple-mind-map/src/themes/default'

const checkIsSupportActive = (prop) => {
    return supportActiveStyle.includes(prop)
}
```

其他和数值常态样式是一样的，只需要给`setStyle`方法传入第三个参数：

```js
// 设置边框颜色
activeNodes.value.forEach(node => {
    node.setStyle('borderColor', '#000', true)
})

// 设置边框虚线
activeNodes.value.forEach(node => {
    node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
})

// 设置边框宽度
activeNodes.value.forEach(node => {
    node.setStyle('borderWidth', 2, true)
})

// 设置边框圆角
activeNodes.value.forEach(node => {
    node.setStyle('borderRadius', 5, true)
})

// 设置背景颜色
activeNodes.value.forEach(node => {
    node.setStyle('fillColor', '#fff', true)
})
```

## 完整示例

<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/# " />