fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 15:08: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">