Event based editor like in StarCraft 2 Editor (algorithm)

Sounds like a job for jQuery UI.

When the user creates a custom area in your editor all it's attributes are stored inside an object (that you can save as JSON) that would then be applied to a div as param when loading the map (using html-attributes.

function create_areas(areas){    var map = $('#map_area');    for(var i=0;i<areas.length;i++){        map.append($('<div>', area[i].params));    }}

whereas params would look something like this:

params = {    width: 100,    height: 200,    ....    mousedown: function(){ play_music('hello'); },    keydown: function(e){ alert('you pressed ' + e.keyCode; }}

also the jQuery UI tools like draggable and resizeable should ease up building your editor.

I'd model this more after backbone's event system:

events: {  'click selector': handler,  'mouseover selector': handler2,  ...}

Handlers can be any javascript function, this would allow you to create a bunch of pre-defined functions like displayMessage.

Then you could curry your own handlers, which would allow your users to specify configuration if they need it.

Example:

var events = {   'click element': displayMessage({        text:"Hello user!",        title:"Welcome!",        type:"normal",    }),   'mouseover pizza': createButton({...}) }function displayMessage(options) {   var options = options;   return function() {      //display message logic   }}

Then you can supply a compose function among other helpers (look up promises perhaps?) to combine your functions together:

var events = {   'click element': compose(        displayMessage({            text:"Hello user!",            title:"Welcome!",            type:"normal",        }),        createButton({})    ),   'mouseover pizza': createButton({...}) }

This could work out?

Caveat: it might be better if events was an array that contained objects. That way you can have multiple click handlers on some selector without collisions.

The way I see this there are really severall choices you need to make. I would, although I prefer JSON as a data construct not limit myself to this subset of an actuall programming language. And engener this the other way around.

You have events, handlers and options. Where a option, or better a option list is the user inputed data, the handlers are the actual action, and the events are triggers to set some action off.

If you read this carefully you will notice this is the exact description of the basic structure of most jQuery-Scripts or Event-Driven Software in generall. Only the users options in jQuery are (since it is a DOM Framework) most often the context of a single DOM-Element. So, here we are and I would suggest to simply borrow the theorie behind this and make use of promisses wich make a very clear and great way to generate code!

So my call to any event chain would look like this.

...when(chainObject['event']).then(function(event) {      //call handler      handlers[chainObject[selectedHandler]].call(event.context, chainObject['options']);       //apply next element(s) in chain, this is the current promise      appendNextElement(chainObject['followingHandlers'], this);})...

Notice how apply makes it easy for you to change the environement and in turn behaviour of any hanlder based on what the user and event did. And promisses make error handling very easy!

This of course applies to only one node in your chain. So what should a data structure look like to let you generate this kind of code?

One node in your structure would look like this:

   {      event: 'click',      selectedHandler: 'sohwText',      options: {          'text': 'helloWorld'      },      followingChain: {...OTHER HANDLERS....}   }

The important thing to notice is that like a good structured functional programm you are looking at a tree and not at a simple list of events. So every actual DOM Element holds many of these

var eventTree = {   '.someButton': [..Handlers of this button...],'   '.someOtherButton': [..Handlers of the other button...],}

And there we go. You have a context (the button), a event, user input and a handler.

The resulting app should not only work, but will be styled for any experienced JavaScript-Programmer to expand or mod.