It's been some time since I worked on the application that would allow performance students to draw stage plans for their performances. As I mentioned previously, I'm using Raphael, a Javascript drawing library which uses SVG or VML.
There have been several revisions of Raphael since I last worked on the app, so when I upgraded I found that I could no longer clone image objects. The reason turned out to be that calling myImage.attr("href") no longer returns the URL of the source image. There is now no easy way to do this. Dimitry or one of the other contributors has added a "src" attribute which is easily set (for changing the image source of an object) but not retrieved. Since my cloning method relies on retrieving this value, I was stuck.
When I looked at the Raphael source code, I figured out a way of doing it, but it's clumsy:
myImage.node.getAttributeNS(myImage.svg.xlink, "href");The app works like this: If you click on a tool, the tool is cloned as an "item". If you let go of the mouse button while it's still over the "palette", the clone is deleted. When you drag the item onto the stage, a slider for controlling its rotation appears. Clicking on the stage "deselects" the item and its slider disappears. Clicking on an item shows its slider with the slider thumb showing the previous degree of rotation. Moving the slider's thumb rotates the item. Clicking and dragging the item moves it around the stage.
I took the opportunity to refactor the code and rewrite almost all of it from scratch. There is now an object for each tool and for each item created, as well as the slider which controls the rotation of the selected object. It's not very nice OO, as there are explicit references to the "palette" and "stage" in Tool and Item methods, particularly for assigning event handlers to items. However, for a reasonably experienced PHP programmer (with a smattering of assembly code, Basic, Pascal and C on the way there), Javascript's lambda functions and closures and the consequent effects on variable scope seem quite weird anyway, so I'm not going to lose any sleep over it!
In a day or two, I'll post a demo of the work done so far.
...pite the fact that I have little time to do it. So I'm posting a demo here. It uses Raphael 0.71. I had some difficulties with this, but have solved them, albeit somewhat inelegantly.Click on an item and drag it onto the ...