I've developed a way to do this using your specified overlay component.
Here is the result:

Here is the procedure:
First create project library scripts for locating the template Canvas's
viewport and adjusting its position.
In my project, I simply nested the functions under componentScripts
:

from javax.swing import SwingUtilities, JViewport
from java.awt import Point
# Function to get the parent viewPosition of a viewport of a given event
def getViewPosition(event):
return SwingUtilities.getAncestorOfClass(JViewport, event.source).viewPosition
# Function to set the view postion during a mouse dragged event according to how far the mouse has moved from its initial position
def setViewPosition(event, x, y, initialMouseX, initialMouseY, initialViewX, initialViewY):
'''
Arguments:
event: a mouse dragged event
x, y: the calculated coordinates of the event
...x and y are averaged to smooth out the mouse movemnents
initialMouseX, initialMouseY: The position of the mouse pointer during the initial mousePressed event
initioalViewX, initialViewY: the coordinates of the viewport during the initial mousePressed event
'''
# Get the parent viewport of the component the event originated from
viewport = SwingUtilities.getAncestorOfClass(JViewport, event.source)
# Calulate each coordinate by adding the difference between the current coordinate position and the initial coordinate position to the initial coordinate position
# ...Make sure the new position is not out of bounds using max and min
newX = max(0, min(initialViewX + (initialMouseX - x), viewport.view.width - viewport.viewRect.width))
newY = max(0, min(initialViewY + (initialMouseY - y), viewport.view.height - viewport.viewRect.height))
# Set the new view postion
viewport.setViewPosition(Point(newX, newY))
Next, add the following custom properties the template overlay:

This script is needed on the overlay's mousePressed event to capture initial positions:

# Capture and set the initial values of the mouse event on the overlay's custom properties
viewPosition = componentScripts.getViewPosition(event)
event.source.initialMouseX = event.x
event.source.initialMouseY = event.y
event.source.oldX = event.x
event.source.oldY = event.y
event.source.initialViewX = viewPosition.x
event.source.initialViewY = viewPosition.y
Finally, add this script to the overlay component's mouseDragged event handler:

# Calculate the event coordinates by averaging the current position and the previous position
# During initial testing, the scroll movements were jittery, but
# ...adding this smoothed the movements out
eventX = (event.x + event.source.oldX)/2
eventY = (event.y + event.source.oldY)/2
# Call the setViewPosition library script to move the viewport
componentScripts.setViewPosition(event, eventX, eventY, event.source.initialMouseX, event.source.initialMouseY, event.source.initialViewX, event.source.initialViewY)
# Update the oldX and oldY properties with this iterations averaged value
event.source.oldX = eventX
event.source.oldY = eventY