fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-21 02:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update all frontend npm dependencies except Svelte and Vite (#3120)

Browse Source 
* Upgrade node dependencies except Svelte 5 and its peer deps

* Fix lint errors

* Fix previous Rust deps upgrade breakage

* Fix demo artwork

* Allow profiling CI workflow to fail
This commit is contained in:
Keavon Chambers
2025-09-01 17:22:30 -07:00
committed by GitHub
parent be3de511f2
commit b5ebe78f5e
39 changed files with 2686 additions and 1598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Editor.svelte
+3 -2
View File
@@ -146,8 +146,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>\
');
--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
--color-transparent-checkered-background:
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(#ffffff, #ffffff);
--color-transparent-checkered-background-size: 16px 16px, 16px 16px, 16px 16px;
--color-transparent-checkered-background-position: 0 0, 8px 8px, 8px 8px;
--color-transparent-checkered-background-position-plus-one: 1px 1px, 9px 9px, 9px 9px;
frontend/src/components/floating-menus/ColorPicker.svelte
+1 -3
View File
@@ -282,7 +282,6 @@
const stop = gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.atIndex(activeIndex);
if (stop && gradientSpectrumInputWidget instanceof SpectrumInput) {
stop.color = colorToEmit;
gradient = gradient;
}
dispatch("colorOrGradient", gradient || colorToEmit);
@@ -452,7 +451,6 @@
{gradient}
{disabled}
on:gradient={() => {
gradient = gradient;
if (gradient) dispatch("colorOrGradient", gradient);
}}
on:activeMarkerIndexChange={gradientActiveMarkerIndexChange}
@@ -596,7 +594,7 @@
unit="%"
mode="Range"
displayDecimalPlaces={1}
tooltip={`Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel`}
tooltip="Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel"
/>
</LayoutRow>
<LayoutRow class="leftover-space" />
frontend/src/components/panels/Document.svelte
+4 -4
View File
@@ -329,11 +329,11 @@
await tick();
if (!textInput) {
return;
}
if (!textInput) return;
// eslint-disable-next-line svelte/no-dom-manipulating
if (displayEditableTextbox.text === "") textInput.textContent = "";
// eslint-disable-next-line svelte/no-dom-manipulating
else textInput.textContent = `${displayEditableTextbox.text}\n`;
// Make it so `maxHeight` is a multiple of `lineHeight`
@@ -508,7 +508,7 @@
<LayoutRow class="spacer" />
{/if}
<LayoutCol class="tool-shelf-bottom-widgets">
<WidgetLayout class={"working-colors-input-area"} layout={$document.workingColorsLayout} />
<WidgetLayout class="working-colors-input-area" layout={$document.workingColorsLayout} />
</LayoutCol>
</LayoutCol>
<LayoutCol class="viewport-container">
frontend/src/components/panels/Layers.svelte
+4 -4
View File
@@ -547,7 +547,7 @@
<div class="expand-arrow-none"></div>
{/if}
{#if listing.entry.clipped}
<IconLabel icon="Clipped" class="clipped-arrow" tooltip={"Clipping mask is active (Alt-click border to release)"} />
<IconLabel icon="Clipped" class="clipped-arrow" tooltip="Clipping mask is active (Alt-click border to release)" />
{/if}
<div class="thumbnail">
{#if $nodeGraph.thumbnails.has(listing.entry.id)}
@@ -555,7 +555,7 @@
{/if}
</div>
{#if listing.entry.name === "Artboard"}
<IconLabel icon="Artboard" class={"layer-type-icon"} />
<IconLabel icon="Artboard" class="layer-type-icon" />
{/if}
<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
<input
@@ -572,7 +572,7 @@
</LayoutRow>
{#if !listing.entry.unlocked || !listing.entry.parentsUnlocked}
<IconButton
class={"status-toggle"}
class="status-toggle"
classes={{ inherited: !listing.entry.parentsUnlocked }}
action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
size={24}
@@ -582,7 +582,7 @@
/>
{/if}
<IconButton
class={"status-toggle"}
class="status-toggle"
classes={{ inherited: !listing.entry.parentsVisible }}
action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
size={24}
frontend/src/components/views/Graph.svelte
+10 -10
View File
@@ -259,7 +259,7 @@
<!-- Click target debug visualizations -->
{#if $nodeGraph.clickTargets}
<div class="click-targets" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<div class="click-targets" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<svg>
{#each $nodeGraph.clickTargets.nodeClickTargets as pathString}
<path class="node" d={pathString} />
@@ -283,14 +283,14 @@
{/if}
<!-- Thick vertical layer connection wires -->
<div class="wires" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<div class="wires" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<svg>
{#each $nodeGraph.wires.values() as map}
{#each map.values() as { pathString, dataType, thick, dashed }}
{#if thick}
<path
d={pathString}
style:--data-line-width={"8px"}
style:--data-line-width="8px"
style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
style:--data-dasharray={`3,${dashed ? 2 : 0}`}
@@ -302,7 +302,7 @@
</div>
<!-- Import and Export connectors -->
<div class="imports-and-exports" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<div class="imports-and-exports" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
{#if $nodeGraph.updateImportsExports}
{#each $nodeGraph.updateImportsExports.imports as frontendOutput, index}
{#if frontendOutput}
@@ -352,7 +352,7 @@
{#if (hoveringImportIndex === index || editingNameImportIndex === index) && $nodeGraph.updateImportsExports.addImportExport}
<IconButton
size={16}
icon={"Remove"}
icon="Remove"
class="remove-button-import"
data-index={index}
data-import-text-edge
@@ -411,7 +411,7 @@
{/if}
<IconButton
size={16}
icon={"Remove"}
icon="Remove"
class="remove-button-export"
data-index={index}
data-export-text-edge
@@ -459,7 +459,7 @@
style:--offset-left={($nodeGraph.updateImportsExports.exportPosition.x - 12) / 24}
style:--offset-top={($nodeGraph.updateImportsExports.exportPosition.y - 12) / 24 + $nodeGraph.updateImportsExports.exports.length}
>
<IconButton size={24} icon={"Add"} action={() => editor.handle.addSecondaryExport()} />
<IconButton size={24} icon="Add" action={() => editor.handle.addSecondaryExport()} />
</div>
{/if}
@@ -482,7 +482,7 @@
</div>
<!-- Layers and nodes -->
<div class="layers-and-nodes" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<div class="layers-and-nodes" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<!-- Layers -->
{#each Array.from($nodeGraph.nodes)
.filter(([nodeId, node]) => node.isLayer && $nodeGraph.visibleNodes.has(nodeId))
@@ -589,7 +589,7 @@
</div>
<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
<IconButton
class={"visibility"}
class="visibility"
data-visibility-button
size={24}
icon={node.visible ? "EyeVisible" : "EyeHidden"}
@@ -618,7 +618,7 @@
{#if !thick}
<path
d={pathString}
style:--data-line-width={"2px"}
style:--data-line-width="2px"
style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
style:--data-dasharray={`3,${dashed ? 2 : 0}`}
frontend/src/components/widgets/WidgetSection.svelte
+4 -4
View File
@@ -35,17 +35,17 @@
editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
e?.stopPropagation();
}}
class={"show-only-on-hover"}
class="show-only-on-hover"
/>
<IconButton
icon={"Trash"}
tooltip={"Delete this node from the layer chain"}
icon="Trash"
tooltip="Delete this node from the layer chain"
size={24}
action={(e) => {
editor.handle.deleteNode(widgetData.id);
e?.stopPropagation();
}}
class={"show-only-on-hover"}
class="show-only-on-hover"
/>
<IconButton
icon={widgetData.visible ? "EyeVisible" : "EyeHidden"}
frontend/src/components/widgets/WidgetTable.svelte
+11 -9
View File
@@ -9,15 +9,17 @@
</script>
<table>
{#each widgetData.tableWidgets as row}
<tr>
{#each row as cell}
<td>
<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
</td>
{/each}
</tr>
{/each}
<tbody>
{#each widgetData.tableWidgets as row}
<tr>
{#each row as cell}
<td>
<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<style lang="scss">
frontend/src/components/widgets/inputs/CurveInput.svelte
+1 -1
View File
@@ -188,7 +188,7 @@
}
</script>
<LayoutRow class={"curve-input"} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
<LayoutRow class="curve-input" classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
{#each { length: GRID_SIZE - 1 } as _, i}
<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />
frontend/src/components/widgets/inputs/FieldInput.svelte
+3 -5
View File
@@ -32,9 +32,7 @@
let id = String(Math.random()).substring(2);
let macKeyboardLayout = platformIsMac();
$: inputValue = value;
$: dispatch("value", inputValue);
$: dispatch("value", value);
// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
export function selectAllText(currentText: string) {
@@ -85,7 +83,7 @@
{disabled}
{placeholder}
bind:this={inputOrTextarea}
bind:value={inputValue}
bind:value
on:focus={() => dispatch("textFocused")}
on:blur={() => dispatch("textChanged")}
on:change={() => dispatch("textChanged")}
@@ -104,7 +102,7 @@
{spellcheck}
{disabled}
bind:this={inputOrTextarea}
bind:value={inputValue}
bind:value
on:focus={() => dispatch("textFocused")}
on:blur={() => dispatch("textChanged")}
on:change={() => dispatch("textChanged")}
frontend/src/components/widgets/inputs/NumberInput.svelte
+1 -1
View File
@@ -640,7 +640,7 @@
</script>
<FieldInput
class={"number-input"}
class="number-input"
classes={{
increment: mode === "Increment",
range: mode === "Range",
frontend/src/components/widgets/labels/UserInputLabel.svelte
+1 -1
View File
@@ -39,7 +39,7 @@
export let requiresLock = false;
export let textOnly = false;
$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage($fullscreen.keyboardLockApiSupported);
$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
frontend/src/components/window/status-bar/StatusBar.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
<LayoutRow class="hint-groups">
{#each hintData as hintGroup, index (hintGroup)}
{#if index !== 0}
<Separator type={"Section"} />
<Separator type="Section" />
{/if}
{#each hintGroup as hint (hint)}
{#if hint.plus}
frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
+2 -2
View File
@@ -12,13 +12,13 @@
</script>
<LayoutRow class="window-button linux" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon={"WindowButtonWinMinimize"} />
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip={maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon={"WindowButtonWinClose"} />
<IconLabel icon="WindowButtonWinClose" />
</LayoutRow>
<style lang="scss" global>
frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+2 -2
View File
@@ -12,13 +12,13 @@
</script>
<LayoutRow class="window-button windows" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon={"WindowButtonWinMinimize"} />
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button windows" tooltip={maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button windows" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon={"WindowButtonWinClose"} />
<IconLabel icon="WindowButtonWinClose" />
</LayoutRow>
<style lang="scss" global>
frontend/src/components/window/workspace/Panel.svelte
+28 -26
View File
@@ -160,32 +160,34 @@
</LayoutRow>
<LayoutRow class="actions">
<table>
<tr>
<td>
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
</td>
</tr>
<tr>
<td>
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
</td>
</tr>
<tbody>
<tr>
<td>
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
</td>
</tr>
<tr>
<td>
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
</td>
</tr>
</tbody>
</table>
</LayoutRow>
</LayoutCol>