[QUESTIONS] resizable, using unitWidth in px output into percent.

Hi @artf,

Thanks for making this amazing framework. Recently I made a custom component based on your flexbox plugin.

The red arrow is the actual value of the model. The green arrow is what I expected to be.

Is that possible to set unitWidth as px but the output to be percent? Here is what I’ve tried

1. I separated them as 2 component,

• grid component, only as a container that will then I set the display into flex,
• column component, which I put the resizable.

1. set resizable

const keyWidth = 'width'
const step = 1
const minDim = 1
const unitWidth = 'px'

const resizerRight = {
    ...resizerBtm,
    tl: 0,
    tc: 0,
    tr: 0,
    cl: 0,
    cr: 1,
    bl: 0,
    bc: 0,
    br: 0,
    keyWidth,
    currentUnit,
    minDim,
    step
    unitWidth
 }

1. Makes the column listen to the resizing event. (I am not sure if this was correct, I might need to make a new different post for this question)

init () {
  this.listenTo(this, 'change:style ', this.updateWidth)

  //...
}

1. I want to update the model width from pixel into percent using simple math.

updateWidth(model) {
  //...
  model.setStyle({
    width: parseFloat(selectedWidth, 10) / containerWidth * 100 + '%'
  })
  //...
}

I am aware that the code above would create an infinite resizing. So, I am looking for another solution which leads me to the resizable source code.

I am wondering if I could make use of the methods listed there

var defaultOpts = {
  // ...
  mousePosFetcher: null,
  // Indicates custom target updating strategy
  updateTarget: null,
  // Function which gets HTMLElement as an arg and returns it relative position
  ratioDefault: 0,
  posFetcher: null,
  onStart: null,
  onMove: null,
  onEnd: null,
 
  // ...
}

here is the demo link and the code

Sorry for this long post, I just want to make it easier for you to understand my case.

[afdallah]

You are the man!!! 👍 👍 Thank you so much @artf.

[artf]

Ah wait, my fault, opts is the 3rd one updateWidth(model, value, opts = {}) { btw the second argument in setStyle are options (eg, { silent: true } to avoid triggering change listeners) and you get those options also in the callback of your listeners so I just placed a custom key fromPxToPerc to know when the change is triggered from your custom logic