add editor event of speechballoon

diff --git a/app/assets/javascripts/editor/panel_editor/dock.js.coffee b/app/assets/javascripts/editor/panel_editor/dock.js.coffee
index c90dab0..fcb0d3d 100644 (file)
--- a/app/assets/javascripts/editor/panel_editor/dock.js.coffee
+++ b/app/assets/javascripts/editor/panel_editor/dock.js.coffee
@@ -130,16 +130,20 @@ class Editor.EditorModule.DockModule.ElementBay extends Editor.EditorModule.Dock
     super(options)\r
     i = 0\r
     _.each @elements(), (element) =>\r
-      tab = new Editor.EditorModule.DockModule.ElementBoard({\r
-        parent: this, index: i, name: element.item_name(), element: element\r
-      })\r
-      @add_tab(\r
-        tab, \r
-        new Editor.EditorModule.DockModule.TabModule.ElementBoardLabel({parent: tab, name: element.item_name()}), \r
-        new Editor.EditorModule.DockModule.TabModule.ElementBoardBody({parent: tab})\r
-      )\r
+      @add_element(element)\r
       i++\r
   \r
+  add_element: (element, index) ->\r
+    tab = new Editor.EditorModule.DockModule.ElementBoard({\r
+      parent: this, index: index, name: element.item_name(), element: element\r
+    })\r
+    @add_tab(\r
+      tab, \r
+      new Editor.EditorModule.DockModule.TabModule.ElementBoardLabel({parent: tab, name: element.item_name()}), \r
+      new Editor.EditorModule.DockModule.TabModule.ElementBoardBody({parent: tab})\r
+    )\r
+    @panel_body().add_element(element)\r
+  \r
   render: () ->\r
     this.$el.html('')\r
     this.$el.attr('id', @body.dom_id())\r
@@ -153,6 +157,9 @@ class Editor.EditorModule.DockModule.ElementBay extends Editor.EditorModule.Dock
     $("li", elements_tabs.$el).addClass('ui-corner-left')\r
     this\r
   \r
+  panel_body: () ->\r
+    @dock().editor().body\r
+  \r
   elements: () ->\r
     @root_item().scenario_elements()\r
   \r

diff --git a/app/assets/javascripts/models/balloon.js.coffee b/app/assets/javascripts/models/balloon.js.coffee
index 1089233..48c95de 100644 (file)
--- a/app/assets/javascripts/models/balloon.js.coffee
+++ b/app/assets/javascripts/models/balloon.js.coffee
@@ -38,4 +38,7 @@ class Pettanr.Balloon extends Peta.Element
   initialize: () ->\r
     if @id\r
       @url = @url + @id\r
+    @bind('change:width', () ->\r
+      console.log('cng')\r
+    )\r
   \r

diff --git a/app/assets/javascripts/views/balloons/element.js.coffee b/app/assets/javascripts/views/balloons/element.js.coffee
index 85bd9a7..bf63c6d 100644 (file)
--- a/app/assets/javascripts/views/balloons/element.js.coffee
+++ b/app/assets/javascripts/views/balloons/element.js.coffee
@@ -6,14 +6,65 @@ class Pettanr.Views.Balloon.Element extends Backbone.View
     @element = options.element\r
     @root = options.root\r
     @spot = options.spot\r
+    @speech_balloon = options.parent\r
+    @system_picture = @element.system_picture()\r
+    @system_picture.fetch({cache: true}).done =>\r
+      @render()\r
+  \r
+  clear: () ->\r
+    this\r
   \r
   render: () ->\r
-    system_picture = @element.system_picture()\r
-    system_picture.fetch({cache: true}).done =>\r
-      attr = {\r
-        src: system_picture.r_url(), \r
-        alt: @element.get('caption')\r
-      }\r
-      this.$el.attr(attr)\r
+    attr = {\r
+      src: @system_picture.r_url(), \r
+      alt: @element.get('caption')\r
+    }\r
+    this.$el.attr(attr)\r
     this\r
   \r
