How do I remove a shape on mouse click?

[Alex Dransfield]

I'm trying to find out how to remove a shape on mouse click, but I can't find any solid information on how to do it. Is this possible at all? I'll be creating multiple shapes (They're the same shape, just in different locations) and I want to make it so that the user can remove individual shapes if necessary.

Can anyone please help me out with this one?

[GaryTexmo]

It's your code, you can do whatever you like :P

For example, if your shapes inherit from Control and you're inserting them on a panel, you can quite easily remove them by attaching to the Shape's mouse events (whichever you like). If they are triggered, remove them from the Panel's control list.

That's just speculation though, you've actually said very little about what your program does. If you need any more specific help you're going to have to be more detailed. Tell us what you're trying to do, show us what you've done and what you've tried.

[Alex Dransfield]

private void drawDesks(int rows, int cols)
        {
            int checkDimension;
            if (rows > cols)
                checkDimension = rows;
            else 
                checkDimension = cols;
            int deskSize = setSizeOfDesks(checkDimension);
            int deskSpace = setSpaceBetweenDesks(checkDimension);
            int iDrawLocation = 0;
            int jDrawLocation = 0;
            int maxWidth = (deskSize + deskSpace) * cols;
            int maxHeight = (deskSize + deskSpace) * rows;
 
            System.Drawing.SolidBrush b = new System.Drawing.SolidBrush(System.Drawing.Color.Red);
            System.Drawing.Graphics g = squareContainerPanel.CreateGraphics();
 
            for (int i = iDrawLocation; i < (maxWidth+iDrawLocation); i+=(deskSpace+deskSize))
            {
                for (int j = jDrawLocation; j < (maxHeight+jDrawLocation); j += (deskSpace + deskSize))
                {
                    g.FillRectangle(b, new Rectangle(i,j, deskSize, deskSize));
                }
            }
 
            b.Dispose();
            g.Dispose();          
        }

Here's how I am adding them, but I'm not sure if I can refer to them individually as they don't have individual names.

[GaryTexmo]

Next time, it helps if you talk a bit about what you're trying to do. Give some background instead of just throwing code at us ;) That said, I think I get the idea from what you've posted, so lets talk about it.

What you have here looks to be just a display thing. You give it rows and columns and in response to that, it draws a series of desks. This means you don't have any actual objects to interact with, but it does mean you know where your desks are supposed to be at any given time.

You've got a panel, squareContainerPanel, that you're drawing in. That means you can add a listener to the MouseClick event so you can tell when, where mouse interaction took place on that panel. You can use that information to see if that mouse click was over top of one of your shapes. You've already got the code to generate the rectangles, so you know their bounds. A .NET Rectangle also has a Contains method that you can use to see if it contains a point. If it does, you can set some kind of flag somewhere not to draw that particular desk.

Now, I think it's worth pointing out that a change in architecture could make this a little easier for you. Currently, you don't keep track of your rectangles at all... you generate them every time you go to draw them and don't store them at all. Perhaps consider making a Desk class and pre-generating them into a member variable of type List<Desk>. Then all you have to do is draw them. It also helps you when it's time to see if the user is interacting with them. On the panel's mouse click event, you can loop through each Desk in your list and see if the mouse click interacted with that particular object, then take action. In your particular case, taking action would be removing it from the list so that it doesn't get drawn on the next update.

I hope that helps you, if you have any further questions please ask! :)

[Alex Dransfield]

I've tried to implement what you mentioned, but I can't seem to access the panel when I use different classes.

Here's my slightly updated code:

private void drawDesks(int rows, int cols)
        {
            int checkDimension;
            if (rows > cols)
                checkDimension = rows;
            else 
                checkDimension = cols;
            int deskSize = setSizeOfDesks(checkDimension);
            int deskSpace = setSpaceBetweenDesks(checkDimension);
            int iDrawLocation = 0;
            int jDrawLocation = 0;
            int maxWidth = (deskSize + deskSpace) * cols;
            int maxHeight = (deskSize + deskSpace) * rows;
 
            List<Desk> desks = new List<Desk>();
 
            System.Drawing.SolidBrush b = new System.Drawing.SolidBrush(System.Drawing.Color.Red);
            System.Drawing.Graphics g = squareContainerPanel.CreateGraphics();
 
            for (int i = iDrawLocation; i < (maxWidth+iDrawLocation); i+=(deskSpace+deskSize))
            {
                for (int j = jDrawLocation; j < (maxHeight+jDrawLocation); j += (deskSpace + deskSize))
                {
                    desks.Add(new Desk(i, j, deskSize, deskSize));
                }
            }
 
            foreach (Desk d in desks)
                d.drawDesk();
 
            b.Dispose();
            g.Dispose();
 
 
        }

