fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 07:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add the Spreadsheet panel to inspect node output data (#2442)

Browse Source 
* Inspect node ouput stub

* Fix compile error in tests

* Create a table

* Clickable tables

* Add vector data support

* Checkbox to enable the panel

* Remove Instances table ID column; style the spreadsheet

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
James Lindsay
2025-03-18 23:06:05 -07:00
committed by GitHub
co-authored by Keavon Chambers
parent 6292dea103
commit 43275b7a1e
24 changed files with 771 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Spreadsheet.svelte
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import { getContext } from "svelte";
import type { PortfolioState } from "/src/state-providers/portfolio";
const portfolio = getContext<PortfolioState>("portfolio");
</script>
<LayoutCol class="spreadsheet">
<LayoutRow class="control-bar">
<TextLabel>Spreadsheet Data for Node ID {$portfolio.spreadsheetNode}:</TextLabel>
</LayoutRow>
<LayoutCol class="body" scrollableY={true}>
<WidgetLayout layout={$portfolio.spreadsheetWidgets} />
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
.spreadsheet {
flex-grow: 1;
padding: 4px;
.control-bar {
height: 32px;
--widget-height: 24px;
flex: 0 0 auto;
.text-label {
margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
min-height: var(--widget-height);
line-height: var(--widget-height);
}
}
table {
margin: 0 -4px;
width: calc(100% + 2 * 4px);
margin-top: 8px;
span {
white-space: wrap;
}
}
}
</style>
frontend/src/components/widgets/WidgetLayout.svelte
+4 -1
View File
@@ -1,8 +1,9 @@
<script lang="ts">
import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout } from "@graphite/messages";
import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages";
import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
export let layout: WidgetLayout;
let className = "";
@@ -15,6 +16,8 @@
<WidgetSpan widgetData={layoutGroup} layoutTarget={layout.layoutTarget} class={className} {classes} />
{:else if isWidgetSection(layoutGroup)}
<WidgetSection widgetData={layoutGroup} layoutTarget={layout.layoutTarget} class={className} {classes} />
{:else if isWidgetTable(layoutGroup)}
<WidgetTable widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
{:else}
<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
{/if}
frontend/src/components/widgets/WidgetTable.svelte
+42
View File
@@ -0,0 +1,42 @@
<script lang="ts">
import { type WidgetTable as WidgetTableFromJsMessages } from "@graphite/messages";
import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
export let widgetData: WidgetTableFromJsMessages;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let layoutTarget: any; // TODO: Give this a real type
</script>
<table>
{#each widgetData.tableWidgets as row}
<tr>
{#each row as cell}
<td>
<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
</td>
{/each}
</tr>
{/each}
</table>
<style lang="scss">
table {
background: var(--color-3-darkgray);
border: none;
border-spacing: 4px;
border-radius: 2px;
td {
background: var(--color-2-mildblack);
vertical-align: top;
border: none;
border-radius: 2px;
padding: 4px 8px;
}
tr:first-child td {
background-image: var(--inheritance-dots-background-4-dimgray);
}
}
</style>
frontend/src/components/window/workspace/Panel.svelte
+2
View File
@@ -2,11 +2,13 @@
import Document from "@graphite/components/panels/Document.svelte";
import Layers from "@graphite/components/panels/Layers.svelte";
import Properties from "@graphite/components/panels/Properties.svelte";
import Spreadsheet from "@graphite/components/panels/Spreadsheet.svelte";
const PANEL_COMPONENTS = {
Document,
Layers,
Properties,
Spreadsheet,
};
type PanelType = keyof typeof PANEL_COMPONENTS;
</script>
frontend/src/components/window/workspace/Workspace.svelte
+8 -1
View File
@@ -15,7 +15,8 @@
const PANEL_SIZES = {
/**/ root: 100,
/* ├─ */ content: 80,
/* │ └─ */ document: 100,
/* │ ├─ */ document: 70,
/* │ └─ */ spreadsheet: 30,
/* └─ */ details: 20,
/* ├─ */ properties: 45,
/* └─ */ layers: 55,
@@ -146,6 +147,12 @@
bind:this={documentPanel}
/>
</LayoutRow>
{#if $portfolio.spreadsheetOpen}
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["spreadsheet"] }} data-subdivision-name="spreadsheet">
<Panel panelType="Spreadsheet" tabLabels={[{ name: "Spreadsheet" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
</LayoutCol>
<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
frontend/src/messages.ts
+25 -2
View File
@@ -771,6 +771,12 @@ export class UpdateGraphFadeArtwork extends JsMessage {
readonly percentage!: number;
}
export class UpdateSpreadsheetState extends JsMessage {
readonly open!: boolean;
readonly node!: bigint | undefined;
}
export class UpdateMouseCursor extends JsMessage {
@Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "alias")
readonly cursor!: MouseCursorIcon;
@@ -1432,7 +1438,7 @@ export class WidgetDiffUpdate extends JsMessage {
diff!: WidgetDiff[];
}
type UIItem = LayoutGroup[] | LayoutGroup | Widget | MenuBarEntry[] | MenuBarEntry;
type UIItem = LayoutGroup[] | LayoutGroup | Widget | Widget[] | MenuBarEntry[] | MenuBarEntry;
type WidgetDiff = { widgetPath: number[]; newValue: UIItem };
export function defaultWidgetLayout(): WidgetLayout {
@@ -1451,6 +1457,7 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
const diffObject = update.widgetPath.reduce((targetLayout, index) => {
if ("columnWidgets" in targetLayout) return targetLayout.columnWidgets[index];
if ("rowWidgets" in targetLayout) return targetLayout.rowWidgets[index];
if ("tableWidgets" in targetLayout) return targetLayout.tableWidgets[index];
if ("layout" in targetLayout) return targetLayout.layout[index];
if (targetLayout instanceof Widget) {
if (targetLayout.props.kind === "PopoverButton" && targetLayout.props instanceof PopoverButton && targetLayout.props.popoverLayout) {
@@ -1481,7 +1488,7 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
});
}
export type LayoutGroup = WidgetSpanRow | WidgetSpanColumn | WidgetSection;
export type LayoutGroup = WidgetSpanRow | WidgetSpanColumn | WidgetTable | WidgetSection;
export type WidgetSpanColumn = { columnWidgets: Widget[] };
export function isWidgetSpanColumn(layoutColumn: LayoutGroup): layoutColumn is WidgetSpanColumn {
@@ -1493,6 +1500,11 @@ export function isWidgetSpanRow(layoutRow: LayoutGroup): layoutRow is WidgetSpan
return Boolean((layoutRow as WidgetSpanRow)?.rowWidgets);
}
export type WidgetTable = { tableWidgets: Widget[][] };
export function isWidgetTable(layoutTable: LayoutGroup): layoutTable is WidgetTable {
return Boolean((layoutTable as WidgetTable)?.tableWidgets);
}
export type WidgetSection = { name: string; visible: boolean; pinned: boolean; id: bigint; layout: LayoutGroup[] };
export function isWidgetSection(layoutRow: LayoutGroup): layoutRow is WidgetSection {
return Boolean((layoutRow as WidgetSection)?.layout);
@@ -1543,6 +1555,13 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
return result;
}
if (layoutGroup.table) {
const result: WidgetTable = {
tableWidgets: layoutGroup.table.tableWidgets.map(hoistWidgetHolders),
};
return result;
}
throw new Error("Layout row type does not exist");
}
@@ -1573,6 +1592,8 @@ export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate {}
export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate {}
export class UpdateSpreadsheetLayout extends WidgetDiffUpdate {}
export class UpdateToolOptionsLayout extends WidgetDiffUpdate {}
export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
@@ -1649,6 +1670,7 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateEyedropperSamplingState,
UpdateGraphFadeArtwork,
UpdateGraphViewOverlay,
UpdateSpreadsheetState,
UpdateImportReorderIndex,
UpdateImportsExports,
UpdateInputHints,
@@ -1664,6 +1686,7 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateNodeThumbnail,
UpdateOpenDocumentsList,
UpdatePropertyPanelSectionsLayout,
UpdateSpreadsheetLayout,
UpdateToolOptionsLayout,
UpdateToolShelfLayout,
UpdateWirePathInProgress,
frontend/src/state-providers/portfolio.ts
+22
View File
@@ -13,6 +13,10 @@ import {
TriggerUpgradeDocumentToVectorManipulationFormat,
UpdateActiveDocument,
UpdateOpenDocumentsList,
UpdateSpreadsheetState,
defaultWidgetLayout,
patchWidgetLayout,
UpdateSpreadsheetLayout,
} from "@graphite/messages";
import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
@@ -23,6 +27,9 @@ export function createPortfolioState(editor: Editor) {
unsaved: false,
documents: [] as FrontendDocumentDetails[],
activeDocumentIndex: 0,
spreadsheetOpen: false,
spreadsheetNode: BigInt(0) as bigint | undefined,
spreadsheetWidgets: defaultWidgetLayout(),
});
// Set up message subscriptions on creation
@@ -103,6 +110,21 @@ export function createPortfolioState(editor: Editor) {
editor.handle.triggerUpgradeDocumentToVectorManipulationFormat(documentId, documentName, documentIsAutoSaved, documentIsSaved, documentSerializedContent);
});
editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetState, async (updateSpreadsheetState) => {
update((state) => {
state.spreadsheetOpen = updateSpreadsheetState.open;
state.spreadsheetNode = updateSpreadsheetState.node;
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetLayout, (updateSpreadsheetLayout) => {
update((state) => {
patchWidgetLayout(state.spreadsheetWidgets, updateSpreadsheetLayout);
return state;
});
});
return {
subscribe,
};