finished editor with resizing

app/views/merged/images/_editor.haml

@@ -1,9 +1,12 @@
 
 %section.image
-  .flex.justify-center
+  .flex.justify-between.mx-20
+    %button.my-3.bg-cyan-200{class: button_classes }
+      =link_to "Copy" , merged.image_copy_path(@image.id)
+
     = form_tag( merged.image_path , {method: :patch  } ) do
       %input{ hidden: true ,  id: :scale_id , name: :scale , "v-bind:value": "scale" }
-      %button.mt-3.bg-cyan-200{class: button_classes , name: :type , value: 'scale'} Scale  {{scale}} %
+      %button.my-3.bg-cyan-200{class: button_classes , name: :type , value: 'scale'} Scale  {{scale}} %
 
     %div.justify-self-start.mx-20
       %b Scale {{scaled_x}} x {{scaled_y}}
@@ -16,32 +19,43 @@
       %input{ hidden: true ,  id: :height_id , name: :size_y , "v-bind:value": "size_y" }
       %input{ hidden: true ,  id: :off_x_id , name: :off_x , "v-bind:value": "off_x" }
       %input{ hidden: true ,  id: :off_y_id , name: :off_y , "v-bind:value": "off_y" }
-      %button.mt-3.bg-cyan-200{class: button_classes , name: :type , value: 'resize'} Resize
+      %button.my-3.bg-cyan-200{class: button_classes , name: :type , value: 'resize'} Crop
 
-    %label Ratio {{ratio}} : 1
+    %div.mt-2
+      %b.pr-2 Ratio
+      %br/
+      %em    {{ratio}} : 1
 
-  .flex.justify-between
+    %div.mt-2.ml-32
-    %div.justify-self-start
+      %b.pr-2 Fix ratio to
+      %select{ "@change": "set_ratio"}
+        %option{value: "0" } Any Ratio
+        %option{value: "#{@image.ratio}" }  Initial #{@image.ratio.round(2)} : 1
+        %option{"v-bind:value": "ratio" }  Current {{ratio}} : 1
+        -[[4,1],[3,1],[21,9] ,[2,1] ,[16,9] ,[3,2] ,[4,3] ,[1,1] ,[3,4], [2,3],[1,2] ].each do |a|
+          %option{value: "#{a.first/a.last.to_f}" }  #{a.first} : #{a.last}
+
+  .flex.justify-between.mb-5
+    %div.ml-20
       %b Y Offset {{off_y}}
       %br/
       %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
-              "v-bind:value": "off_y" , "v-on:input" => "handle_off_y($event)"}/
+              "v-bind:value": "off_y" , "v-on:input" => "handle_off_y($event)"}
     %div
       %b X Offset {{off_x}}
       %br/
       %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
-              "v-bind:value": "off_x" , "v-on:input" => "handle_off_x($event)"}/
+              "v-bind:value": "off_x" , "v-on:input" => "handle_off_x($event)"}
-
     %div
-      %b X Size {{size_x}}
+      %b X Size {{size_x.toFixed(0)}}
       %br/
       %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
-              "v-bind:value": "size_x" , "v-on:input" => "handle_size_x($event)"}/
+              "v-bind:value": "size_x" , "v-on:input" => "handle_size_x($event)"}
-    %div.justify-self-end
+    %div.mr-20
-      %b Y Size {{size_y}}
+      %b Y Size {{size_y.toFixed(0)}}
-      %br/
+      %br
       %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
-              "v-bind:value": "size_y" , "v-on:input" => "handle_size_y($event)"}/
+              "v-bind:value": "size_y" , "v-on:input" => "handle_size_y($event)"}
 
   .flex.justify-center
     .image-container.overflow-hidden.relative{ "v-bind:style": "{height: scaled_y + 'px' , width: scaled_x + 'px'} " }
@@ -56,39 +70,76 @@
       @off_x = 0
       @off_y = 0
       @scale = 100
-      @initial_x = @image_data[:width]
-      @initial_y = @image_data[:height]
       @size_x = @image_data[:width]
       @size_y = @image_data[:height]
+      @fixed_ratio = 0
     end
-    def handle_size_x(event)
+    def set_ratio(event)
-      value = event.target.value
+      @fixed_ratio = event.target.value.to_f
-      @size_x = value.to_f
+      return if( @fixed_ratio < 0.1)
+      if( @fixed_ratio > ratio )
+        fix_y(@size_x)
+      else
+        fix_x(@size_y)
+      end
     end
-    def handle_size_y(event)
+    def fix_x(new_y)
-      value = event.target.value
+      new_x = (new_y * @fixed_ratio)
-      @size_y = value.to_f
+      return false if( @off_x + new_x > @image_data[:width])
+      @size_x = new_x
+      return true
     end
-    def handle_off_y(event)
+    def fix_y(new_x)
-      value = event.target.value
+      new_y = (new_x / @fixed_ratio)
-      @off_y = value.to_f
+      return false if( @off_y + new_y > @image_data[:height])
-    end
+      @size_y = new_y
-    def handle_off_x(event)
+      return true
-      value = event.target.value
-      @off_x = value.to_f
-    end
-    def handle_scale(event)
-      value = event.target.value
-      @scale = value.to_f
     end
 
+    def set_size_x( new_x )
+      return if(  @off_x + new_x > @image_data[:width])
+      if (@fixed_ratio >= 0.1 )
+        return unless fix_y(new_x)
+      end
+      @size_x = new_x
+    end
+
+    def set_size_y(new_y)
+      return if(  @off_y + new_y > @image_data[:height])
+      if (@fixed_ratio >= 0.1 )
+        return unless fix_x(new_y)
+      end
+      @size_y = new_y
+    end
+
+    def handle_size_x(event)
+      set_size_x(event.target.value.to_f)
+    end
+    def handle_size_y(event)
+      set_size_y( event.target.value.to_f )
+    end
+    def handle_off_y(event)
+      new_off = event.target.value.to_f
+      if(  new_off + @size_y <= @image_data[:height])
+        @off_y = new_off
+      end
+    end
+    def handle_off_x(event)
+      new_off = event.target.value.to_f
+      if( new_off + @size_x <= @image_data[:width])
+        @off_x = new_off
+      end
+    end
+    def handle_scale(event)
+      @scale = event.target.value.to_f
+    end
     def ratio
       ((@size_x / @size_y)*100).to_i / 100
     end
     def scaled_x
-      (@initial_x * @scale / 100).to_i
+      (@image_data[:width] * @scale / 100).to_i
     end
     def scaled_y
-      (@initial_y * @scale / 100).to_i
+      (@image_data[:height] * @scale / 100).to_i
     end
   end

app/views/merged/images/show.haml

@@ -58,8 +58,3 @@
         %p
           = form_tag( merged.image_path(@image.id) , {method: :delete  } ) do
             =submit_button( "Delete" , true)
-
-:css
-  input.horizontal {
-    transform:rotate(90deg);
-  };