Search code examples
shapesaddeventlistenereaseljs

EaselJS: Changing Shape Color on De-select


(Note: Just to clarify, by "de-select" I mean selecting other shape than the currently selected one, thereby de-selecting the initially selected shape)

Just to elaborate a bit more, I got a series of shapes on a canvas. Any shape I click on changes its color from, say, red to white. But then, there can only be ONE white-colored shape at any given time. That means, if I click on shape-A first then shape-B, shape-A's color must change from white back to red the moment I click on shape-B.

Adding a "click" event listener to every shape was a no-brainer. But, I am at a loss as to how to point back to the previous shape object so that I can restore its original color.

Any help will be much appreciated!


Update: Upon further research, I'm starting to think that my objective boils down to this - Finding a way to point to any Shape object NOT through some event listener but via a method call by passing the object's ID. However, I just checked the Shape class methods here but didn't see anything that might be useful. Could I be missing something here?


Solution

  • (I hope I understood you correctly) Your "issue" is more of a program-flow issue that is not really specific to a easeljs or any ObjectType.

    All you have to do is set a (global) reference to the clicked object inside the click-listener, i'd call it window.lastClickedShape or something similar. And whenever a shape is clicked you check if lastClickedShape != null and reset the color for that object.