Screenshot Feature #24

Activity

1. roerohan commented on Feb 26, 2022

   

   roerohan

   on Feb 26, 2022

   Last edited by roerohan

   Owner

   More actions

   Hello @candiedoperation

   The canvas element is inserted by the RFB object in the noVNC library itself, I do not create a canvas on my own. Here's what I do:
   

   react-vnc/src/lib/VncScreen.tsx

   Lines 252 to 258 in 932cb06

   	<div
   	style={style}
   	className={className}
   	ref={screen}
   	onMouseEnter={handleMouseEnter}
   	onMouseLeave={handleMouseLeave}
   	/>

   And then, the screen reference is passed to the RFB constructor:
   

   react-vnc/src/lib/VncScreen.tsx

   Line 183 in 932cb06

   const _rfb = new RFB(screen.current, url);

   Now, there are 2 ways to resolve your issue:

   1. I could accept a canvasId prop, and set:

   _rfb._canvas.id = canvasId;

   2. You could use the rfb object that's exposed with the onConnect method:

   function App() {
     const vncRfb = useRef(null);
     const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);
   
     useEffect(() => {
       // Assuming that `canvasId` is defined
       vncRfb.current?._canvas?.id = canvasId;
     }, [vncRfb.current]);
   
     return (
       <VncScreen
         url={vncUrl}
         scaleViewport
         debug
         ref={vncScreenRef}
         onConnect={(rfb) => {
           console.log('connected', rfb);
           vncRfb.current = rfb;
         }}
       />
     )
   }

   I think you could use the second approach here, I'm not really in favor of adding a canvasId prop in the library - unless you can tell me if there are any issues with this approach, or if assigning it in the library is better in any way.
2. roerohan

   added

   questionFurther information is requestedFurther information is requested

   enhancementNew feature or requestNew feature or request

   on Feb 26, 2022
3. roerohan commented on Feb 26, 2022

   

   roerohan

   on Feb 26, 2022

   Owner

   More actions

   In #26, I've exposed the rfb object. So, if you have a code snippet like:

   function App() {
     const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);
   
     return (
       <VncScreen
         url={vncUrl}
         scaleViewport
         debug
         ref={vncScreenRef}
       />
     )
   }

   You can access the rfb object using vncScreenRef.current?.rfb. If the rfb object isn't set, it's value is null.
4. roerohan

   self-assigned this

   on Feb 26, 2022
5. Repository owner locked and limited conversation to collaborators on Feb 27, 2022
6. roerohan

   converted this issue into a discussion #30 on Feb 27, 2022