fix board label

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

diff --git a/app/assets/javascripts/views/panel_pictures/element.js.coffee b/app/assets/javascripts/views/panel_pictures/element.js.coffee
index ea1a192..d32062d 100644 (file)
--- a/app/assets/javascripts/views/panel_pictures/element.js.coffee
+++ b/app/assets/javascripts/views/panel_pictures/element.js.coffee
@@ -8,17 +8,26 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View
     @spot = options.spot\r
     img_class = @img_class()\r
     @img = new img_class({\r
+      wrapper: this,\r
       element: @element,\r
-      spot: @spot,\r
-      picture: @element.picture()\r
+      spot: @spot\r
     })\r
   \r
+  clear: () ->\r
+    this\r
+  \r
   render: () ->\r
-    @attr = {style: Pettanr.to_style(@style())}\r
-    this.$el.attr(@attr)\r
-    this.$el.html(@img.render().el)\r
+    @restyle()\r
+    this.$el.html(@img.clear().el)\r
     this\r
   \r
+  restyle: () ->\r
+    attr = {style: Pettanr.to_style(@style())}\r
+    this.$el.attr(attr)\r
+  \r
+  add_element: (element) ->\r
+    null\r
+  \r
   style: () ->\r
     {\r
       'top': Pettanr.to_s(@element.get('y')) + 'px',\r
@@ -37,17 +46,24 @@ class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View
   tagName: 'img'\r
   \r
   initialize: (options) ->\r
+    @wrapper = options.wrapper\r
     @element = options.element\r
-    @picture = options.picture\r
     @spot = options.spot\r
+    @picture = @element.picture()\r
     @listenTo(this, 'ready', @render)\r
     @picture.fetch({cache: true}).done =>\r
       @trigger('ready')\r
   \r
+  clear: () ->\r
+    this\r
+  \r
   render: () ->\r
-    this.$el.attr(@attr(@spot))\r
+    @restyle()\r
     this\r
   \r
+  restyle: () ->\r
+    this.$el.attr(@attr(@spot))\r
+  \r
   attr: (spot = null, opacity = 20) ->\r
     style = {}\r
     if spot and spot.constructor == @element.constructor and spot.get('id') != @element.get('id')\r
@@ -65,20 +81,34 @@ class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture
   \r
   initialize: (options) ->\r
     super(options)\r
-    @listenTo(@root, 'input:width', @restyle)\r
-    @listenTo(@root, 'input:height', @restyle)\r
+    @listenTo(@element, 'input:x', @restyle)\r
+    @listenTo(@element, 'input:y', @restyle)\r
+    @listenTo(@element, 'input:z', @restyle)\r
+    @listenTo(@element, 'active', @active)\r
+    @listenTo(@element, 'inactive', @inactive)\r
   \r
   render: () ->\r
     super()\r
+    img = @img\r
+    wrapper = this\r
+    elm = @element\r
     this.$el.draggable {\r
-      stop: (event, ui) =>\r
-        left = @img.$el.parent().position().left + this.$el.position().left\r
-        top = @img.$el.parent().position().top + this.$el.position().top\r
-        @element.set({left: parseInt(left), top: parseInt(top)}, {silent: true})\r
-        @element.trigger('move')\r
+      stop: (event, ui) ->\r
+        left = img.$el.parent().position().left + wrapper.$el.position().left\r
+        top = img.$el.parent().position().top + wrapper.$el.position().top\r
+        elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true})\r
+        elm.trigger('move')\r
     }\r
     this\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
@@ -89,44 +119,54 @@ class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPic
   \r
   initialize: (options) ->\r
     super(options)\r
+    @listenTo(@element, 'input:width', @restyle)\r
+    @listenTo(@element, 'input:height', @restyle)\r
   \r
   render: () ->\r
     super()\r
+    wrapper = @wrapper\r
+    elm = @element\r
     this.$el.resizable {\r
-      stop: (event, ui) =>\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
+      stop: (event, ui) ->\r
+        resize_div = ui.element\r
+        panel_picture_div = wrapper.$el\r
         \r
         resize_div.css('top', '0px')\r
         resize_div.css('left', '0px')\r
+        top = panel_picture_div.position().top\r
         if ui.originalPosition.top != ui.position.top\r
-          top = panel_picture_div.position().top + ui.position.top\r
+          top += ui.position.top\r
           #@element.set({y: Math.floor(top)}, {silent: true})\r
           panel_picture_div.css('top', top.toString() + 'px')\r
+        left = panel_picture_div.position().left\r
         if ui.originalPosition.left != ui.position.left\r
-          left = panel_picture_div.position().left + ui.position.left\r
-          #@element.set({y: Math.floor(leftp)}, {silent: true})\r
+          left += ui.position.left\r
+          #@element.set({y: leftp)}, {silent: true})\r
           panel_picture_div.css('left', left.toString() + 'px')\r
-        width = if @element.get('width') < 0\r
+        width = if elm.get('width') < 0\r
           -ui.size.width\r
         else\r
           ui.size.width\r
-        height = if @element.get('height') < 0\r
+        height = if elm.get('height') < 0\r
           -ui.size.height\r
         else\r
           ui.size.height\r
-        @element.set({\r
-          left: parseInt(left), \r
-          top: parseInt(top), \r
+        elm.set({\r
+          x: Math.floor(left), \r
+          y: Math.floor(top), \r
           width: width, \r
           height: height\r
         }, {silent: true})\r
-        @element.trigger('move')\r
-      resize: (event, ui) =>\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
+        elm.trigger('resize')\r
       handles: 'all',\r
       autoHide: true\r
     }\r
+  \r
+  restyle: () ->\r
+    super()\r
+    resize_div = this.$el.parent()\r
+    width = this.$el.css('width')\r
+    height = this.$el.css('height')\r
+    resize_div.width(width)\r
+    resize_div.height(height)\r
+  \r