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

Hide the left border notch in layers when a wire isn't entering from the layer's left

Browse source
This commit is contained in:
Keavon Chambers 2024-11-03 15:33:29 -08:00
parent 35f7cfac80
commit 12ca06035c
6 changed files with 38 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -231,7 +231,7 @@
return borderMask(boxes, nodeWidth, nodeHeight);
}
function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number): string {
function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number, hasLeftInputWire: boolean): string {
const NODE_HEIGHT = 2 * 24;
const THUMBNAIL_WIDTH = 72 + 8 * 2;
const FUDGE_HEIGHT_BEYOND_LAYER_HEIGHT = 2;
@ -241,7 +241,7 @@
const boxes: { x: number; y: number; width: number; height: number }[] = [];
// Left input
if (nodeChainAreaLeftExtension > 0) {
if (hasLeftInputWire && nodeChainAreaLeftExtension > 0) {
boxes.push({ x: -8, y: 16, width: 16, height: 16 });
}
@ -461,6 +461,7 @@
{@const stackDataInput = node.exposedInputs[0]}
{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
{@const hasLeftInputWire = $nodeGraph.hasLeftInputWire.get(node.id) || false}
{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
<div
class="layer"
@ -576,7 +577,7 @@
<defs>
<clipPath id={clipPathId}>
<!-- Keep this equation in sync with the equivalent one in the CSS rule for `.layer { width: ... }` below -->
<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0)} />
<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0, hasLeftInputWire)} />
</clipPath>
</defs>
</svg>

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

@ -33,6 +33,7 @@ export function createNodeGraphState(editor: Editor) {
contextMenuInformation: undefined as ContextMenuInformation | undefined,
layerWidths: new Map<bigint, number>(),
chainWidths: new Map<bigint, number>(),
hasLeftInputWire: new Map<bigint, boolean>(),
imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
nodes: new Map<bigint, FrontendNode>(),
@ -92,6 +93,7 @@ export function createNodeGraphState(editor: Editor) {
update((state) => {
state.layerWidths = updateLayerWidths.layerWidths;
state.chainWidths = updateLayerWidths.chainWidths;
state.hasLeftInputWire = updateLayerWidths.hasLeftInputWire;
return state;
});
});

3
frontend/src/wasm-communication/messages.ts
View file

@ -69,12 +69,15 @@ export class UpdateInSelectedNetwork extends JsMessage {
const LayerWidths = Transform(({ obj }) => obj.layerWidths);
const ChainWidths = Transform(({ obj }) => obj.chainWidths);
const HasLeftInputWire = Transform(({ obj }) => obj.hasLeftInputWire);
export class UpdateLayerWidths extends JsMessage {
@LayerWidths
readonly layerWidths!: Map<bigint, number>;
@ChainWidths
readonly chainWidths!: Map<bigint, number>;
@HasLeftInputWire
readonly hasLeftInputWire!: Map<bigint, boolean>;
}
export class UpdateNodeGraph extends JsMessage {