Fix element positioning

2015-03-03 10:10:00 +01:00
parent 17810c0bb5
commit 196f998c38
26 changed files with 91 additions and 45 deletions
@@ -135,7 +135,3 @@ end

 # To use debugger
 # gem 'debugger'
-
-group :development, :test do
-  gem 'rails-assets-qunit'
-end
@@ -41,11 +41,11 @@ class SvgElementClass
    @dpm.change(->
      return unless dpm = $(@).val()
      if pheight = container.box_height.val()
-        height = Math.round(10 * pheight / dpm)/10
+        height = Math.round(100 * pheight / dpm)/100
        $('.box_height .attribute-info').html "#{height}&nbsp;<i>m</i>"

      if pwidth = container.box_width.val()
-        width = Math.round(10 * pwidth / dpm)/10
+        width = Math.round(100 * pwidth / dpm)/100
        $('.box_width .attribute-info').html "#{width}&nbsp;<i>m</i>"

    ).change()
@@ -0,0 +1,32 @@
+QUnit.extend( QUnit, {
+	/**
+	 * Checks that the first two arguments are equal, or are numbers close enough to be considered equal
+	 * based on a specified maximum allowable difference.
+	 *
+	 * @example close(3.141, Math.PI, 0.001);
+	 *
+	 * @param Number actual
+	 * @param Number expected
+	 * @param Number maxDifference (the maximum inclusive difference allowed between the actual and expected numbers)
+	 * @param String message (optional)
+	 */
+	close: function(actual, expected, maxDifference, message) {
+		var passes = (actual === expected) || Math.abs(actual - expected) <= maxDifference;
+		QUnit.push(passes, actual, expected, message);
+	},
+
+	/**
+	 * Checks that the first two arguments are numbers with differences greater than the specified
+	 * minimum difference.
+	 *
+	 * @example notClose(3.1, Math.PI, 0.001);
+	 *
+	 * @param Number actual
+	 * @param Number expected
+	 * @param Number minDifference (the minimum exclusive difference allowed between the actual and expected numbers)
+	 * @param String message (optional)
+	 */
+	notClose: function(actual, expected, minDifference, message) {
+		QUnit.push(Math.abs(actual - expected) > minDifference, actual, expected, message);
+	}
+});
@@ -1,5 +1,4 @@
-App.DropdownLink = Ember.Component.extend
-  templateName: 'dropdown_link_view'
+App.DropdownLinkComponent = Ember.Component.extend
  active: false
  classNames: ['dropdown-container']
  classNameBindings: ['active']
@@ -46,4 +46,3 @@ App.MenuProductComponent = Ember.Component.extend
  pricePlaceholder: (-> t "attributes.product.price").property()
  codePlaceholder: (-> t "attributes.product.code").property()
  descriptionPlaceholder: (-> t "attributes.product.description").property()
-  #templateName: 'menu/product'
@@ -3,7 +3,7 @@ App.modals.AddSectionElementController = @App.modals.BaseController.extend
  svg_elements: (-> @store.find 'svg_element').property()
  actions:
    addSectionElement: (svg_element)->
-      section_element = @store.createRecord 'section_element'
+      section_element = @store.createRecord 'section-element'
      section_element.copy_values svg_element
      section_element.set 'section', @get('model')
      @send 'ok'
@@ -1,5 +1,8 @@
 Ember.Handlebars.helper 'svg', (content, options)->
-  width = options.hash.width8 || '100%'
-  height = options.hash.height8 || '100%'
-  #"<svg width='#{width}' height='#{height}'>#{content}</svg>".htmlSafe()
-  "<svg width='#{width}' height='#{height}' viewBox='0 0 #{options.hash.width} #{options.hash.height}'><g transform=''>#{content}</g></svg>".htmlSafe()
+  width = options.hash.width
+  height = options.hash.height
+  angle = options.hash.rotation || 0
+  box_size = Math.sqrt((width * width) + (height * height))
+  svg_head = "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 #{box_size} #{box_size}\">"
+  group_head = "<g transform=\"translate(#{(box_size - width)/2}, #{(box_size - height)/2}) rotate(#{angle} #{width/2} #{height/2})\">"
+  "#{svg_head}#{group_head}#{content}</g></svg>".htmlSafe()
@@ -57,8 +57,8 @@ DragNDrop.Droppable = Ember.Mixin.create
    newX = offset.left - parentOffset.left + ev.originalEvent.pageX - data.pageX
    newY = offset.top - parentOffset.top + ev.originalEvent.pageY - data.pageY
    position =
-      left: Math.max(newX, 0)
-      top:  Math.max(newY, 0)
+      left: newX
+      top: newY

    @dropped view, position if @dropped
    @dragLeft() if @dragLeft # not triggered by system itself in case of drop
