52d2b38a82
* Migrate Specta to Tsify to auto-generate messages.ts, working except colors and widgets * Adopt the generated FillColor/Color/GradientStops * Fix widget typing * Separate WidgetGroup enum variants into wrapper structs * Small rename * Simplify widgets further * Clean up message type references * Switch type imports to the auto-generated file * Remove lowercase serde rename * Fix FillChoice deserialization * Fix small regression from #3837 * Improve type safety * Make WidgetSpan type-safe * More cleanup and type safety * More type safety * More type safety * Get the rest to type-check without errors; improve widget builder macro to have optional icons; improve Svelte 5 configs * Cargo fmt * Fix imports * Update outdated readme info * Fix lint command rename references * Fix typos * One more typos fix * Remove unnecessary dep: prefix from the edited Cargo.toml files * Remove excess parts from Cargo.toml * Fix compiling on desktop * Revert "Remove excess parts from Cargo.toml" This reverts commit 6b711117b3a5d5d8a3ee20f36a43bc74930b7c82. * Update dev docs with simpler, more accurate instructions
1.9 KiB
Overview of /frontend/src/components/
Each component represents a (usually reusable) part of the Graphite editor GUI.
Floating Menus: floating-menus/
The temporary UI areas with dark backgrounds which hover over the top of the editor window content. Examples include menu lists, popovers, and dialogs.
Layout: layout/
Useful containers that control the flow of content held within.
Panels: panels/
The dockable tabbed regions like the Document, Properties, Layers, Data, and Welcome panels.
Views: views/
Content views rendered within panels, such as the node graph.
Widgets: widgets/
The interactive input items used to display information and provide user control.
Window: window/
The building blocks for the Title Bar, Workspace, and Status Bar within an editor application window.
Svelte tips and tricks
This section contains a growing list of quick reference information for helpful Svelte solutions and best practices. Feel free to add to this to help contributors learn things, or yourself remember tricks you'll likely forget in a few months.
Bi-directional props
The component declares this:
// The dispatcher that sends the changed value as a custom event to the parent
const dispatch = createEventDispatcher<{ theBidirectionalProperty: number }>();
// The prop
export let theBidirectionalProperty: number;
// Called only when `theBidirectionalProperty` is changed from outside this component via its props
$: console.log(theBidirectionalProperty);
// Example of a method that would update the value
function doSomething() {
dispatch("theBidirectionalProperty", SOME_NEW_VALUE);
},
Users of the component do this for theCorrespondingDataEntry to be a two-way binding:
let theCorrespondingDataEntry = 42;
<DropdownInput
theBidirectionalProperty={theCorrespondingDataEntry}
on:theBidirectionalProperty={({ detail }) => { theCorrespondingDataEntry = detail; }}
/>