mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add node description tooltips in the Properties panel and on secondary inputs in the graph (#2590)

Browse source 
Add tooltips to secondary inputs in graph/Properties panel, and to nodes in Properties panel
This commit is contained in:
Keavon Chambers 2025-04-17 00:59:46 -07:00 • committed by GitHub
parent ab39f3f837
commit eca5d0d105
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 434 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/views/Graph.svelte
View file

@ -1069,7 +1069,7 @@
<div class="secondary" class:in-selected-network={$nodeGraph.inSelectedNetwork}>
{#each exposedInputsOutputs as [input, output]}
<div class={`secondary-row expanded ${input !== undefined ? "input" : "output"}`}>
<TextLabel tooltip={input !== undefined ? input.name : output.name}>
<TextLabel tooltip={(input !== undefined ? `${input.name}\n\n${input.description}` : `${output.name}\n\n${output.description}`).trim()}>
{input !== undefined ? input.name : output.name}
</TextLabel>
</div>

2
frontend/src/components/widgets/WidgetSection.svelte
View file

@ -26,7 +26,7 @@
<LayoutCol class={`widget-section ${className}`.trim()} {classes}>
<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
<div class="expand-arrow" />
<TextLabel bold={true}>{widgetData.name}</TextLabel>
<TextLabel tooltip={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
<IconButton
icon={widgetData.pinned ? "PinActive" : "PinInactive"}
tooltip={widgetData.pinned ? "Unpin this node so it's no longer shown here when nothing is selected" : "Pin this node so it's shown here when nothing is selected"}

10
frontend/src/messages.ts
View file

@ -110,12 +110,9 @@ export class UpdateNodeGraphTransform extends JsMessage {
readonly transform!: NodeGraphTransform;
}
const InputTypeDescriptions = Transform(({ obj }) => new Map(obj.inputTypeDescriptions));
const NodeDescriptions = Transform(({ obj }) => new Map(obj.nodeDescriptions));
export class SendUIMetadata extends JsMessage {
@InputTypeDescriptions
readonly inputTypeDescriptions!: Map<string, string>;
@NodeDescriptions
readonly nodeDescriptions!: Map<string, string>;
@Type(() => FrontendNode)
@ -220,6 +217,8 @@ export class FrontendGraphInput {
readonly name!: string;
readonly description!: string;
readonly resolvedType!: string | undefined;
readonly validTypes!: string[];
@ -251,6 +250,8 @@ export class FrontendGraphOutput {
readonly name!: string;
readonly description!: string;
readonly resolvedType!: string | undefined;
@CreateInputConnectorArray
@ -1508,7 +1509,7 @@ export function isWidgetTable(layoutTable: LayoutGroup): layoutTable is WidgetTa
return Boolean((layoutTable as WidgetTable)?.tableWidgets);
}
export type WidgetSection = { name: string; visible: boolean; pinned: boolean; id: bigint; layout: LayoutGroup[] };
export type WidgetSection = { name: string; description: string; visible: boolean; pinned: boolean; id: bigint; layout: LayoutGroup[] };
export function isWidgetSection(layoutRow: LayoutGroup): layoutRow is WidgetSection {
return Boolean((layoutRow as WidgetSection)?.layout);
}
@ -1550,6 +1551,7 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
if (layoutGroup.section) {
const result: WidgetSection = {
name: layoutGroup.section.name,
description: layoutGroup.section.description,
visible: layoutGroup.section.visible,
pinned: layoutGroup.section.pinned,
id: layoutGroup.section.id,

8
frontend/src/state-providers/node-graph.ts
View file

@ -43,7 +43,6 @@ export function createNodeGraphState(editor: Editor) {
wires: [] as FrontendNodeWire[],
wiresDirectNotGridAligned: false,
wirePathInProgress: undefined as WirePath | undefined,
inputTypeDescriptions: new Map<string, string>(),
nodeDescriptions: new Map<string, string>(),
nodeTypes: [] as FrontendNodeType[],
thumbnails: new Map<bigint, string>(),
@ -55,11 +54,10 @@ export function createNodeGraphState(editor: Editor) {
});
// Set up message subscriptions on creation
editor.subscriptions.subscribeJsMessage(SendUIMetadata, (UIMetadata) => {
editor.subscriptions.subscribeJsMessage(SendUIMetadata, (uiMetadata) => {
update((state) => {
state.inputTypeDescriptions = UIMetadata.inputTypeDescriptions;
state.nodeDescriptions = UIMetadata.nodeDescriptions;
state.nodeTypes = UIMetadata.nodeTypes;
state.nodeDescriptions = uiMetadata.nodeDescriptions;
state.nodeTypes = uiMetadata.nodeTypes;
return state;
});
});