class Desk
    {
        int xPos, yPos, nWidth, nHeight;
 
        public Desk(int xPos, int yPos, int nWidth, int nHeight)
        {
            this.nWidth = nWidth;
            this.nHeight = nHeight;
            this.xPos = xPos;
            this.yPos = yPos;
        }
 
        public void drawDesk()
        {
            g.FillRectangle(b, new Rectangle(xPos, yPos, nWidth, nHeight));      
        }
    }

I get the error that b and g doesn't exist in the current context.

Am I doing this right? Using the two loops to get the correct coordinates and putting them as desks in the list? And then calling a drawDesk method to draw them all out again.

Thank you so much for all the help you give me! I'm learning a lot as I go along.

[GaryTexmo]

The error messages speak for themselves, the objects you're trying to access don't exist in the scope you're trying to access them in. You created them in an entirely different method.

Also, you're creating the desks in the same method you're drawing them in. Which means you're creating them every single draw... you're either going to end up with a lot of extra objects.

In your Desk class, the DrawDesk method should probably take a parameter that's a Graphics object, then you can use that to draw.

Let me give you a rough sketch of what I'm trying to explain, maybe that will help :)

public class Desk
{
  // Same stuff you already have, but maybe add this...
  private Color m_deskColor;
  public Color DeskColor
  {
    get { return m_deskColor; }
    set { m_deskColor = value; }
  }
  ...
 
