smalruby-editor 0.0.12 → 0.1.0

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

@@ -0,0 +1,148 @@
+# キャラクター設定ダイアログを表現するビュー
+Smalruby.CharacterModalView = Backbone.View.extend
+  model: new Smalruby.Character()
+
+  events:
+    'click #character-modal-costume-selector a': 'onSelectCostume'
+    'click #character-modal-ok-button': 'onOk'
+
+  previewZoomLevel: 0.5
+
+  initialize: ->
+    @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())
+
+    @$el.find('input[name="character[name]"]').keypress (e) ->
+      e = window.event if !e
+      if e.keyCode == 13
+        false
+      else
+        true
+
+    self = @
+    @$el.find('input[name="character[name]"]').change (e) ->
+      self.model.set({ name: $(@).val() })
+      self.nameChanged = true
+
+    @$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() })
+
+    @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)
+
+    @onChange(@model)
+
+  render: ->
+    @$el.modal('show')
+    # HACK: ダイアログを表示して500ms程度待たないと画像のサイズが取得できなかった
+    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)
+
+  onChange: (model, options)->
+    @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'))
+
+  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-modal-character').css
+      '-moz-transform': rotate
+      '-webkit-transform': rotate
+      transform: rotate
+
+  onChangeCostumes: (model, value, options) ->
+    img = $('<img>').attr
+      src: model.costumeUrl()
+      alt: model.costume()
+    $('#character-modal-character img').replaceWith(img)
+    @$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
+
+  onSelectCostume: (e) ->
+    e.preventDefault()
+
+    costume = $(e.target).attr('alt') || $(e.target).find('img').attr('alt')
+
+    attrs =
+      costumes: [costume]
+
+    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)
+
+  onOk: ->
+    @$el.modal('hide')
+    if @target
+      @target.set(_.clone(@model.attributes))
+
+  setCharacter: (character)->
+    @target = character
+    @model.set(_.clone(@target.attributes))
+    @nameChanged = false
+    @

data/app/assets/javascripts/views/character_selector_view.js.coffee

@@ -0,0 +1,109 @@
+# キャラクター選択を表現するビュー
+Smalruby.CharacterSelectorView = Backbone.View.extend({
+  el: '#character-selector-tab'
+
+  initialize: ->
+    @klass = Smalruby.CharacterSelectorView
+
+    @listenTo(@model, name, @render) for name in ['add', 'remove', 'reset', 'change']
+
+    @templateText = $('#character-selector-template').text()
+
+    $('#add-character-button').click (e) ->
+      e.preventDefault()
+
+      charSet = Smalruby.Collections.CharacterSet
+      attrs =
+        if (last = _.last(charSet.models))
+          name: charSet.uniqueName(last.costume())
+          costumes: _.clone(last.get('costumes'))
+        else
+          name: charSet.uniqueName()
+      c = new Smalruby.Character(attrs)
+      charSet.add(c)
+
+      Smalruby.Views.CharacterModalView.setCharacter(c).render()
+
+    @render()
+
+  render: ->
+    charsEl = $('#character-selector-character-set')
+    charsEl.children().remove()
+
+    @model.each (character) =>
+      html = $(_.template(@templateText, character))
+      charsEl.append(html)
+
+      html.find('a.character').click (e) ->
+        e.preventDefault()
+        Smalruby.Views.CharacterModalView.setCharacter(character).render()
+
+      html.find('a.add-block-button').click (e) =>
+        e.preventDefault()
+        @addBlock_(character)
+
+      removeButton = html.find('a.remove-button')
+      removeButton.click (e) =>
+        e.preventDefault()
+        @removeCharacter_(character)
+      if character.get('using')
+        removeButton.hide()
+
+      rotate = "rotate(#{character.get('angle') * -1}deg)"
+      img = html.find('img')
+      img.css
+        '-moz-transform': rotate
+        '-webkit-transform': rotate
+        transform: rotate
+      img.on 'dragstart', (e) ->
+        e.preventDefault()
+
+
+  addBlock_: (character) ->
+    newBlock = new Blockly.Block(Blockly.mainWorkspace, 'character_new')
+    newBlock.setCharacter(character)
+    newBlock.initSvg()
+    newBlock.render()
+    @moveByNewBlock_(newBlock)
+    newBlock.select()
+
+  moveByNewBlock_: (newBlock) ->
+    metrics = Blockly.mainWorkspace.getMetrics()
+    newXY =
+      x: metrics.viewLeft + @klass.NEW_BLOCK_MARGIN.LEFT
+      y: metrics.viewTop + @klass.NEW_BLOCK_MARGIN.TOP
+
+    if @prevBlock
+      xy = @prevBlock.getRelativeToSurfaceXY()
+      hw = @prevBlock.getHeightWidth()
+      newHW = newBlock.getHeightWidth()
+      if xy.x == @prevXY.x && xy.y == @prevXY.y
+        x = xy.x
+        y = xy.y + hw.height + @klass.NEW_BLOCK_MARGIN.TOP
+        if y + newHW.height > metrics.viewTop + metrics.viewHeight
+          x += hw.width + @klass.NEW_BLOCK_MARGIN.LEFT
+          y = newXY.y
+      else
+        x = @prevXY.x
+        y = @prevXY.y
+      if x >= metrics.viewLeft &&
+         x + newHW.width <= metrics.viewLeft + metrics.viewWidth &&
+         y >= metrics.viewTop &&
+         y + newHW.height <= metrics.viewTop + metrics.viewHeight
+        newXY.x = x
+        newXY.y = y
+
+    newBlock.moveBy(newXY.x, newXY.y)
+
+    @prevBlock = newBlock
+    @prevXY = newBlock.getRelativeToSurfaceXY()
+
+  removeCharacter_: (character) ->
+    unless character.get('using')
+      Smalruby.Collections.CharacterSet.remove(character)
+
+}, {
+  NEW_BLOCK_MARGIN:
+    LEFT: 20
+    TOP: 20
+})

