Atomでパッケージを作ってみた その2

概要

前回からちょっと進めて、右側にパネルを表示するようにしてみた。

メニューから[パネルを開く]-[右パネル]を選択すると、右側にパネルが開くようにする。
もしくは、Control + Alt + rで、右側にパネルが開くようにする。

以下、変更部分のソース。

パッケージの設定

パッケージ名は、sample01とし、呼出しするコマンドはopenRightPanel。

package.json

{
  "name": "sample01",
  "main": "./lib/sample01",
  "version": "0.0.0",
  "description": "A short description of your package",
  "keywords": [
  ],
  "activationCommands": {
    "atom-workspace": "sample01:openRightPanel"
  },
  "repository": "https://github.com/atom/sample01",
  "license": "MIT",
  "engines": {
    "atom": ">=1.0.0 <2.0.0"
  },
  "dependencies": {
  }
}

メニューの設定

メニューは、見た目の通り[パネルを開く]-[右パネル]

menus/sample01.cson

more details
'context-menu':
  'atom-text-editor': [
    {
      'label': 'Toggle sample01'
      'command': 'sample01:openRightPanel'
    }
  ]
'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'パネルを開く'
      'submenu': [
        {
          'label': '右パネル'
          'command': 'sample01:openRightPanel'
        }
      ]
    ]
  }
]

キーマップの設定

Control + Alt + rを設定する。

keymaps/sample01.cson

'atom-workspace':
  'ctrl-alt-r': 'sample01:openRightPanel'

ビューの変更(メッセージの変更)

以下のようなタグが生成されるイメージで。

<div class='sample'>
  <div class='message'>右パネルが開きました。</div>
</div>

lib/sample01-view.coffee

module.exports =
class Sample01View
  constructor: (serializedState) ->
    # Create root element
    @element = document.createElement('div')
    @element.classList.add('sample01')

    # Create message element
    message = document.createElement('div')
    message.textContent = "右パネルが開きました。"
    message.classList.add('message')
    @element.appendChild(message)

  # Returns an object that can be retrieved when package is activated
  serialize: ->

  # Tear down any state and detach
  destroy: ->
    @element.remove()

  getElement: ->
    @element

ロジックの変更

addModalPanelをaddRightPanelに変更しただけ。

lib/sample01.coffee

Sample01View = require './sample01-view'
{CompositeDisposable} = require 'atom'

module.exports = Sample01 =
  sample01View: null
  modalPanel: null
  subscriptions: null

  activate: (state) ->
    @sample01View = new Sample01View(state.sample01ViewState)
    #addModalPanelをaddRightPanelに変えてみた
    @rightPanel = atom.workspace.addRightPanel(item: @sample01View.getElement(), visible: false)
    #@rightPanel = atom.workspace.addModalPanel(item: @sample01View.getElement(), visible: false)

    # Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    @subscriptions = new CompositeDisposable

    # Register command that toggles this view
    @subscriptions.add atom.commands.add 'atom-workspace', 'sample01:openRightPanel': => @openRightPanel()

  deactivate: ->
    @rightPanel.destroy()
    @subscriptions.dispose()
    @sample01View.destroy()

  serialize: ->
    sample01ViewState: @sample01View.serialize()

  openRightPanel: ->
    console.log 'Open Right Panel!'

    if @rightPanel.isVisible()
      @rightPanel.hide()
    else
      @rightPanel.show()

なかなか慣れてきた。次回は、色々なを使ってみようと思う。