ATOM

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

More than 3 years have passed since last update.


概要

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

メニューから[パネルを開く]-[右パネル]を選択すると、右側にパネルが開くようにする。

もしくは、Control + Alt + rで、右側にパネルが開くようにする。

rightPanelMenu.png

rightPanel.png

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


パッケージの設定

パッケージ名は、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()


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