# 自定义窗口

工具支持开发者自己定义构建窗口。开发者可以使用窗口以及工具sdk开发一个自己的资源处理插件，或是给美术实现一个给自己的场景自动添加按钮的自动化插件。

首先在assets目录下面创建一个Editor目录。所有在Editor目录下的内容都将被工具在构建的时候过滤掉，不在真机使用。在Project窗口下右键创建 >> Editor Plugin >> Window。然后就会在新增选项卡出现自己的窗口。窗口的运行环境和用户的游戏，引擎是一样的，所以可以直接获取到运行时的引擎以及当前游戏的运行实例。同时也要注意自己的逻辑如果卡死或是出错，可能导致整个工具需要重启。

窗口插件主要使用两个模块组成：View，Module。

View，工具界面使用Vue2.0开发，开发者在定义窗口的时候，也是自己开发vue组件。这个主要用来实现交互相关的逻辑，比如使用模版来定义UI，监听点击事件等，我们也提供了许多基础vue组件给开发者使用。想要使用Module的时候，需要使用this.$viewModuleContext去获取自己对应的Module内的数据或是方法。

Module，工具对于数据管理使用了Vuex的方案，Module对应着Vuex的Module能力，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。工具强制开启了Module的命名空间能力。

如果是多个插件之间的通信也使用了vuex的dispatch来实现。如果插件定义了一个action，那么其他插件也可以使用dispatch来调用。通过事件的机制实现不耦合的互相调用。但在dispatch时必须加上目标插件同名的前缀，比如dispatch('customNamespace/xxx')。

刷新，如果修改了插件代码，那么在这个标签菜单栏上可以找到刷新按钮。工具会将你的代码热更新到工具上，即时生效。

下面是通过Project新建的名为“test”的自定义窗口样例

/**
 * test.ts
*/
import engine from "engine";
import view from "./test_view"
import module from "./test_module"

@engine.decorators.EditorWindow("test", "test")
export default class test extends engine.Editor.UI.EditorWindow {
  public vueObject = view
  public vuexModule = module
}

/**
 * test_view.vue
*/
<template>
  <div>
    <div>test</div>
    <div class="counter">counter: {{ counter }}</div>
    <w-btn @click="add">CLICK</w-btn>
  </div>
</template>
<script>
export default {
  name: 'test',
  // 默认会有这些入参
  props: {},
  computed: {
    counter() {
      return this.$viewModuleContext.state.counter
    }
  },
  methods: {
    add() {
      this.$viewModuleContext.commit('add')
    }
  }
}
</script>
<style scoped>
.counter {
  color: yellow
}
</style>

/**
 * test_module.ts
*/
export default {
  state: { counter: 0 },
  mutations: {
    add(state) {
      state.counter += 1
    }
  },
  actions: {}
}

# 内置Vue组件

在开发自定义窗口，我们有提供一些内置的全局vue组件（如示例中的w-btn'），在编view代码时，可以直接在vue代码中引用

# 按钮：w-btn

<!-- type: ['default', 'primary', 'warn', 'text'] -->
<w-btn type="primary" @click="onClick">BUTTON</w-btn>
<!-- disabled -->
<w-btn :disabled="boolean" @click="onClick">BUTTON</w-btn>

# 输入框：w-input

<w-input :value="string" :disabled="boolean" :placeholder="string" @w-model="onChange" />

# 多行输入：texturearea

<w-textarea :value="string" @w-model="onChange" />

# 复选: w-checkbox

<w-checkbox :checked="boolean" :disabled="boolean" @w-model="onChange" />

# 单选: w-radio

<w-radio :name="string" :value="string" :picked="string" @w-model="onChange" />

# 下拉选择: w-select

<!-- items = [{ text: 'string', value: 'string' }] -->
<w-select
  :value="string"
  :items="items"
  @w-model="onChange"
/>