Resizer in percentage

[bgrand-ch]

Hello,

I would like to use percentage unit by default for resizing components with resizable: resizerOptions.

resizerOptions object used in resizable component property:

import type { ResizerOptions } from 'grapesjs'

// see https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.ts
export const resizerOptions: ResizerOptions = {
  currentUnit: false,
  unitWidth: '%',
  unitHeight: '%',
  minDim: 5,
  maxDim: 100
}

Important:

My components don't necessarily have a defined width and height. They are generally with auto or pixels.

Problem:

When I start to resize the component, its width suddenly starts at 100% instead of the component's current width percentage.

Questions:

• Is it possible to convert pixels to percentages?
  • https://stackoverflow.com/a/15807309/10531083
  • https://stackoverflow.com/a/28706058/10531083
• Is the conversion already implemented in the GrapesJS resizer specification?

Expected behaviour:

When I start to resize the component, its width starts at the current percentage of the component's width.

Could you help me please? 🙏

[bgrand-ch]

@artf Hello, do you have any ideas? 🤔

[artf]

Yeah, we don't have currently a way to convert pixels to percentages, that might be a good new resizer option.

[bgrand-ch]

As soon as I have time, I'm going to implement this feature.

[artf]

Thanks @bgrand-ch 🙇‍♂️