%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#000',
      'tertiaryColor': '#333'
    }
  }
}%%

flowchart LR
    style S0 fill:#a39,stroke:#000
    style S1 fill:#8b7,stroke:#000
    style S2 fill:#8b7,stroke:#000
    style S3 fill:#8b7,stroke:#000

    S0(pointer down \n event) -->|primary| S1{target?}
    S0 -->|secondary| S2{target?}
    S0 -->|primary \n w/shift| S3{target?}

    S1 -->|background| S4
    S1 -->|selected block| S5
    S1 -->|unselected block| S6

    S2 -->|background| S7
    S2 -->|selected block| S8
    S2 -->|unselected block| S9

    S3 -->|background| S10
    S3 -->|selected block| S11
    S3 -->|unselected block| S12

subgraph R1[ ]
    S4[Clear multi-selections, pass-thru event]
    S5[If > 1 multi-selections, begin drag & stop propagation \n Otherwise, pass-thru event]
    S6[Clear multi-selections, pass-thru event]
    S7[If > 1 multi-selections, show menu & stop propagation \n Otherwise, pass-thru event]
    S8[If > 1 multi-selections, show menu & stop propagation \n Otherwise, pass-thru event]
    S9[Clear multi-selections, pass-thru event]
    S10[Init selection rect, stop propagation]
    S11[Toggle multi-selection of block, stop propagation]
    S12[Toggle multi-selection of block, stop propagation]
end