  public void Draw(Graphics g)
  {
    if (g != null)
    {
      g.FillRectangle(new SolidBrush(drawColor, ...);
    }
}

Then your main class might look something like...

public partial class Form1 : Form
{
  private List<Desk> m_deskList = new List<Desk>();
 
  public Form1()
  {
    ...
    CreateDesks(); // This form does whatever you're already doing to create the desks and stores them in m_deskList
  }
 
  protected override void OnPaint(PaintEventArgs e)
  {
    // Note, this is the form's paint event, you might want to add a listener to the event on your panel, whatever you want to do...
    base.OnPaint(e);
 
    Graphics g = e.Graphics;
    foreach (Desk d in m_deskList)
      d.Draw(g);
  }
}

You want your list of desk objects to live at the class level so that it can be used by other methods. The idea is to create a list of data and have the draw method only display it. It's just a means of visually showing the state of your program and shouldn't ever create new, persistent data.

[Alex Dransfield]

I'm quite late in replying but I've just gone back to working on this part of my program. I'm trying to figure out how to remove a particular shape in my grid and I'm using a MouseClick event to find out the coordinates of the click.

The only thing I can think of is recording the x,y coordinates that the user clicks and adding them to a list, and then after every click I could redraw the grid, but also look into the list of "bad coords" and if a shape attempts to draw within a certain width/height of the shape I wouldn't let it. I can't really see how this could work though as there up to 900 potential pixels per shape that a user could click.

Here's the code for the form:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace ExamsHelper
{
    public partial class RoomDesigner : Form
    {
        private List<Desk> m_deskList = new List<Desk>();
 
        string roomName;
        private int rows;
        private int cols;
 
        public RoomDesigner(int r, int c)
        {
            Text = "Room Designer - Currently editing: ";
            rows = r;
            cols = c;
            InitializeComponent();
            this.StartPosition = FormStartPosition.CenterParent;
            this.TopMost = true;
 
            squareContainerPanel.MouseClick += new MouseEventHandler(squareContainerPanel_MouseClick);
 
        }
 
        private void squareContainerPanel_MouseClick(object sender, MouseEventArgs e)
        {
            int xcoord = e.X;
            int ycoord = e.Y;
 
            foreach(Desk d in m_deskList)
            {
                if(d.Contains(xcoord, ycoord))
                {
                    // code to remove the shape
                }
            }
        }
 
        private void drawDesks(int rows, int cols)
        {
            int checkDimension;
            if (rows > cols)
                checkDimension = rows;
            else 
                checkDimension = cols;
            int deskSize = setSizeOfDesks(checkDimension);
            int deskSpace = setSpaceBetweenDesks(checkDimension);
            int iDrawLocation = 0;
            int jDrawLocation = 0;
            int maxWidth = (deskSize + deskSpace) * cols;
            int maxHeight = (deskSize + deskSpace) * rows;
 
            System.Drawing.SolidBrush b = new System.Drawing.SolidBrush(System.Drawing.Color.Red);
            System.Drawing.Graphics g = squareContainerPanel.CreateGraphics();
 
            for (int i = iDrawLocation; i < (maxWidth+iDrawLocation); i+=(deskSpace+deskSize))
            {
                for (int j = jDrawLocation; j < (maxHeight+jDrawLocation); j += (deskSpace + deskSize))
                {
                    m_deskList.Add(new Desk(i, j, deskSize, deskSize));
                }
            }
 
            foreach (Desk d in m_deskList)
                d.Draw(g, b);
 
            b.Dispose();
            g.Dispose();
 
 
        }
 
        private int setSizeOfDesks(int checkDimension) // fit inside 490-510 incl space
        {
            if (checkDimension <= 5)
                return 50;
            else if (checkDimension <= 10)
                return 55;
            else if (checkDimension <= 15)
                return 28;
            else if (checkDimension <= 20)
                return 20;
            else if (checkDimension <= 25)
                return 15;
            else if (checkDimension <= 30)
                return 15;
            else return 0;
        }
 
        private int setSpaceBetweenDesks(int checkDimension)
        {
            if (checkDimension <= 5)
                return 20;
            else if (checkDimension <= 10)
                return 20;
            else if (checkDimension <= 15)
                return 6;
            else if (checkDimension <= 20)
                return 5;
            else if (checkDimension <= 25)
                return 4;
            else if (checkDimension <= 30)
                return 7;
            else return 0;
        }
 
        private void button1_Click(object sender, EventArgs e)
        {
            drawDesks(rows, cols);
        }
 
        private void setNameButton_Click(object sender, EventArgs e)
        {
            roomName = "";
            toolStripLabel.Text = "Currently editing: ";
            Text = "Room Designer - Currently editing: ";
            roomName = roomNameTB.Text;
 
            Text += roomName;
 
            toolStripLabel.Text += roomName + " which is a " + rows + " by " + cols + " room";
        }
 
        protected override void OnPaint(PaintEventArgs e)
        {
            drawDesks(rows, cols);
        }
    }
 
    class Desk
    {
        int xPos, yPos, nWidth, nHeight;
 
        private Color m_deskColour;
 
        public Color DeskColour
        {
            get { return m_deskColour; }
            set { m_deskColour = value; }
        }
 
        public Desk(int xPos, int yPos, int nWidth, int nHeight)
        {
            this.nWidth = nWidth;
            this.nHeight = nHeight;
            this.xPos = xPos;
            this.yPos = yPos;
        }
 
        public void Draw(Graphics g, Brush b)
        {
            if (g != null)
            {
                g.FillRectangle(b, new Rectangle(xPos, yPos, nWidth, nHeight));
            }
        }
 
        public bool Contains(int x, int y)
        {
            if (x >= xPos && x < xPos + nWidth && y >= yPos && y < yPos + nHeight)
                return true;
            else
                return false;
        } 
    }
}
 

I've tried to follow what you say, and you're teaching me a lot in answering all of the questions you ask!

Thank you very much.

[GaryTexmo]

The key part here is that you're not drawing the shapes quite right. You've got a button click event and when that button is clicked, you generate and draw the items on the form, but that's the only time this happens. If you want the shapes to generate in response to the button, that's totally fine, but you need to have the drawing done on the form's paint event. If you don't, anytime the form updates it's going to erase your desks. To demonstrate this, click your button, then drag another window over your form and off again.

In my post before this one, post #6, you can see code for how to do this. Your button should generate the list of desks but not draw them. Your paint event will draw them.

Now, on your mouse click, you can check to see if the mouse coordinate is contained by the desk. If it is, remove it from the draw list. When you do that, you'll also want to make a call to this.Invalidate() to cause your form to redraw, thus removing the desk from the screen.

You don't need to store the list of click coordinates, you can just test every shape and remove any that overlap with the mouse coordinates. Unless you have a lot of shapes (like thousands), you should be able to just loop through the entire list and remove it. Since the shape is gone from the draw list, it won't get drawn on the next update (which you force after you remove a shape) and it will be gone. You also don't need to worry about this test... a simple bounding box is pretty quick, you're not testing every pixel, you're just seeing if the point coordinates are inside a box. You've already got the correct math for this so that's just fine.

If it is the case where you've got thousands of desks and the test to see if the mouse clicked on one is just taking too long, you can look at a more optimized virtual space organizer. I recommend a QuadTree and I've actually got an insight with code for one I made not too long ago. You can find it here: http://bytes.com/topic/c-sharp/insig...implementation

It all depends on how many desks you draw. In looking at your code, I don't see you drawing more than a couple hundred, and a simple sequence is more than sufficient.

You're on the right track and almost there, keep going! :)

[GaryTexmo]

At the risk of confusing things, I'm going to add something else. If you make your Desk inherit from Control, you'll have access to all the events that a Control has. Instead of drawing them on the form, you can simply add each Desk to a Panel's Control list.

That means you'll be able to add an event listener to the Click event on each desk, which gives you two advantages:

1) You won't have to test each object in your list.
2) You won't have to worry about ordering. The controls handle that themselves, so you can use things like BringToFront and SendToBack. You also know that the Click event happens on that control, whereas checking mouse coordinates mean you can potentially get more than one item if your items overlap.

