jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add secondary inputs to nodes UI (#863) 

* Add secondary inputs to UI

* Fix add node

* Dragging nodes

* Add ParameterExposeButton component

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube 2022-11-22 17:36:19 +00:00 committed by Keavon Chambers
parent d46658e189
commit 0a78ebda25
15 changed files with 574 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/src/messages/layout/layout_message_handler.rs
View File

@ -154,6 +154,10 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
let callback_message = (optional_input.on_update.callback)(optional_input);
responses.push_back(callback_message);
}
Widget::ParameterExposeButton(parameter_expose_button) => {
let callback_message = (parameter_expose_button.on_update.callback)(parameter_expose_button);
responses.push_back(callback_message);
}
Widget::PivotAssist(pivot_assist) => {
let update_value = value.as_str().expect("RadioInput update was not of type: u64");
pivot_assist.position = update_value.into();

2
editor/src/messages/layout/utility_types/layout_widget.rs
View File

@ -67,6 +67,7 @@ impl Layout {
Widget::LayerReferenceInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::NumberInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::OptionalInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::ParameterExposeButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::PopoverButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::TextButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::IconLabel(_)
@ -294,6 +295,7 @@ pub enum Widget {
LayerReferenceInput(LayerReferenceInput),
NumberInput(NumberInput),
OptionalInput(OptionalInput),
ParameterExposeButton(ParameterExposeButton),
PivotAssist(PivotAssist),
PopoverButton(PopoverButton),
RadioInput(RadioInput),

22
editor/src/messages/layout/utility_types/widgets/button_widgets.rs
View File

@ -1,5 +1,5 @@
use crate::messages::input_mapper::utility_types::misc::ActionKeys;
use crate::messages::layout::utility_types::layout_widget::WidgetCallback;
use crate::messages::{input_mapper::utility_types::misc::ActionKeys, portfolio::document::node_graph::FrontendGraphDataType};
use derivative::*;
use serde::{Deserialize, Serialize};
@ -45,6 +45,26 @@ pub struct PopoverButton {
pub tooltip_shortcut: Option<ActionKeys>,
}
#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
#[derivative(Debug, PartialEq)]
#[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]
pub struct ParameterExposeButton {
pub exposed: bool,
#[serde(rename = "dataType")]
pub data_type: FrontendGraphDataType,
pub tooltip: String,
#[serde(skip)]
pub tooltip_shortcut: Option<ActionKeys>,
// Callbacks
#[serde(skip)]
#[derivative(Debug = "ignore", PartialEq = "ignore")]
pub on_update: WidgetCallback<ParameterExposeButton>,
}
#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
#[derivative(Debug, PartialEq)]
#[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]

47
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
View File

@ -8,9 +8,26 @@ use graphene::layers::nodegraph_layer::NodeGraphFrameLayer;
mod document_node_types;
mod node_properties;
#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
pub enum DataType {
#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
pub enum FrontendGraphDataType {
#[default]
#[serde(rename = "general")]
General,
#[serde(rename = "raster")]
Raster,
#[serde(rename = "color")]
Color,
#[serde(rename = "vector")]
Vector,
#[serde(rename = "number")]
Number,
}
#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
pub struct NodeGraphInput {
#[serde(rename = "dataType")]
data_type: FrontendGraphDataType,
name: String,
}
#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
@ -19,8 +36,8 @@ pub struct FrontendNode {
#[serde(rename = "displayName")]
pub display_name: String,
#[serde(rename = "exposedInputs")]
pub exposed_inputs: Vec<DataType>,
pub outputs: Vec<DataType>,
pub exposed_inputs: Vec<NodeGraphInput>,
pub outputs: Vec<FrontendGraphDataType>,
pub position: (i32, i32),
}
@ -98,11 +115,24 @@ impl NodeGraphMessageHandler {
let mut nodes = Vec::new();
for (id, node) in &network.nodes {
let Some(node_type) = document_node_types::resolve_document_node_type(&node.name) else{
warn!("Node '{}' does not exist in library", node.name);
continue
};
nodes.push(FrontendNode {
id: *id,
display_name: node.name.clone(),
exposed_inputs: node.inputs.iter().filter(|input| input.is_exposed()).map(|_| DataType::Raster).collect(),
outputs: vec![DataType::Raster],
exposed_inputs: node
.inputs
.iter()
.zip(node_type.inputs)
.filter(|(input, _)| input.is_exposed())
.map(|(_, input_type)| NodeGraphInput {
data_type: input_type.data_type,
name: input_type.name.to_string(),
})
.collect(),
outputs: node_type.outputs.to_vec(),
position: node.metadata.position,
})
}
@ -160,7 +190,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
return;
};
let num_inputs = document_node_type.default_inputs.len();
let num_inputs = document_node_type.inputs.len();
let inner_network = NodeNetwork {
inputs: (0..num_inputs).map(|_| 0).collect(),
@ -182,7 +212,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
node_id,
DocumentNode {
name: node_type.clone(),
inputs: document_node_type.default_inputs.to_vec(),
inputs: document_node_type.inputs.iter().map(|input| input.default.clone()).collect(),
// TODO: Allow inserting nodes that contain other nodes.
implementation: DocumentNodeImplementation::Network(inner_network),
metadata: graph_craft::document::DocumentNodeMetadata {
@ -228,6 +258,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
node.metadata.position.1 += displacement_y;
}
}
Self::send_graph(network, responses);
}
NodeGraphMessage::OpenNodeGraph { layer_path } => {
if let Some(_old_layer_path) = self.layer_path.replace(layer_path) {

175
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs
View File

@ -1,86 +1,175 @@
use std::borrow::Cow;
use super::{FrontendGraphDataType, FrontendNodeType};
use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetHolder};
use crate::messages::layout::utility_types::widgets::label_widgets::TextLabel;
use graph_craft::document::value::TaggedValue;
use graph_craft::document::NodeInput;
use graph_craft::document::{DocumentNode, NodeId, NodeInput};
use graph_craft::proto::{NodeIdentifier, Type};
use graphene_std::raster::Image;
use super::FrontendNodeType;
use std::borrow::Cow;
pub struct DocumentInputType {
pub name: &'static str,
pub data_type: FrontendGraphDataType,
pub default: NodeInput,
}
pub struct DocumentNodeType {
pub name: &'static str,
pub identifier: NodeIdentifier,
pub default_inputs: &'static [NodeInput],
pub inputs: &'static [DocumentInputType],
pub outputs: &'static [FrontendGraphDataType],
pub properties: fn(&DocumentNode, NodeId) -> Vec<LayoutGroup>,
}
// TODO: Dynamic node library
static DOCUMENT_NODE_TYPES: [DocumentNodeType; 5] = [
static DOCUMENT_NODE_TYPES: [DocumentNodeType; 7] = [
DocumentNodeType {
name: "Identity",
identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
default_inputs: &[NodeInput::Node(0)],
inputs: &[DocumentInputType {
name: "In",
data_type: FrontendGraphDataType::General,
default: NodeInput::Node(0),
}],
outputs: &[FrontendGraphDataType::General],
properties: |_document_node, _node_id| {
vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("The identity node simply returns the input"),
..Default::default()
}))],
}]
},
},
DocumentNodeType {
name: "Input",
identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
inputs: &[],
outputs: &[FrontendGraphDataType::Raster],
properties: |_document_node, _node_id| {
vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("The input to the graph is the bitmap under the frame"),
..Default::default()
}))],
}]
},
},
DocumentNodeType {
name: "Output",
identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
inputs: &[DocumentInputType {
name: "In",
data_type: FrontendGraphDataType::Raster,
default: NodeInput::Value {
tagged_value: TaggedValue::Image(Image::empty()),
exposed: true,
},
}],
outputs: &[],
properties: |_document_node, _node_id| {
vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("The output to the graph is rendered in the frame"),
..Default::default()
}))],
}]
},
},
DocumentNodeType {
name: "Grayscale Image",
identifier: NodeIdentifier::new("graphene_std::raster::GrayscaleImageNode", &[]),
default_inputs: &[NodeInput::Value {
tagged_value: TaggedValue::Image(Image {
width: 0,
height: 0,
data: Vec::new(),
}),
exposed: true,
inputs: &[DocumentInputType {
name: "Image",
data_type: FrontendGraphDataType::Raster,
default: NodeInput::Value {
tagged_value: TaggedValue::Image(Image::empty()),
exposed: true,
},
}],
outputs: &[FrontendGraphDataType::Raster],
properties: |_document_node, _node_id| {
vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("The output to the graph is rendered in the frame"),
..Default::default()
}))],
}]
},
},
DocumentNodeType {
name: "Brighten Image",
identifier: NodeIdentifier::new("graphene_std::raster::BrightenImageNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
default_inputs: &[
NodeInput::Value {
tagged_value: TaggedValue::Image(Image {
width: 0,
height: 0,
data: Vec::new(),
}),
exposed: true,
inputs: &[
DocumentInputType {
name: "Image",
data_type: FrontendGraphDataType::Raster,
default: NodeInput::Value {
tagged_value: TaggedValue::Image(Image::empty()),
exposed: true,
},
},
NodeInput::Value {
tagged_value: TaggedValue::F32(10.),
exposed: false,
DocumentInputType {
name: "Amount",
data_type: FrontendGraphDataType::Number,
default: NodeInput::Value {
tagged_value: TaggedValue::F32(10.),
exposed: false,
},
},
],
outputs: &[FrontendGraphDataType::Raster],
properties: super::node_properties::brighten_image_properties,
},
DocumentNodeType {
name: "Hue Shift Image",
identifier: NodeIdentifier::new("graphene_std::raster::HueShiftImage", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
default_inputs: &[
NodeInput::Value {
tagged_value: TaggedValue::Image(Image {
width: 0,
height: 0,
data: Vec::new(),
}),
exposed: true,
inputs: &[
DocumentInputType {
name: "Image",
data_type: FrontendGraphDataType::Raster,
default: NodeInput::Value {
tagged_value: TaggedValue::Image(Image::empty()),
exposed: true,
},
},
NodeInput::Value {
tagged_value: TaggedValue::F32(50.),
exposed: false,
DocumentInputType {
name: "Amount",
data_type: FrontendGraphDataType::Number,
default: NodeInput::Value {
tagged_value: TaggedValue::F32(10.),
exposed: false,
},
},
],
outputs: &[FrontendGraphDataType::Raster],
properties: super::node_properties::hue_shift_image_properties,
},
DocumentNodeType {
name: "Add",
identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("u32")), Type::Concrete(Cow::Borrowed("u32"))]),
default_inputs: &[
NodeInput::Value {
tagged_value: TaggedValue::U32(0),
exposed: false,
identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
inputs: &[
DocumentInputType {
name: "Left",
data_type: FrontendGraphDataType::Number,
default: NodeInput::Value {
tagged_value: TaggedValue::F32(0.),
exposed: true,
},
},
NodeInput::Value {
tagged_value: TaggedValue::U32(0),
exposed: false,
DocumentInputType {
name: "Right",
data_type: FrontendGraphDataType::Number,
default: NodeInput::Value {
tagged_value: TaggedValue::F32(0.),
exposed: true,
},
},
],
outputs: &[FrontendGraphDataType::Number],
properties: super::node_properties::add_properties,
},
];

251
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
View File

@ -1,111 +1,164 @@
use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetCallback, WidgetHolder};
use crate::messages::layout::utility_types::widgets::button_widgets::ParameterExposeButton;
use crate::messages::layout::utility_types::widgets::input_widgets::{NumberInput, NumberInputMode};
use crate::messages::layout::utility_types::widgets::label_widgets::{Separator, SeparatorDirection, SeparatorType, TextLabel};
use crate::messages::prelude::NodeGraphMessage;
use graph_craft::document::value::TaggedValue;
use graph_craft::document::{DocumentNode, DocumentNodeImplementation, NodeId, NodeInput};
use graph_craft::document::{DocumentNode, NodeId, NodeInput};
use super::FrontendGraphDataType;
pub fn hue_shift_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
vec![LayoutGroup::Row {
widgets: vec![
WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
exposed: true,
data_type: FrontendGraphDataType::Number,
tooltip: "Expose input parameter in node graph".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::TextLabel(TextLabel {
value: "Shift Degrees".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some({
let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
panic!("Hue rotate should be f32")
};
x as f64
}),
unit: "°".into(),
mode: NumberInputMode::Range,
range_min: Some(-180.),
range_max: Some(180.),
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
NodeGraphMessage::SetInputValue {
node: node_id,
input_index: 1,
value: TaggedValue::F32(number_input.value.unwrap() as f32),
}
.into()
}),
..NumberInput::default()
})),
],
}]
}
pub fn brighten_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
vec![LayoutGroup::Row {
widgets: vec![
WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
exposed: true,
data_type: FrontendGraphDataType::Number,
tooltip: "Expose input parameter in node graph".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::TextLabel(TextLabel {
value: "Brighten Amount".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some({
let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
panic!("Brighten amount should be f32")
};
x as f64
}),
mode: NumberInputMode::Range,
range_min: Some(-255.),
range_max: Some(255.),
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
NodeGraphMessage::SetInputValue {
node: node_id,
input_index: 1,
value: TaggedValue::F32(number_input.value.unwrap() as f32),
}
.into()
}),
..NumberInput::default()
})),
],
}]
}
pub fn add_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
let operand = |name: &str, index| LayoutGroup::Row {
widgets: vec![
WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
exposed: true,
data_type: FrontendGraphDataType::Number,
tooltip: "Expose input parameter in node graph".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::TextLabel(TextLabel {
value: name.into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some({
let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[index] else {
panic!("Add input should be f32")
};
x as f64
}),
mode: NumberInputMode::Increment,
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
NodeGraphMessage::SetInputValue {
node: node_id,
input_index: index,
value: TaggedValue::F32(number_input.value.unwrap() as f32),
}
.into()
}),
..NumberInput::default()
})),
],
};
vec![operand("Left", 0), operand("Right", 1)]
}
fn unknown_node_properties(document_node: &DocumentNode) -> Vec<LayoutGroup> {
vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("Node '{}' cannot be found in library", document_node.name),
..Default::default()
}))],
}]
}
pub fn generate_node_properties(document_node: &DocumentNode, node_id: NodeId) -> LayoutGroup {
let name = document_node.name.clone();
let layout = match &document_node.implementation {
DocumentNodeImplementation::Network(_) => match document_node.name.as_str() {
"Hue Shift Image" => vec![LayoutGroup::Row {
widgets: vec![
WidgetHolder::new(Widget::TextLabel(TextLabel {
value: "Shift Degrees".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some({
let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
panic!("Hue rotate should be f32")
};
x as f64
}),
unit: "°".into(),
mode: NumberInputMode::Range,
range_min: Some(-180.),
range_max: Some(180.),
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
NodeGraphMessage::SetInputValue {
node: node_id,
input_index: 1,
value: TaggedValue::F32(number_input.value.unwrap() as f32),
}
.into()
}),
..NumberInput::default()
})),
],
}],
"Brighten Image" => vec![LayoutGroup::Row {
widgets: vec![
WidgetHolder::new(Widget::TextLabel(TextLabel {
value: "Brighten Amount".into(),
..Default::default()
})),
WidgetHolder::new(Widget::Separator(Separator {
separator_type: SeparatorType::Unrelated,
direction: SeparatorDirection::Horizontal,
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some({
let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
panic!("Brighten amount should be f32")
};
x as f64
}),
mode: NumberInputMode::Range,
range_min: Some(-255.),
range_max: Some(255.),
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
NodeGraphMessage::SetInputValue {
node: node_id,
input_index: 1,
value: TaggedValue::F32(number_input.value.unwrap() as f32),
}
.into()
}),
..NumberInput::default()
})),
],
}],
_ => vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("Cannot currently display parameters for network {}", document_node.name),
..Default::default()
}))],
}],
},
DocumentNodeImplementation::Unresolved(identifier) => match identifier.name.as_ref() {
"graphene_std::raster::MapImageNode" | "graphene_core::ops::IdNode" => vec![LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("{} exposes no parameters", document_node.name),
..Default::default()
}))],
}],
unknown => {
vec![
LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: format!("TODO: {} parameters", unknown),
..Default::default()
}))],
},
LayoutGroup::Row {
widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
value: "Add in editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs".to_string(),
..Default::default()
}))],
},
]
}
},
let layout = match super::document_node_types::resolve_document_node_type(&name) {
Some(document_node_type) => (document_node_type.properties)(document_node, node_id),
None => unknown_node_properties(document_node),
};
LayoutGroup::Section { name, layout }
}

