smalruby-editor 0.3.5-x86-mingw32 → 0.4.0-x86-mingw32

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80cec4a4b2957f4f6e16d8457bad8e73b15fd63b
-  data.tar.gz: be2fa77f141227ad5440eb0bfe57ba3c395a7fff
+  metadata.gz: cbee9a425325f737e22db3012f74345ebeb348e1
+  data.tar.gz: 775f01778a487113c6d933a27c31fe9a87da279a
 SHA512:
-  metadata.gz: 2482c0b0b895e35cd28b0f7f72a73bf70e07cea33b4afd1acbcafed31b2effface5f38c37cf4d08db9930924337ba0c9c37e883148902e27710438b686f3b2db
-  data.tar.gz: 0cadd6dfe0bce18bcb88db6448b2bd02995e8b83bdf67c13b60f77c86b01826bf75fb83c7d5d6222eee6b16a50bb5a235663672c8cec28b93b63e37749b1da14
+  metadata.gz: c6f42ac80f3556af63b2fa9da254b18366ca8f3f6281fc16d0deb2cf9b1c5ffe37efc65f9f2cc63ffd22da7ed47ba7c954e4abad1e82809ec6f1ea6b66cba7a7
+  data.tar.gz: 33ecb30aaf7c4de698f8294473d8d99741f9d3e45cc372bc2b2a708c3b2430daebb435126b8fa40fd47bcecd2b13129fa45cb942102e887f8ac3462f42794f1c

data/.rubocop.yml

