fix: element edit

[pettanr/pettanr.git] / app / assets / javascripts / views / speech_balloons / element.js.coffee

diff --git a/app/assets/javascripts/views/speech_balloons/element.js.coffee b/app/assets/javascripts/views/speech_balloons/element.js.coffee
index 92b7e67..8eee1f5 100644 (file)
--- a/app/assets/javascripts/views/speech_balloons/element.js.coffee
+++ b/app/assets/javascripts/views/speech_balloons/element.js.coffee
@@ -6,23 +6,48 @@ class Pettanr.Views.SpeechBalloon.Element extends Backbone.View
     @element = options.element\r
     @root = options.root\r
     @spot = options.spot\r
+    @add_element()\r
   \r
-  render: () ->\r
-    attr = {style: @style()}\r
-    @balloon = new Pettanr.Views.Balloon.Element({\r
-      element: @element, \r
+  add_element: () ->\r
+    @add_balloon()\r
+    @add_speech()\r
+  \r
+  add_balloon: () ->\r
+    @balloon = @element.get('balloon')\r
+    @set_style()\r
+    klass = @balloon_class()\r
+    @balloon_view = new klass({\r
+      parent: this, \r
+      element: @balloon, \r
       root: @root,\r
       spot: @spot\r
     })\r
-    @speech = new Pettanr.Views.Speech.Element({\r
-      element: @element, \r
+  \r
+  add_speech: () ->\r
+    @speech = @element.get('speech')\r
+    klass = @speech_class()\r
+    @speech_view = new klass({\r
+      parent: this, \r
+      element: @speech, \r
       root: @root,\r
       spot: @spot\r
     })\r
-    this.$el.attr(@attr)\r
-    this.$el.html(@img.render().el)\r
+  \r
+  clear: () ->\r
+    this\r
+  \r
+  render: () ->\r
+    this.$el.html('')\r
+    this.$el.append(@balloon_view.clear().el)\r
+    this.$el.append(@speech_view.render().el)\r
+    @set_style()\r
+    @balloon_view.render()\r
     this\r
   \r
+  set_style: () ->\r
+    attr = {style: Pettanr.to_style(@style())}\r
+    this.$el.attr(attr)\r
+  \r
   style: () ->\r
     {\r
       width: Pettanr.to_s(@balloon.get('width')) + 'px', \r
@@ -32,3 +57,57 @@ 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
+    @listenTo(@element, 'sort', @set_style)\r
+    @listenTo(@element, 'active', @active)\r
+    @listenTo(@element, 'inactive', @inactive)\r
+  \r
+  render: () ->\r
+    super()\r
+    @listenTo(@balloon, 'input:r', @input_r)\r
+    @listenTo(@balloon, 'input:x', @set_style)\r
+    @listenTo(@balloon, 'input:y', @set_style)\r
+    @listenTo(@balloon, 'input:width', @set_style)\r
+    @listenTo(@balloon, 'input:height', @set_style)\r
+    bln = @balloon\r
+    this.$el.draggable {\r
+      stop: (event, ui) ->\r
+        left = Math.floor($(@).position().left)\r
+        top = Math.floor($(@).position().top)\r
+        bln.set({x: left, y: top}, {silent: true})\r
+        bln.trigger('move')\r
+    }\r
+    this\r
+  \r
+  set_style: () ->\r
+    super()\r
+  \r
+  input_r: () ->\r
+    @trigger('input:r')\r
+  \r
+  active: () ->\r
+    $('.ui-resizable-handle', this.el).map ->\r
+      $(@).css('display', 'block')\r
+  \r
+  inactive: () ->\r
+    $('.ui-resizable-handle', this.el).map ->\r
+      $(@).css('display', 'none')\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