<commit_before># Cut.js

Cut.js (name inspired from "cutout animation") is a minimal JavaScript library for composing high-performance, dynamic and interactable HTML5 visual interfaces.
It works with modern browsers and mobile devices and intended to be used for game and visual app development.

[API Doc](api-doc.js)

### How it works

A Cut.js app consists of image textures (sprite sheet), cutout definitions (sprites) and a tree structure. Each node in the tree includes image cutouts and/or child nodes. Each node is pinned (transformed) against its parent and pastes its cutouts on rendering.

Each rendering cycle consists of ticking and painting the tree. Ticking is used to update the tree nodes and then on painting each node transforms according to its pinning and pastes its cutouts and then delegates to its children.

Rendering is retained and pauses in each cycle unless/until it is touched directly or indirectly by updating it.

### Sample Code

Following code demonstrate a simple use case. Cut.Loader and Cut.Mouse are pluggable components.

```js
  Cut.Loader.load(function(root, container) {

    Cut.Mouse.subscribe(root, container);

    root.viewbox(500, 300);

    var row = Cut.row(0.5).appendTo(root).pin("align", 0.5).spacing(1);
    
    var colors = [ "green", "blue", "purple", "red", "orange", "yellow" ];<commit_msg>udpate<commit_after># Cut.js

Cut.js (name inspired from "cutout animation") is a minimal JavaScript library for composing high-performance, dynamic and interactable HTML5 visual interfaces.
It works with modern browsers and mobile devices and intended to be used for game and visual app development.

[API Doc](api-doc.js)

### How it works

A Cut.js app consists of a tree of nodes and one or more image textures. Each node includes zero, one or more image cutouts (sprites) and is pinned (transformed) against its parent.

Each rendering cycle consists of ticking and painting the tree. Ticking is used to update nodes and then on painting each node transforms according to its pinning, pastes its cutouts and then delegates to its children.

Rendering is retained and pauses in each cycle unless/until it is touched directly or indirectly by updating it.

### Sample Code

Following code demonstrate a simple use case. Cut.Loader and Cut.Mouse are pluggable components.

```js
  Cut.Loader.load(function(root, container) {

    Cut.Mouse.subscribe(root, container);

    root.viewbox(500, 300);

    var row = Cut.row(0.5).appendTo(root).pin("align", 0.5).spacing(1);
    
    var colors = [ "green", "blue", "purple", "red", "orange", "yellow" ];
{'fraction_non_alphanumeric': 0.08112264513648597, 'fraction_numerical': 0.00922722029988466, 'mean_word_length': 4.342915811088296, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3885825', 'n_tokens_mistral': 726, 'n_tokens_neox': 679, 'n_words': 344}