From 1976f406383e45f4de5b29a207a2033811fdecab Mon Sep 17 00:00:00 2001 From: Torsten Date: Fri, 30 Dec 2022 21:11:48 +0200 Subject: [PATCH] finished editor with resizing --- app/views/merged/images/_editor.haml | 123 +++++++++++++++++++-------- app/views/merged/images/show.haml | 5 -- 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/app/views/merged/images/_editor.haml b/app/views/merged/images/_editor.haml index 4b0bf7e..5ed733c 100644 --- a/app/views/merged/images/_editor.haml +++ b/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.justify-self-start + %div.mt-2.ml-32 + %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)"}/ - %div.justify-self-end - %b Y Size {{size_y}} - %br/ + "v-bind:value": "size_x" , "v-on:input" => "handle_size_x($event)"} + %div.mr-20 + %b Y Size {{size_y.toFixed(0)}} + %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) - value = event.target.value - @size_x = value.to_f + def set_ratio(event) + @fixed_ratio = event.target.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) - value = event.target.value - @size_y = value.to_f + def fix_x(new_y) + new_x = (new_y * @fixed_ratio) + return false if( @off_x + new_x > @image_data[:width]) + @size_x = new_x + return true end - def handle_off_y(event) - value = event.target.value - @off_y = value.to_f - end - def handle_off_x(event) - value = event.target.value - @off_x = value.to_f - end - def handle_scale(event) - value = event.target.value - @scale = value.to_f + def fix_y(new_x) + new_y = (new_x / @fixed_ratio) + return false if( @off_y + new_y > @image_data[:height]) + @size_y = new_y + return true 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 diff --git a/app/views/merged/images/show.haml b/app/views/merged/images/show.haml index 63893c2..5eccecf 100644 --- a/app/views/merged/images/show.haml +++ b/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); - };