## 添加事件;
::: details 目录
[[toc]]
:::

### 绘制示例(点击图中区域)

应用过程中往往会涉及到事件以及触发事件后获取对应的鼠标事件以及图例来实现相应的交互;

<tDInsert-addEventShow/>

#### 源码展示

::: details 查看代码
<<< @/docs/.vuepress/components/tDInsert/addEvent.vue
:::

#### 代码分解

::: details 查看代
只需将解析后获取的实例 item 执行相应的 api 即可;
```
    // 相关事件触发
    item.connect("onMouseDown", this, this.onMousedown);
    item.connect("onMouseUp", this, this.onMouseup);
    item.connect("onMouseLeave", this, this.onMouseleave);
    item.connect("onMouseEnter", this, this.onMouseenter);
```
:注 事件返回两个参数 : item 选中实例; event 鼠标事件
```
   // 鼠标点击事件
    onMousedown(item, e) {
      console.log("鼠标按下！", item, e);
    },
    // 鼠标抬起事件
    onMouseup(item, e) {
    },
    // 鼠标事件移入
    onMouseenter(item, e) {
    },
    // 鼠标事件移出
    onMouseleave(item, e) {
    },
```
:::

### 实现选中交互
<tDInsert-addEventshow2/>

#### 源码展示

::: details 查看代码
<<< @/docs/.vuepress/components/tDInsert/addEvent1.vue
:::

::: details 派生场景
<<< @/docs/.vuepress/components/tDInsert/addEventClass/eventScene.ts
:::

#### 代码分解

::: details hover 显示颜色及其状态

在鼠标移入移出事件中获取到相应的图实例，然后更改样式即可。

``` js
    // 鼠标事件移入
    onMouseenter(item, e) {
      // 如果为点击选中的实例则不做样式修改
      if (this.selectItem && item == this.selectItem) return;
      item.fillColor = new SColor("#E1F2FF");
      item.strokeColor = new SColor("#E1F2FF");
    },
    // 鼠标事件移出
    onMouseleave(item, e) {
       // 如果为点击选中的实例则不做样式修改
      if (this.selectItem && item == this.selectItem) return;
      item.fillColor = new SColor("#F0F3F7");
      item.strokeColor = new SColor("#F0F3F7");
    },
```
:::

::: details 点击显示颜色及其状态
1. 引入派生场景（解决点击画布空白处返回实例为null、以方便图例置回原来状态）
``` js
 // eventScene 提代之前的 SGraphScene
 import { eventScene } from "./addEventClass/eventScene";
  this.scene = new eventScene();
  // 事件绑定
  this.scene.vueOnMouseDown = this.onMousedown;
```
2. 点击则高亮，再次点击或者点击空白部分，则置为defult

```js
   // 鼠标点击事件
    onMousedown(item, e) {
      const DefaltColor = "#F0F3F7"; //默认颜色
      const clickColor = "#7ed321";
      // 如果点击前有选中的 selectItem 清空
      if (this.selectItem) {
        this.selectItem.fillColor = new SColor(DefaltColor);
        this.selectItem.strokeColor = new SColor(DefaltColor);
      }
      // 是否选中 item
      if (item) {
        // 判断当前 item 是否重复点击或者之前 selectItem = null
        if (this.selectItem) {
          if (this.selectItem != item) {
            // 之前空间置回原来的状态
            const oldSelectItem = this.selectItem;
            oldSelectItem.fillColor = new SColor(DefaltColor);
            oldSelectItem.strokeColor = new SColor(DefaltColor);
            // 新item高亮
            const newSelectItem = item;
            newSelectItem.fillColor = new SColor(clickColor);
            newSelectItem.strokeColor = new SColor(clickColor);
            this.selectItem = newSelectItem;
          } else {
            // 将选中的item 置为默认状态 选中 selectItem 为空
            const oldSelectItem = this.selectItem;
            oldSelectItem.fillColor = new SColor(DefaltColor);
            oldSelectItem.strokeColor = new SColor(DefaltColor);
            this.selectItem = null;
          }
        } else {
          // 如果点击前没有选中的 item 则直接赋给
          this.selectItem = item;
          this.selectItem.fillColor = new SColor(clickColor);
          this.selectItem.strokeColor = new SColor(clickColor);
        }
      } else {
        this.selectItem = null;
      }
    },
```
:::