A Drawing Program*

Choosing First Point.png

P2 Regular.png

P2 Square.png

P2 Symmetric.png

Selection Tool.png

SketchSystems.spec

# Handling the symmetric and square pseudomodes when drawing a rectangle in a program like Subform, Sketch, or Illustrator.
# The prototype has mouse and key events wired up, so click down there to give it focus and test out the behavior.
A Drawing Program*
  
  Selection Tool*
    r keydown -> Drawing A Rectangle
    
  Drawing A Rectangle
    escape key pressed -> Selection Tool
    
    Choosing First Point*
      mousedown -> P2 keycheck?
      
    Choosing Second Point
      # On this transition, actually create the rectangle...
      mouseup -> Selection Tool
      
      # This transient state checks if the alt or shift key was already being held down when the first point was selected.
      # Without this check, one could be holding down shift when choosing the first point, but then the preview wouldn't show a square until shift was released and then pressed again.
      # To learn more about transient states and modeling logic, see https://sketch.systems/tutorials/designing-behavior/
      P2 keycheck?
        alt active? -> P2 Symmetric
        shift active? -> P2 Square
        else? -> P2 Regular
      
      P2 Regular
        shift keydown -> P2 Square
        alt keydown -> P2 Symmetric
      
      P2 Symmetric
        alt keyup -> P2 Regular
      
      P2 Square
        shift keyup -> P2 Regular

SketchSystems_prototype.js

//For this prototype, I'm using screenshots taken directly from Subform.
//I added those screenshots to my gist by cloning the gist (it's just a git repo) and checking them in.
//Then I refer to the URL that github stores them at so I can reference them from my SketchSystems prototype.
function screenshot(active_state_name){
  //This is the SHA of the latest gist commit
  var commit_sha = "f43242958d159c0161892b2ac275b636c662dec1"

  //This is the gist ID generated by Github
  var gist_id = "5791c283bf8c3f6ded8decf8f77c815c"

  var image_url = `https://gist.githubusercontent.com/lynaghk/${gist_id}/raw/${commit_sha}/${active_state_name}.png`;

  return $("img", {src: image_url});
}


function render(model){
  return $("div",
           //This div container is just so that the prototype can be clicked and recieve key/mouse events.
           {style: {width: "100%", height: "100%"},

            tabIndex: 1,

            onKeyDown: function(e){
              if ("r" === e.key){model.emit("r keydown")}
              if ("Alt" === e.key){model.emit("alt keydown")}
              if ("Shift" === e.key){model.emit("shift keydown")}
            },

            onKeyUp: function(e){
              if ("Alt" === e.key){model.emit("alt keyup")}
              if ("Shift" === e.key){model.emit("shift keyup")}
            },

            onMouseDown: function(_){model.emit("mousedown")}
           },

           screenshot(model.active_states[0].name))}