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

Node graph improvements (#855)

Browse Source 
* Selecting multiple nodes

* Improve logs

* Log bad types in dyn any

* Add (broken) node links

* New topological sort

* Fix reorder ids function

* Input and output node

* Add nodes that operate on images

* Fixups

* Show node parameters together with layer properties

* New nodes don't crash editor

* Fix tests

* Node positions backend

* Generate node graph on value change

* Add expose input message

* Fix tests

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-11-17 23:36:23 +00:00
committed by GitHub
parent 5fe7aba85d
commit 6cd0dbdcd0
23 changed files with 734 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/panels/NodeGraph.vue
View File

@@ -35,8 +35,8 @@
class="node"
:class="{ selected: selected.includes(node.id) }"
:style="{
'--offset-left': 8 + Number(node.id < 9n ? node.id : node.id - 9n) * 7,
'--offset-top': 4 + Number(node.id < 9n ? node.id : node.id - 9n) * 2,
'--offset-left': node.position?.x || 0,
'--offset-top': node.position?.y || 0,
'--data-color': 'var(--color-data-raster)',
'--data-color-dim': 'var(--color-data-raster-dim)',
}"
@@ -438,11 +438,17 @@ export default defineComponent({
const nodeId = node?.getAttribute("data-node") || undefined;
if (nodeId) {
const id = BigInt(nodeId);
this.editor.instance.selectNodes(new BigUint64Array([id]));
this.selected = [id];
if (e.shiftKey || e.ctrlKey) {
if (this.selected.includes(id)) this.selected.splice(this.selected.lastIndexOf(id), 1);
else this.selected.push(id);
} else {
this.selected = [id];
}
this.editor.instance.selectNodes(new BigUint64Array(this.selected));
} else {
this.editor.instance.selectNodes(new BigUint64Array([]));
this.selected = [];
this.editor.instance.selectNodes(new BigUint64Array(this.selected));
const graphDiv: HTMLDivElement | undefined = (this.$refs.graph as typeof LayoutCol | undefined)?.$el;
graphDiv?.setPointerCapture(e.pointerId);
@@ -483,9 +489,9 @@ export default defineComponent({
const inputNodeConnectionIndex = inputNodeConnectionIndexSearch > -1 ? inputNodeConnectionIndexSearch : undefined;
if (inputNodeConnectionIndex !== undefined) {
const oneBasedIndex = inputNodeConnectionIndex + 1;
// const oneBasedIndex = inputNodeConnectionIndex + 1;
this.editor.instance.connectNodesByLink(BigInt(outputConnectedNodeID), BigInt(inputConnectedNodeID), oneBasedIndex);
this.editor.instance.connectNodesByLink(BigInt(outputConnectedNodeID), BigInt(inputConnectedNodeID), inputNodeConnectionIndex);
}
}
}

4
frontend/src/components/widgets/groups/WidgetSection.vue
View File

@@ -88,11 +88,11 @@
.widget-row {
&:first-child {
margin-top: -1px;
margin-top: calc(4px - 1px);
}
&:last-child {
margin-bottom: -1px;
margin-bottom: calc(4px - 1px);
}
> .text-label:first-of-type {

19
frontend/src/wasm-communication/messages.ts
View File

@@ -12,6 +12,11 @@ export class JsMessage {
static readonly jsMessageMarker = true;
}
const TupleToVec2 = Transform(({ value }: { value: [number, number] | undefined }) => (value === undefined ? undefined : { x: value[0], y: value[1] }));
const BigIntTupleToVec2 = Transform(({ value }: { value: [bigint, bigint] | undefined }) => (value === undefined ? undefined : { x: Number(value[0]), y: Number(value[1]) }));
export type XY = { x: number; y: number };
// ============================================================================
// Add additional classes below to replicate Rust's `FrontendMessage`s and data structures.
//
@@ -64,10 +69,19 @@ export class FrontendDocumentDetails extends DocumentDetails {
readonly id!: bigint;
}
export type DataType = "Raster" | "Color" | "Image" | "F32";
export class FrontendNode {
readonly id!: bigint;
readonly displayName!: string;
readonly exposedInputs!: DataType[];
readonly outputs!: DataType[];
@TupleToVec2
readonly position!: XY | undefined;
}
export class FrontendNodeLink {
@@ -403,11 +417,6 @@ export class UpdateDocumentArtboards extends JsMessage {
readonly svg!: string;
}
const TupleToVec2 = Transform(({ value }: { value: [number, number] | undefined }) => (value === undefined ? undefined : { x: value[0], y: value[1] }));
const BigIntTupleToVec2 = Transform(({ value }: { value: [bigint, bigint] | undefined }) => (value === undefined ? undefined : { x: Number(value[0]), y: Number(value[1]) }));
export type XY = { x: number; y: number };
export class UpdateDocumentScrollbars extends JsMessage {
@TupleToVec2
readonly position!: XY;