mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-08-04 13:30:48 +00:00
Improve the node graph with revamped top bar and disabling tools when graph is open (#2093)
* Add "Fade Artwork" slider and disable tools when graph is open * Add navigation and layer/node management buttons to graph top bar * Reduce code duplication
This commit is contained in:
Keavon Chambers
GitHub
parent
12ca06035c
commit
f1b0d8fa87
19 changed files with 480 additions and 285 deletions
|
|
@ -504,7 +504,7 @@
|
|||
<canvas class="overlays" width={canvasWidthRoundedToEven} height={canvasHeightRoundedToEven} style:width={canvasWidthCSS} style:height={canvasHeightCSS} data-overlays-canvas>
|
||||
</canvas>
|
||||
</div>
|
||||
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
|
||||
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
|
||||
<Graph />
|
||||
</div>
|
||||
</LayoutCol>
|
||||
|
|
|
|||
|
|
@ -989,7 +989,7 @@
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
background: var(--color-3-darkgray);
|
||||
background: rgba(var(--color-4-dimgray-rgb), 0.33);
|
||||
color: var(--color-a-softgray);
|
||||
|
||||
.icon-label {
|
||||
|
|
@ -1041,10 +1041,10 @@
|
|||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(var(--color-5-dullgray-rgb), 0.5);
|
||||
background: rgba(var(--color-5-dullgray-rgb), 0.33);
|
||||
|
||||
&.in-selected-network {
|
||||
background: rgba(var(--color-6-lowergray-rgb), 0.5);
|
||||
background: rgba(var(--color-6-lowergray-rgb), 0.33);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,18 +27,16 @@
|
|||
<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
|
||||
<div class="expand-arrow" />
|
||||
<TextLabel bold={true}>{widgetData.name}</TextLabel>
|
||||
{#if widgetData.pinned}
|
||||
<IconButton
|
||||
icon={"CheckboxChecked"}
|
||||
tooltip={"Unpin this node so it's no longer shown here without a selection"}
|
||||
size={24}
|
||||
action={(e) => {
|
||||
editor.handle.unpinNode(widgetData.id);
|
||||
e?.stopPropagation();
|
||||
}}
|
||||
class={"show-only-on-hover"}
|
||||
/>
|
||||
{/if}
|
||||
<IconButton
|
||||
icon={widgetData.pinned ? "CheckboxChecked" : "CheckboxUnchecked"}
|
||||
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"}
|
||||
size={24}
|
||||
action={(e) => {
|
||||
editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
|
||||
e?.stopPropagation();
|
||||
}}
|
||||
class={"show-only-on-hover"}
|
||||
/>
|
||||
<IconButton
|
||||
icon={"Trash"}
|
||||
tooltip={"Delete this node from the layer chain"}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@ import {
|
|||
UpdateToolShelfLayout,
|
||||
UpdateWorkingColorsLayout,
|
||||
UpdateNodeGraphBarLayout,
|
||||
TriggerGraphViewOverlay,
|
||||
UpdateGraphViewOverlay,
|
||||
TriggerDelayedZoomCanvasToFitAll,
|
||||
UpdateGraphFadeArtwork,
|
||||
} from "@graphite/wasm-communication/messages";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||
|
|
@ -27,10 +28,17 @@ export function createDocumentState(editor: Editor) {
|
|||
nodeGraphBarLayout: defaultWidgetLayout(),
|
||||
// Graph view overlay
|
||||
graphViewOverlayOpen: false,
|
||||
fadeArtwork: 100,
|
||||
});
|
||||
const { subscribe, update } = state;
|
||||
|
||||
// Update layouts
|
||||
editor.subscriptions.subscribeJsMessage(UpdateGraphFadeArtwork, (updateGraphFadeArtwork) => {
|
||||
update((state) => {
|
||||
state.fadeArtwork = updateGraphFadeArtwork.percentage;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
|
||||
await tick();
|
||||
|
||||
|
|
@ -84,9 +92,9 @@ export function createDocumentState(editor: Editor) {
|
|||
});
|
||||
|
||||
// Show or hide the graph view overlay
|
||||
editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
|
||||
editor.subscriptions.subscribeJsMessage(UpdateGraphViewOverlay, (updateGraphViewOverlay) => {
|
||||
update((state) => {
|
||||
state.graphViewOverlayOpen = triggerGraphViewOverlay.open;
|
||||
state.graphViewOverlayOpen = updateGraphViewOverlay.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -742,6 +742,14 @@ const mouseCursorIconCSSNames = {
|
|||
export type MouseCursor = keyof typeof mouseCursorIconCSSNames;
|
||||
export type MouseCursorIcon = (typeof mouseCursorIconCSSNames)[MouseCursor];
|
||||
|
||||
export class UpdateGraphViewOverlay extends JsMessage {
|
||||
open!: boolean;
|
||||
}
|
||||
|
||||
export class UpdateGraphFadeArtwork extends JsMessage {
|
||||
readonly percentage!: number;
|
||||
}
|
||||
|
||||
export class UpdateMouseCursor extends JsMessage {
|
||||
@Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "alias")
|
||||
readonly cursor!: MouseCursorIcon;
|
||||
|
|
@ -888,10 +896,6 @@ export class TriggerFontLoad extends JsMessage {
|
|||
isDefault!: boolean;
|
||||
}
|
||||
|
||||
export class TriggerGraphViewOverlay extends JsMessage {
|
||||
open!: boolean;
|
||||
}
|
||||
|
||||
export class TriggerVisitLink extends JsMessage {
|
||||
url!: string;
|
||||
}
|
||||
|
|
@ -1561,12 +1565,11 @@ export const messageMakers: Record<string, MessageMaker> = {
|
|||
TriggerAboutGraphiteLocalizedCommitDate,
|
||||
TriggerCopyToClipboardBlobUrl,
|
||||
TriggerDelayedZoomCanvasToFitAll,
|
||||
TriggerFetchAndOpenDocument,
|
||||
TriggerDownloadBlobUrl,
|
||||
TriggerDownloadImage,
|
||||
TriggerDownloadTextFile,
|
||||
TriggerFetchAndOpenDocument,
|
||||
TriggerFontLoad,
|
||||
TriggerGraphViewOverlay,
|
||||
TriggerImport,
|
||||
TriggerIndexedDbRemoveDocument,
|
||||
TriggerIndexedDbWriteDocument,
|
||||
|
|
@ -1584,9 +1587,6 @@ export const messageMakers: Record<string, MessageMaker> = {
|
|||
UpdateBox,
|
||||
UpdateClickTargets,
|
||||
UpdateContextMenuInformation,
|
||||
UpdateInSelectedNetwork,
|
||||
UpdateImportsExports,
|
||||
UpdateLayerWidths,
|
||||
UpdateDialogButtons,
|
||||
UpdateDialogColumn1,
|
||||
UpdateDialogColumn2,
|
||||
|
|
@ -1598,8 +1598,13 @@ export const messageMakers: Record<string, MessageMaker> = {
|
|||
UpdateDocumentRulers,
|
||||
UpdateDocumentScrollbars,
|
||||
UpdateEyedropperSamplingState,
|
||||
UpdateGraphFadeArtwork,
|
||||
UpdateGraphViewOverlay,
|
||||
UpdateImportsExports,
|
||||
UpdateInputHints,
|
||||
UpdateInSelectedNetwork,
|
||||
UpdateLayersPanelOptionsLayout,
|
||||
UpdateLayerWidths,
|
||||
UpdateMenuBarLayout,
|
||||
UpdateMouseCursor,
|
||||
UpdateNodeGraph,
|
||||
|
|
@ -1611,8 +1616,8 @@ export const messageMakers: Record<string, MessageMaker> = {
|
|||
UpdatePropertyPanelSectionsLayout,
|
||||
UpdateToolOptionsLayout,
|
||||
UpdateToolShelfLayout,
|
||||
UpdateWorkingColorsLayout,
|
||||
UpdateWirePathInProgress,
|
||||
UpdateWorkingColorsLayout,
|
||||
UpdateZoomWithScroll,
|
||||
} as const;
|
||||
export type JsMessageType = keyof typeof messageMakers;
|
||||
|
|
|
|||
|
|
@ -577,8 +577,7 @@ impl EditorHandle {
|
|||
let message = NodeGraphMessage::CreateNodeFromContextMenu {
|
||||
node_id: Some(id),
|
||||
node_type,
|
||||
x: x / 24,
|
||||
y: y / 24,
|
||||
xy: Some((x / 24, y / 24)),
|
||||
};
|
||||
self.dispatch(message);
|
||||
}
|
||||
|
|
@ -652,10 +651,10 @@ impl EditorHandle {
|
|||
self.dispatch(message);
|
||||
}
|
||||
|
||||
/// Unpin a node given its node ID
|
||||
#[wasm_bindgen(js_name = unpinNode)]
|
||||
pub fn unpin_node(&self, id: u64) {
|
||||
self.dispatch(DocumentMessage::SetNodePinned { node_id: NodeId(id), pinned: false });
|
||||
/// Pin or unpin a node given its node ID
|
||||
#[wasm_bindgen(js_name = setNodePinned)]
|
||||
pub fn set_node_pinned(&self, id: u64, pinned: bool) {
|
||||
self.dispatch(DocumentMessage::SetNodePinned { node_id: NodeId(id), pinned });
|
||||
}
|
||||
|
||||
/// Delete a layer or node given its node ID
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue