timtnleeProject / vuejs-clipper

Vue.js image clipping components using Vue-Rx.

Home Page:https://timtnleeproject.github.io/vuejs-clipper/#/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clipper-fixed initial scale value

UnderTheMoonspell opened this issue · comments

Describe the bug
I am trying to make a clipper-fixed in sync with all the zoom events and I am having a really hard time with the initial scale value. I have managed to sync with the buttons zoom in and zoom out and with the scroll wheel (many thanks to @timtnleeProject) but when I try to set the initial scale value in clipped-fixed I have weird behaviours. My objective was to set the range to 1 initially and be in sync with the photo scale in clipper-fixed.

This is the property inside clipper-fixed which should be in sync with the clipper-range (and it is, except when I first upload the photo)

image

What happens initially is that the clipper-range will have its value set to 1, but the clipped-fixed computed property scaleStyle will have its initial value set as { transform: scale(1) !important } (bgWH$ = 1) or as { transform: scale(0.75) !important } (bgWH$ = 0.75) depending on the aspect ratio, I assume.
When I click the zoom out button, I will subtract the zoomRate to the initial scale so (1 - 0.04 = 0.96) so clipper-fixed will jump from { transform: scale(0.75) !important } to { transform: scale(0.96) !important } , which is a zoom in instead of a zoom out. After that it will work as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Associate a clipper-range with a data variable (lets say scale = 1)
  2. Open a new photo with clipper-upload
  3. Try to decrease or increase zoom based on your initial scale.

Expected behavior
The clipper-fixed should have the same initial scale as the clipper-range

Screenshots
image

image

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Chrome
  • Version 85

Additional context

This is my code

image

image

EDIT: edited the description of the bug to better explain whats happening

I was able to fix my problem with the following code triggered on the load event of clipper-fixed

load (value) {
   this.$refs.clipper.setWH$.next(1)
}