<commit_before># Plan de campagne

## Short term focus

- [ ] Implement `fill()`, `outline()` and `stretch()` for [Circle] and [Rectangle]
  - [ ] Deprecate `setColor()` on [Rectangles] and [Circles] in favor of setting the color via `fill()`, `stretch()`, or `outline()`
- [ ] Check if `size` and `position` of [Panes] are as advertised
  - [ ] I believe [Rectangles] are 1 PX too high and wide
- [ ] Implement `hasChanged` consistently across [Panes]
- [ ] Add [Sprites], [Letters] and [Text]
- [ ] Add keyboard, mouse and touch events
- [ ] Think of more practical examples to showcase the tools and allow for visual regression testing

### References

- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

---

## API

### Animation _extends_ SpriteSet

### BoundingBox

### Button

- is a property of a [Pane] and as such registers itself to listen to click/touch events on WINDOW.

### Circle _extends_ Pane

- [ ] Implement as child of [Oval]
- [ ] Set weight of outline (possibly using a [CompoundPane])
- [ ] `update()`: `hasChanged` should also check if its reference has changed
- [ ] `outline()`: draw partial outline

### Color

- [ ] Implement possibility for gradients
- [ ] `change()`, initiates a color transition tween
- [ ] Extend `constructor()` and `set()` with an opacity option

### Controller

### Engine

- [ ] Set configuration when initializing
  - [ ] Resizing and windowing
    - [ ] `extend`: (default = false) if only a width or height is specified, extend allows that value to be increased to fill the window as optimal as possible
    - [ ] `maxPX`: (default = false) if set, the value of PX will be limited
  - [ ] Color channel limitations
  - [ ] Show grid
  - [ ] Optional browser window padding
  - [ ] Full screen
- [ ] `pause()`
- [ ] Keyboard and mouse input (via a separate [Controller])
- [ ] Allow multiple canvases/contexts, and in extension, allow a canvas to be linked to an existing DOM-element.
- [ ] Draw each layer of entities on a separate <canvas> element

### Entity

### Letter _extends_ Sprite

- [ ] Create default typefaces at 9px, 11px and a uppercase only version at 5px.

### Line _extends_ Pane

- [ ] Allow `to()` and `from()` to accept arrays instead of [Points]; arrays are converted to a point internally
- [ ] Add relative positioning (of entire line)
- [ ] Add relative positioning (of `@_from`)
- [ ] `setColor()`
- [ ] `setOpacity()`
- [ ] Clean up children
- [ ] BUG: occassionally, particles stay in their old positions

### Pane _extends_ Entity

- [ ] `setCSSProperty()`: allow percentages (or floats) as values. Will need an update of `onResize()` as well.
- [ ] `setOverflow()`: defaults to 'visible'
- [ ] `setColor()` does not work when called before the `addChild()` is executed on that [Pane]
- [ ] `setOpacity()` should apply to a [Pane] as a whole, and not as a value to be multiplied for each separate particle. In this sense, `setOpacity()`'s main function is to allow a compound shape to be faded in or out.
- [ ] Add a hitbox property
- [ ] Calculate overlap between this [Pane] and another, optionally on the level of its children
- [ ] Rename `addChild()` to `add()`; the concept of children is technical, and not necessary on the front-end
- [ ] `setCSS()`: allow fractional values < 1 as percentages (also as ..% ?)

### Particle _extends_ Entity

- [ ] Optionally display [Particles] as separate rectangles, with a 1px margin

### Path _extends_ Pane

- [ ] `setOpacity()`
- [ ] `setColor()`
- [ ] `close()`; attached first to last points
- [ ] `fill()`
- [ ] `setThickness()`

### Point _extends_ Entity

### Polygon _extends_ Pane

- a collection of [Points], grouped in [Triangles], to draw more complex shapes

### Rectangle _extends_ Pane

### Shape

- A collection of [Panes], each of which is either added or removed. The particles on each [Pane] are initially interpreted as simple black/white additions/subtractions.

### Sprite _extends_ Pane<commit_msg>Update TODO<commit_after># Plan de campagne

## Short term focus

- [ ] Implement `fill()`, `outline()` and `stretch()` for [Circle] and [Rectangle]
  - [ ] Deprecate `setColor()` on [Rectangles] and [Circles] in favor of setting the color via `fill()`, `stretch()`, or `outline()`