@@ -11,6 +11,13 @@ App.SvgElementMixin = Ember.Mixin.create
  height: Ember.computed 'dpm', 'box_height', ->
    (@get('box_height') || 0 ) / (@get('dpm') || 1)

+  # Rotation box size in [m]
+  box_size: Ember.computed 'dpm', 'box_height', 'box_width', ->
+    bw = @get('box_width')
+    bh = @get('box_height')
+    dpm = @get('dpm') ? 1
+    Math.sqrt( (bw * bw) + (bh * bh)) / dpm
+
  copy_values: (similar_object)->
    @set 'name', similar_object.get('name')
    @set 'dpm', similar_object.get('dpm')
@@ -4,4 +4,4 @@ App.Section = DS.Model.extend
  width: attr 'number'
  height: attr 'number'
  tables: DS.hasMany('table')
-  section_elements: DS.hasMany('section_element')
+  section_elements: DS.hasMany('section-element')
@@ -1,6 +1,6 @@
 App.SectionsRoute = Ember.Route.extend
  beforeModel: ->
-    @store.find 'section_element'
+    @store.find 'section-element'
  model: ->  @store.all 'section'

  # setupController: (controller, collection) ->
@@ -7,12 +7,12 @@
  .form-label
    label=t 'attributes.section.width'
  .form-field
-    App.NumberField valueBinding="section_width"
+    view number-field valueBinding="section_width"
 .form-row
  .form-label
    label=t 'attributes.section.height'
  .form-field
-    App.NumberField valueBinding="section_height"
+    view number-field valueBinding="section_height"
 hr
 button.modal-close{action "close"}=t 'section.add_section.modal.close_button'
 button.modal-confirm.right{action "addSection"}=t 'section.add_section.modal.add_button'
@@ -3,6 +3,6 @@ if svg_element.isLoading
 else
  ul.add-section-element-list
    each svg_element in svg_elements
-      li: a{action "addSectionElement" svg_element}= svg svg_element.svg
+      li: a{action "addSectionElement" svg_element}= svg svg_element.svg width=svg_element.box_width height=svg_element.box_height
 hr
 button.modal-close{action "close"}=t 'section.add_section.modal.close_button'
@@ -6,13 +6,13 @@ form.form-horizontal
      label for='add-tables-number-start'
        =t 'section.add_tables.modal.number_start'
    .form-field
-      App.NumberField valueBinding="number_start"
+      view number-field valueBinding="number_start"
  .form-row
    .form-label
      label for='add-tables-number-end'
        =t 'section.add_tables.modal.number_end'
    .form-field
-      App.NumberField valueBinding="number_end"
+      view number-field valueBinding="number_end"
 hr
 button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
 button.modal-confirm.right{action "addTables"}=t 'section.add_tables.modal.add_button'
@@ -18,11 +18,11 @@ if canArrangeTables
      ==t 'section.arrange_tables.modal.distributed.explanation'
    if isByRow
      =t 'section.arrange_tables.modal.by_row.before_field'
-      App.NumberField valueBinding="row_count"
+      view number-field valueBinding="row_count"
      =t 'section.arrange_tables.modal.by_row.after_field'
    if isByColumn
      =t 'section.arrange_tables.modal.by_column.before_field'
-      App.NumberField valueBinding="column_count"
+      view number-field valueBinding="column_count"
      =t 'section.arrange_tables.modal.by_column.after_field'
 hr
 button.modal-close{action "close"}=t 'section.arrange_tables.modal.close_button'
@@ -9,13 +9,13 @@
  can manage sections
    if editmode
      = input type="text" valueBinding="title" class="section-edit-title-field"
-      App.NumberField valueBinding="width" class="dimension section-edit-width-field"
+      view number-field valueBinding="width" class="dimension section-edit-width-field"
      span.fa.fa-lg.fa-times
-      App.NumberField valueBinding="height" class="dimension section-edit-height-field"
+      view number-field valueBinding="height" class="dimension section-edit-height-field"
      a.section-rollback-button{ action "rollbackEditable" }: span
      a.section-normal-mode-button{ action "finishEditable" }: span
    else
-      App.DropdownLink title="Action"
+      = dropdown-link title="Action"
        ul
          li: a{action "addTables"}: span.section-add-tables-icon=t 'section.add_tables.button_label'
          li: a{action "arrangeTables"}: span.section-arrange-tables-icon=t 'section.arrange_tables.modal.title'
@@ -1,4 +1,4 @@
-= svg view.content.svg width=view.content.box_width height=view.content.box_height
+= svg view.content.svg width=view.content.box_width height=view.content.box_height rotation=view.content.rotation
 if view.showHandles
  .section-element-handles
    a.rotate-left{action "rotateLeft" view.content bubbles=false}: span.icon