14
frontend/src/App.vue
View File

@ -41,6 +41,8 @@
--color-data-general: #c5c5c5;
--color-data-general-rgb: 197, 197, 197;
--color-data-general-dim: #767676;
--color-data-general-dim-rgb: 118, 118, 118;
--color-data-vector: #65bbe5;
--color-data-vector-rgb: 101, 187, 229;
--color-data-vector-dim: #4b778c;
@ -51,10 +53,14 @@
--color-data-raster-dim-rgb: 139, 119, 82;
--color-data-mask: #8d85c7;
--color-data-mask-rgb: 141, 133, 199;
--color-data-unused1: #d6536e;
--color-data-unused1-rgb: 214, 83, 110;
--color-data-unused2: #70a898;
--color-data-unused2-rgb: 112, 168, 152;
--color-data-number: #d6536e;
--color-data-number-rgb: 214, 83, 110;
--color-data-number-dim: #803242;
--color-data-number-dim-rgb: 128, 50, 66;
--color-data-color: #70a898;
--color-data-color-rgb: 112, 168, 152;
--color-data-color-dim: #43645b;
--color-data-color-dim-rgb: 67, 100, 91;
--color-none: white;
--color-none-repeat: no-repeat;

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

@ -35,8 +35,8 @@
class="node"
:class="{ selected: selected.includes(node.id) }"
:style="{
'--offset-left': node.position?.x || 0,
'--offset-top': node.position?.y || 0,
'--offset-left': (node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0),
'--offset-top': (node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0),
'--data-color': 'var(--color-data-raster)',
'--data-color-dim': 'var(--color-data-raster-dim)',
}"
@ -44,16 +44,43 @@
>
<div class="primary">
<div class="ports">
<div class="input port" data-port="input" data-datatype="raster">
<div
v-if="node.exposedInputs.length > 0"
class="input port"
data-port="input"
:data-datatype="node.exposedInputs[0].dataType"
:style="{ '--data-color': `var(--color-data-${node.exposedInputs[0].dataType})`, '--data-color-dim': `var(--color-data-${node.exposedInputs[0].dataType}-dim)` }"
>
<div></div>
</div>
<div class="output port" data-port="output" data-datatype="raster">
<div
v-if="node.outputs.length > 0"
class="output port"
data-port="output"
:data-datatype="node.outputs[0]"
:style="{ '--data-color': `var(--color-data-${node.outputs[0]})`, '--data-color-dim': `var(--color-data-${node.outputs[0]}-dim)` }"
>
<div></div>
</div>
</div>
<IconLabel :icon="nodeIcon(node.displayName)" />
<TextLabel>{{ node.displayName }}</TextLabel>
</div>
<div v-if="node.exposedInputs.length > 1" class="arguments">
<div v-for="(argument, index) in node.exposedInputs.slice(1)" :key="index" class="argument">
<div class="ports">
<div
class="input port"
data-port="input"
:data-datatype="argument.dataType"
:style="{ '--data-color': `var(--color-data-${argument.dataType})`, '--data-color-dim': `var(--color-data-${argument.dataType}-dim)` }"
>
<div></div>
</div>
</div>
<TextLabel>{{ argument.name }}</TextLabel>
</div>
</div>
</div>
</div>
<div
@ -284,6 +311,8 @@ export default defineComponent({
transform: { scale: 1, x: 0, y: 0 },
panning: false,
selected: [] as bigint[],
draggingNodes: undefined as { startX: number; startY: number; roundX: number; roundY: number } | undefined,
selectIfNotDragged: undefined as undefined | bigint,
linkInProgressFromConnector: undefined as HTMLDivElement | undefined,
linkInProgressToConnector: undefined as HTMLDivElement | DOMRect | undefined,
nodeLinkPaths: [] as [string, string][],
@ -324,31 +353,36 @@ export default defineComponent({
nodes: {
immediate: true,
async handler() {
await nextTick();
const containerBounds = this.$refs.nodesContainer as HTMLDivElement | undefined;
if (!containerBounds) return;
const links = this.nodeGraph.state.links;
this.nodeLinkPaths = links.flatMap((link) => {
const connectorIndex = 0;
const nodePrimaryOutput = (containerBounds.querySelector(`[data-node="${String(link.linkStart)}"] [data-port="output"]`) || undefined) as HTMLDivElement | undefined;
const nodeInputConnectors = containerBounds.querySelectorAll(`[data-node="${String(link.linkEnd)}"] [data-port="input"]`) || undefined;
const nodePrimaryInput = nodeInputConnectors?.[connectorIndex] as HTMLDivElement | undefined;
if (!nodePrimaryInput || !nodePrimaryOutput) return [];
return [this.createWirePath(nodePrimaryOutput, nodePrimaryInput.getBoundingClientRect(), false, false)];
});
await this.refreshLinks();
},
},
},
methods: {
async refreshLinks(): Promise<void> {
await nextTick();
const containerBounds = this.$refs.nodesContainer as HTMLDivElement | undefined;
if (!containerBounds) return;
const links = this.nodeGraph.state.links;
this.nodeLinkPaths = links.flatMap((link) => {
const connectorIndex = 0;
const nodePrimaryOutput = (containerBounds.querySelector(`[data-node="${String(link.linkStart)}"] [data-port="output"]`) || undefined) as HTMLDivElement | undefined;
const nodeInputConnectors = containerBounds.querySelectorAll(`[data-node="${String(link.linkEnd)}"] [data-port="input"]`) || undefined;
const nodePrimaryInput = nodeInputConnectors?.[connectorIndex] as HTMLDivElement | undefined;
if (!nodePrimaryInput || !nodePrimaryOutput) return [];
return [this.createWirePath(nodePrimaryOutput, nodePrimaryInput.getBoundingClientRect(), false, false)];
});
},
nodeIcon(nodeName: string): IconName {
const iconMap: Record<string, IconName> = {
Grayscale: "NodeColorCorrection",
"Map Image": "NodeOutput",
Output: "NodeOutput",
"Hue Shift Image": "NodeColorCorrection",
"Brighten Image": "NodeColorCorrection",
"Grayscale Image": "NodeColorCorrection",
};
return iconMap[nodeName] || "NodeNodes";
},
@ -441,8 +475,16 @@ export default defineComponent({
if (e.shiftKey || e.ctrlKey) {
if (this.selected.includes(id)) this.selected.splice(this.selected.lastIndexOf(id), 1);
else this.selected.push(id);
} else {
} else if (!this.selected.includes(id)) {
this.selected = [id];
} else {
this.selectIfNotDragged = id;
}
if (this.selected.includes(id)) {
this.draggingNodes = { startX: e.x, startY: e.y, roundX: 0, roundY: 0 };
const graphDiv: HTMLDivElement | undefined = (this.$refs.graph as typeof LayoutCol | undefined)?.$el;
graphDiv?.setPointerCapture(e.pointerId);
}
this.editor.instance.selectNodes(new BigUint64Array(this.selected));
@ -468,6 +510,14 @@ export default defineComponent({
} else {
this.linkInProgressToConnector = new DOMRect(e.x, e.y);
}
} else if (this.draggingNodes) {
const deltaX = Math.round((e.x - this.draggingNodes.startX) / this.transform.scale / this.gridSpacing);
const deltaY = Math.round((e.y - this.draggingNodes.startY) / this.transform.scale / this.gridSpacing);
if (this.draggingNodes.roundX !== deltaX || this.draggingNodes.roundY !== deltaY) {
this.draggingNodes.roundX = deltaX;
this.draggingNodes.roundY = deltaY;
this.refreshLinks();
}
}
},
pointerUp(e: PointerEvent) {
@ -494,6 +544,16 @@ export default defineComponent({
this.editor.instance.connectNodesByLink(BigInt(outputConnectedNodeID), BigInt(inputConnectedNodeID), inputNodeConnectionIndex);
}
}
} else if (this.draggingNodes) {
if (this.draggingNodes.startX === e.x || this.draggingNodes.startY === e.y) {
if (this.selectIfNotDragged) {
this.selected = [this.selectIfNotDragged];
this.editor.instance.selectNodes(new BigUint64Array(this.selected));
}
}
this.editor.instance.moveSelectedNodes(this.draggingNodes.roundX, this.draggingNodes.roundY);
this.draggingNodes = undefined;
this.selectIfNotDragged = undefined;
}
this.linkInProgressFromConnector = undefined;

3
frontend/src/components/widgets/WidgetRow.vue
View File

@ -26,6 +26,7 @@
@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
@ -104,6 +105,7 @@ import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "
import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
@ -175,6 +177,7 @@ export default defineComponent({
LayerReferenceInput,
NumberInput,
OptionalInput,
ParameterExposeButton,
PivotAssist,
PopoverButton,
RadioInput,

73
frontend/src/components/widgets/buttons/ParameterExposeButton.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<LayoutRow class="parameter-expose-button">
<button :class="{ exposed }" :style="{ '--data-type-color': dataTypeColor }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
</LayoutRow>
</template>
<style lang="scss">
.parameter-expose-button {
display: flex;
align-items: center;
flex: 0 0 auto;
button {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
&:not(.exposed) {
background: none;
border: 1px solid var(--data-type-color);
&:hover {
background: var(--color-6-lowergray);
}
}
&.exposed {
background: var(--data-type-color);
&:hover {
border: 1px solid var(--color-f-white);
}
}
}
}
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({
props: {
exposed: { type: Boolean as PropType<boolean>, required: true },
dataType: { type: String as PropType<string>, required: true },
tooltip: { type: String as PropType<string | undefined>, required: false },
// Callbacks
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
},
computed: {
dataTypeColor(): string {
// TODO: Move this function somewhere where it can be reused by other components
const colorsMap = {
general: "var(--color-data-general)",
vector: "var(--color-data-vector)",
raster: "var(--color-data-raster)",
mask: "var(--color-data-mask)",
number: "var(--color-data-number)",
color: "var(--color-data-color)",
} as const;
return colorsMap[this.dataType as keyof typeof colorsMap] || colorsMap.general;
},
},
components: { LayoutRow },
});
</script>

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

@ -100,6 +100,10 @@
text-align: right;
}
> .parameter-expose-button ~ .text-label:first-of-type {
text-align: left;
}
> .text-button {
flex-grow: 1;
}

3
frontend/src/components/widgets/inputs/LayerReferenceInput.vue
View File

@ -58,7 +58,8 @@
text-align: center;
&.missing {
color: var(--color-data-unused1);
// TODO: Define this as a permanent color palette choice
color: #d6536e;
}
&.layer-name {

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

@ -69,16 +69,22 @@ export class FrontendDocumentDetails extends DocumentDetails {
readonly id!: bigint;
}
export type DataType = "Raster" | "Color" | "Image" | "F32";
export type FrontendGraphDataType = "general" | "raster" | "color" | "vector" | "number";
export class NodeGraphInput {
readonly dataType!: FrontendGraphDataType;
readonly name!: string;
}
export class FrontendNode {
readonly id!: bigint;
readonly displayName!: string;
readonly exposedInputs!: DataType[];
readonly exposedInputs!: NodeGraphInput[];
readonly outputs!: DataType[];
readonly outputs!: FrontendGraphDataType[];
@TupleToVec2
readonly position!: XY | undefined;
@ -1006,6 +1012,15 @@ export class TextAreaInput extends WidgetProps {
tooltip!: string | undefined;
}
export class ParameterExposeButton extends WidgetProps {
exposed!: boolean;
dataType!: string;
@Transform(({ value }: { value: string }) => value || undefined)
tooltip!: string | undefined;
}
export class TextButton extends WidgetProps {
label!: string;
@ -1099,6 +1114,7 @@ const widgetSubTypes = [
{ value: SwatchPairInput, name: "SwatchPairInput" },
{ value: TextAreaInput, name: "TextAreaInput" },
{ value: TextButton, name: "TextButton" },
{ value: ParameterExposeButton, name: "ParameterExposeButton" },
{ value: TextInput, name: "TextInput" },
{ value: TextLabel, name: "TextLabel" },
{ value: PivotAssist, name: "PivotAssist" },

18
node-graph/graph-craft/src/node_registry.rs
View File

@ -42,6 +42,24 @@ static NODE_REGISTRY: &[(NodeIdentifier, NodeConstructor)] = &[
}
})
}),
(
NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
|proto_node, stack| {
stack.push_fn(move |nodes| {
let ConstructionArgs::Nodes(construction_nodes) = proto_node.construction_args else { unreachable!("Add Node constructed with out rhs input node") };
let value_node = nodes.get(construction_nodes[0] as usize).unwrap();
let input_node: DowncastBothNode<_, (), f32> = DowncastBothNode::new(value_node);
let node: DynAnyNode<_, f32, _, _> = DynAnyNode::new(ConsNode::new(input_node).then(graphene_core::ops::AddNode));
if let ProtoNodeInput::Node(node_id) = proto_node.input {
let pre_node = nodes.get(node_id as usize).unwrap();
(pre_node).then(node).into_type_erased()
} else {
node.into_type_erased()
}
})
},
),
(
NodeIdentifier::new(
"graphene_core::ops::AddNode",

12
node-graph/gstd/src/raster.rs
View File

@ -98,7 +98,7 @@ impl<Reader: std::io::Read> Node<Reader> for BufferNode {
}
}
#[derive(Clone, Debug, PartialEq, DynAny)]
#[derive(Clone, Debug, PartialEq, DynAny, Default)]
#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
pub struct Image {
pub width: u32,
@ -106,6 +106,16 @@ pub struct Image {
pub data: Vec<Color>,
}
impl Image {
pub const fn empty() -> Self {
Self {
width: 0,
height: 0,
data: Vec::new(),
}
}
}
impl IntoIterator for Image {
type Item = Color;
type IntoIter = std::vec::IntoIter<Color>;