From 664f8d5b324115a330cbe80338f2374fe570fdff Mon Sep 17 00:00:00 2001
From: yasushiito <yas@pen-chan.jp>
Date: Wed, 17 Sep 2014 07:57:26 +0900
Subject: [PATCH] js add panel viewer

---
 .../javascripts/controllers/panels.js.coffee       | 15 ++++-
 .../javascripts/locmare/filer/pager.js.coffee      |  2 +-
 app/assets/javascripts/models/balloon.js.coffee    |  8 ---
 .../javascripts/models/ground_color.js.coffee      | 52 +----------------
 .../javascripts/models/ground_picture.js.coffee    | 16 +-----
 app/assets/javascripts/models/panel.js.coffee      | 44 +++++++++++++--
 .../javascripts/models/panel_picture.js.coffee     | 23 +-------
 app/assets/javascripts/models/speech.js.coffee     | 20 ++-----
 .../javascripts/models/speech_balloon.js.coffee    |  3 +-
 app/assets/javascripts/peta/content.js.coffee      |  2 +-
 app/assets/javascripts/peta/element.js.coffee      |  5 ++
 .../peta/element_nestable_content.js.coffee        | 15 +++++
 app/assets/javascripts/peta/item.js.coffee         | 12 ++--
 app/assets/javascripts/peta/root.js.coffee         | 22 ++++++++
 app/assets/javascripts/pettanr.js.coffee           |  5 ++
 app/assets/javascripts/pettanr/tags.js.coffee      |  2 +
 .../javascripts/views/balloons/element.js.coffee   | 17 ++++++
 .../views/ground_colors/element.js.coffee          | 65 ++++++++++++++++++++++
 .../views/ground_pictures/element.js.coffee        | 37 ++++++++++++
 .../views/panel_pictures/element.js.coffee         | 39 +++++++++++++
 app/assets/javascripts/views/panels/body.js.coffee | 39 +++++++++++++
 .../views/speech_balloons/element.js.coffee        | 34 +++++++++++
 .../javascripts/views/speeches/element.js.coffee   | 37 ++++++++++++
 app/controllers/application_controller.rb          |  2 +-
 app/controllers/panels_controller.rb               |  6 +-
 app/models/ground_picture.rb                       |  2 +-
 db/migrate/20140910075132_rm_panel_xy.rb           | 10 ++++
 lib/peta/root.rb                                   |  2 +-
 28 files changed, 406 insertions(+), 130 deletions(-)
 create mode 100644 app/assets/javascripts/views/balloons/element.js.coffee
 create mode 100644 app/assets/javascripts/views/ground_colors/element.js.coffee
 create mode 100644 app/assets/javascripts/views/ground_pictures/element.js.coffee
 create mode 100644 app/assets/javascripts/views/panel_pictures/element.js.coffee
 create mode 100644 app/assets/javascripts/views/panels/body.js.coffee
 create mode 100644 app/assets/javascripts/views/speech_balloons/element.js.coffee
 create mode 100644 app/assets/javascripts/views/speeches/element.js.coffee
 create mode 100644 db/migrate/20140910075132_rm_panel_xy.rb

diff --git a/app/assets/javascripts/controllers/panels.js.coffee b/app/assets/javascripts/controllers/panels.js.coffee
index 5e50281f..20553dd1 100644
--- a/app/assets/javascripts/controllers/panels.js.coffee
+++ b/app/assets/javascripts/controllers/panels.js.coffee
@@ -15,14 +15,25 @@ class Pettanr.PanelsController extends Pettanr.AppController
   by_speech_balloon_template: () ->
     @filer_list()
   
-  show_html: () -> 
+  show_html: () ->
+    _this = this
+    @item = new Pettanr.Panel({id: @item.get('id')}, {with_elements: true}) # retake panel for 'with_elements' mode
+    @item.fetch().done ->
+      view = new Pettanr.Views.Panel.Body({
+        el: "#pettanr",
+        panel: _this.item,
+        operators: _this.operators,
+        spot: null
+      })
+      view.render()
+      false
   
   show: () ->
     @set_show()
     switch @params['format']
       when 'prof'
         @show_prof()