+class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element\r
+  \r
+  initialize: (options) ->\r
+    super(options)\r
+  \r
+  render: () ->\r
+    super()\r
+    sb = @speech_balloon\r
+    elm = @element\r
+    this.$el.resizable {\r
+      stop: (event, ui) ->\r
+        resize_div = $(@)\r
+        speech_balloon_div = sb.$el\r
+        \r
+        resize_div.css('top', '0px')\r
+        resize_div.css('left', '0px')\r
+        width = ui.size.width\r
+        height = ui.size.height\r
+        top = speech_balloon_div.position().top\r
+        if ui.originalPosition.top != ui.position.top\r
+          top += ui.position.top\r
+          speech_balloon_div.css('top', top.toString() + 'px')\r
+          speech_balloon_div.css('height', height + 'px')\r
+        left = speech_balloon_div.position().left\r
+        if ui.originalPosition.left != ui.position.left\r
+          left += ui.position.left\r
+          speech_balloon_div.css('left', left.toString() + 'px')\r
+          speech_balloon_div.css('width', width + 'px')\r
+        speech_balloon_div.css('width', width.toString() + 'px')\r
+        speech_balloon_div.css('height', height.toString() + 'px')\r
+        elm.set({\r
+          x: Math.floor(left), \r
+          y: Math.floor(top), \r
+          width: width, \r
+          height: height\r
+        }, {silent: true})\r
+        elm.trigger('resize')\r
+     resize: (event, ui) ->\r
+        resize_div = $(@)\r
+        speech_balloon_div = resize_div.parent()\r
+      handles: 'all',\r
+      autoHide: true\r
+    }\r
+    this\r
+  \r
+  \r

diff --git a/app/assets/javascripts/views/panel_pictures/element.js.coffee b/app/assets/javascripts/views/panel_pictures/element.js.coffee
index 7ab0fa7..81a8b74 100644 (file)
--- a/app/assets/javascripts/views/panel_pictures/element.js.coffee
+++ b/app/assets/javascripts/views/panel_pictures/element.js.coffee
@@ -133,7 +133,7 @@ class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPic
           width: width, \r
           height: height\r
         }, {silent: true})\r
-        elm.trigger('move')\r
+        elm.trigger('resize')\r
       handles: 'all',\r
       autoHide: true\r
     }\r

diff --git a/app/assets/javascripts/views/panels/body.js.coffee b/app/assets/javascripts/views/panels/body.js.coffee
index e32dde4..3694c8b 100644 (file)
--- a/app/assets/javascripts/views/panels/body.js.coffee
+++ b/app/assets/javascripts/views/panels/body.js.coffee
@@ -9,14 +9,14 @@ class Pettanr.Views.Panel.Body extends Backbone.View
     @panel = options.panel\r
     @operators = options.operators\r
     @spot = options.spot\r
+    @collect_views()\r
   \r
   render: () ->\r
     @restyle()\r
