cyborg
/
cyborg
2
2
Fork 0
Code Issues 19 Pull Requests 1 Projects Releases Wiki Activity

NodeEditor + interactive editing

This commit is contained in:
mars 2022-09-19 10:06:21 -06:00
parent 1803d784f9
commit 51546fc2a2
2 changed files with 229 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ramen_egui/examples/main.rs
View File

@ -1,6 +1,7 @@
use eframe::egui;
use ramen::node::{AtomOp, Node};
use ramen::Graph;
use ramen_egui::NodeEditor;
fn main() {
let native_options = eframe::NativeOptions::default();
@ -12,7 +13,7 @@ fn main() {
}
struct Application {
graph: Graph,
editor: NodeEditor,
}
impl Application {
@ -32,7 +33,9 @@ impl Application {
let n5 = nodes.insert(Node::op(AtomOp::Mul, n4, n4).at(pos(4.0, 2.0)));
let _n6 = nodes.insert(Node::op(AtomOp::Add, n5, n0).at(pos(3.0, 1.0)));
Self { graph }
Self {
editor: NodeEditor::from_graph(graph),
}
}
}
@ -46,7 +49,7 @@ impl eframe::App for Application {
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Hello world!");
ramen_egui::draw_graph(ui, &self.graph);
self.editor.show(ui);
});
}
}

307
ramen_egui/src/lib.rs
View File

