Skip to content

Replace container gap with gapX and gapY #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
han4wluc merged 2 commits into from
Apr 15, 2026
Merged

Replace container gap with gapX and gapY #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c89d55e
Replace container gap with gapX and gapY
han4wluc Apr 15, 2026
de09b65
Bump package version to 1.8.0
han4wluc Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "route-graphics",
"version": "1.7.5",
"version": "1.8.0",
"description": "A 2D graphics rendering interface that takes JSON input and renders pixels using PixiJS",
"main": "dist/RouteGraphics.js",
"type": "module",
Expand Down
6 changes: 4 additions & 2 deletions playground/data/templates.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
width: 220
height: 240
direction: vertical
gap: 12
gapX: 12
gapY: 12
children:
- id: vertical-1
type: rect
Expand All @@ -130,7 +131,8 @@
width: 280
height: 90
direction: horizontal
gap: 10
gapX: 10
gapY: 10
children:
- id: horizontal-1
type: rect
Expand Down
51 changes: 28 additions & 23 deletions playground/pages/docs/nodes/container.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,33 @@ Try it in the [Playground](/playground/?template=container-layout).

## Field Reference

| Field | Type | Required | Default | Notes |
| ------------ | ---------------------------------------- | ------------------- | ------------------------ | ------------------------------------------------------- |
| `id` | string | Yes | - | Element id. |
| `type` | string | Yes | - | Must be `container`. |
| `x` | number | Yes (public schema) | `0` at runtime | Position before anchor transform. |
| `y` | number | Yes (public schema) | `0` at runtime | Position before anchor transform. |
| `width` | number | No | auto | Derived from children if omitted. |
| `height` | number | No | auto | Derived from children if omitted. |
| `anchorX` | number | No | `0` | For containers, use `0`, `0.5`, or `1`. |
| `anchorY` | number | No | `0` | For containers, use `0`, `0.5`, or `1`. |
| `alpha` | number | No | `1` | Opacity `0..1`. |
| `children` | array | No | `[]` | Any registered element plugin type can be nested. |
| `direction` | `absolute` \| `horizontal` \| `vertical` | No | `""` (absolute behavior) | Auto-positioning for children in non-absolute modes. |
| `gap` | number | No | `0` | Space between children in layout mode. |
| `rotation` | number | No | `0` | Degrees. |
| `scroll` | boolean | No | `false` | Enables clipping and wheel scrolling for overflow. |
| `scrollbar` | object | No | - | Optional custom vertical scrollbar chrome for overflow. |
| `hover` | object | No | - | Hover event config. Supports `inheritToChildren`. |
| `click` | object | No | - | Click event config. Supports `inheritToChildren`. |
| `rightClick` | object | No | - | Right click event config. Supports `inheritToChildren`. |
| Field | Type | Required | Default | Notes |
| ------------ | ---------------------------------------- | ------------------- | ------------------------ | ------------------------------------------------------------------- |
| `id` | string | Yes | - | Element id. |
| `type` | string | Yes | - | Must be `container`. |
| `x` | number | Yes (public schema) | `0` at runtime | Position before anchor transform. |
| `y` | number | Yes (public schema) | `0` at runtime | Position before anchor transform. |
| `width` | number | No | auto | Derived from children if omitted. |
| `height` | number | No | auto | Derived from children if omitted. |
| `anchorX` | number | No | `0` | For containers, use `0`, `0.5`, or `1`. |
| `anchorY` | number | No | `0` | For containers, use `0`, `0.5`, or `1`. |
| `alpha` | number | No | `1` | Opacity `0..1`. |
| `children` | array | No | `[]` | Any registered element plugin type can be nested. |
| `direction` | `absolute` \| `horizontal` \| `vertical` | No | `""` (absolute behavior) | Auto-positioning for children in non-absolute modes. |
| `gapX` | number | No | `0` | Horizontal spacing between children, and between wrapped columns. |
| `gapY` | number | No | `0` | Vertical spacing between children, and between wrapped rows. |
| `rotation` | number | No | `0` | Degrees. |
| `scroll` | boolean | No | `false` | Enables clipping and wheel scrolling for overflow. |
| `scrollbar` | object | No | - | Optional custom vertical scrollbar chrome for overflow. |
| `hover` | object | No | - | Hover event config. Supports `inheritToChildren`. |
| `click` | object | No | - | Click event config. Supports `inheritToChildren`. |
| `rightClick` | object | No | - | Right click event config. Supports `inheritToChildren`. |

## Layout Behavior Notes

- `absolute`: child `x`/`y` are used as-is.
- `horizontal` / `vertical`: parser repositions children and can wrap by container `width`/`height` when provided and `scroll` is false.
- `gapX` controls horizontal spacing. `gapY` controls vertical spacing. Legacy `gap` is not supported.
- Child nodes are parsed with the active parser plugin set.
- `scrollbar.vertical` renders on top of the viewport edge. It syncs with wheel scrolling, thumb dragging, track clicks, and optional start/end buttons.

Expand Down Expand Up @@ -136,7 +138,8 @@ elements:
x: 120
y: 120
direction: vertical
gap: 10
gapX: 10
gapY: 10
children:
- id: btn-start
type: rect
Expand Down Expand Up @@ -166,7 +169,8 @@ elements:
width: 420
height: 560
direction: vertical
gap: 8
gapX: 8
gapY: 8
scroll: true
children:
- id: item-1
Expand Down Expand Up @@ -197,7 +201,8 @@ elements:
width: 420
height: 560
direction: vertical
gap: 8
gapX: 8
gapY: 8
scroll: true
scrollbar:
vertical:
Expand Down
32 changes: 16 additions & 16 deletions playground/static/RouteGraphics.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions playground/static/public/playground/templates.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
width: 220
height: 240
direction: vertical
gap: 12
gapX: 12
gapY: 12
children:
- id: vertical-1
type: rect
Expand All @@ -130,7 +131,8 @@
width: 280
height: 90
direction: horizontal
gap: 10
gapX: 10
gapY: 10
children:
- id: horizontal-1
type: rect
Expand Down
Loading
Loading