FeenixMakers/merged
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished editor with resizing

Browse Source
This commit is contained in:
Torsten 2022-12-30 21:11:48 +02:00
parent 3e9667470d
commit 1976f40638
2 changed files with 87 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
app/views/merged/images/_editor.haml
View File

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

5
app/views/merged/images/show.haml
View File

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