@ -4,6 +4,126 @@ use ramen::node::{Edge, SlotIndex};
use ramen::Graph;
use std::collections::HashMap;
pub struct NodeEditor {
graph: Graph,
pointer_state: PointerState,
}
impl NodeEditor {
pub fn from_graph(graph: Graph) -> Self {
Self {
graph,
pointer_state: PointerState::new(),
}
}
pub fn show(&mut self, ui: &mut egui::Ui) {
let style = ui.style();
let style = GraphStyle::from_ui_style(style);
let layout = GraphLayout::layout(&style, &self.pointer_state, &self.graph);
let rect = ui.available_rect_before_wrap();
let sense = egui::Sense::click_and_drag();
let response = ui.allocate_rect(rect, sense);
let pointer_pos = response.interact_pointer_pos();
let pointer_target = pointer_pos.map(|pos| layout.pointer_target(pos));
let painter = ui.painter_at(rect);
layout.paint(rect, &painter);
if let Some(pointer_pos) = pointer_pos {
self.pointer_state.position = pointer_pos;
self.pointer_state.delta = response.drag_delta();
if let PointerAction::Idle(idle) = &mut self.pointer_state.action {
*idle = pointer_target.clone();
}
}
if response.drag_started() && response.dragged_by(egui::PointerButton::Primary) {
let pointer_target = pointer_target.expect("Drag started but no target");
self.pointer_state.start = self.pointer_state.position;
let next_state = match pointer_target {
PointerTarget::Grid => None, // TODO grid navigation
PointerTarget::Node(idx) => Some(PointerAction::MovingNode(idx)),
PointerTarget::Input(idx) => Some(PointerAction::SettingInput(idx)),
PointerTarget::Output(idx) => Some(PointerAction::SettingOutput(idx)),
};
if let Some(next_state) = next_state {
self.pointer_state.action = next_state;
}
} else if response.drag_released() {
use ramen::command::*;
let cmd: Option<DynCommand> = match self.pointer_state.action {
PointerAction::Idle(_) => None,
PointerAction::MovingNode(idx) => {
let delta = self.pointer_state.position - self.pointer_state.start;
Some(Box::new(MoveNode {
target: idx,
to: Vec2::new(delta.x, delta.y),
relative: true,
}))
}
PointerAction::SettingInput(output) => {
if let Some(PointerTarget::Output(input)) = pointer_target {
Some(Box::new(SetEdge {
edge: Edge { input, output },
}))
} else if self.graph.nodes[output.node].inputs[output.slot].is_some() {
Some(Box::new(DeleteEdge { input: output }))
} else {
None
}
}
PointerAction::SettingOutput(input) => {
if let Some(PointerTarget::Input(output)) = pointer_target {
Some(Box::new(SetEdge {
edge: Edge { input, output },
}))
} else {
None
}
}
};
if let Some(cmd) = cmd {
cmd.apply(&mut self.graph).unwrap();
}
self.pointer_state.action = PointerAction::Idle(None); // TODO idle pointer targeting
}
}
}
pub struct PointerState {
pub start: egui::Pos2,
pub position: egui::Pos2,
pub delta: egui::Vec2,
pub action: PointerAction,
}
impl PointerState {
pub fn new() -> Self {
Self {
start: egui::Pos2::ZERO,
position: egui::Pos2::ZERO,
delta: egui::Vec2::ZERO,
action: PointerAction::Idle(None),
}
}
}
#[derive(Debug, Clone, Hash, Eq, PartialEq)]
pub enum PointerAction {
Idle(Option<PointerTarget>),
MovingNode(usize),
SettingInput(SlotIndex),
SettingOutput(SlotIndex),
}
#[derive(Debug, Clone, Hash, Eq, PartialEq)]
pub enum PointerTarget {
Grid,
@ -46,8 +166,8 @@ impl GraphStyle {
node_frame: Frame::window(style).fill(node_bg),
edge_stroke: style.visuals.widgets.active.fg_stroke,
edge_control_offset: 200.0,
slot_radius: 5.0,
slot_spacing: 20.0,
slot_radius: 7.0,
slot_spacing: 40.0,
slot_fill: style.visuals.widgets.noninteractive.bg_fill,
slot_stroke: style.visuals.widgets.noninteractive.bg_stroke,
}
@ -61,22 +181,29 @@ pub struct GraphLayout {
pub input_positions: HashMap<SlotIndex, Vec2>,
pub output_positions: HashMap<SlotIndex, Vec2>,
pub edges: HashMap<Edge, EdgeLayout>,
pub active_edge: Option<(Vec2, Vec2)>,
}
impl GraphLayout {
pub fn layout(style: &GraphStyle, graph: &Graph) -> Self {
pub fn layout(style: &GraphStyle, pointer: &PointerState, graph: &Graph) -> Self {
let mut layout = Self {
style: style.clone(),
node_rects: Default::default(),
input_positions: Default::default(),
output_positions: Default::default(),
edges: Default::default(),
active_edge: None,
};
let mut edges = Vec::new();
for (node_index, node) in graph.nodes.iter() {
let node_pos = egui::pos2(node.pos.x, node.pos.y);
let mut node_pos = egui::pos2(node.pos.x, node.pos.y);
if pointer.action == PointerAction::MovingNode(node_index) {
node_pos += pointer.position - pointer.start;
}
let node_size = egui::vec2(150., 150.);
let node_rect = egui::Rect::from_min_size(node_pos, node_size);
layout.node_rects.insert(node_index, node_rect);
@ -96,7 +223,10 @@ impl GraphLayout {
layout.input_positions.insert(slot_index, position);
if let Some(input) = input {
if pointer.action == PointerAction::SettingInput(slot_index) {
let pointer = Vec2::new(pointer.position.x, pointer.position.y);
layout.active_edge = Some((position, pointer));
} else if let Some(input) = input {
edges.push(Edge {
input: *input,
output: slot_index,
@ -104,39 +234,50 @@ impl GraphLayout {
}
}
layout.output_positions.insert(
SlotIndex {
for slot_index in 0..1 {
let slot_y = slot_index as f32 * style.slot_spacing + slot_top;
let position = glam::Vec2::new(slot_right, slot_y);
let slot_index = SlotIndex {
node: node_index,
slot: 0,
},
glam::Vec2::new(slot_right, slot_top),
);
slot: slot_index,
};
layout.output_positions.insert(slot_index, position);
if pointer.action == PointerAction::SettingOutput(slot_index) {
let pointer = Vec2::new(pointer.position.x, pointer.position.y);
layout.active_edge = Some((pointer, position));
}
}
}
for edge in edges.into_iter() {
let input = *layout.input_positions.get(&edge.output).unwrap();
let output = *layout.output_positions.get(&edge.input).unwrap();
let control_offset = Vec2::new(style.edge_control_offset, 0.0);
let mut input_control = input - control_offset;
let mut output_control = output + control_offset;
if output_control.x > input_control.x && output.x < input.x {
let mid = (output_control.x + input_control.x) / 2.0;
output_control.x = mid;
input_control.x = mid;
}
let edge_layout = EdgeLayout {
points: [input, input_control, output_control, output],
};
let edge_layout = layout.layout_edge(input, output);
layout.edges.insert(edge, edge_layout);
}
layout
}
pub fn layout_edge(&self, input: Vec2, output: Vec2) -> EdgeLayout {
let control_offset = Vec2::new(self.style.edge_control_offset, 0.0);
let mut input_control = input - control_offset;
let mut output_control = output + control_offset;
if output_control.x > input_control.x && output.x < input.x {
let mid = (output_control.x + input_control.x) / 2.0;
output_control.x = mid;
input_control.x = mid;
}
EdgeLayout {
points: [input, input_control, output_control, output],
}
}
pub fn pointer_target(&self, pointer: egui::Pos2) -> PointerTarget {
let test_slots = |positions: &HashMap<SlotIndex, Vec2>| -> Option<SlotIndex> {
for (index, position) in positions.iter() {
@ -152,15 +293,15 @@ impl GraphLayout {
None
};
if let Some(index) = test_slots(&self.input_positions) {
return PointerTarget::Input(index);
}
if let Some(index) = test_slots(&self.output_positions) {
return PointerTarget::Output(index);
}
for (node_index, node_rect) in self.node_rects.iter() {
if node_rect.contains(pointer) {
return PointerTarget::Node(*node_index);
@ -169,70 +310,68 @@ impl GraphLayout {
PointerTarget::Grid
}
}
pub fn draw_graph(ui: &mut egui::Ui, graph: &Graph) {
let rect = ui.available_rect_before_wrap();
let painter = ui.painter_at(rect);
pub fn paint(&self, rect: egui::Rect, painter: &egui::Painter) {
let style = &self.style;
let grid_spacing = style.grid_spacing;
let grid_pos = rect.left_top().to_vec2() / egui::vec2(grid_spacing, grid_spacing);
let mut grid_pos = grid_pos.floor() * grid_spacing;
let style = ui.style();
let style = GraphStyle::from_ui_style(style);
let layout = GraphLayout::layout(&style, graph);
while grid_pos.x < rect.right() {
grid_pos.x += grid_spacing;
let start = egui::pos2(grid_pos.x, rect.top());
let end = egui::pos2(grid_pos.x, rect.bottom());
painter.line_segment([start, end], style.grid_stroke);
}
let pointer_pos = ui.input().pointer.interact_pos();
let pointer_target = pointer_pos.map(|pointer| layout.pointer_target(pointer));
while grid_pos.y < rect.bottom() {
grid_pos.y += grid_spacing;
let start = egui::pos2(rect.left(), grid_pos.y);
let end = egui::pos2(rect.right(), grid_pos.y);
painter.line_segment([start, end], style.grid_stroke);
}
let grid_spacing = style.grid_spacing;
let grid_pos = rect.left_top().to_vec2() / egui::vec2(grid_spacing, grid_spacing);
let mut grid_pos = grid_pos.floor() * grid_spacing;
let paint_edge = |layout: &EdgeLayout| {
let points = layout.points.map(|p| p.to_array().into());
while grid_pos.x < rect.right() {
grid_pos.x += grid_spacing;
let start = egui::pos2(grid_pos.x, rect.top());
let end = egui::pos2(grid_pos.x, rect.bottom());
painter.line_segment([start, end], style.grid_stroke);
}
while grid_pos.y < rect.bottom() {
grid_pos.y += grid_spacing;
let start = egui::pos2(rect.left(), grid_pos.y);
let end = egui::pos2(rect.right(), grid_pos.y);
painter.line_segment([start, end], style.grid_stroke);
}
for (_edge, edge_layout) in layout.edges.iter() {
let points = edge_layout.points.map(|p| p.to_array().into());
let shape = egui::epaint::CubicBezierShape {
points,
closed: false,
fill: egui::Color32::TRANSPARENT,
stroke: style.edge_stroke,
};
painter.add(shape);
}
for (_node_index, node_rect) in layout.node_rects.iter() {
let shape = style.node_frame.paint(*node_rect);
painter.add(shape);
}
let draw_slots = |positions: &HashMap<SlotIndex, Vec2>| {
for (_index, position) in positions.iter() {
let shape = egui::epaint::CircleShape {
center: egui::pos2(position.x, position.y),
radius: style.slot_radius,
fill: style.slot_fill,
stroke: style.slot_stroke,
let shape = egui::epaint::CubicBezierShape {
points,
closed: false,
fill: egui::Color32::TRANSPARENT,
stroke: style.edge_stroke,
};
painter.add(shape);
};
for (_edge, edge_layout) in self.edges.iter() {
paint_edge(edge_layout);
}
};
draw_slots(&layout.input_positions);
draw_slots(&layout.output_positions);
if let Some(active_edge) = self.active_edge {
let layout = self.layout_edge(active_edge.0, active_edge.1);
paint_edge(&layout);
}
println!("{:#?}", pointer_target);
for (_node_index, node_rect) in self.node_rects.iter() {
let shape = style.node_frame.paint(*node_rect);
painter.add(shape);
}
let draw_slots = |positions: &HashMap<SlotIndex, Vec2>| {
for (_index, position) in positions.iter() {
let shape = egui::epaint::CircleShape {
center: egui::pos2(position.x, position.y),
radius: style.slot_radius,
fill: style.slot_fill,
stroke: style.slot_stroke,
};
painter.add(shape);
}
};
draw_slots(&self.input_positions);
draw_slots(&self.output_positions);
}
}