Fix element positioning

Gemfile

@@ -135,7 +135,3 @@ end
 
 # To use debugger
 # gem 'debugger'
-
-group :development, :test do
-  gem 'rails-assets-qunit'
-end

app/assets/javascripts/admin/svg_element/svg_element.js.coffee

@@ -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()

app/assets/javascripts/qunit/qunit-close-enough.js

@@ -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);
+	}
+});

app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee

@@ -1,5 +1,4 @@
-App.DropdownLink = Ember.Component.extend
+App.DropdownLinkComponent = Ember.Component.extend
-  templateName: 'dropdown_link_view'
   active: false
   classNames: ['dropdown-container']
   classNameBindings: ['active']

app/assets/javascripts/supplier/app/components/menu_product_component.js.coffee

@@ -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'

app/assets/javascripts/supplier/app/controllers/modals/add_section_element_controller.js.coffee

@@ -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'

app/assets/javascripts/supplier/app/helpers/svg.js.coffee

@@ -1,5 +1,8 @@
 Ember.Handlebars.helper 'svg', (content, options)->
-  width = options.hash.width8 || '100%'
+  width = options.hash.width
-  height = options.hash.height8 || '100%'
+  height = options.hash.height
-  #"<svg width='#{width}' height='#{height}'>#{content}</svg>".htmlSafe()
+  angle = options.hash.rotation || 0
-  "<svg width='#{width}' height='#{height}' viewBox='0 0 #{options.hash.width} #{options.hash.height}'><g transform=''>#{content}</g></svg>".htmlSafe()
+  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()

app/assets/javascripts/supplier/app/mixins/drag_n_drop.js.coffee

@@ -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)
+      left: newX
-      top:  Math.max(newY, 0)
+      top: newY
 
     @dropped view, position if @dropped
     @dragLeft() if @dragLeft # not triggered by system itself in case of drop

app/assets/javascripts/supplier/app/mixins/svg-element.js.coffee

@@ -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')

app/assets/javascripts/supplier/app/models/section.js.coffee

@@ -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')

app/assets/javascripts/supplier/app/routes/sections_route.js.coffee

@@ -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) ->

app/assets/javascripts/supplier/app/templates/modals/add_section.emblem

@@ -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'

app/assets/javascripts/supplier/app/templates/modals/add_section_element.emblem

@@ -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'

app/assets/javascripts/supplier/app/templates/modals/section_add_tables.emblem

@@ -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'

app/assets/javascripts/supplier/app/templates/modals/section_arrange_tables.emblem

@@ -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'

app/assets/javascripts/supplier/app/templates/section.emblem

@@ -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'

app/assets/javascripts/supplier/app/templates/section/section-element.emblem

@@ -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

app/assets/javascripts/supplier/app/templates/settings.emblem

@@ -18,7 +18,7 @@
     .row
       .large-8.medium-8.columns: Ember.TextField valueBinding="controller.model.address"
       .large-1.show-for-large-up.columns  
-      .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

app/assets/javascripts/supplier/app/views/number_field.js.coffee

@@ -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) ->

app/assets/javascripts/supplier/app/views/section/section-element.js.coffee

@@ -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)
+    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
   ).property('dpm', 'content.position_y', 'content.rotation')
-  myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
+  #myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
-  myWidth: (-> (@get('dpm') || 0 ) * @get('content.width')).property('dpm', 'content.width')
+  #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)"
+  # 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_x: position.left / dpm
-      position_y: Math.round(10 * position.top / dpm ) / 10
+      position_y: position.top / dpm
   click: -> @toggleProperty('show_handles')
   showHandles: Ember.computed.and 'show_handles', 'controller.editmode'

app/assets/javascripts/supplier/app/views/section/tables.js.coffee

@@ -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')

app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass

@@ -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%

config/deploy.rb

@@ -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

spec/javascript/models/section-element_test.coffee

@@ -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

spec/javascript/test_helper.coffee

@@ -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