@@ -5,6 +5,7 @@ AllCops:
     - spec/fixtures/**
     - vendor/*
     - work/*
+    - bin/spring
   RunRailsCops: true
 
 # 日本語でのコメントを許可する

data/.simplecov

@@ -1,7 +1,7 @@
-if ENV['COVERALLS']
-  require 'coveralls'
-
-  SimpleCov.formatter = Coveralls::SimpleCov::Formatter
-end
-
-SimpleCov.start('rails')
+if ENV['COVERALLS']
+  require 'coveralls'
+
+  SimpleCov.formatter = Coveralls::SimpleCov::Formatter
+end
+
+SimpleCov.start('rails')

data/Guardfile

@@ -13,7 +13,7 @@ ignore(TEMPFILE_BY_EMACS)
 
 group :red_green_refactor, halt_on_fail: true do
   guard :rubocop, all_on_start: false do
-    ignore(%r{^db/(?:schema|seeds)\.rb$})
+    ignore(%r{^(?:db/(?:schema|seeds)\.rb|bin/spring)$})
 
     watch(%r{.+\.rb$})
     watch(%r{(?:.+/)?\.rubocop\.yml$}) { |m| File.dirname(m[0]) }

data/Procfile

@@ -1 +1 @@
-web: bundle exec unicorn -p $PORT -c ./config/unicorn.rb
+web: bundle exec unicorn -p $PORT -c ./config/unicorn.rb

data/app/assets/javascripts/blocks/character.js.coffee.erb

@@ -68,6 +68,9 @@ Blockly.Blocks['<%= n %>'] =
 
     @
 
+  getCharacter: ->
+    @character
+
 Blockly.Ruby['<%= n %>'] = (block) ->
   c = block.character
   Blockly.Ruby.defineCharacter(c)

data/app/assets/javascripts/blocks/field_character.js.coffee.erb

@@ -106,7 +106,19 @@ Smalruby.FieldCharacter.dropdownChange = (value) ->
 
 Smalruby.FieldCharacter.NullCharacter =
   get: (name) ->
-    <%= bm('.no_character') %>
+    switch name
+      when 'name'
+        <%= bm('.no_character') %>
+      when 'costumes'
+        ['']
+      when 'costumeNames'
+        [<%= bm('.first_costume') %>]
+      when 'costumeIndex'
+        0
+      else
+        null
+  costumeName: (index) ->
+    ''
   on: -> $.noop
   off: -> $.noop
   link: -> $.noop

data/app/assets/javascripts/blocks/field_costume.js.coffee.erb

@@ -0,0 +1,84 @@
+<%
+  require 'smalruby_editor'
+  require 'smalruby_editor/blockly_message_helper'
+%>
+
+'use strict'
+
+goog.provide('Smalruby.FieldCostume')
+
+goog.require('Blockly.FieldDropdown')
+goog.provide('Smalruby.FieldCharacter')
+
+
+Smalruby.FieldCostume = (opt_character, opt_changeHandler) ->
+  @character = Smalruby.FieldCharacter.NullCharacter
+  @costumeIndex = 0
+  if opt_character
+    @setCharacter(opt_character)
+
+  if opt_changeHandler
+    changeHandler = (value) =>
+      retVal = Smalruby.FieldCostume.dropdownChange.call(@, value)
+      if retVal
+        newVal = retVal
+      else
+        retVal = @getValue()
+      opt_changeHandler.call(@, newVal)
+      retVal
+  else
+    changeHandler = Smalruby.FieldCostume.dropdownChange
+
+  Smalruby.FieldCostume.superClass_.constructor
+    .call(@, Smalruby.FieldCostume.dropdownCreate, changeHandler)
+
+goog.inherits(Smalruby.FieldCostume, Blockly.FieldDropdown)
+
+Smalruby.FieldCostume.prototype.setCharacter = (character) ->
+  return if character == @character
+
+  @character.off('change:costumeNames', @onCharacterChangeCostumeNames_, @)
+  @character = if character then character else Smalruby.FieldCharacter.NullCharacter
+  @character.on('change:costumeNames', @onCharacterChangeCostumeNames_, @)
+
+  @costumeIndex = 0
+  @setValue(@character.costumeName(@costumeIndex))
+
+Smalruby.FieldCostume.prototype.onCharacterChangeCostumeNames_ = (model, costumeNames, options) ->
+  if @costumeIndex < costumeNames.length
+    @setValue(costumeNames[@costumeIndex])
+  else
+    @setValue(costumeNames[0])
+    @costumeIndex = 0
+
+Smalruby.FieldCostume.prototype.clone = ->
+  new Smalruby.FieldCostume(null, @changeHandler_)
+
+Smalruby.FieldCostume.prototype.dispose = ->
+  @setCharacter(Smalruby.FieldCharacter.NullCharacter)
+
+  Blockly.FieldDropdown.prototype.dispose.call(@)
+
+Smalruby.FieldCostume.prototype.getCharacterFromParentBlocks_ = ->
+  block = @sourceBlock_
+  while block
+    if block.getCharacter
+      return block.getCharacter()
+    block = block.getSurroundParent()
+
+  Smalruby.FieldCharacter.NullCharacter
+
+Smalruby.FieldCostume.dropdownCreate = ->
+  @setCharacter(@getCharacterFromParentBlocks_())
+  ([costume, costume] for costume in @character.get('costumeNames'))
+
+Smalruby.FieldCostume.dropdownChange = (value) ->
+  costumeIndex = -1
+  if (costumeNames = @character.get('costumeNames'))
+    costumeIndex = _.indexOf(costumeNames, value)
+  if costumeIndex == -1
+    @costumeIndex = 0
+    null
+  else
+    @costumeIndex = costumeIndex
+    value

data/app/assets/javascripts/blocks/hardware.js.coffee.erb

@@ -96,6 +96,32 @@ Blockly.Ruby['<%= n %>'] = (block) ->
   Blockly.Ruby.characterMethodCall_("led(#{Blockly.Ruby.quote_(pin)}).<%= method %>")
 <% end %>
 
+# Adafruit Pixel
+<% subcategory = 'neo_pixel' %>
+
+<% n = "#{category}_#{subcategory}_set_rgb" %>
+Blockly.Blocks['<%= n %>'] =
+  init: ()->
+    @setHelpUrl('')
+    @setColour(<%= colors[:looks] %>)
+    @interpolateMsg(<%= bm(".#{subcategory}_set_rgb") %>,
+                    ['PIN', new Blockly.FieldDropdown(pwmPinDropdown)],
+                    ['RED', ['Number'], Blockly.ALIGN_RIGHT],
+                    ['GREEN', ['Number'], Blockly.ALIGN_RIGHT],
+                    ['BLUE', ['Number'], Blockly.ALIGN_RIGHT],
+                    Blockly.ALIGN_RIGHT)
+    @setPreviousStatement(true)
+    @setNextStatement(true)
+    @setTooltip('')
+
+Blockly.Ruby['<%= n %>'] = (block) ->
+  pin = @getFieldValue('PIN')
+  red = Blockly.Ruby.valueToCode(@, 'RED', Blockly.Ruby.ORDER_NONE) || '0'
+  green = Blockly.Ruby.valueToCode(@, 'GREEN', Blockly.Ruby.ORDER_NONE) || '0'
+  blue = Blockly.Ruby.valueToCode(@, 'BLUE', Blockly.Ruby.ORDER_NONE) || '0'
+  Blockly.Ruby.characterMethodCall_("<%= subcategory %>(#{Blockly.Ruby.quote_(pin)}).set(color: [#{red}, #{green}, #{blue}])")
+
+
 # 「RGB LED」サブジャンル
 
 # RGB LED[▼アノード]コモン[▼PIN]を[カラー]にする

data/app/assets/javascripts/blocks/looks.js.coffee.erb

@@ -89,6 +89,38 @@ Blockly.Blocks['<%= n %>'] =
 Blockly.Ruby['<%= n %>'] = (block) ->
   Blockly.Ruby.characterMethodCall_('vanish')
 
+
+<% n = "#{category}_next_costume" %>
+Blockly.Blocks['<%= n %>'] =
+  init: ()->
+    @setHelpUrl('')
+    @setColour(<%= color %>)
+    @appendDummyInput().appendField(<%= bm('.next_costume') %>)
+    @setPreviousStatement(true)
+    @setNextStatement(true)
+    @setTooltip('')
+
+Blockly.Ruby['<%= n %>'] = (block) ->
+  Blockly.Ruby.characterMethodCall_('next_costume')
+
+
+<% n = "#{category}_switch_costume" %>
+Blockly.Blocks['<%= n %>'] =
+  init: ()->
+    @setHelpUrl('')
+    @setColour(<%= color %>)
+    @interpolateMsg(<%= bm('.switch_costume') %>,
+                    ['COSTUME', new Smalruby.FieldCostume()],
+                    Blockly.ALIGN_RIGHT)
+    @setPreviousStatement(true)
+    @setNextStatement(true)
+    @setTooltip('')
+
+Blockly.Ruby['<%= n %>'] = (block) ->
+  costume = Blockly.Ruby.quote_(@getFieldValue('COSTUME'))
+  Blockly.Ruby.characterMethodCall_("switch_costume(#{costume})")
+
+
 # 大きさを(　)％ずつ変える
 # 大きさを(　)％にする
 <%

data/app/assets/javascripts/generators/ruby.js.coffee.erb

@@ -62,8 +62,17 @@ Blockly.Ruby.defineCharacter = (c) ->
         rotationStyle = ', rotation_style: :none'
       else
         rotationStyle = ''
+    costumeParam = ['costume: ']
+    costumes = (Blockly.Ruby.quote_(costume) for costume in c.costumesWithName())
+    if costumes.length > 1
+      costumeParam.push("[#{costumes.join(', ')}]")
+    else
+      costumeParam.push(costumes[0])
+    costumeIndex = c.get('costumeIndex')
+    if costumeIndex > 0
+      costumeParam.push(", costume_index: #{costumeIndex}")
     Blockly.Ruby.definitions_[blockName] =
-      "#{name} = Character.new(costume: #{Blockly.Ruby.quote_(c.costume())}, x: #{c.get('x')}, y: #{c.get('y')}, angle: #{c.get('angle')}#{rotationStyle})"
+      "#{name} = Character.new(#{costumeParam.join('')}, x: #{c.get('x')}, y: #{c.get('y')}, angle: #{c.get('angle')}#{rotationStyle})"
 
 Blockly.Ruby.characterStack = ->
   @definitions_['character_stack']

data/app/assets/javascripts/models/character.js.coffee

@@ -2,6 +2,7 @@ Smalruby.Character = Backbone.Model.extend({
   defaults:
     name: null
     costumes: [],
+    costumeNames: [],
     costumeIndex: 0
     x: 0
     y: 0
@@ -14,6 +15,23 @@ Smalruby.Character = Backbone.Model.extend({
     @objects = []
     if @get('costumes').length == 0
       @set({ costumes: [Smalruby.Character.PRESET_COSTUMES[0]] })
+    else
+      costumes = []
+      costumeNames = []
+      index = 1
+      for costume in (costume.split(':') for costume in @get('costumes'))
+        do (costume) ->
+          if costume.length == 1
+            costumeNames.push("costume#{index}")
+            costumes.push(costume[0])
+          else
+            costumeNames.push(costume[0])
+            costumes.push(costume[1])
+          index++
+      @set({ costumes: costumes, costumeNames: costumeNames })
+
+    if @get('costumeNames').length == 0
+      @set({ costumeNames: ['costume1'] })
 
   validate: (attrs, options) ->
     errors = []
@@ -31,6 +49,23 @@ Smalruby.Character = Backbone.Model.extend({
         attr: 'name'
         message: 'Name is invalid'
 
+    i = 0
+    costumeNames = attrs.costumeNames
+    for name in costumeNames
+      do (name) ->
+        if _.isUndefined(name) || _.isNull(name) ||
+           (_.isString(name) && name.length == 0)
+          errors.push
+            attr: 'costumeNames'
+            index: i
+            message: 'costumeNames is required'
+        else if _.indexOf(costumeNames, name) != _.lastIndexOf(costumeNames, name)
+          errors.push
+            attr: 'costumeNames'
+            index: i
+            message: 'costumeNames is duplicated'
+        i++
+
     if errors.length > 0
       return errors
 
@@ -50,15 +85,19 @@ Smalruby.Character = Backbone.Model.extend({
   namePrefix: ->
     Smalruby.Character.costumeToNamePrefix(@get('name'))
 
-  costume: ->
-    @get('costumes')[@get('costumeIndex')]
+  costume: (index = @get('costumeIndex')) ->
+    @get('costumes')[index]
+
+  costumeName: (index = @get('costumeIndex')) ->
+    @get('costumeNames')[index]
+
+  costumesWithName: ->
+    costumeNames = @get('costumeNames')
+    ("#{costumeNames[i]}:#{costume}" for costume, i in @get('costumes'))
 
   costumeUrl: (index = @get('costumeIndex')) ->
     basename = @get('costumes')[index]
-    if _.indexOf(Smalruby.Character.PRESET_COSTUMES, basename) == -1
-      basename
-    else
-      "/smalruby/assets/#{basename}"
+    "/smalruby/assets/#{basename}"
 
   nextCostume: ->
     i = @get('costumeIndex') + 1

data/app/assets/javascripts/msg/en_us.js

@@ -191,6 +191,7 @@ Blockly.Msg.BLOCKS_RUBY_P = 'p %1';
 
 // blocks/field_character.js.coffee.erb
 Blockly.Msg.BLOCKS_FIELD_CHARACTER_NO_CHARACTER = 'no character';
+Blockly.Msg.BLOCKS_FIELD_CHARACTER_FIRST_COSTUME = 'first costume';
 
 
 // blocks/sound.js.coffee.erb
@@ -214,6 +215,8 @@ Blockly.Msg.BLOCKS_LOOKS_THINK_WITH_SECOND = 'think %1 for %2 secs';
 Blockly.Msg.BLOCKS_LOOKS_SHOW = 'show';
 Blockly.Msg.BLOCKS_LOOKS_HIDE = 'hide';
 Blockly.Msg.BLOCKS_LOOKS_VANISH = 'vanish';
+Blockly.Msg.BLOCKS_LOOKS_NEXT_COSTUME = 'next costume';
+Blockly.Msg.BLOCKS_LOOKS_SWITCH_COSTUME = 'switch costume to %1';
 
 
 // blocks/hardware.js.coffee.erb
@@ -224,6 +227,7 @@ Blockly.Msg.BLOCKS_HARDWARE_CATHODE = 'cathode';
 Blockly.Msg.BLOCKS_HARDWARE_LEFT = 'left';
 Blockly.Msg.BLOCKS_HARDWARE_RIGHT = 'right';
 Blockly.Msg.BLOCKS_HARDWARE_INIT_HARDWARE = 'setup hardware';
+Blockly.Msg.BLOCKS_HARDWARE_NEO_PIXEL_SET_RGB = 'Adfruit NeoPixel RGB LED %1 set color to red %2 green %3 blue %4';
 Blockly.Msg.BLOCKS_HARDWARE_RGB_LED_SET_COLOR = 'set RGB LED %1 common %2 color to %3';
 Blockly.Msg.BLOCKS_HARDWARE_RGB_LED_TURN_OFF = 'turn off RGB LED %1 common %2';
 Blockly.Msg.BLOCKS_HARDWARE_SEVEN_SEGMENT_DISPLAY_SHOW = 'show 7 segment display %1';

data/app/assets/javascripts/msg/ja.js

@@ -195,6 +195,7 @@ Blockly.Msg.BLOCKS_RUBY_P = '♠p %1';
 
 // blocks/field_character.js.coffee.erb
 Blockly.Msg.BLOCKS_FIELD_CHARACTER_NO_CHARACTER = 'キャラクターなし';
+Blockly.Msg.BLOCKS_FIELD_CHARACTER_FIRST_COSTUME = '最初のコスチューム';
 
 
 // blocks/sound.js.coffee.erb
@@ -218,6 +219,8 @@ Blockly.Msg.BLOCKS_LOOKS_THINK_WITH_SECOND = '★%1 と %2 秒と考える';
 Blockly.Msg.BLOCKS_LOOKS_SHOW = '★表示する';
 Blockly.Msg.BLOCKS_LOOKS_HIDE = '★隠す';
 Blockly.Msg.BLOCKS_LOOKS_VANISH = '★消滅する';
+Blockly.Msg.BLOCKS_LOOKS_NEXT_COSTUME = '★次のコスチュームにする';
+Blockly.Msg.BLOCKS_LOOKS_SWITCH_COSTUME = '★コスチュームを %1 にする';
 
 
 // blocks/hardware.js.coffee.erb
@@ -228,6 +231,7 @@ Blockly.Msg.BLOCKS_HARDWARE_CATHODE = 'カソード';
 Blockly.Msg.BLOCKS_HARDWARE_LEFT = ' 左';
 Blockly.Msg.BLOCKS_HARDWARE_RIGHT = '右';
 Blockly.Msg.BLOCKS_HARDWARE_INIT_HARDWARE = '♠ハードウェアを準備する';
+Blockly.Msg.BLOCKS_HARDWARE_NEO_PIXEL_SET_RGB = '★マイコン内蔵RGB LED %1 を赤 %2 緑 %3 青 %4 にする';
 Blockly.Msg.BLOCKS_HARDWARE_RGB_LED_SET_COLOR = '★RGB LED %1 コモン %2 を %3 にする';
 Blockly.Msg.BLOCKS_HARDWARE_RGB_LED_TURN_OFF = '★RGB LED %1 コモン %2 をオフにする';
 Blockly.Msg.BLOCKS_HARDWARE_SEVEN_SEGMENT_DISPLAY_SHOW = '★7セグディスプレイに %1 を表示する';

data/app/assets/javascripts/smalruby.js.coffee.erb

@@ -135,6 +135,7 @@ window.Smalruby =
         c = new Smalruby.Character
           name: xmlChild.getAttribute('name')
           costumes: xmlChild.getAttribute('costumes').split(',')
+          costumeIndex: parseInt(xmlChild.getAttribute('costume_index') || 0, 10)
           x: parseInt(xmlChild.getAttribute('x'), 10)
           y: parseInt(xmlChild.getAttribute('y'), 10)
           angle: parseInt(xmlChild.getAttribute('angle'), 10)
@@ -152,7 +153,10 @@ window.Smalruby =
       e.setAttribute('x', c.get('x'))
       e.setAttribute('y', c.get('y'))
       e.setAttribute('name', c.get('name'))
-      e.setAttribute('costumes', c.get('costumes').join(','))
+      e.setAttribute('costumes', c.costumesWithName().join(','))
+      costumeIndex = c.get('costumeIndex')
+      if costumeIndex != 0
+        e.setAttribute('costume_index', costumeIndex)
       e.setAttribute('angle', c.get('angle'))
       rotationStyle = c.get('rotationStyle')
       if rotationStyle != 'free'

data/app/assets/javascripts/views/character_modal_view.js.coffee.erb

@@ -0,0 +1,357 @@
+<%
+  require 'smalruby_editor'
+  require 'smalruby_editor/blockly_message_helper'
+%>
+
+# キャラクター設定ダイアログを表現するビュー
+Smalruby.CharacterModalView = Backbone.View.extend
+  model: new Smalruby.Character()
+
+  events:
+    'click #character-modal-costume-selector a.thumbnail': 'onSelectCostume'
+    'click #character-modal-costume-selector a#character-modal-upload-costume': 'onUploadCostume'
+    'click #character_rotation_style_free': 'onRotationStyleFree'
+    'click #character_rotation_style_left_right': 'onRotationStyleLeftRight'
+    'click #character_rotation_style_none': 'onRotationStyleNone'
+    'click #character-modal-ok-button': 'onOk'
+
+  previewZoomLevel: 0.5
+
+  initialize: ->
+    Smalruby.removeBackdropOnHidden(@$el)
+
+    @target = null
+
+    $('#character-modal-costume-selector img').on 'dragstart', (e) ->
+      e.preventDefault()
+
+    setPosition = (pos) =>
+      @model.set
+        x: parseInt(pos.left / @previewZoomLevel)
+        y: parseInt(pos.top / @previewZoomLevel)
+
+    $('#character-modal-character').draggable
+      containment: '#character-modal-preview'
+      cursor: 'move'
+      drag: (event, ui) ->
+        setPosition(ui.position)
+
+    $('#character-modal-preview').droppable
+      drop: (event, ui) ->
+        setPosition(ui.draggable.position())
+
+    Smalruby.ignoreEnterKey(@$el)
+
+    @templateText = $('#character-modal-costume-template').text()
+
+    $('#character-modal-add-costume-button').click (e) =>
+      e.preventDefault()
+
+      costumes = @model.get('costumes').slice(0)
+      costumes.push(@model.costume())
+      costumeNames = @model.get('costumeNames').slice(0)
+      costumeNames.push("costume#{costumes.length}")
+      @model.set
+        costumes: costumes
+        costumeNames: costumeNames
+        costumeIndex: costumes.length - 1
+
+    self = @
+    changeNameFunc = (e) ->
+      self.model.set({ name: $(@).val() })
+      self.nameChanged = true
+    @$el.find('input[name="character[name]"]').change(changeNameFunc)
+    @$el.find('input[name="character[name]"]').keyup(changeNameFunc)
+
+    @$el.find('input[name="character[x]"]').change (e) ->
+      self.model.set({ x: $(@).val() })
+
+    @$el.find('input[name="character[y]"]').change (e) ->
+      self.model.set({ y: $(@).val() })
+
+    @$el.find('input[name="character[angle]"]').change (e) ->
+      self.model.set({ angle: $(@).val() })
+
+    changeCostumeNameFunc = (e) ->
+      val = $(@).val()
+      costumeNames = _.clone(self.model.get('costumeNames'))
+      costumeNames[self.model.get('costumeIndex')] = val
+      self.model.set({ costumeNames: costumeNames })
+    @$el.find('input[name="costume[name]"]').change(changeCostumeNameFunc)
+    @$el.find('input[name="costume[name]"]').keyup(changeCostumeNameFunc)
+
+    @listenTo(@model, 'change:name', @onChangeName)
+    @listenTo(@model, 'change:x', @onChangeX)
+    @listenTo(@model, 'change:y', @onChangeY)
+    @listenTo(@model, 'change:angle', @onChangeAngle)
+    @listenTo(@model, 'change:costumes', @onChangeCostumes)
+    @listenTo(@model, 'change:costumeNames', @onChangeCostumeNames)
+    @listenTo(@model, 'change:costumeIndex', @onChangeCostumeIndex)
+    @listenTo(@model, 'change:rotationStyle', @onChangeRotationStyle)
+    @listenTo(@model, 'change', @onChange)
+
+    @callAllOnChangeAttributes_()
+
+  render: ->
+    @onChange(@model)
+
+    @$el.find('.modal-body').block
+      message: null
+
+    unblock = =>
+      @$el.find('.modal-body').unblock()
+      null # HACK: if return unblock(), does not call fail().
+
+    @$el.modal
+      backdrop: 'static'
+    @$el.modal('show')
+
+    dfr = $.Deferred()
+    $.ajax
+      url: '/costumes/'
+      type: 'GET'
+      cache: false
+      success: (data, textStatus, jqXHR) -> dfr.resolve(data)
+      error: dfr.reject
+    dfr.promise()
+      .then (data) =>
+        @replaceCostumeSelectorHtml_(data)
+      .then(unblock, unblock)
+      .fail =>
+        @$el.modal('hide')
+        errorMessage(<%= bm('.error') %>)
+
+  replaceCostumeSelectorHtml_: (html) ->
+    @$el.find('#character-modal-costume-selector').replaceWith(html)
+
+    self = @
+    @$el.find('#character-modal-costume-selector a.remove-button').click (e) ->
+      e.preventDefault()
+
+      link = $(@)
+      if confirm(link.attr("data-message"))
+        dfr = $.Deferred()
+        $.ajax
+          url: link.attr("data-url")
+          type: "DELETE"
+          cache: false
+          data: { "_method": "DELETE" },
+          success: (data, textStatus, jqXHR) -> dfr.resolve(data)
+          error: dfr.reject
+        dfr.promise()
+          .then (data) ->
+            self.replaceCostumeSelectorHtml_(data)
+          .fail ->
+            errorMessage(<%= bm('.error_remove_costume') %>)
+
+    @$el.find('#character-modal-upload-costume-form').fileupload
+      dataType: "html"
+      done: (e, data) =>
+        @replaceCostumeSelectorHtml_(data.result)
+
+    @setActiveCostume_()
+    @renderCostumeSet_()
+
+    # HACK: ダイアログを表示して50ms程度待たないと画像のサイズが取得できなかった
+    f = ->
+      if @readImageSizeflag
+        img = $('#character-modal-costume-selector .active img')
+        if img.width() > 0
+          $('#character-modal-character').css
+            width: "#{img.width() / 2}px"
+            height: "#{img.height() / 2}px"
+          @readImageSizeflag = false
+        else
+          setTimeout(_.bind(f, @), 50)
+    if @readImageSizeflag
+      setTimeout(_.bind(f, @), 1)
+
+  setActiveCostume_: ->
+    @$el.find('#character-modal-costume-selector a.thumbnail').removeClass('active')
+    thumb = @$el.find("#character-modal-costume-selector img[alt=\"#{@model.costume()}\"]")
+    thumb.parent().addClass('active')
+    if thumb.width() > 0
+      $('#character-modal-character').css
+        width: "#{thumb.width() / 2}px"
+        height: "#{thumb.height() / 2}px"
+    else
+      @readImageSizeflag = true
+
+  renderCostumeSet_: ->
+    costumesEl = @$el.find('#character-modal-costume-set')
+    costumesEl.children().remove()
+
+    costumes = @model.get('costumes')
+    $.each costumes, (i, name) =>
+      costume =
+        name: @model.costumeName(i)
+        basename: name
+        path: @model.costumeUrl(i)
+        index: i + 1
+
+      html = $(_.template(@templateText, costume))
+      costumesEl.append(html)
+
+      html.find('a.costume').click (e) =>
+        e.preventDefault()
+        @model.set({ costumeIndex: i })
+
+      removeButton = html.find('a.remove-button')
+      if costumes.length <= 1
+        removeButton.hide()
+      else
+        removeButton.click (e) =>
+          e.preventDefault()
+          @removeCostume_(i)
+
+    @renderActiveCostume_()
+
+  removeCostume_: (i) ->
+    costumes = @model.get('costumes').slice(0)
+    costumes.splice(i, 1)
+    costumeNames = @model.get('costumeNames').slice(0)
+    costumeNames.splice(i, 1)
+    costumeIndex = @model.get('costumeIndex')
+    if costumeIndex >= costumes.length
+      costumeIndex = costumes.length - 1
+    @model.set
+      costumes: costumes
+      costumeNames: costumeNames
+      costumeIndex: costumeIndex
+
+  renderActiveCostume_: ->
+    costumesEl = @$el.find('#character-modal-costume-set')
+    costumesEl.find('.item').removeClass('active')
+    costumeIndex = @model.get('costumeIndex')
+    costumesEl.find(".item:nth-child(#{costumeIndex + 1})").addClass('active')
+
+  callAllOnChangeAttributes_: ->
+    @onChangeName(@model, @model.get('name'))
+    @onChangeX(@model, @model.get('x'))
+    @onChangeY(@model, @model.get('y'))
+    @onChangeAngle(@model, @model.get('angle'))
+    @onChangeCostumes(@model, @model.get('costumes'))
+    @onChangeRotationStyle(@model, @model.get('rotationStyle'))
+
+  onChangeName: (model, value, options) ->
+    @$el.find('input[name="character[name]"]').val(value)
+
+  onChangeX: (model, value, options) ->
+    @$el.find('input[name="character[x]"]').val(value)
+    $('#character_x_value').text(value)
+    $('#character-modal-character').css('left', parseInt(value * @previewZoomLevel))
+
+  onChangeY: (model, value, options) ->
+    @$el.find('input[name="character[y]"]').val(value)
+    $('#character_y_value').text(value)
+    $('#character-modal-character').css('top', parseInt(value * @previewZoomLevel))
+
+  onChangeAngle: (model, value, options) ->
+    @$el.find('input[name="character[angle]"]').val(value)
+    $('#character_angle_value').text("#{value}°")
+    rotate = "rotate(#{value}deg)"
+    $('#character_angle_vector').css
+      '-moz-transform': rotate
+      '-webkit-transform': rotate
+      transform: rotate
+
+    @model.rotateImage('#character-modal-character')
+
+  onChangeCostumes: (model, value, options) ->
+    @renderCostumeSet_()
+    @onChangeCostumeIndex(model, model.get('costumeIndex'))
+
+  onChangeCostumeNames: (model, value, options) ->
+    $.each value, (i, costumeName) =>
+      @$el.find("#character-modal-costume-set .item:nth-child(#{i + 1}) .name").text(costumeName)
+
+  onChangeCostumeIndex: (model, value, options) ->
+    img = $('<img>').attr
+      src: model.costumeUrl()
+      alt: model.costume()
+    $('#character-modal-character img').replaceWith(img)
+    $('#character-modal input[name="costume[name]"]').val(model.costumeName())
+
+    @setActiveCostume_()
+    @renderActiveCostume_()
+
+  onChangeRotationStyle: (model, value, options) ->
+    $('#character_rotation_style button.btn').removeClass('btn-primary')
+    $("#character_rotation_style_#{value}").addClass('btn-primary')
+    @onChangeAngle(@model, @model.get('angle'))
+
+  onChange: (model, options) ->
+    @validate_()
+
+  validate_: ->
+    return unless @target
+
+    valid = true
+
+    @$el.find('.control-group').removeClass('error')
+    @$el.find('#character-modal-costume-set .item').removeClass('error')
+
+    unless @model.isValid()
+      valid = false
+      $.each @model.validationError, (i, error) =>
+        if error.attr == 'name'
+          @$el.find('.control-group[for="character[name]"]').addClass('error')
+        if error.attr == 'costumeNames'
+          if error.index == @model.get('costumeIndex')
+            @$el.find('.control-group[for="costume[name]"]').addClass('error')
+          @$el.find("#character-modal-costume-set .item:nth-child(#{error.index + 1})").addClass('error')
+
+    name = @model.get('name')
+    if @target.get('name') != name &&
+       Smalruby.Collections.CharacterSet.findWhere({ name: name })
+      valid = false
+      @$el.find('.control-group[for="character[name]"]').addClass('error')
+
+    valid
+
+  onSelectCostume: (e) ->
+    e.preventDefault()
+
+    attrs = {}
+
+    costume = $(e.target).attr('alt') || $(e.target).find('img').attr('alt')
+    if @model.costume() != costume
+      costumes = @model.get('costumes').slice(0)
+      costumes[@model.get('costumeIndex')] = costume
+      attrs['costumes'] = costumes
+
+    unless @nameChanged
+      prefix = Smalruby.Character.costumeToNamePrefix(costume)
+      if prefix != @model.namePrefix()
+        if prefix == @target.namePrefix()
+          attrs['name'] = @target.get('name')
+        else
+          attrs['name'] = Smalruby.Collections.CharacterSet.uniqueName(costume)
+
+    @model.set(attrs)
+
+  onUploadCostume: (e) ->
+    e.preventDefault()
+
+    @$el.find('input[name="costume[file]"]').click()
+
+  onRotationStyleFree: ->
+    @model.set({ rotationStyle: 'free' })
+
+  onRotationStyleLeftRight: ->
+    @model.set({ rotationStyle: 'left_right' })
+
+  onRotationStyleNone: ->
+    @model.set({ rotationStyle: 'none' })
+
+  onOk: ->
+    if @validate_()
+      @$el.modal('hide')
+      if @target
+        @target.set(_.clone(@model.attributes))
+
+  setCharacter: (character)->
+    @target = character
+    @model.set(_.clone(@target.attributes))
+    @nameChanged = false
+    @