merged/app/views/merged/images/_editor.haml

%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}

%section.image
  .flex.justify-between.mx-20
    .flex.justify-between
      %div.justify-self-start.ml-20.mr-10
        %b Scale {{scaled_x}} x {{scaled_y}}
        %br/
        %input{":min": 20 , ":max": 100 , ":step": 0.1 , :type => "range",
                "v-bind:value": "scale" , "v-on:input" => "handle_scale($event)"}/

      = form_tag( merged.image_scale_path(image_id: image.id) ) do
        %input{ hidden: true ,  id: :scale_id , name: :scale , "v-bind:value": "scale" }
        %button.my-3.button.change Scale  {{scale}} %

    %div.mt-2
      %b.pr-2 Ratio
      %br/
      %em    {{ratio}} : 1

    = form_tag( merged.image_crop_path(image_id: image.id) ) do
      %input{ hidden: true ,  id: :width_id , name: :size_x , "v-bind:value": "size_x" }
      %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.my-3.button.change Crop

    %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)"}
    %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)"}
    %div
      %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.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)"}

  .flex.justify-center
    .image-container.overflow-hidden.relative{ "v-bind:style": "{height: scaled_y + 'px' , width: scaled_x + 'px'} " }
      = image_tag(image.asset_name , class: "")
      .absolute.bg-transparent.border-4.border-black{ "v-bind:style": "{height: size_y + 'px' , width: size_x + 'px' , top: off_y + 'px', left: off_x + 'px' }" }

:ruby2js
  class Images < Vue
    options el: '.image'
    def initialize
      @image_data = #{@image_data.to_json.html_safe}
      @off_x = 0
      @off_y = 0
      @scale = 100
      @size_x = @image_data[:width]
      @size_y = @image_data[:height]
      @fixed_ratio = 0
    end
    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 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 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
      (@image_data[:width] * @scale / 100).to_i
    end
    def scaled_y
      (@image_data[:height] * @scale / 100).to_i
    end
  end