data/app/assets/javascripts/views/main_menu_view.js.coffee

@@ -0,0 +1,264 @@
+# ナビゲーションメニューを表現するビュー
+Smalruby.MainMenuView = Backbone.View.extend
+  el: '#main-menu'
+
+  events:
+    'click #run-button': 'onRun'
+    'click #download-button': 'onDownload'
+    'click #load-button': 'onLoad'
+    'click #save-button': 'onSave'
+    'click #check-button': 'onCheck'
+    'click #reset-button': 'onReset'
+
+  initialize: ->
+    $('#filename').keypress (e) ->
+      e = window.event if !e
+      if e.keyCode == 13
+        $('#save-button').click()
+        false
+      else
+        true
+
+    $('#file-form').fileupload
+      dataType: 'json'
+      done: (e, data) ->
+        info = data.result.source_code
+        if info.error
+          window.errorMessage(info.filename + 'は' + info.error)
+        else
+          $('#filename').val(info.filename)
+          if info.filename.match(/.xml$/)
+            Smalruby.loadXml(info.data)
+            info.data = Blockly.Ruby.workspaceToCode()
+          window.textEditor.getSession().getDocument().setValue(info.data)
+          window.textEditor.moveCursorTo(0, 0)
+          unless window.blockMode
+            window.textEditor.focus()
+          # TODO: window.changed -> Smalruby.Models.SourceCode.changed
+          window.changed = false
+          window.successMessage('ロードしました')
+
+  onRun: (e) ->
+    e.preventDefault()
+
+    sourceCode = @getSourceCode()
+
+    @blockUI
+      title:
+        """
+        <i class="icon-play"></i>
+        プログラムの実行中
+        """
+      message: 'プログラムの画面に切り替えてください。'
+      notice:
+        """
+        プログラムをセーブ・チェックしてから実行するよ♪<br>
+        Escキーを押すとプログラムが終わります。
+        """
+
+    failedFunc = ->
+      $.unblockUI()
+      errorMessage('プログラムを実行できませんでした')
+
+    sourceCode.save2()
+      .done (data) ->
+        sourceCode.write()
+          .done (data) ->
+            afterSave = ->
+              Smalruby.savedFilename = sourceCode.get('filename')
+              window.changed = false
+              sourceCode.check()
+                .done (data) ->
+                  if data.length > 0
+                    failedFunc()
+                    for errorInfo in data
+                      do (errorInfo) ->
+                        msg = "#{errorInfo.row}行"
+                        if errorInfo.column > 0
+                          msg += "、#{errorInfo.column}文字"
+                        window.errorMessage(msg + ": #{errorInfo.message}")
+                  else
+                    sourceCode.run()
+                      .done (data) ->
+                        $.unblockUI()
+                        if data.length > 0
+                          for errorInfo in data
+                            do (errorInfo) ->
+                              msg = "#{errorInfo.row}行"
+                              if errorInfo.column > 0
+                                msg += "、#{errorInfo.column}文字"
+                              errorMessage(msg + ": #{errorInfo.message}")
+
+                      .fail -> failedFunc()
+
+                .fail -> failedFunc()
+
+            if data.source_code.error
+              if sourceCode.get('filename') == Smalruby.savedFilename ||
+                 confirm("前に#{sourceCode.get('filename')}という名前でセーブしているけど本当にセーブしますか？\nセーブすると前に作成したプログラムは消えてしまうよ！")
+                sourceCode.write(true)
+                  .done (data) ->
+                    afterSave()
+              else
+                failedFunc()
+            else
+              afterSave()
+          .fail -> failedFunc()
+      .fail -> failedFunc()
+
+  onDownload: (e) ->
+    e.preventDefault()
+
+    sourceCode = @getSourceCode()
+
+    @blockUI
+      title:
+        """
+        プログラムのダウンロード中
+        """
+      message: 'プログラムをダウンロードしています。'
+      notice:
+        """
+        ダウンロードしたプログラムは、<br>
+        Windowsだと「ruby #{sourceCode.get('filename')}」、<br>
+        Macだと「rsdl #{sourceCode.get('filename')}」で実行できます。
+        """
+
+    sourceCode.save2()
+      .done (data) ->
+        $.unblockUI()
+        window.changed = false
+        window.successMessage('ダウンロードしました')
+        Smalruby.downloading = true
+        $('#download-link').click()
+      .fail ->
+        $.unblockUI()
+        window.errorMessage('ダウンロードできませんでした')
+
+  onLoad: (e) ->
+    e.preventDefault()
+
+    # TODO: window.changed -> Smalruby.Models.SourceCode.changed
+    if window.changed
+      return unless confirm('まだセーブしていないのでロードするとプログラムが消えてしまうよ！\nそれでもロードしますか？')
+    $('input#load-file[name="source_code[file]"]').click()
+
+  onSave: (e) ->
+    e.preventDefault()
+
+    filename = $.trim($('#filename').val())
+    if filename.length <= 0
+      window.errorMessage('セーブする前にプログラムに名前をつけてね！')
+      $('#filename').focus()
+      return
+
+    sourceCode = @getSourceCode()
+
+    @blockUI
+      title:
+        """
+        プログラムのセーブ中
+        """
+      message: 'プログラムをセーブしています。'
+      notice:
+        """
+        プログラムの名前は「#{sourceCode.get('filename')}」です。<br>
+        プログラムはホームディレクトリにセーブします。<br>
+        """
+
+    failedFunc = ->
+      $.unblockUI()
+      window.errorMessage('セーブできませんでした')
+
+    sourceCode.save2()
+      .done (data) ->
+        sourceCode.write()
+          .done (data) ->
+            afterSave = ->
+              $.unblockUI()
+              Smalruby.savedFilename = sourceCode.get('filename')
+              window.changed = false
+              window.successMessage('セーブしました')
+
+            if data.source_code.error
+              if sourceCode.get('filename') == Smalruby.savedFilename ||
+                 confirm("前に#{sourceCode.get('filename')}という名前でセーブしているけど本当にセーブしますか？\nセーブすると前に作成したプログラムは消えてしまうよ！")
+                sourceCode.write(true)
+                  .done (data) ->
+                    afterSave()
+              else
+                $.unblockUI()
+                window.successMessage('セーブをキャンセルしました')
+            else
+              afterSave()
+          .fail -> failedFunc()
+      .fail -> failedFunc()
+
+  onCheck: (e) ->
+    e.preventDefault()
+
+    # TODO: 既存のシンタックスに関するエラーメッセージをcloseしておく
+
+    sourceCode = @getSourceCode()
+
+    @blockUI
+      title:
+        """
+        プログラムのチェック中
+        """
+      message: 'プログラムの文法をチェックしています。'
+      notice:
+        """
+        このチェックは簡易的なものですので、<br>
+        プログラムを動かすとエラーが見つかるかもしれません。
+        """
+
+    sourceCode.check()
+      .done (data) ->
+        $.unblockUI()
+        if data.length == 0
+          window.successMessage('チェックしました', 'ただし、プログラムを動かすとエラーが見つかるかもしれません。')
+        else
+          for errorInfo in data
+            do (errorInfo) ->
+              msg = "#{errorInfo.row}行"
+              if errorInfo.column > 0
+                msg += "、#{errorInfo.column}文字"
+              window.errorMessage(msg + ": #{errorInfo.message}")
+      .fail ->
+        $.unblockUI()
+        errorMessage('チェックできませんでした')
+
+  onReset: (e) ->
+    e.preventDefault()
+
+    location.reload()
+
+  getFilename: ->
+    $.trim($('#filename').val())
+
+  getSourceCode: ->
+    sourceCode = new Smalruby.SourceCode()
+    $('#filename').val(sourceCode.get('filename'))
+    sourceCode
+
+  blockUI: (options) ->
+    $.blockUI
+      message:
+        """
+        <h3>
+          #{options.title}
+        </h3>
+        <blockquote>
+          <p>
+            #{options.message}
+          </p>
+          <small>
+            #{options.notice}
+          </small>
+        </blockquote>
+        """
+      css:
+        border: 'none'
+        'text-align': 'left'
+        'padding-left': '2em'