cruise-automation / webviz

web-based visualization libraries
https://webviz.io/
Apache License 2.0
2.05k stars 415 forks source link

How to disable camera movement? #274

Open artvichi opened 4 years ago

artvichi commented 4 years ago

Hello! We built some amazing stuff with your library!

There is one issue with controlled camera state: we need to be able turn it on and off conditionally.

It looks like even if we use onCameraStateChange and try to skip some camera updates - it moves for half a second then go back to previous state cameraState that we set before. Is there a way to avoid that half a second movement?

There is piece of the pattern what we use to achieve it:

<WorldView
onCameraStateChange={cameraState => {
          if (shouldNotMoveCamera) { . //here we try to avoid camera move but camera is already moved
            return;
          }
          setCameraState(cameraState);
}
 cameraState={cameraState}
/>

Thanks!

vidaaudrey commented 4 years ago

Hi @artvichi thank you for filing the issue. The quick way to fix it is to remount Worldview whenever the camaraState changes between controlled and uncontrolled:

 const onCameraStateChange = useCallback(newCamState => {
    setCameraState(newCamState);
  }, []);

  // use key to mount a different Worldview when it changed between controlled and uncontrolled
  const camProps = shouldNotMoveCam
    ? { cameraState, key: 0 }
    : {
        cameraState,
        onCameraStateChange,
        key: 1
      };
  return (<Worldview {...camProps}> </Worldview>);

Codesandbox link.

Currently we are not expecting people to switch between controlled and uncontrolled very often. So the camera set up only happens once during the component life cycle. I'm curious what's your use case and how frequent is the switch? If that's a common case, we might update the Worldview internally to support it.

artvichi commented 4 years ago

@vidaaudrey thanks for quick response! We have some redux storage which is filled during time (up to one minute) with ROS data. Then we want to allow relocalize a robot with drag&drop + rotate, so user can interact with robot component with mouse multiple times drag&drop + rotation. Looks like it may work for us, will check and let you know!

janpaul123 commented 4 years ago

@artvichi did this end up working? Btw, I'm trying to get to know our open source community better, and would love to learn more about what you use Worldview/Webviz for. Could you perhaps shoot me an email at jp.posma@getcruise.com?

EnkeyMC commented 3 years ago

I had the same problem, my workaround is using ref for the condition in the handler.

...
const [disableCamera, setDisableCamera] = useState(false);
const disableCameraRef = useRef(false);
disableCameraRef.current = disableCamera;
...

return <Worldview 
        ... 
        onCameraStateChange={state => !disableCameraRef.current && setCameraState(state) }
    ></Worldview>