Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pauliorandall/p46
A modular GUI tool for composing P45 icons.
https://github.com/pauliorandall/p46
gui icons modular svelte svg
Last synced: about 1 month ago
JSON representation
A modular GUI tool for composing P45 icons.
- Host: GitHub
- URL: https://github.com/pauliorandall/p46
- Owner: PaulioRandall
- License: mit
- Created: 2024-06-29T10:57:50.000Z (7 months ago)
- Default Branch: trunk
- Last Pushed: 2024-07-04T21:13:29.000Z (7 months ago)
- Last Synced: 2024-11-13T02:13:34.992Z (2 months ago)
- Topics: gui, icons, modular, svelte, svg
- Language: Svelte
- Homepage:
- Size: 312 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/PaulioRandall/p46/releases)
[](https://github.com/PaulioRandall/p46/releases)
# P46
A modular GUI tool for composing P45 icons.
The core component is ``. Every other component is slotted within it somewhere.
**Requires Svelte version 4.**
## Made to be Plundered
Fork, pillage, and plunder! Do whatever as long as you adhere to the project's permissive MIT license.
## Components
### ``
Slotted into a `` component to add axis to the grid.
Slot the `` component into a `` _before-grid_
slot to allow feature toggling.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to enable
toggling of the `` component if it's used.
```svelte
```
### ``
Slotted into a `` component _after-grid_ slot
so users can add, remove, and modify shapes
within the grid.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot
so users view the currently selected node and,
upon click, copy the node to clipboard.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot
so users can download the SVG.
```svelte
```
### ``
Slotted into a `` component to add guidelines to the grid.
Slot the `` component into a `` _before-grid_
slot to allow feature toggling.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to enable
toggling of the `` component if it's used.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot
to organise a row of header controls.
```svelte
```
```svelte
```
### ``
`` is the framework component in which all other P46
components are slotted into.
```svelte
// Size of the underlying P45 grid.
export let size = 24
// The P45 instance used to define grid dimensions and compile shapes.
setContext("p45", ...)
// Array of grid points representing nodes on the grid.
setContext("p46-points", ...)
// The currently selected grid point. Not to be confused with the currently
// selected user shape.
setContext("p46-selected-store", ...)
// Writable store for enabling and disabling the `<Axis>` component.
setContext("p46-axis-enabled-store", ...)
// Writable store for enabling and disabling the `<Guidelines>` component.
setContext("p46-guidelines-enabled-store", ...)
// Writable store for enabling and disabling the `<Points>` component.
setContext("p46-points-enabled-store", ...)
// Writable store for enabling and disabling the `<Target>` component.
setContext("p46-target-enabled-store", ...)
// Writable store for enabling and disabling rounded edges on shape lines.
setContext("p46-rounded-enabled-store", ...)
// Writable store for controlling the stroke width for shape lines.
setContext("p46-stroke-width-slider-store", ...)
// Writable store containing the array of user shapes to draw on the grid.
setContext("p46-user-shapes-store", ...)
// Writable store containing the currently selected user shape.
// Not to be confused with the currently selected grid point.
setContext("p46-selected-user-shape-store", ...)
```
```svelte
```
### ``
Slotted into a `` component to add reference points to the grid.
Slot the `` component into a `` _before-grid_
slot to allow feature toggling.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to enable
toggling of the `` component if it's used.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to enable
toggling of rounded line caps and joins. When disabled the
`butt` type is used. This is applied to all shapes.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to allow
adjusting of line widths. This is applied to all shapes.
```svelte
```
### ``
Slotted into a `` component to add a target over
the currently selected point to the grid.
Slot the `` component into a `` _before-grid_
slot to allow feature toggling.
```svelte
```
### ``
Slotted into a `` component _before-grid_ slot to enable
toggling of the `` component if it's used.
```svelte
```