Is it possible to allow background image to reposition at center or any where after scaling(zoom in /zoom out)?

[fzsf163]

I wanted to allow user to scale the image at background [zoom in / zoom out].

editor?.board.background.nodes?.[0].scale({ x: scaleTo, y: scaleTo });
used this code to allow users to scale bg. But the bg always cuts off at certain point. And the bg is not selectable (I couldn't get it make selectable ). I want the users to able to see the entire image by scrolling.

Like this it cuts off ,

Full image for reference ,

Cut off image ,

and also it is possible to change css for the <canvas/> element that generates after adding background image?

[fzsf163]

I found a solution using this https://github.com/BetterTyped/react-zoom-pan-pinch

the way I did it,

import usePikaso from "pikaso-react-hook";
import { ChangeEvent, useEffect, useRef, useState } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";


/*____ all the codes before the wrapper*/

/*___ return ____*/
  <TransformWrapper
            initialScale={1}
            initialPositionX={0}
            initialPositionY={0}
            centerZoomedOut={true}
            doubleClick={{ disabled: false }}
            disablePadding={true} // this will stop image from sliding here and there. It helps with crop
          >
            {({ zoomIn, zoomOut, resetTransform, centerView }) => (
              <div className="w-fit border">
                <button onClick={() => zoomIn()}>
                  <PlusSquare size={32} weight="bold" />
                </button>
                <button onClick={() => resetTransform()}>
                  <Circle size={32} weight="bold" />
                </button>
                <button onClick={() => zoomOut()}>
                  <MinusSquare size={32} weight="bold" />
                </button>
                <button onClick={() => centerView()}>
                  <ArrowsInCardinal size={32} weight="bold" />
                </button>
                <TransformComponent>
                  <div
                    ref={ref}
                    className="h-[100dvh] w-[100%] rounded-md border bg-slate-800"
                  ></div>
                </TransformComponent>
              </div>
            )}
          </TransformWrapper>

/*____ all the other codes after it*/