MyElement

SketchSystems.spec

MyElement
  Hover
    HStill
    HMoving
    onMouseOut -> MouseOutside
    onMouseMove -> HMoving
    onMouseStop -> HStill
  MouseOutside*
    onMouseEnter -> HMoving

SketchSystems_prototype.js

let timer;
function render(model){
  let current_state_name = model.active_states[0].name;

  return $("h1",
           {
              style: {color: "darkBlue", border: '1px solid darkBlue', margin: '5px' },
              className: 'foobar',
              onMouseMove: () => { 
                model.emit('onMouseMove');
                clearTimeout(timer);
                timer = setTimeout(() => {
                  model.emit('onMouseStop');
                }, 50);
              },
              onMouseEnter: () => { 
                model.emit('onMouseEnter');
              },
              onMouseOut: () => { 
                model.emit('onMouseOut');
                clearTimeout(timer);
              },
            },
           `The current state is: ${current_state_name}`);
}