CowGrid Cell&

SketchSystems.spec

CowGrid Cell&
  Focus state
    select this cell -> View mode
    select range ending on this cell -> View mode
    select range including this cell -> Cursor elsewhere
    select another cell or range -> Out of selection
    Out of selection
    In selection
      Cursor on cell
        select this cell -> Edit mode
        type -> Edit mode
        Edit mode
          done -> selection state?
        View mode
          arrow keys -> selection state?
      # the cell is in selection but not under the cursor
      Cursor elsewhere
    selection state?
      only cell in selection -> Out of selection
      multiple cells in selection -> Cursor elsewhere
      
        
  Validation state
    Column not assigned
      assign column -> Column assigned
    Column assigned
      unassign column -> Column not assigned
      done -> valid?
      valid?
        valid? -> Valid
        problematic? -> Problematic
        invalid? -> Invalid
      Valid
      # technically valid but not recommended
      Problematic
      Invalid
          
   Diff state
    done -> content comparison?  
    content comparison?
      nothing? -> Blank
      # previous value is the value in the store, not the value before editing    
      same as previous value? -> Unchanged
      different from previous value? -> Changed
    Blank
      global replace mode?
        append? -> has previous value?
        replace? -> Pending removal
      has previous value?
        yes -> Previous
        no -> has default value?
      has default value?
        yes -> Default
        no -> No value
      Previous
      Default
      No value
      Pending removal
    Unchanged
    Changed
      has previous value? 2
        yes? -> Modified
        no -> New
      New
      Modified
      
    

SketchSystems_prototype.js

function render(model){
  function lineage(state) {
    return state.parent
    ? [state.name, ...lineage(state.parent)]
    : [state.name];
  }

  const state_family = model.active_states.reduce(
    (names, state) => [...names, ...lineage(state)]
    ,[]);
  
  const class_map = {
    "In selection": "selected",
    "Cursor on cell": "cursor",
    "Edit mode": "edit",
    "Problematic": "problematic",
    "Invalid": "invalid",
    "Previous": "previous",
    "Default": "default",
    "Pending removal": "pending-removal",
    "New": "new",
    "Modified": "modified"
  };
  
  const classes = state_family
    .reduce((cs, name) => 
            class_map[name] 
            ? [...cs, class_map[name]]
            : cs,
            ["cell"]);

  return (
    <>
    <style>{`
      table {
        background-color: #333;
        color: #f3f3f3;
        padding: 2em;
        font-family: "Lato";
        border-spacing: 0;
      }
      td {
        border: solid 1px #777;
        padding: .25em .5em;
      }
      td.cell {
        position: relative;
      }
      td.cell input { display: none; }
      td.cell.edit input {
        display: block;
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: #333;
        border: none;
        caret-color: #F2C94C;
        color: #f3f3f3;
        padding: inherit;
        font: inherit;
        outline: none;
        border-radius: .25rem;
        box-shadow: #2D9CDB 0 0 0 .25rem;
      }
      td.cell.edit input::selection { background-color: #2D9CDB; }

      td.cell.problematic { border: solid .1rem #F2C94C }
      td.cell.invalid { border: solid .1rem #E31616 }

      td.cell.previous,
      td.cell.default { color: #999; }
      td.cell.pending-removal { color: #EB7171; text-decoration: line-through; }
      td.cell.new { color: #76CF3F; }
      td.cell.modified { color: #F4B351; }

      td.cell.selected:after {
        content: " ";
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: #2D9CDB;
        mix-blend-mode: hard-light;
        opacity: .2;
        display: block;
        position: absolute;
      }
      td.cell.selected.edit:after { display: none; }
      td.cell.selected.cursor {
        border: solid .1rem #2D9CDB;
        border-radius: .2rem;
      }
    `}</style>
    <table>
      <tr>
        <td>A</td>
        <td className={classes.join(" ")} 
            onClick={e => model.emit("select this cell")}
            >
          Content
          <input value="Content" onBlur={e => model.emit("select another cell or range")}/>
        </td>
        <td>C</td>
      </tr>
    </table>
    </>
  );
}