What did you do this week?

This week I started implementing a new feature to rotate the shapes from the center using RingSlider2D. I already had a rotate function that rotates the shape around its pivot vertex, so I updated it to support rotation from the center.

Rotation from center

Then I tried to group the shapes to transform and modify them all at once. For this, I had to investigate more about the key press and release events. Then I managed to select and deselect shapes by holding the Ctrl key.

Grouping Shapes

I improved the polyline feature by adding a separate class to manage the creation and manipulation of the lines but still; I was facing the same issue with the dragging event, which initialized a new object every time a new line was created.

Did you get stuck anywhere?

It was difficult to rotate the shape from the center because the pivot(or the reference point) of the shape wasn't consistent. As you can see below it changed depending on how the shape was created.

To handle this, I created an interface between the actual pivot point and the center of the bounding box, which made it easy to calculate and set the positions.

Also, I wasn't able to find a way by which I could manually call the dragging event without a preceding click event which was required for the polyline feature.

What is coming up next?

Complete Rotation from center PR.

What did you do this week?

This week I tried to create a base for some upcoming new features.
The first thing I updated was the Properties panel which I prototyped in Week 3.
So previously, it was just displaying the properties but now after the update, it is able to modify the properties(such as color, position, and rotation) too. This was a quick change to test the callbacks.

Properties Panel:

Then I worked with the bounding box to make it visible whenever a shape is selected.
For this, I used the existing functionality of the Panel2D actor to create borders around the bounding box.

Bounding Box

Also along with this, I managed to add the polyline feature on user interactions. This creation isn't that smooth but works as intended.

Poly Line

Did you get stuck anywhere?

Handling interactions for the polyline was complicated. I wasn't able to invoke the left_mouse_click event, then as  I was trying to invoke the events internally, it started creating multiple copies of the same line.

What is coming up next?

I will be enhancing the polyline feature.

What did you do this week?

Phew!! This week was a tedious week for me as parallelly my End-Sem exams also started. So as usual I started from where I left off last week, The Clamping Issue. As per the discussion with the mentors, we decided to use the AABB bounding box method to calculate the bounding box around the shape and then reposition or transform respectively, as now we had a fixed reference point. So after doing some calculations with the mouse positions and the bounding box points at last, I was able to clamp all the shapes sucessfully.

DrawPanel UI

While testing these changes, I found an issue that whenever we just do a single left mouse click on the shape, it automatically translated a bit. As you can see below.

This was due to the difference between the global mouse click position and the canvas position, which was then fixed by converting the mouse click position to the relative canvas position.

Along with this, I tried to add some control points using Disk2D for the shape so that we can use them later on to transform the shapes.

Control points

Also, to enhance the visualization of the bounding box, I added a box border covering the shapes.

Bounding Box Borders

Did you get stuck anywhere?

No, Everything worked out fine.

What is coming up next?

Enhancing the control points to work perfectly.

What did you do this week?

This week was full of researching, playing around with things, prototyping ideas, etc.
I started with last week's clamping issue and managed to solve this issue while drawing shapes by clipping the mouse position according to canvas size, but it didn't solve the problem with translating these shapes. I tried solving this using various approaches, but if one thing would get fixed, other things would raise a new error.

Instead of spending too much time on this, I thought it would be great to switch to other work and discuss this problem with the mentors. So I started to create a basic prototype for the properties panel, which would be used to manipulate different properties of the selected shape.

But then the question arises How to efficiently take data from the user?, Which data format would be easy to compute and best for user experience? and so on.

Alongside I was trying to create polylines but whenever I wanted to start the creation of the second line the dragging event wasn't triggered as each dragging event required a left mouse click event associated with it. 
I tried to do that manually but it didn't work.

Did you get stuck anywhere?

As I mentioned when I translated the shapes it would go out of the canvas bounds. Here the problem was with the reference point by which I was calculating all the transformations it changed depending on various cases as shown below.

This became more complex when working with a line because then the cases again differ depending on the quadrant in which the line lies.
I worked around and tried to compute the bounds but it wasn't getting updated as the shape transformed.

What is coming up next?

Solving the clamping issue to restrict the shape's position to be in the canvas boundaries.

What did you do this week?

This week I had to refactor and make my code cleaner along with some bug fixing, I started by adding tests and tutorials so that my changes could be tested by everyone. Then I separated the mode for selection so that it would be easy to select an individual element and work along with it. Once the selection mode was complete I started with the deletion of the elements.

Now, as we have various modes the question arises, How do we know which mode is currently active and how would users know it?? For this, I took references from some other similar applications and came up with an idea to toggle the icon of the selected mode whenever the mode is selected/deselected as we had individual buttons with an icon for each mode. 

#599

Along with this I also started to learn how to access key events so that in near future some keyboard shortcuts can be added.

Did you get stuck anywhere?

No, Everything went well.

What is coming up next?

In the current version of the DrawPanel, the shapes can be created and translated beyond the canvas boundaries, so we have to clamp the positions according to the canvas.