react-rnd icon indicating copy to clipboard operation
react-rnd copied to clipboard

Bug: position x and y should accept string, so that we can convert to percentage

Open suprim12 opened this issue 3 years ago • 3 comments

Overview of the problem

I am creating a page builder which requires to be responsive in landscape which is not possible by default position in PX, need to convert to percentage(%) - however x,y doesn't accept string Just number are you kidding me.

I'm using react-rnd 9.0.4 [x.x.x]

My browser is: Brave

Reproduced project

https://codesandbox.io/s/jovial-curie-05cvu?file=/src/index.js

Description

Need to accept string for x and y

Expected behavior

transform:translate(10%,10%)

Actual behavior

transform:translate(10px,10px)

suprim12 avatar Jun 03 '21 05:06 suprim12

Did find workaround this by, converting px to percentage and then using static height/width to convert percentage to relative px...still this is an issue

suprim12 avatar Jun 03 '21 06:06 suprim12

here is what i did to solve this issue

  landscapePostionX = posx => {
    // In Landscape width is 1024px & Height Is 1024
    // Convert to percentage Value then to pexel relevant to landscape with
    const posxpercentage = (posx / 768) * 100 // 768 is portrait width
    const converted = (1024 * posxpercentage) / 100 // 1024 is landscape width
    return converted
  }
   <Rnd
          bounds="parent"
          disableDragging={isEditor}
          enableUserSelectHack={false}
          default={{
            x: isLandScape
              ? this.landscapePostionX(node.params.x)
              : node.params.x,
            y: isLandScape
              ? this.landscapePostionY(node.params.y)
              : this.checkY(node.params),
            width: `${node.params.width}`,
            height: `${node.params.height}`
          }}

suprim12 avatar Jun 03 '21 06:06 suprim12

May I ask what is node.params.x and where this value is coming?

sujoyduttajad avatar Sep 07 '21 14:09 sujoyduttajad