@@ -18,7 +18,7 @@
    .row
      .large-8.medium-8.columns: Ember.TextField valueBinding="controller.model.address"
      .large-1.show-for-large-up.columns &nbsp;
-      .large-2.medium-2.small-3.columns: App.NumberField valueBinding="controller.model.house_number"
+      .large-2.medium-2.small-3.columns: view number-field valueBinding="controller.model.house_number"
      .large-1.medium-2.small-2.columns: Ember.TextField valueBinding="controller.model.house_number_addition"
 .form-row
  .form-label: label=t 'attributes.supplier.postal_code'
@@ -33,7 +33,7 @@ if editIensProfile
  .form-row
    .form-label: label=t 'attributes.supplier.iens_profile'
    .form-field
-      App.NumberField valueBinding="controller.model.iens_profile"
+      view number-field valueBinding="controller.model.iens_profile"
      = image_tag 'supplier/settings/iens-example.png'
      span=t "settings.reviews.explanation"
 .row: .small-12.columns= language-switcher
@@ -1,4 +1,4 @@
-App.NumberField = Ember.TextField.extend
+App.NumberFieldView = Ember.TextField.extend
  type: 'number'
  attributeBindings: ['min', 'max', 'step']
  numericValue: Ember.computed 'value', (key, value) ->
@@ -15,23 +15,21 @@ App.SectionElementView = Ember.View.extend DragNDrop.Draggable,
  ).property('dpm', 'content.position_x')
  offsetY: (->
    return 0 unless dpm = @get('dpm')
-    offset = dpm * (@get('content.position_y') || 0)
-    switch @get('content.rotation')
-      when 90 then offset - (dpm * @get('content.width')) / 2
-      when 270 then offset - (dpm * @get('content.width')) / 2
-      else offset
+    dpm * (@get('content.position_y') || 0)
  ).property('dpm', 'content.position_y', 'content.rotation')
-  myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
-  myWidth: (-> (@get('dpm') || 0 ) * @get('content.width')).property('dpm', 'content.width')
-  style: Ember.computed 'offsetX', 'offsetY', 'myWidth', 'myHeight', 'content.rotation', ->
-    "position:absolute;width:#{@get('myWidth')}px;height:#{@get('myHeight')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px;transform:rotate(#{@get('content.rotation')}deg)"
+  #myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
+  #myWidth: (-> (@get('dpm') || 0 ) * @get('content.width')).property('dpm', 'content.width')
+
+  # box size in dots [d]
+  box_size: (-> (@get('dpm') || 0 ) * @get('content.box_size')).property('dpm', 'content.box_size')
+  style: Ember.computed 'offsetX', 'offsetY', 'box_size', 'content.rotation', ->
+    "position:absolute;width:#{@get('box_size')}px;height:#{@get('box_size')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
  dpm: Ember.computed.alias 'parentView.dpm'
  positionChange: (position)->
    dpm = @get('dpm')
    return if !dpm or parseFloat(dpm) is 0
-
    @get('content').setProperties
-      position_x: Math.round(10 * position.left / dpm ) / 10
-      position_y: Math.round(10 * position.top / dpm ) / 10
+      position_x: position.left / dpm
+      position_y: position.top / dpm
  click: -> @toggleProperty('show_handles')
  showHandles: Ember.computed.and 'show_handles', 'controller.editmode'
@@ -21,6 +21,7 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
      dpm = viewport_height / section_height
    @$el.css 'width', dpm * section_width
    @$el.css 'height', dpm * section_height
+    console.log "SECTION dpm #{dpm}"
    @set 'dpm', dpm
  ).observes('controller.model.height', 'controller.model.width')
  tables: (->@get('content')).property('content')
@@ -53,6 +53,7 @@ body
  margin: 0
 .main-section
  +panel($bg:rgba(200,200,200,0.9))
+  padding-bottom: 72px
  padding: 0
  margin: 0
  min-height: 100%
@@ -73,7 +73,7 @@ namespace :deploy do
  end

  after :publishing, :restart do
-    deploy.update_remote_cache
+    #deploy.update_remote_cache
  end

  after :restart, :clear_cache do
@@ -0,0 +1,9 @@
+moduleForModel 'section-element', 'Section element model',
+  needs: ['model:section', 'model:table']
+
+test "box_size", ->
+  element = @subject
+    box_width: 155
+    box_height: 310
+    dpm: 200
+  QUnit.close element.get('box_size'), 1.733, 0.01
@@ -2,6 +2,7 @@
 #= require supplier/app/application
 #= require require
 #= require qunit
+#= require qunit/qunit-close-enough
 #= require ember-qunit/ember-qunit
 #= require_self
 #= require_tree ./components