How to expend/pivot stage when dragging object to edge of rendering screen

[YSH]

function setupBlockDrag() {
    let isDragging = false
    let data = null

    rect.on('pointerdown', onDragStart)
    rect.on('pointerup', onDragEnd)
    rect.on('pointermove', onDragMove)

    function onDragStart(event) {
      isDragging = true
      data = event.data
      let local = rect.toLocal(event.data.global)
      let anchorX = local.x / rect.width
      let anchorY = local.y / rect.height
      rect.anchor.set(anchorX, anchorY)
      onDragMove()
    }

    function onDragEnd(event) {
      isDragging = false
      let local = {
        x: rect.anchor.x * rect.width,
        y: rect.anchor.y * rect.height,
      }
      rect.x -= local.x
      rect.y -= local.y
      rect.anchor.set(0, 0)
    }

    function onDragMove() {
      if (!isDragging) return
      const newPosition = data.getLocalPosition(rect.parent)
      rect.x = newPosition.x
      rect.y = newPosition.y
      // Pivot stage
    }
}

I have the above code that moves a rectangle graphics that is anchor to the mouse position.

Since I'm new to Pixi development, my question might be going to the wrong direction,

but I want to pivot the stage and load more background so that it looks like the rect is moving.

 

Basically, I'm trying to achieve similar movement effect of draw.io (see attachment).

What will be the correct design to approach this?