Something to think about.

I think in the near future I'm going to write an insight on this topic. It's come up enough that it might be helpful. Note to self... remember this :D

[Alex Dransfield]

I believe I'm almost there, just one final hurdle that I can't figure out. I've managed to make it so that the rectangles are invisible, but when I click I get the "boo" message, and if I click there again, the message doesn't appear. This means it was removed, right?

I've tried sending the panel to the back, bringing the Desks to the front, and I still can't figure out how to make these things visibile.

I've only changed a couple of things (such as using a for loop to check if the desk was clicked). I played around with having Desk inherit from Control but I wasn't able to get that going.

I also get a red border and a red cross through my form. Not sure what's going on there.

Here's my code, maybe you can spot what's wrong.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace ExamsHelper
{
    public partial class RoomDesigner : Form
    {
        private List<Desk> m_deskList = new List<Desk>();
 
        private SolidBrush b;
        private Graphics g;
 
        string roomName;
        private int rows;
        private int cols;
 
        public RoomDesigner(int r, int c)
        {
            Text = "Room Designer - Currently editing: ";
            rows = r;
            cols = c;
            InitializeComponent();
            this.StartPosition = FormStartPosition.CenterParent;
            this.TopMost = true;
 
            drawDesks(rows, cols);
 
            squareContainerPanel.MouseClick += new MouseEventHandler(squareContainerPanel_MouseClick);
 
        }
 
        private void squareContainerPanel_MouseClick(object sender, MouseEventArgs e)
        {
            int xcoord = e.X;
            int ycoord = e.Y;
 
            for (int i = m_deskList.Count - 1; i >= 0; i--)
            {
                Desk d = (Desk)m_deskList[i];
                if (d.Contains(xcoord, ycoord))
                {
                    MessageBox.Show("boo");
                    m_deskList.Remove(d);
                    squareContainerPanel.Invalidate();
                }
            }
        }
 
        private void drawDesks(int rows, int cols)
        {
            int checkDimension;
            if (rows > cols)
                checkDimension = rows;
            else 
                checkDimension = cols;
            int deskSize = setSizeOfDesks(checkDimension);
            int deskSpace = setSpaceBetweenDesks(checkDimension);
            int iDrawLocation = 0;
            int jDrawLocation = 0;
            int maxWidth = (deskSize + deskSpace) * cols;
            int maxHeight = (deskSize + deskSpace) * rows;
 
            b = new System.Drawing.SolidBrush(System.Drawing.Color.Red);
            g = squareContainerPanel.CreateGraphics();
 
            for (int i = iDrawLocation; i < (maxWidth+iDrawLocation); i+=(deskSpace+deskSize))
            {
                for (int j = jDrawLocation; j < (maxHeight+jDrawLocation); j += (deskSpace + deskSize))
                {
                    m_deskList.Add(new Desk(i, j, deskSize, deskSize));
                }
            }
 
            foreach (Desk d in m_deskList)
                d.Draw(g, b);
 
            b.Dispose();
            g.Dispose();  
        }
 
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
 
            Graphics g = e.Graphics;
            foreach (Desk d in m_deskList)
                d.Draw(g,b);
        }
 
        private int setSizeOfDesks(int checkDimension) // fit inside 490-510 incl space
        {
            if (checkDimension <= 5)
                return 50;
            else if (checkDimension <= 10)
                return 55;
            else if (checkDimension <= 15)
                return 28;
            else if (checkDimension <= 20)
                return 20;
            else if (checkDimension <= 25)
                return 15;
            else if (checkDimension <= 30)
                return 15;
            else return 0;
        }
 
        private int setSpaceBetweenDesks(int checkDimension)
        {
            if (checkDimension <= 5)
                return 20;
            else if (checkDimension <= 10)
                return 20;
            else if (checkDimension <= 15)
                return 6;
            else if (checkDimension <= 20)
                return 5;
            else if (checkDimension <= 25)
                return 4;
            else if (checkDimension <= 30)
                return 7;
            else return 0;
        }
 
        private void button1_Click(object sender, EventArgs e)
        {
            /**foreach (Desk d in m_deskList)
            {
                d.Draw(g, b);
            }**/
        }
 
        private void setNameButton_Click(object sender, EventArgs e)
        {
            roomName = "";
            toolStripLabel.Text = "Currently editing: ";
            Text = "Room Designer - Currently editing: ";
            roomName = roomNameTB.Text;
 
            Text += roomName;
 
            toolStripLabel.Text += roomName + " which is a " + rows + " by " + cols + " room";
        }
    }
 
    class Desk
    {
        int xPos, yPos, nWidth, nHeight;
 
        private Color m_deskColour;
 
        public Color DeskColour
        {
            get { return m_deskColour; }
            set { m_deskColour = value; }
        }
 
        public Desk(int xPos, int yPos, int nWidth, int nHeight)
        {
            this.nWidth = nWidth;
            this.nHeight = nHeight;
            this.xPos = xPos;
            this.yPos = yPos;
        }
 
        public void Draw(Graphics g, SolidBrush b)
        {
            if (g != null)
            {
                g.FillRectangle(b, new Rectangle(xPos, yPos, nWidth, nHeight));
            }
        }
 
        public bool Contains(int x, int y)
        {
            if (x >= xPos && x < xPos + nWidth && y >= yPos && y < yPos + nHeight)
                return true;
            else
                return false;
        } 
    }
}
 
 

