Transform Tool*

SketchSystems.spec

Transform Tool*
  Idle*
    Trigger down with hover -> Move
    Trigger down no hover -> Select
  Move
    Trigger released -> Idle
    Snapping Enabled*
      A-button down -> Snapping Disabled
      Snapped
        Snap target not in range -> Unsnapped
      Animate to snap
        Animation complete -> Snapped
        Snap target not in range -> Unsnapped
      Unsnapped*
        Snap target in range -> Animate to snap
    Snapping Disabled
      A-button released -> Snapping Enabled
  Select
    Trigger released -> Idle
    No Selection*
      Hover object -> With Selection
    With Selection

SketchSystems_prototype.js

function sceneobject(top, left, color){
  return $("div",
           {style: {position: "absolute", backgroundColor: "green", width: 50, height: 50, top: top, left: left}},
          );
}

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("div",
           {onClick: function() {model.emit("Move")}, style: {border: "1px solid black", width: 400, height: 200}},
           sceneobject(100, 100, "green"),
           sceneobject(50, 200, "black")
          );
}