Move a row, keep your note The same tree twice, from the same state. The left side brings each list of children to the page on its own. The right side brings the whole tree in one call. Only the right side keeps a row that changes its parent.
  1. Type a note in a row. The note shows on both sides, and that row is now yours.
  2. Press a button below. It moves your row.
  3. Read what each side did.
Your row: none yet
Indent Outdent Wrap in a group Swap with its parent Remove its parent
One call per list
Rows made0
Notes lost0
Focus–
    One call for the tree
    Rows made0
    Notes lost0
    Focus–
    A row flashes when it is made, or when it is taken out of the page and put back. A row that moves where the browser offers moveBefore does not flash. The numbers are for the last change.
    One call per list
    Rows on screen0 Rows made, running total0 Rows put into the page0 Time0 Renders of components0 Renders of components, running total0 Components connected0
    One call for the tree
    Rows on screen0 Rows made, running total0 Rows put into the page0 Time0 Renders of components0 Renders of components, running total0 Components connected0
    A big tree Press "300 rows". Type a note in "Row 11", press Indent, and read the time on each side. The left side makes Row 11 again with the nine rows inside it. The right side moves one row.
    300 rows A few rows
    The state
    The plan of the right side
    The functions The limits of this page
    • The note is not in the state. It is text in the node, so it shows which rows keep their node. A note counts as lost when its row is still on screen and the text is gone. The page copies what you type to the same row on the other side. That copy is code of this page, not of BareMirror.
    • The focus across a move needs moveBefore.
    • When no row changes its parent, the two sides are the same.
    • The time is the time of the script. The work of the browser after it is not in the number.
    The source The two ways to sync are the first two files. Both use the row of row.js and the application of app.js. Two instruments are shared with the task list page.