From: yasushiito Date: Sun, 19 Apr 2015 06:05:38 +0000 (+0900) Subject: fix: element edit X-Git-Url: http://git.osdn.net/view?p=pettanr%2Fpettanr.git;a=commitdiff_plain;h=90145be2e5cfabdee7dd032b64d4654249d9bcb3 fix: element edit --- diff --git a/app/assets/javascripts/views/balloons/element.js.coffee b/app/assets/javascripts/views/balloons/element.js.coffee index 6f04c0c8..89cc58dc 100644 --- a/app/assets/javascripts/views/balloons/element.js.coffee +++ b/app/assets/javascripts/views/balloons/element.js.coffee @@ -1,9 +1,6 @@ class Pettanr.Views.Balloon.Element extends Backbone.View tagName: 'img' className: 'pettanr-balloon' - events: { - 'ready:picture': 'set_style' - } initialize: (options) -> @element = options.element @@ -12,17 +9,16 @@ class Pettanr.Views.Balloon.Element extends Backbone.View @speech_balloon = options.parent clear: () -> + this + + render: () -> + this.$el.html('') retriever = @element.system_picture() @listenTo(retriever, 'retrieve', @retrieve_system_picture) retriever.retrieve() - this retrieve_system_picture: (@system_picture) -> - @render() - - render: () -> @set_style() - this set_style: () -> attr = { @@ -50,8 +46,8 @@ class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element @listenTo(@element, 'input:width', @resize) @listenTo(@element, 'input:height', @resize) - render: () -> - super() + retrieve_system_picture: (@system_picture) -> + super(@system_picture) sb = @speech_balloon elm = @element this.$el.resizable { @@ -91,8 +87,15 @@ class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element } this + style: () -> + { + width: Pettanr.to_s(@element.get('width')) + 'px', + height: Pettanr.to_s(@element.get('height')) + 'px', + 'z-index': 1 # play case + } + input_r: () -> - @clear() + @render() resize_div = this.$el.parent() resize_div.css('z-index', 1) diff --git a/app/assets/javascripts/views/panel_pictures/element.js.coffee b/app/assets/javascripts/views/panel_pictures/element.js.coffee index d7289e73..a36768d2 100644 --- a/app/assets/javascripts/views/panel_pictures/element.js.coffee +++ b/app/assets/javascripts/views/panel_pictures/element.js.coffee @@ -6,21 +6,26 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View @element = options.element @root = options.root @spot = options.spot + + clear: () -> + this + + render: () -> + retriever = @element.picture() + @listenTo(retriever, 'retrieve', @retrieve_picture) + retriever.retrieve() + this + + retrieve_picture: (@picture) -> img_class = @img_class() @img = new img_class({ wrapper: this, element: @element, + picture: @picture, spot: @spot }) - @add_element() - - clear: () -> - this - - render: () -> @restyle() - this.$el.html(@img.clear().el) - this + this.$el.html(@img.render().el) restyle: () -> attr = {style: Pettanr.to_style(@style())} @@ -49,20 +54,14 @@ class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View initialize: (options) -> @wrapper = options.wrapper @element = options.element + @picture = options.picture @spot = options.spot - @picture = - @listenTo(this, 'ready', @render) - retriever = @element.picture() - @listenTo(retriever, 'retrieve', @retrieve_picture) - retriever.retrieve() - - retrieve_picture: (@picture) -> - @trigger('ready') clear: () -> this render: () -> + this.$el.html('') @restyle() this @@ -92,11 +91,10 @@ class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture @listenTo(@element, 'active', @active) @listenTo(@element, 'inactive', @inactive) - render: () -> - super() + retrieve_picture: (@picture) -> + super(@picture) img = @img wrapper = this - elm = @element this.$el.draggable { stop: (event, ui) -> left = img.$el.parent().position().left + wrapper.$el.position().left @@ -104,34 +102,8 @@ class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true}) elm.trigger('move') } - this - - active: () -> - $('.ui-resizable-handle', this.el).map -> - $(@).css('display', 'block') - - inactive: () -> - $('.ui-resizable-handle', this.el).map -> - $(@).css('display', 'none') - - element_class: (element) -> - Pettanr.Views[element.singular()].Element.Edit - - img_class: () -> - Pettanr.Views.PanelPicture.Element.Img.Edit - -class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img - - initialize: (options) -> - super(options) - @listenTo(@element, 'input:width', @restyle) - @listenTo(@element, 'input:height', @restyle) - - render: () -> - super() - wrapper = @wrapper elm = @element - this.$el.resizable { + @img.$el.resizable { stop: (event, ui) -> resize_div = ui.element panel_picture_div = wrapper.$el @@ -166,6 +138,31 @@ class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPic handles: 'all', autoHide: true } + this + + active: () -> + $('.ui-resizable-handle', this.el).map -> + $(@).css('display', 'block') + + inactive: () -> + $('.ui-resizable-handle', this.el).map -> + $(@).css('display', 'none') + + element_class: (element) -> + Pettanr.Views[element.singular()].Element.Edit + + img_class: () -> + Pettanr.Views.PanelPicture.Element.Img.Edit + +class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img + + initialize: (options) -> + super(options) + @listenTo(@element, 'input:width', @restyle) + @listenTo(@element, 'input:height', @restyle) + + render: () -> + super() restyle: () -> super() diff --git a/app/assets/javascripts/views/panels/body.js.coffee b/app/assets/javascripts/views/panels/body.js.coffee index af8f938f..17a5dd8d 100644 --- a/app/assets/javascripts/views/panels/body.js.coffee +++ b/app/assets/javascripts/views/panels/body.js.coffee @@ -39,7 +39,8 @@ class Pettanr.Views.Panel.Body extends Backbone.View view = new c({element: element, root: @panel, spot: @spot}) @views.splice(index, 0, view) if @is_visible() - this.$el.append(view.render().el) + this.$el.append(view.clear().el) + view.render() view element_class: (element) -> @@ -67,6 +68,8 @@ class Pettanr.Views.Panel.Body.Edit extends Pettanr.Views.Panel.Body @listenTo(@panel, 'input:border', @restyle) @listenTo(@panel, 'active', @active) @listenTo(@panel, 'inactive', @inactive) + @listenTo(this, 'active', @active) + @listenTo(this, 'inactive', @inactive) render: () -> super() @@ -76,8 +79,14 @@ class Pettanr.Views.Panel.Body.Edit extends Pettanr.Views.Panel.Body h = parseInt(this.$el.height()) @panel.set({width: w, height: h}, {silent: true}) @panel.trigger('resize') - , autoHide: true + , autoHide: false } + @inactive() + _this = this + this.$el.mouseover -> + _this.trigger('active') + this.$el.mouseout -> + _this.trigger('inactive') this is_visible: () -> diff --git a/app/assets/javascripts/views/speech_balloons/element.js.coffee b/app/assets/javascripts/views/speech_balloons/element.js.coffee index f2a3869d..8eee1f50 100644 --- a/app/assets/javascripts/views/speech_balloons/element.js.coffee +++ b/app/assets/javascripts/views/speech_balloons/element.js.coffee @@ -33,10 +33,15 @@ class Pettanr.Views.SpeechBalloon.Element extends Backbone.View spot: @spot }) + clear: () -> + this + render: () -> this.$el.html('') this.$el.append(@balloon_view.clear().el) this.$el.append(@speech_view.render().el) + @set_style() + @balloon_view.render() this set_style: () -> @@ -86,7 +91,6 @@ class Pettanr.Views.SpeechBalloon.Element.Edit extends Pettanr.Views.SpeechBallo set_style: () -> super() - # listen from speech input_r: () -> @trigger('input:r')