SCION Drag-and-drop Demo

by jbeard4

HTML

<script src="https://cdn.rawgit.com/jbeard4/SCION-CORE/1.1.2/lib/scion.js"></script>
<div id="rect"></div>

CSS

html, body {
    height:100%;
    width:100%;
    margin: 0;
    padding: 0;
}

div#rect{ 
    width:100px;
    height:100px;
    background-color:red;
    border:2px solid black;
    position:absolute;
    left:0px;
    top:0px;
}

JavaScript

//declare the your statechart model, same as before
var firstEvent,
    eventStamp,
    rectNode = document.getElementById('rect'),
    rectX = 0,
    rectY = 0;

var statechartModel = {
    states : [
        {
            id : 'idle',
            onEntry : function(){
                rectNode.textContent='idle';
            },
            transitions : [
                {
                    event : 'mousedown',
                    target : 'dragging',
                    onTransition : function(event){
                        eventStamp = firstEvent = event.data;
                    }
                }
            ]
        },
        {
            id : 'dragging',
            onEntry : function(){
                rectNode.textContent='dragging';
            },
            transitions : [
                {
                    event : 'mouseup',
                    target : 'idle'
                },
                {
                    event : 'mousemove',
                    target : 'dragging',
                    onTransition : function(event){
                        var dx = eventStamp.clientX - event.data.clientX;
                        var dy = eventStamp.clientY - event.data.clientY;

                        rectNode.style.left = (rectX -= dx) + 'px';
                        rectNode.style.top = (rectY -= dy) + 'px';
                        
                        eventStamp = event.data;
                    }
                }
            ]
        }
    ]
};

//instantiate the interpreter
var interpreter = new scion.Statechart(statechartModel);

//start the interpreter
interpreter.start();

function handleEvent(e){
    e.preventDefault();
    interpreter.gen({name : e.type,data: e});
}

//connect all relevant event listeners
rectNode.addEventListener('mousedown',handleEvent,true);
document.documentElement.addEventListener('mouseup',handleEvent,true);
document.documentElement.addEventListener('mousemove',handleEvent,true);