This ECMAScript implements an undo feature for the SVG whiteboard. When the user presses CTRL+Z the last shape in the message_buffer variable is removed.
function undoLast() {
ipos = getLastMethodPos(message_buffer,-1)
if (ipos > 0)
message_buffer = message_buffer.substring(0, ipos)
else
message_buffer = ''
}
function getLastMethodPos(message, pos) {
i = message.indexOf('<method', pos+1)
if (i >= 0)
result = getLastMethodPos(message, i)
else
result = pos
return result;
}
Here's an example of the messages (containing shapes) stored in the message_buffer
"<method name='create'><params><param var='type'>shape</param><param var='body'>
polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D
%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20
513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474%
2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22
5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20
478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497%
2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24
3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20
560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558%
2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18
4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20
518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479%
2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13
1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A
</param><param var='sender'>34855</param></params></method><method name='create'><params><param
var='type'>shape</param><param var='body'>polyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none
%27%20stroke%3D%27red%27%20id%3D
%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20
453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438%
2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19
6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20
431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432%
2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22
9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20
438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445%
2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25
2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20
469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481%
2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26
3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20
511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524%
2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25
7%20540%2C257%27%23%3A</param><param var='sender'>34855</param></params></method>"
In the above example there are 2 methods calls ready to be sent to the server, the 2nd method would be removed after the undoLast() function had executed.
The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results.
This code only removes the shape before it's sent to the server, I still need to write the code to delete a shape which is in the server whiteboardqueue, and remove the shape element from the web browser display (SVG DOM).