You're the best Gary!

[GaryTexmo]

I copied and pasted your code into a new solution and, with minimal tweaking, was able to get it to work. There's a couple of issues you'll want to fix...

1) I didn't realize you had this setup when I suggested it, but you're doing your drawing on the form but trapping clicks on the panel. Remove the override to the OnPaint method of your form and add an event listener to the Paint method for your squareContainerPanel object. The same code as you have for your Form paint goes there, with the exception of the call to base.

2)Remove the draw loop from drawDesks(...) and replace it with a call to the Invalidate method on the squareContainerPanel object. Better to let the systems you already have in place handle drawing.

3) You didn't comment on it, but I was getting an error on the call to FillRectangle. It was throwing a "Parameter is not valid." exception. It took me a while to track down the cause, but it's because at the end of your drawDesks(...) method, you call dispose on the brush you ultimately pass to the Desk class's draw method. Remove the call to dispose (and actually, you can even remove the Graphics object you set up (and subsequently dispose) there as well.

After fixing those, everything worked fine. The desks popped up on the panel and when I clicked one I got a message box. I closed the message box and the desk was taken out of the list and stopped drawing.

Regarding the method of having the Desk inherit from Control, I'll write an insight on this in the near future. Keep an eye out, I'll hopefully be able to find time to write it this week.