-    if @panel.is_visible(@operators)\r
-      this.$el.html('')\r
-      l = @panel.scenario_elements()\r
-      _.each l, (element) =>\r
-        @add_element(element)\r
+    this.$el.html('')\r
+    if @is_visible()\r
+      _.each @views, (view) =>\r
+        this.$el.append(view.render().el)\r
     else\r
       tag = new Tag.Div({\r
         content: I18n.t('panels.hidden'), \r
@@ -25,19 +25,26 @@ class Pettanr.Views.Panel.Body extends Backbone.View
       this.$el.html(tag.render().el)\r
     this\r
   \r
+  collect_views: () ->\r
+    @views = []\r
+    _.each @panel.scenario_elements(), (element) =>\r
+      @add_element(element)\r
+  \r
   restyle: () ->\r
     attr = {style: Pettanr.to_style(@style())}\r
     this.$el.attr(attr)\r
   \r
-  render_element: (element) ->\r
+  is_visible: () ->\r
+    @panel.is_visible(@operators)\r
   \r
-  element_class: (element) ->\r
-    Pettanr.Views[element.singular()].Element\r
+  render_element: (index) ->\r
   \r
   add_element: (element) ->\r
     c = @element_class(element)\r
-    tag = new c({element: element, root: @panel, spot: @spot})\r
-    this.$el.append(tag.render().el)\r
+    @views[element.get('z')-1] = new c({element: element, root: @panel, spot: @spot})\r
+  \r
+  element_class: (element) ->\r
+    Pettanr.Views[element.singular()].Element\r
   \r
   disp: (value) ->\r
     Pettanr.to_s(value) + 'px'\r
@@ -72,6 +79,12 @@ class Pettanr.Views.Panel.Body.Edit extends Pettanr.Views.Panel.Body
     }\r
     this\r
   \r
+  is_visible: () ->\r
+    true  # show everytime as editor\r
+  \r
+  collect_views: () ->\r
+    @views = []  # elements collect by dock\r
+  \r
   element_class: (element) ->\r
     Pettanr.Views[element.singular()].Element.Edit\r
   \r

diff --git a/app/assets/javascripts/views/speech_balloons/element.js.coffee b/app/assets/javascripts/views/speech_balloons/element.js.coffee
index 4cdf06f..1d480dd 100644 (file)
--- a/app/assets/javascripts/views/speech_balloons/element.js.coffee
+++ b/app/assets/javascripts/views/speech_balloons/element.js.coffee
@@ -8,23 +8,27 @@ class Pettanr.Views.SpeechBalloon.Element extends Backbone.View
     @spot = options.spot\r
     @balloon = @element.get('balloon')\r
     @speech = @element.get('speech')\r
-  \r
-  render: () ->\r
-    @attr = {style: Pettanr.to_style(@style())}\r
-    @b = new Pettanr.Views.Balloon.Element({\r
+    balloon_class = @balloon_class()\r
+    @balloon_view = new balloon_class({\r
+      parent: this, \r
       element: @balloon, \r
       root: @root,\r
       spot: @spot\r
     })\r
-    @s = new Pettanr.Views.Speech.Element({\r
+    speech_class = @speech_class()\r
+    @speech_view = new speech_class({\r
+      parent: this, \r
       element: @speech, \r
       root: @root,\r
       spot: @spot\r
     })\r
+  \r
+  render: () ->\r
+    @attr = {style: Pettanr.to_style(@style())}\r
     this.$el.attr(@attr)\r
     this.$el.html('')\r
-    this.$el.append(@b.render().el)\r
-    this.$el.append(@s.render().el)\r
+    this.$el.append(@balloon_view.clear().el)\r
+    this.$el.append(@speech_view.render().el)\r
     this\r
   \r
   style: () ->\r
@@ -36,5 +40,35 @@ class Pettanr.Views.SpeechBalloon.Element extends Backbone.View
       'z-index': @element.get('z')\r
     }\r
   \r
+  balloon_class: () ->\r
+    Pettanr.Views.Balloon.Element\r
+  \r
+  speech_class: () ->\r
+    Pettanr.Views.Speech.Element\r
+  \r
 class Pettanr.Views.SpeechBalloon.Element.Edit extends Pettanr.Views.SpeechBalloon.Element\r
   \r
+  initialize: (options) ->\r
+    super(options)\r
+  \r
+  render: () ->\r
+    super()\r
+    elm = @element\r
+    this.$el.draggable {\r
+      stop: (event, ui) ->\r
+        left = $(@).position().left\r
+        top = $(@).position().top\r
+        elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true})\r
+        elm.trigger('move')\r
+    }\r
+    this\r
+  \r
+  element_class: (element) ->\r
+    Pettanr.Views[element.singular()].Element.Edit\r
+  \r
+  balloon_class: () ->\r
+    Pettanr.Views.Balloon.Element.Edit\r
+  \r
+  speech_class: () ->\r
+    Pettanr.Views.Speech.Element.Edit\r
+  \r

diff --git a/app/assets/javascripts/views/speeches/element.js.coffee b/app/assets/javascripts/views/speeches/element.js.coffee
index 62099ac..7ccb099 100644 (file)
--- a/app/assets/javascripts/views/speeches/element.js.coffee
+++ b/app/assets/javascripts/views/speeches/element.js.coffee
@@ -6,9 +6,7 @@ class Pettanr.Views.Speech.Element extends Backbone.View
     @element = options.element\r
     @root = options.root\r
     @spot = options.spot\r
-  \r
-  render: () ->\r
-    @outer_attr = {style: Pettanr.to_style(@outer_style())}\r
+    @speech_balloon = options.parent\r
     @div = new Tag.Div({\r
       attr: {\r
         style: Pettanr.to_style(@inner_style())\r
@@ -16,6 +14,9 @@ class Pettanr.Views.Speech.Element extends Backbone.View
       content: @element.scenario(),\r
       class_name: 'pettanr-comic-speech-inner'\r
     })\r
+  \r
+  render: () ->\r
+    @outer_attr = {style: Pettanr.to_style(@outer_style())}\r
     this.$el.attr(@outer_attr)\r
     this.$el.html(@div.render().el)\r
     this\r
@@ -35,3 +36,19 @@ class Pettanr.Views.Speech.Element extends Backbone.View
       color: '#' + ('000000' + Pettanr.to_s(@element.get('fore_color'))).slice(-6)\r
     }\r
   \r
+class Pettanr.Views.Speech.Element.Edit extends Pettanr.Views.Speech.Element\r
+  \r
+  initialize: (options) ->\r
+    super(options)\r
+  \r
+  render: () ->\r
+    super()\r
+    img = @speech_balloon.balloon_view.$el\r
+    @div.$el.mouseover -> \r
+      $('.ui-resizable-handle', img.parent()).map ->\r
+        $(@).css('display', 'block')\r
+    @div.$el.mouseout -> \r
+      $('.ui-resizable-handle', img.parent()).map ->\r
+        $(@).css('display', 'none')\r
+    this\r
+  \r