- [ ] Check if `size` and `position` of [Panes] are as advertised
  - [ ] I believe [Rectangles] are 1 PX too high and wide
- [ ] Implement `hasChanged` consistently across [Panes]
- [ ] Add [Sprites], [Letters] and [Text]
- [ ] Add keyboard, mouse and touch events
- [ ] Think of more practical examples to showcase the tools and allow for visual regression testing

### References

- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

---

## API

### Animation _extends_ SpriteSet

### BoundingBox

### Button

- is a property of a [Pane] and as such registers itself to listen to click/touch events on WINDOW.

### Circle _extends_ Pane

- [ ] Implement as child of [Oval]
- [ ] Set weight of outline (possibly using a [CompoundPane])
- [ ] `update()`: `hasChanged` should also check if its reference has changed
- [ ] `outline()`: draw partial outline

### Color

- [ ] Implement possibility for gradients
- [ ] `change()`, initiates a color transition tween
- [ ] Extend `constructor()` and `set()` with an opacity option

### Controller

### Engine

- [ ] Set configuration when initializing
  - [ ] Resizing and windowing
    - [ ] `extend`: (default = false) if only a width or height is specified, extend allows that value to be increased to fill the window as optimal as possible
    - [ ] `maxPX`: (default = false) if set, the value of PX will be limited
  - [ ] Color channel limitations
  - [ ] Show grid
  - [ ] Optional browser window padding
  - [ ] Full screen
- [ ] `pause()`
- [ ] Keyboard and mouse input (via a separate [Controller])
- [ ] Allow multiple canvases/contexts, and in extension, allow a canvas to be linked to an existing DOM-element.
- [ ] Draw each layer of entities on a separate <canvas> element

### Entity

### Letter _extends_ Sprite

- [ ] Create default typefaces at 9px, 11px and a uppercase only version at 5px.

### Line _extends_ Pane

- [ ] Allow `to()` and `from()` to accept arrays instead of [Points]; arrays are converted to a point internally
- [ ] Add relative positioning (of entire line)
- [ ] Add relative positioning (of `@_from`)
- [ ] `setColor()`
- [ ] `setOpacity()`
- [ ] Clean up children
- [ ] BUG: occassionally, particles stay in their old positions

### Pane _extends_ Entity

- [ ] `setCSSProperty()`: allow percentages (or floats) as values. Will need an update of `onResize()` as well.
- [ ] `setOverflow()`: defaults to 'visible'
- [ ] `setColor()` does not work when called before the `addChild()` is executed on that [Pane]
- [ ] `setOpacity()` should apply to a [Pane] as a whole, and not as a value to be multiplied for each separate particle. In this sense, `setOpacity()`'s main function is to allow a compound shape to be faded in or out.
- [ ] Add a hitbox property
- [ ] Calculate overlap between this [Pane] and another, optionally on the level of its children
- [ ] Rename `addChild()` to `add()`; the concept of children is technical, and not necessary on the front-end
- [ ] `setCSS()`: allow fractional values < 1 as percentages (also as ..% ?)
- [ ] FUTURE PLAN: Create a separate canvas/context for every [Pane] that is created with when a `_layer` is specified. All children and particles added to that instance will be drawn on its private context. This will inherently mean that any overflow is hidden.

### Particle _extends_ Entity

- [ ] Optionally display [Particles] as separate rectangles, with a 1px margin

### Path _extends_ Pane

- [ ] `setOpacity()`
- [ ] `setColor()`
- [ ] `close()`; attached first to last points
- [ ] `fill()`
- [ ] `setThickness()`

### Point _extends_ Entity

### Polygon _extends_ Pane

- a collection of [Points], grouped in [Triangles], to draw more complex shapes

### Rectangle _extends_ Pane

### Shape

- A collection of [Panes], each of which is either added or removed. The particles on each [Pane] are initially interpreted as simple black/white additions/subtractions.

### Sprite _extends_ Pane
{'fraction_non_alphanumeric': 0.12155768530874682, 'fraction_numerical': 0.0016984107727769015, 'mean_word_length': 3.8437132784958874, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 5, 'https://': 2, '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': '3235707', 'n_tokens_mistral': 2505, 'n_tokens_neox': 2387, 'n_words': 1054}