Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

defaultPositionX & defaultPositionX are overwritten by dynamic values

See original GitHub issue

Bug:

defaultPositionX and defaultPositionY are immediately overwritten by dynamic values when the components render.

Expected behaviour:

I would expect the defaultPosition (X, Y) values to be applied on initial rendering. For defaultScale this already works correctly.

Issue Analytics

State:
Created 4 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

beac0ncommented, Jun 18, 2020

I have the same issue with 1.6.1

0reactions

InfamousStarFoxcommented, Mar 10, 2021

Found a solution. See https://github.com/prc5/react-zoom-pan-pinch/issues/82#issuecomment-583891935

The defaults of: limitToBounds: true limitToWrapper: false centerContent: true

Are causing this to fire in src/store/StateContext.tsx

if (
  (limitToBounds && !limitToWrapper) ||
  (centerContent && !positionX && !positionY)
) {
  const transform = `translate(25%, 25%) scale(${scale})`;
  ...
}

My solution was to override those default options like so:

<TransformWrapper
  defaultScale={5}
  defaultPositionX={-1200}
  defaultPositionY={-1200}
  options={{
    centerContent: false,
    limitToBounds: false
  }}
>

Top Results From Across the Web

move the position of bootstrap datepicker - Stack Overflow

It will override the default css. You need to try different values for left property, to make it best fit on the form....

Set-DhcpServerv6DnsSetting (DhcpServer) | Microsoft Learn

Specifies the subnet prefix of the IPv6 scope on which the DNS update behavior is configured. Type: IPAddress. Position: 1. Default value: None....

CSS Z-Index Not Working? How to Fix It Using Stack Order

The first important thing to know is that every element on a webpage has a default position – in other words, a statically...

Theme Configuration - Tailwind CSS

Customizing the default theme for your project. The theme section of your tailwind.config.js file is where you define your project's color palette, type...

Configuration | Grafana Loki documentation

The result is the value for every config object in the Promtail config struct. ... Location of positions file [filename: <string> | default...