Process Flow

Precept Grade

DOM hierarchy is matched against lists of elements.

flowchart LR

window-.-selector
subgraph selector
 direction TB
 parent-- depth -->child
 child-- max -->parent
end

grade("sanitize, transform")
selector--> grade -->a

subgraph type
  direction TB
  a("1x: structure, visibility")
  grade-.-tag{blacklist}
  a-->b{interactive}
  b-- yes ---native("3x: form, video")
  native-->c{cors}
  b-- no -->poster("2x: img, text")
end

c-. yes -.->CSS3DRenderer
c-- no -->html-to-image
poster-->html-to-image
a-->loader

Loading

Sync Frame

Update media queue and synthetic events.

stateDiagram
direction LR


[*] --> reflow: ux event

state reflow {
  queue
}

queue --> sync

state sync {
  targets
  rects
}

rects --> render
targets --> raycast: capture

state mouseevent {
  raycast --> dispatch: bubble
}

dispatch --> [*]

mapcontrols --> render: change
note right of render :syncFPS
    

Loading

Sync Phase

Reduce media queue via feature differs of rect.ux.

stateDiagram
direction LR


state atlas{
  toSVG
}

atlas-->transforms

state transforms{
  box
}

transforms --> [*]
transforms --> render

note left of rate :phase capture/bubble of pseudo states

[*] --> sync

state sync {
  rects
}

rects-->rate: timeslice
rate-->atlas

state rate {

  state css {
    state "differ" as css1
    state "differ differ" as css2
    css1 --> css2: phase
  }

  css-->rect.ux
  rect.ux-->rate2: phase

  state rect.ux { 
    state "o: 0+" as ux1
    state "u: { matrix, tween, pseudo }" as ux1
  }

  state "children" as rate2

  inPolar
}

Loading

Sync Box

Traverse rects via precept for major.

---
title: Element
---
erDiagram
    RECT-MAJOR |o--o| TIME : atlas
    TIME }o..o| DIFFS : ux
    DIFFS }o..o| HTML-TO-IMAGE : ux
    RECT-MAJOR |o--o| LOADER : other
    LOADER {
      File OpenCV
      GIF gifuct-js
      MP4 VideoLoader
      JSON JSONLoader
    }
    TIME {
      Gate start
      Boundary division
      Ramp subdivisions
    }
    DIFFS {
      matrix transforms
      pseudo phase
      tween style
    }

Loading