Scratch-style token fields in Javascript

Question

I'm trying to make a replica of the drag-and-drop programming interface in Scratch <http://scratch.mit.edu>, but in javascript. I have the building blocks part done, but am specifically interested in how I might go about building the tokenized fields.

Scratch has fields that you can either enter numbers or text into, along with tokens that represent variables or operations, which in turn can accept their own numbers, text or tokens, and can nest further variables and operations and so on.

Example of Scratch's nested token system in a field: https://i.sstatic.net/falmA.png

I'm using jQuery along with jQuery UI for draggables and droppables. Any recommendations about how to go about making a field like this?

Answer 1

There already is a kind of Javascript duplicate of Scratch, called Waterbear

Have a look at their implementation for ideas.

Answer 2

Nice question, and waterbear doesn't seem to do much, so I thought I'd put my two euro cents' worth...

Think of the nested structure as a tree - that's internally how it is recorded. Operators (and, or, + and so on) have two branches which are the two entries. Function calls have as many branches as they have arguments, and some, e.g. "sum" have a varying number.

Visually, each object (operator etc.) needs to show the right number of fields. A recursive algorithm traverses the operation tree to do the display, and when dropping, the same algorithm could be used to refresh the display.