Question

I develop a Python-based drawing program, Whyteboard. I have tools that the user can create new shapes on the canvas, such as text/images/rectangles/circles/polygons. I also have a Select tool that allows the users to modify these shapes – for example, moving a shape’s position, resizing, or editing polygon’s points’ positions.

I’m adding in a new feature where moving or resizing a point near the canvas edge will automatically scroll the canvas. I think it’s a good idea in terms of program usability, and annoys me when other program’s don’t have this feature.

I’ve made some good progress on coding this; below is some Python code to demonstrate what I’m doing. These functions demonstrate how some shapes calculate their “edges”:

def find_edges(self):
    """A line."""
    self.edges = {EDGE_TOP: min(self.y, self.y2), EDGE_RIGHT: max(self.x, self.x2),
                  EDGE_BOTTOM: max(self.y, self.y2), EDGE_LEFT: min(self. x, self.x2)}


def find_edges(self):
   """An image"""
    self.edges = {EDGE_TOP: self.y, EDGE_RIGHT: self.x + self.image.GetWidth(),
                  EDGE_BOTTOM: self.y + self.image.GetWidth(), EDGE_LEFT: self.x}


def find_edges(self):
    """Get the bounding rectangle for the polygon"""
    xmin = min(x for x, y in self.points)
    ymin = min(y for x, y in self.points)
    xmax = max(x for x, y in self.points)
    ymax = max(y for x, y in self.points)
    self.edges = {EDGE_TOP: ymin, EDGE_RIGHT: xmax, EDGE_BOTTOM: ymax, EDGE_LEFT: xmin}

And here’s the code I have so far to implement the scrolling when a shape nears the edge:

def check_canvas_scroll(self, x, y, moving=False):
    """
    We check that the x/y coords are within 50px from the edge of the canvas
    and scroll the canvas accordingly. If the shape is being moved, we need
    to check specific edges of the shape (e.g. left/right side of rectangle)
    """

    size = self.board.GetClientSizeTuple()  # visible area of the canvas
    if not self.board.area > size:  # canvas is too small to need to scroll
        return

    start = self.board.GetViewStart()  # user's starting "viewport"
    scroll = (-1, -1)  # -1 means no change

    if moving:
        if self.shape.edges[EDGE_RIGHT] > start[0] + size[0] - 50:
            scroll = (start[0] + 5, -1)
        if self.shape.edges[EDGE_BOTTOM] > start[1] + size[1] - 50:
            scroll = (-1, start[1] + 5)
        # snip others

    else:
        if x > start[0] + size[0] - 50:
            scroll = (start[0] + 5, -1)
        if y > start[1] + size[1] - 50:
            scroll = (-1, start[1] + 5)
        # snip others

    self.board.Scroll(*scroll)

This code actually works pretty well. If we’re moving a shape, then we need to know its edges to calculate when they’re coming close to the canvas edge. If we’re resizing just a single point, then we just use the x/y coords of that point to see if it’s close to the edge.

The problem I’m having is a little tricky to describe – basically, if you move a shape to the left, and stop moving it, if you positioned the shape within the 50px from the canvas, then the next time you go to move the shape, the code that says “ok, is this shape close to the end?” gets triggered, and the canvas scrolls to the left, even if you’re moving the shape to the right.

Can anyone think on how to stop this? I created a youtube video to demonstrate the issue. At about 0:54, I move a polygon to the left of the canvas and position it there. The next time I move it, the canvas scrolls to the left even though I’m moving it right

Another thing I’d like to add, but I’m stuck on is the scroll gaining momentum the longer a shape is scrolling? So, with a large canvas, you’re not moving a shape for ages, moving 5px at a time, when you need to cover a 2000px distance. Any suggestions there?

Thanks all – sorry for the super long question!

Answer 1

This may sound a bit from the ivory tower, I hope not…
If you’d base your algorithm not on a position but rather a vector, then you can notice to which direction an object is dragging. Your code kicks off once two positions (of which you can form a vector) are available. Then you should be able to figure out whether the user is moving towards or away from the edge

Some more on a vector:

Since you are having a x,y coordinate system, you can break down such a vector into its x,y parts. Take any two points (x1,y1) and (x2,y2), then you can imagine a vector as a line that connects the two points. That line and e.g. the x-axis form an angle which would tell you to which direction that line is pointing to. In your case you’d get away with comparing x2 and x1. Is x2 bigger, then the user is moving to the right. Is y2 bigger than y1 it is moving to the top and similar comparisons for the other directions…