-      when 'html'
+      else
         @show_html()
   
   count: () ->
diff --git a/app/assets/javascripts/locmare/filer/pager.js.coffee b/app/assets/javascripts/locmare/filer/pager.js.coffee
index e8222be8..a1aab69c 100644
--- a/app/assets/javascripts/locmare/filer/pager.js.coffee
+++ b/app/assets/javascripts/locmare/filer/pager.js.coffee
@@ -24,7 +24,7 @@ class Locmare.FilerModule.DefaultPager extends Backbone.View
     this.$el.html('')
     _.each @parts, (part) ->
       _this.$el.append(part.render().el)
-    rb = new Pettanr.Tag.Div({class_name: 'row_break'})
+    rb = new Pettanr.Tag.Div({class_name: 'row_break', content: ''})
     this.$el.append(rb.render().el)
     this
   
diff --git a/app/assets/javascripts/models/balloon.js.coffee b/app/assets/javascripts/models/balloon.js.coffee
index 572e66e3..48fb028d 100644
--- a/app/assets/javascripts/models/balloon.js.coffee
+++ b/app/assets/javascripts/models/balloon.js.coffee
@@ -31,14 +31,6 @@ class Pettanr.Balloon extends Peta.Element
         sp.fetch().done ->
           cb(sp.tmb_opt_img_tag())
   
-  style: () ->
-    {
-      width: Pettanr.to_s(@get('width')) + 'px', 
-      height: Pettanr.to_s(@get('height')) + 'px',
-      top: Pettanr.to_s(@get('y')) + 'px',
-      left: Pettanr.to_s(@get('x')) + 'px'
-    }
-  
   initialize: () ->
     if @id
       @url = @url + @id
diff --git a/app/assets/javascripts/models/ground_color.js.coffee b/app/assets/javascripts/models/ground_color.js.coffee
index 93ee926e..3f6ed038 100644
--- a/app/assets/javascripts/models/ground_color.js.coffee
+++ b/app/assets/javascripts/models/ground_color.js.coffee
@@ -15,59 +15,11 @@ class Pettanr.GroundColor extends Peta.Element
   @has_picture: () ->
     false
   
-  div_offset: () ->
-    if @get('xy')
-      @get('xy')
-    else
-      0
-  
-  div_size: () ->
-    if @get('wh')
-      @get('wh')
-    else
-      100 - @div_offset()
-  
-  div_x: () ->
-    if @get('orientation') == 0
-      0
-    else
-      @div_offset()
-  
-  div_y: () ->
-    if @get('orientation') == 0
-      @div_offset()
-    else
-      0
-  
-  div_width: () ->
-    if @get('orientation') == 0
-      100
-    else
-      @div_size()
-  
-  div_height: () ->
-    if @get('orientation') == 0
-      @div_size()
-    else
-      100
-  
-  style: (spot = null, opacity = 20) ->
-    r = {
-      position: 'absolute', 
-      'z-index': @get('z'), 
-      top: Pettanr.to_s(@div_y()) + '%', 
-      left: Pettanr.to_s(@div_x()) + '%', 
-      width: Pettanr.to_s(@div_width()) + '%', 
-      height: Pettanr.to_s(@div_height()) + '%', 
-      'background-color': '#' + ('000000' + Pettanr.to_s(@get('code'))).slice(-6)
-    }
-    @merge_opacity(r, opacity) if spot and spot != this
-    r
-  
   initialize: () ->
     if @id
       @url = @url + @id
   
 class Pettanr.GroundColor.Collection extends Backbone.Collection
   model: Pettanr.GroundColor
