Visual Tagger

SketchSystems.spec

Visual Tagger

  Initial*
    create tag -> Tag Highlighting State
    delete tag -> Delete Tag State

  Delete Tag State
    confirm -> Initial
    cancel -> Initial

  Tag Highlighting State
    element click -> Editing Tag State

  Editing Tag State
    update tag selector -> Tag Highlighting State
    validating -> Validating State
    bind dynamic property -> Property Highlighting State

  Property Highlighting State
    element click -> Editing Tag State
    cancel -> Editing Tag State

  Validating State
    element click -> Editing Tag State

  

SketchSystems_prototype.js

const figmaFile = "Bze73iesz7XXrJdRpUUKm6";

// **TODO: add the rest of the screens (including "Validating State")
const figmaNodes = {
  "Initial": "754%3A1053", 
  "Tag Highlighting State": "754%3A123",
  "Editing Tag State": "754%3A1735",
  "Property Highlighting State": "754%3A3548"
};

const figmaURL = "https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/" + figmaFile + "/Visual-Tagger?node-id=";

function render(model){
  const currentStateName = model.active_states[0].name;
  for (f in figmaNodes) 
    if (currentStateName === f) 
      return $("iframe",{src: figmaURL + figmaNodes[f], width: '100%', height: '100%'});
}