-  url: '/ground_colors'
+  url: '/ground_colors/'
+  
diff --git a/app/assets/javascripts/models/ground_picture.js.coffee b/app/assets/javascripts/models/ground_picture.js.coffee
index 3a313a16..3b0d89f9 100644
--- a/app/assets/javascripts/models/ground_picture.js.coffee
+++ b/app/assets/javascripts/models/ground_picture.js.coffee
@@ -23,19 +23,6 @@ class Pettanr.GroundPicture extends Peta.Element
   has_picture: () ->
     true
   
-  style: (spot = null, opacity = 20) ->
-    r = {
-      position: 'absolute', 
-      top: '0px', 
-      left: '0px',
-      'z-index': @get('z'), 
-      'background-image': 'url(' + @picture().r_url() + ')', 
-      'background-repeat': @repeat_text(), 
-      'background-position': Pettanr.to_s(@get('x')) + 'px ' + Pettanr.to_s(@get('y')) + 'px'
-    }
-    @merge_opacity(r, opacity) if spot and spot != this
-    r
-  
   tmb_opt_img_tag: (picture) ->
     new Pettanr.Image.SymbolPicture({
       attr: {
@@ -60,4 +47,5 @@ class Pettanr.GroundPicture extends Peta.Element
   
 class Pettanr.GroundPicture.Collection extends Backbone.Collection
   model: Pettanr.GroundPicture
-  url: '/ground_pictures'
+  url: '/ground_pictures/'
+  
diff --git a/app/assets/javascripts/models/panel.js.coffee b/app/assets/javascripts/models/panel.js.coffee
index 1b386304..47ddffa9 100644
--- a/app/assets/javascripts/models/panel.js.coffee
+++ b/app/assets/javascripts/models/panel.js.coffee
@@ -13,10 +13,46 @@ class Pettanr.Panel extends Peta.Root
     publish: 0
   } 
   
-  initialize: () ->
-    if @id
-      @url = @url + @id
+  pp: () ->
+    new Pettanr.PanelPicture({id: @get('pp_id')})
+  
+  is_visible: (operators) ->
+    switch super(operators)
+      when null # super return
+        return true
+      when false
+        return false
+      else
+        return true if @isNew()
+        @is_publish()
+  
+  is_usable: (operators) ->
+    @is_visible(operators)
+  
+  is_publish: () ->
+    @get('publish') > 0
+  
+  initialize: (attr = {}, options = {}) ->
+    @set(attr)
+    if @get('id')
+      @url = @url + @get('id')
+    if options.with_elements
+      @url = @url + '?with_elements=true'
   
 class Pettanr.Panel.Collection extends Backbone.Collection
   model: Pettanr.Panel
-  url: '/panels'
+  url: '/panels/'
+class Pettanr.RelationPanel extends Pettanr.Panel
+  relations: [
+    {
+      type: Backbone.HasMany,
+      key: 'panel_pictures',
+      relatedModel: 'Pettanr.PanelPicture',
+      collectionType: 'Pettanr.PanelPicture.Collection',
+      reverseRelation: {
+        key: 'panel_id',
+        includeInJSON: 'id'
+      }
+    },
+  ]
+  
diff --git a/app/assets/javascripts/models/panel_picture.js.coffee b/app/assets/javascripts/models/panel_picture.js.coffee
index 23f9d458..5558d5fe 100644
--- a/app/assets/javascripts/models/panel_picture.js.coffee
+++ b/app/assets/javascripts/models/panel_picture.js.coffee
@@ -37,26 +37,6 @@ class Pettanr.PanelPicture extends Peta.Element
   r_url: () ->
     '/pictures/' + @filename()
   
-  opt_div_style: () ->
-    "top:#{@get('y')}px; left:#{@get('x')}px; z-index:#{@get('z')}; position: absolute;"
-  
-  opt_img_tag: (spot = null, opacity = 20) ->
-    o = if spot and spot != this
-      "opacity: #{opacity.to_f/100}; filter:alpha(opacity=#{opacity});"
-    else
-      ''
-    @tag_attributes('img', {
-      class: "panel-picture", 
-      vPicture: @get('id'), 
-      src: @r_url(), 
-      width: Math.abs(@get('width')), 
-      height: Math.abs(@get('height')), 
-      picture_id: @get('picture_id'), 
-      ext: @picture.ext, 
-      alt: @get('caption'), 
-      style: "#{o}"
-    })
-  
   tmb_opt_img_tag: (picture) ->
     new Pettanr.Image.SymbolPicture({
       attr: {
@@ -78,4 +58,5 @@ class Pettanr.PanelPicture extends Peta.Element
   
 class Pettanr.PanelPicture.Collection extends Backbone.Collection
   model: Pettanr.PanelPicture
-  url: '/panel_pictures'
+  url: '/panel_pictures/'
+  
diff --git a/app/assets/javascripts/models/speech.js.coffee b/app/assets/javascripts/models/speech.js.coffee
index 92b8bd45..9bdffa1d 100644
--- a/app/assets/javascripts/models/speech.js.coffee
+++ b/app/assets/javascripts/models/speech.js.coffee
@@ -30,26 +30,14 @@ class Pettanr.Speech extends Peta.Element
         sp.fetch().done ->
           cb(sp.tmb_opt_img_tag())
   
-  outer_style: () ->
-    {
-      top: @get('y'), left: @get('x'), 
-      width: @get('width'), height: @get('height')
-    }
-  
-  inner_style: () ->
-    {
-      'font-size': Pettanr.to_s(@get('font_size')) + 'em',
-      'text-align': @text_align_text(), 
-      color: '#' + ('000000' + Pettanr.to_s(@get('fore_color'))).slice(-6)
-    }
-  
   text_align_text: () ->
     Pettanr.Speech.text_align_texts()[@get('text_align')]
   
+  scenario: () ->
+    @boosts('read')
+    @render()
+  
   initialize: () ->
     if @id
       @url = @url + @id
   
-class Pettanr.Speech.Collection extends Backbone.Collection
-  model: Pettanr.Speech
-  url: '/Speeches'
diff --git a/app/assets/javascripts/models/speech_balloon.js.coffee b/app/assets/javascripts/models/speech_balloon.js.coffee
index 55841eff..a934e9c8 100644
--- a/app/assets/javascripts/models/speech_balloon.js.coffee
+++ b/app/assets/javascripts/models/speech_balloon.js.coffee
@@ -35,4 +35,5 @@ class Pettanr.SpeechBalloon extends Peta.Element
   
 class Pettanr.SpeechBalloon.Collection extends Backbone.Collection
   model: Pettanr.SpeechBalloon
-  url: '/speech_balloons'
+  url: '/speech_balloons/'
+  
diff --git a/app/assets/javascripts/peta/content.js.coffee b/app/assets/javascripts/peta/content.js.coffee
index 64b7ae4a..54133e40 100644
--- a/app/assets/javascripts/peta/content.js.coffee
+++ b/app/assets/javascripts/peta/content.js.coffee
@@ -32,7 +32,7 @@ class Peta.Content extends Peta.Item
   
   # super return if my item
   is_visible: (operators) ->
-    super()
+    super(operators)
     return null if @owner_model().is_own(operators)
     true
   
diff --git a/app/assets/javascripts/peta/element.js.coffee b/app/assets/javascripts/peta/element.js.coffee
index 9f16a8ed..45ef5a52 100644
--- a/app/assets/javascripts/peta/element.js.coffee
+++ b/app/assets/javascripts/peta/element.js.coffee
@@ -1 +1,6 @@
 class Peta.Element extends Peta.ElementNestableContent
+  merge_opacity: (style_hash, opacity) ->
+    _.extend(style_hash, {
+      opacity: opacity.to_f/100, 
+      filter: 'alpha(opacity=' + Pettanr.to_s(opacity) + ')'
+    })
diff --git a/app/assets/javascripts/peta/element_nestable_content.js.coffee b/app/assets/javascripts/peta/element_nestable_content.js.coffee
index be936336..1d244231 100644
--- a/app/assets/javascripts/peta/element_nestable_content.js.coffee
+++ b/app/assets/javascripts/peta/element_nestable_content.js.coffee
@@ -1 +1,16 @@
 class Peta.ElementNestableContent extends Peta.Content
+  element_items: (element_model) ->
+    n = @my_class().my_manifest().associations.child_element_name(element_model)
+    @my_class()[n]()
+  
+  elements_items: () ->
+    _this = this
+    r = _.map @my_class().child_models, (element_model) ->
+      _this.element_items(element_model)
+    _.flatten(r)
+  
+  boosts: (level) ->
+    super(level)
+    _.each @elements_items(), (item) ->
+      item.boosts(level)
+  
diff --git a/app/assets/javascripts/peta/item.js.coffee b/app/assets/javascripts/peta/item.js.coffee
index aaad35ac..a14d036e 100644
--- a/app/assets/javascripts/peta/item.js.coffee
+++ b/app/assets/javascripts/peta/item.js.coffee
@@ -130,15 +130,11 @@ class Peta.Item extends Backbone.Model
   is_extend_column: (column_name) ->
     @is_extend_column column_name
   
-  is_user_visible: (operators) ->
-    if Manifest.manifest.magic_numbers['run_mode'] == 0
-      return false if not operators.is_guest
-    else
-      return false if not operators.is_resource_reader
-    true
-  
   is_visible: (operators) ->
-    return false if not @is_user_visible(operators)
+    if Manifest.manifest().magic_numbers['run_mode'] == 0
+      return false if not operators.is_guest()
+    else
+      return false if not operators.is_resource_reader()
     true
   
   is_editize: () ->
diff --git a/app/assets/javascripts/peta/root.js.coffee b/app/assets/javascripts/peta/root.js.coffee
index 58ca3e71..6d72fa86 100644
--- a/app/assets/javascripts/peta/root.js.coffee
+++ b/app/assets/javascripts/peta/root.js.coffee
@@ -1 +1,23 @@
 class Peta.Root extends Peta.ElementNestableContent
+  
+  parts_element: () ->
+    r = []
+    _.each @my_class.child_models, () ->
+      r += (@element_items(k) || [])
+    end
+    r
+  
+  zorderd_elements: () ->
+    res = []
+    _.each @parts_element, (e) ->
+      res[e.get('z')-1] = e
+    end
+    res
+  
+  scenario_elements: () ->
+    res = []
+    _.each @parts_element, (e) ->
+      res[e.get('t')] = e
+    end
+    res
+  
diff --git a/app/assets/javascripts/pettanr.js.coffee b/app/assets/javascripts/pettanr.js.coffee
index e7c4ccc6..035da1e6 100644
--- a/app/assets/javascripts/pettanr.js.coffee
+++ b/app/assets/javascripts/pettanr.js.coffee
@@ -38,6 +38,11 @@ class Pettanr
       else
         ''
   
+  @to_style: (hash) ->
+    a = _.map hash, (n, k) ->
+      Pettanr.to_s(k) + ': ' + Pettanr.to_s(n)
+    a.join('; ')
+  
   @url: (controller_name, action_name, params) ->
     controller = Manifest.manifest().controllers[controller_name]
     action = controller.actions[action_name]
diff --git a/app/assets/javascripts/pettanr/tags.js.coffee b/app/assets/javascripts/pettanr/tags.js.coffee
index 75c6ded4..0c7e2f8c 100644
--- a/app/assets/javascripts/pettanr/tags.js.coffee
+++ b/app/assets/javascripts/pettanr/tags.js.coffee
@@ -39,10 +39,12 @@ class Pettanr.Tag.Div extends Backbone.View
   tagName: 'div'
   
   initialize: (options) ->
+    @attr = options.attr || {}
     @content = options.content
     @class_name = options.class_name
   
   render: () ->
+    this.$el.attr(@attr)
     @el.className = @class_name
     this.$el.html(@content)
     this
diff --git a/app/assets/javascripts/views/balloons/element.js.coffee b/app/assets/javascripts/views/balloons/element.js.coffee
new file mode 100644
index 00000000..170f838c
--- /dev/null
+++ b/app/assets/javascripts/views/balloons/element.js.coffee
@@ -0,0 +1,17 @@
+class Pettanr.Views.Balloon.Element extends Backbone.View
+  tagName: 'img'
+  className: 'pettanr-balloon'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    attr = {
+      src: @element.system_picture.url(), 
+      alt: @element.get('caption')
+    }
+    this.$el.attr(attr)
+    this
+  
diff --git a/app/assets/javascripts/views/ground_colors/element.js.coffee b/app/assets/javascripts/views/ground_colors/element.js.coffee
new file mode 100644
index 00000000..90bbf61b
--- /dev/null
+++ b/app/assets/javascripts/views/ground_colors/element.js.coffee
@@ -0,0 +1,65 @@
+class Pettanr.Views.GroundColor.Element extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-comic-ground-color'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    attr = {
+      style: Pettanr.to_style(@style(@spot))
+    }
+    this.$el.attr(attr)
+    this
+  
+  div_offset: () ->
+    if @element.get('xy')
+      @element.get('xy')
+    else
+      0
+  
+  div_size: () ->
+    if @element.get('wh')
+      @element.get('wh')
+    else
+      100 - @div_offset()
+  
+  div_x: () ->
+    if @element.get('orientation') == 0
+      0
+    else
+      @div_offset()
+  
+  div_y: () ->
+    if @element.get('orientation') == 0
+      @div_offset()
+    else
+      0
+  
+  div_width: () ->
+    if @element.get('orientation') == 0
+      100
+    else
+      @div_size()
+  
+  div_height: () ->
+    if @element.get('orientation') == 0
+      @div_size()
+    else
+      100
+  
+  style: (spot = null, opacity = 20) ->
+    r = {
+      position: 'absolute', 
+      'z-index': @element.get('z'), 
+      top: Pettanr.to_s(@div_y()) + '%', 
+      left: Pettanr.to_s(@div_x()) + '%', 
+      width: Pettanr.to_s(@div_width()) + '%', 
+      height: Pettanr.to_s(@div_height()) + '%', 
+      'background-color': '#' + ('000000' + Pettanr.to_s(@element.get('code'))).slice(-6)
+    }
+    @merge_opacity(r, opacity) if spot and spot != @element
+    r
+  
diff --git a/app/assets/javascripts/views/ground_pictures/element.js.coffee b/app/assets/javascripts/views/ground_pictures/element.js.coffee
new file mode 100644
index 00000000..83238226
--- /dev/null
+++ b/app/assets/javascripts/views/ground_pictures/element.js.coffee
@@ -0,0 +1,37 @@
+class Pettanr.Views.GroundPicture.Element extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-comic-ground-picture'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    s = @style(@spot)
+    _.extend(s, @style_wh())
+    attr = {
+      style: Pettanr.to_style(s)
+    }
+    this.$el.attr(attr)
+    this
+  
+  style: (spot = null, opacity = 20) ->
+    r = {
+      position: 'absolute', 
+      top: '0px', 
+      left: '0px',
+      'z-index': @element.get('z'), 
+      'background-image': 'url(' + @picture().r_url() + ')', 
+      'background-repeat': @repeat_text(), 
+      'background-position': Pettanr.to_s(@element.get('x')) + 'px ' + Pettanr.to_s(@element.get('y')) + 'px'
+    }
+    @merge_opacity(r, opacity) if spot and spot != @element
+    r
+  
+  style_wh: () ->
+    {
+      width: Pettanr.to_s(@root.get('width')) + 'px', 
+      height: Pettanr.to_s(@root.get('height')) + 'px'
+    }
+  
diff --git a/app/assets/javascripts/views/panel_pictures/element.js.coffee b/app/assets/javascripts/views/panel_pictures/element.js.coffee
new file mode 100644
index 00000000..9be19a84
--- /dev/null
+++ b/app/assets/javascripts/views/panel_pictures/element.js.coffee
@@ -0,0 +1,39 @@
+class Pettanr.Views.PanelPicture.Element extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-panel-picture-wrapper'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    @attr = {style: Pettanr.to_style(@opt_div_style())}
+    this.$el.attr(@attr)
+    @img = new Pettanr.Tag.Img({
+      attr: @opt_img_tag(@spot)
+    })
+    this.$el.html(@img.render().el)
+    this
+  
+  opt_div_style: () ->
+    {
+      'top': Pettanr.to_s(@element.get('y')) + 'px',
+      'left': Pettanr.to_s(@element.get('x')) + 'px',
+      'z-index': @element.get('z'),
+      'position': 'absolute'
+    }
+  
+  opt_img_tag: (spot = null, opacity = 20) ->
+    style = {}
+    if spot and spot != @element
+      @merge_opacity(style, opacity)
+    {
+      vPicture: @element.get('id'), 
+      src: @element.r_url(), 
+      width: Pettanr.to_s(Math.abs(@element.get('width'))) + 'px', 
+      height: Pettanr.to_s(Math.abs(@element.get('height'))) + 'px', 
+      alt: @element.get('caption'), 
+      style: Pettanr.to_style(style)
+    }
+  
diff --git a/app/assets/javascripts/views/panels/body.js.coffee b/app/assets/javascripts/views/panels/body.js.coffee
new file mode 100644
index 00000000..b47f12f0
--- /dev/null
+++ b/app/assets/javascripts/views/panels/body.js.coffee
@@ -0,0 +1,39 @@
+# panel: panel item
+# operators: operators
+# spot: no opacity element
+class Pettanr.Views.Panel.Body extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-comic-panel'
+  
+  initialize: (options) ->
+    @panel = options.panel
+    @operators = options.operators
+    @spot = options.spot
+  
+  render: () ->
+    attr = {style: Pettanr.to_style(@style())}
+    this.$el.attr(attr)
+    if @panel.is_visible(@operators)
+      this.$el.html('')
+      _this = this
+      _.each @panel.scenario_elements(), (element) ->
+        c = Pettanr[element.singular()].Element
+        tag = new c({element: element, root: _this.panel, spot: _this.spot})
+        _this.$el.append(tag.render().el)
+    else
+      tag = new Pettanr.Tag.Div({
+        content: I18n.t('panels.hidden'), 
+        class_name: 'hidden'
+      })
+      this.$el.html(tag.render().el)
+    this
+  
+  style: () ->
+    {
+      'width': Pettanr.to_s(@panel.get('width')) + 'px', 
+      'height': Pettanr.to_s(@panel.get('height')) + 'px', 
+      'border-style': 'solid', 
+      'border-width': Pettanr.to_s(@panel.get('border')) + 'px', 
+      'border-color': 'black', 
+      'background-color': 'white'
+    }
diff --git a/app/assets/javascripts/views/speech_balloons/element.js.coffee b/app/assets/javascripts/views/speech_balloons/element.js.coffee
new file mode 100644
index 00000000..92b7e67f
--- /dev/null
+++ b/app/assets/javascripts/views/speech_balloons/element.js.coffee
@@ -0,0 +1,34 @@
+class Pettanr.Views.SpeechBalloon.Element extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-comic-balloon'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    attr = {style: @style()}
+    @balloon = new Pettanr.Views.Balloon.Element({
+      element: @element, 
+      root: @root,
+      spot: @spot
+    })
+    @speech = new Pettanr.Views.Speech.Element({
+      element: @element, 
+      root: @root,
+      spot: @spot
+    })
+    this.$el.attr(@attr)
+    this.$el.html(@img.render().el)
+    this
+  
+  style: () ->
+    {
+      width: Pettanr.to_s(@balloon.get('width')) + 'px', 
+      height: Pettanr.to_s(@balloon.get('height')) + 'px',
+      top: Pettanr.to_s(@balloon.get('y')) + 'px',
+      left: Pettanr.to_s(@balloon.get('x')) + 'px',
+      'z-index': @element.get('z')
+    }
+  
diff --git a/app/assets/javascripts/views/speeches/element.js.coffee b/app/assets/javascripts/views/speeches/element.js.coffee
new file mode 100644
index 00000000..873e0222
--- /dev/null
+++ b/app/assets/javascripts/views/speeches/element.js.coffee
@@ -0,0 +1,37 @@
+class Pettanr.Views.Speech.Element extends Backbone.View
+  tagName: 'div'
+  className: 'pettanr-comic-speech'
+  
+  initialize: (options) ->
+    @element = options.element
+    @root = options.root
+    @spot = options.spot
+  
+  render: () ->
+    attr = {style: Pettanr.to_style(@outer_style())}
+    @div = new Pettanr.Tag.Div({
+      attr: {
+        style: Pettanr.to_style(@inner_style())
+      }, 
+      content: @element.scenario(),
+      class_name: 'pettanr-comic-speech-inner'
+    })
+    this.$el.attr(@attr)
+    this.$el.html(@div.render().el)
+    this
+  
+  outer_style: () ->
+    {
+      top: @element.get('y'), 
+      left: @element.get('x'), 
+      width: @element.get('width'), 
+      height: @element.get('height')
+    }
+  
+  inner_style: () ->
+    {
+      'font-size': Pettanr.to_s(@element.get('font_size')) + 'em',
+      'text-align': @element.text_align_text(), 
+      color: '#' + ('000000' + Pettanr.to_s(@element.get('fore_color'))).slice(-6)
+    }
+  
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index f5c70621..bbdd2e89 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -180,7 +180,7 @@ class ApplicationController < ActionController::Base
   end
   
   def show_json_format_for_root format
-    format.json { render json: @item.attributes.to_json(@my_model_class.show_json_opt_for_root) }
+    format.json { render json: @item.to_json(@my_model_class.show_json_opt_for_root) }
   end
   
   def set_new
diff --git a/app/controllers/panels_controller.rb b/app/controllers/panels_controller.rb
index 6ea21ab2..8d4b05e9 100644
--- a/app/controllers/panels_controller.rb
+++ b/app/controllers/panels_controller.rb
@@ -67,7 +67,11 @@ class PanelsController < ApplicationController
     respond_to do |format|
       show_html_format format
       show_prof_format format
-      show_json_format_for_root format
+      if params[:with_elements]
+        show_json_format_for_root format
+      else
+        show_json_format format
+      end
     end
   end
 
diff --git a/app/models/ground_picture.rb b/app/models/ground_picture.rb
index 29e562a2..9ac6bc5d 100644
--- a/app/models/ground_picture.rb
+++ b/app/models/ground_picture.rb
@@ -26,7 +26,7 @@ class GroundPicture < Peta::Element
     self.attributes[self.pickup_column_name]
   end
   
-  def attr_y
+  def y
     self.attributes['y']
   end
   
diff --git a/db/migrate/20140910075132_rm_panel_xy.rb b/db/migrate/20140910075132_rm_panel_xy.rb
new file mode 100644
index 00000000..4a97b033
--- /dev/null
+++ b/db/migrate/20140910075132_rm_panel_xy.rb
@@ -0,0 +1,10 @@
+class RmPanelXy < ActiveRecord::Migration
+  def up
+    remove_column :panels, :x
+    remove_column :panels, :y
+    remove_column :panels, :z
+  end
+
+  def down
+  end
+end
diff --git a/lib/peta/root.rb b/lib/peta/root.rb
index d2fd1009..c0a38879 100644
--- a/lib/peta/root.rb
+++ b/lib/peta/root.rb
@@ -14,7 +14,7 @@ module Peta
     
     def self.show_json_opt_for_root
       r = (self.build_json_opt(self))
-      r[:include].merge!(:author => {})
+      #r[:include].merge!(:author => {})
       r
     end
       
-- 
2.11.0