Insert point on segment by clicking once (no more sliding) and Alt+click to delete a segment

[4adex]

Part of #1870

When clicking a segment (new since video was recorded):

• Clicking without any modifier key should split the segment where clicked. Currently this has the extra complication of entering an insertion mode where the point of the segment split can be slid within the segment and left click confirms it while right click cancels. We want to remove that extra step and just insert directly. Important: clicking then immediately click-dragging to drag the point shouldn't become a double-click that converts from sharp to smooth. An overlay should be drawn in cases where the cursor is hovered over the segment such that clicking would insert a split, it should be a short line segment (20px in diameter) running perpendicular to the curve.

• Alt clicking should delete the segment that's clicked. Currently a user would have to split the segment then delete the newly created point.

[Keavon]

!build

[github-actions]

📦 Build Complete for b4fb9bb
https://f35b2fe6.graphite.pages.dev

[Keavon]

This don't seem to be acting on a very reliable basis: https://files.keavon.com/-/IntrepidWhichAndeancondor/capture_4_.mp4

Please also make the size of the line and X visualization configurable in consts.rs.

[4adex]

Moved the constants to consts.rs and also increased the tolerance so that it moves to insertion mode better. It seems to be unreliable because the size of overlay was more than the tolerance.

[Keavon]

!build

[github-actions]

📦 Build Complete for 84c323a
https://2394aa5e.graphite.pages.dev

[Keavon]

It looks like this currently "enters a mode" when the mouse gets nearby and that mode can be exited by right clicking/hitting escape. And it affects the hints bar by removing everything else from it. And it stays in the mode until the user moves their cursor far enough away to "break free" from it. Some of this is likely a holdover from the previous behavior (what's in master currently).

The desired new behavior is just showing that insertion line whenever you're within X distance of any segment (and the nearest segment if within X distance of multiple segments). And no change to the hints bar from the normal mode.

Thanks :)

[4adex]

Yes previous implementation used a new state when the clicked near the segment and then clicking again inserts the point, so I just changed that so that when pointer is moved closer to a segment compared to a threshold then it goes into that mode. I think that going into a separate state for inserting point prevents its collision with other features of the path tool. So should I change that it doesn't goes into a new mode?

[Keavon]

So should I change that it doesn't goes into a new mode?

I think this will be the cleanest and most robust approach, yes.

[Keavon]

!build

[github-actions]

📦 Build Complete for 3ace632
https://392f25ba.graphite.pages.dev

[Keavon]

We still have unpredictable behavior with mouse proximity that I assume is left over still from the previous approach of being a tool state:

capture_9_.mp4

[Keavon]

I've also updated the request for deletion to use Alt instead of Ctrl, so please change that accordingly. Thanks!

[4adex]

That unusual behaviour was due to wrong logic of computing if the mouse is too far from the segment. I have fixed it.

[Keavon]

!build

[github-actions]

📦 Build Complete for cd3ddc7
https://02f3f30b.graphite.pages.dev

[Keavon]

There are portions of most segments where it just isn't valid:

capture_99_.mp4

Here's that layer so you can try it on your own:

graphite/layer: [{"nodes":[[0,{"document_node":{"inputs":[{"Value":{"tagged_value":{"GraphicGroup":{"instance":[],"transform":[],"alpha_blending":[],"source_node_id":[]}},"exposed":true}},{"Node":{"node_id":1,"output_index":0,"lambda":false}}],"manual_composition":null,"implementation":{"Network":{"exports":[{"Node":{"node_id":3,"output_index":0,"lambda":false}}],"nodes":[[0,{"inputs":[{"Network":{"import_type":{"Generic":"T"},"import_index":1}}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::graphic_element::ToElementNode"}},"visible":true,"skip_deduplication":false}],[3,{"inputs":[{"Node":{"node_id":1,"output_index":0,"lambda":false}},{"Node":{"node_id":2,"output_index":0,"lambda":false}},{"Reflection":"DocumentNodePath"}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::graphic_element::LayerNode"}},"visible":true,"skip_deduplication":false}],[2,{"inputs":[{"Node":{"node_id":0,"output_index":0,"lambda":false}}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::memo::MonitorNode"}},"visible":true,"skip_deduplication":true}],[1,{"inputs":[{"Network":{"import_type":{"Generic":"T"},"import_index":0}}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::graphic_element::ToGroupNode"}},"visible":true,"skip_deduplication":false}]],"scope_injections":[]}},"visible":true,"skip_deduplication":false},"persistent_node_metadata":{"reference":"Merge","display_name":"","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":["Out"],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Layer":{"position":{"Absolute":[-6,5]}}},"network_metadata":{"persistent_metadata":{"node_metadata":[[3,{"persistent_metadata":{"reference":null,"display_name":"Layer","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[1,-3]}}},"network_metadata":null}}],[0,{"persistent_metadata":{"reference":null,"display_name":"To Element","input_properties":[{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[-14,-1]}}},"network_metadata":null}}],[2,{"persistent_metadata":{"reference":null,"display_name":"Monitor","input_properties":[{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[-7,-1]}}},"network_metadata":null}}],[1,{"persistent_metadata":{"reference":null,"display_name":"To Group","input_properties":[{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[-14,-3]}}},"network_metadata":null}}]],"previewing":"No","navigation_metadata":{"node_graph_ptz":{"pan":[0.0,0.0],"tilt":0.0,"zoom":1.0},"node_graph_to_viewport":[1.0,0.0,0.0,1.0,0.0,0.0],"node_graph_top_right":[0.0,0.0]},"selection_undo_history":[],"selection_redo_history":[]}}}}],[1,{"document_node":{"inputs":[{"Node":{"node_id":2,"output_index":0,"lambda":false}},{"Value":{"tagged_value":{"OptionalColor":{"red":0.0,"green":0.0,"blue":0.0,"alpha":1.0}},"exposed":false}},{"Value":{"tagged_value":{"F64":2.0},"exposed":false}},{"Value":{"tagged_value":{"VecF64":[]},"exposed":false}},{"Value":{"tagged_value":{"F64":0.0},"exposed":false}},{"Value":{"tagged_value":{"LineCap":"Butt"},"exposed":false}},{"Value":{"tagged_value":{"LineJoin":"Miter"},"exposed":false}},{"Value":{"tagged_value":{"F64":4.0},"exposed":false}}],"manual_composition":{"Concrete":{"name":"core::option::Option<alloc::sync::Arc<graphene_core::context::OwnedContextImpl>>","alias":null}},"implementation":{"ProtoNode":{"name":"graphene_core::vector::StrokeNode"}},"visible":true,"skip_deduplication":false},"persistent_node_metadata":{"reference":"Stroke","display_name":"","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":["Future<Instances<VectorData>>"],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":"Chain"}},"network_metadata":null}}],[3,{"document_node":{"inputs":[{"Value":{"tagged_value":{"VectorData":{"instance":[{"style":{"stroke":{"color":{"red":0.0,"green":0.0,"blue":0.0,"alpha":1.0},"weight":0.0,"dash_lengths":[],"dash_offset":0.0,"line_cap":"Butt","line_join":"Miter","line_join_miter_limit":4.0,"transform":[1.0,0.0,0.0,1.0,0.0,0.0],"non_scaling":false},"fill":"None"},"colinear_manipulators":[],"point_domain":{"id":[],"position":[]},"segment_domain":{"id":[],"start_point":[],"end_point":[],"handles":[],"stroke":[]},"region_domain":{"id":[],"segment_range":[],"fill":[]},"upstream_graphic_group":null}],"transform":[[1.0,0.0,0.0,1.0,0.0,0.0]],"alpha_blending":[{"opacity":1.0,"blend_mode":"Normal"}],"source_node_id":[null]}},"exposed":true}},{"Value":{"tagged_value":{"VectorModification":{"points":{"add":[1961602432541193137,17342492946869875997,15981977085548934860,8840881443241775639,10094336152413024177,6418544511984938472,17395471381961362125,6523513082450752445,16230734900642393310,13385105273820125267],"remove":[],"delta":[[17395471381961362125,[941.4771237648072,406.8552796988455]],[15981977085548934860,[1019.0,198.0]],[13385105273820125267,[1126.4005282439146,233.1709435167811]],[10094336152413024177,[857.0,404.0]],[6418544511984938472,[640.0,382.0]],[1961602432541193137,[559.0,320.0]],[16230734900642393310,[950.2770286507,235.64277343950545]],[6523513082450752445,[1113.6299454388077,344.13749117752195]],[17342492946869875997,[777.0,273.0]],[8840881443241775639,[1230.0,291.0]]]},"segments":{"add":[3561485007165269973,9073161971622640579,16637091866382799430,14039299591920592355,2821747078537682794,18260842959421464150,269488134821196644,13998512956200714636,6312490083627160776,13752304542678183912],"remove":[10489601892572957122,11784871592935798528,2435855453927071028,8515703500135114442],"start_point":[[2821747078537682794,8840881443241775639],[16637091866382799430,6418544511984938472],[9073161971622640579,10094336152413024177],[13998512956200714636,16230734900642393310],[6312490083627160776,15981977085548934860],[3561485007165269973,1961602432541193137],[13752304542678183912,13385105273820125267],[18260842959421464150,6523513082450752445],[14039299591920592355,17395471381961362125],[269488134821196644,17342492946869875997]],"end_point":[[3561485007165269973,17342492946869875997],[14039299591920592355,10094336152413024177],[6312490083627160776,13385105273820125267],[13998512956200714636,15981977085548934860],[9073161971622640579,6418544511984938472],[2821747078537682794,6523513082450752445],[18260842959421464150,17395471381961362125],[13752304542678183912,8840881443241775639],[16637091866382799430,1961602432541193137],[269488134821196644,16230734900642393310]],"handle_primary":[[3561485007165269973,[80.0,-120.0]],[18260842959421464150,[-55.63367902297546,23.86931720792768]],[269488134821196644,[36.62286213763082,11.997144493361816]],[13998512956200714636,[33.95300847021292,-14.633392647560356]],[13752304542678183912,[52.25639543761076,26.752983974668467]],[16637091866382799430,[0.0,0.0]],[9073161971622640579,[-27.0,-57.0]],[14039299591920592355,[-43.65620822024664,11.227102003114908]],[2821747078537682794,[0.0,0.0]],[6312490083627160776,[10.083499534999646,-10.56366617952338]]],"handle_end":[[269488134821196644,[-58.16757867063757,25.069619936390666]],[14039299591920592355,[7.639909200633269,16.128697201337047]],[16637091866382799430,[0.0,0.0]],[2821747078537682794,[64.8396979526799,-27.81910787276132]],[3561485007165269973,[-58.0,-19.0]],[13752304542678183912,[0.0,0.0]],[6312490083627160776,[-48.26888807317869,-24.711554983514617]],[9073161971622640579,[0.0,0.0]],[13998512956200714636,[-7.739998191547443,8.108569534002129]],[18260842959421464150,[51.08717657622935,-13.138130081724851]]],"stroke":[[3561485007165269973,0],[14039299591920592355,0],[13752304542678183912,0],[18260842959421464150,0],[9073161971622640579,0],[269488134821196644,0],[2821747078537682794,0],[16637091866382799430,0],[6312490083627160776,0],[13998512956200714636,0]]},"regions":{"add":[],"remove":[],"segment_range":[],"fill":[]},"add_g1_continuous":[[{"ty":"Primary","segment":14039299591920592355},{"ty":"End","segment":18260842959421464150}],[{"ty":"End","segment":2821747078537682794},{"ty":"Primary","segment":18260842959421464150}],[{"ty":"Primary","segment":9073161971622640579},{"ty":"End","segment":14039299591920592355}],[{"ty":"End","segment":3561485007165269973},{"ty":"Primary","segment":269488134821196644}],[{"ty":"Primary","segment":2435855453927071028},{"ty":"End","segment":13998512956200714636}],[{"ty":"End","segment":13998512956200714636},{"ty":"Primary","segment":6312490083627160776}],[{"ty":"End","segment":10489601892572957122},{"ty":"Primary","segment":14039299591920592355}],[{"ty":"End","segment":6312490083627160776},{"ty":"Primary","segment":13752304542678183912}],[{"ty":"End","segment":269488134821196644},{"ty":"Primary","segment":13998512956200714636}],[{"ty":"End","segment":11784871592935798528},{"ty":"Primary","segment":9073161971622640579}],[{"ty":"End","segment":3561485007165269973},{"ty":"Primary","segment":8515703500135114442}],[{"ty":"End","segment":8515703500135114442},{"ty":"Primary","segment":2435855453927071028}]],"remove_g1_continuous":[[{"ty":"End","segment":16637091866382799430},{"ty":"Primary","segment":3561485007165269973}],[{"ty":"End","segment":2435855453927071028},{"ty":"Primary","segment":11784871592935798528}],[{"ty":"End","segment":9073161971622640579},{"ty":"Primary","segment":16637091866382799430}]]}},"exposed":false}}],"manual_composition":null,"implementation":{"Network":{"exports":[{"Node":{"node_id":1,"output_index":0,"lambda":false}}],"nodes":[[0,{"inputs":[{"Network":{"import_type":{"Concrete":{"name":"graphene_core::instances::Instances<graphene_core::vector::vector_data::VectorData>","alias":null}},"import_index":0}}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::memo::MonitorNode"}},"visible":true,"skip_deduplication":true}],[1,{"inputs":[{"Node":{"node_id":0,"output_index":0,"lambda":false}},{"Network":{"import_type":{"Concrete":{"name":"graphene_core::vector::vector_data::modification::VectorModification","alias":null}},"import_index":1}}],"manual_composition":{"Generic":"T"},"implementation":{"ProtoNode":{"name":"graphene_core::vector::vector_data::modification::PathModifyNode"}},"visible":true,"skip_deduplication":false}]],"scope_injections":[]}},"visible":true,"skip_deduplication":false},"persistent_node_metadata":{"reference":"Path","display_name":"","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":["Vector Data"],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":"Chain"}},"network_metadata":{"persistent_metadata":{"node_metadata":[[0,{"persistent_metadata":{"reference":null,"display_name":"Monitor","input_properties":[{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[0,0]}}},"network_metadata":null}}],[1,{"persistent_metadata":{"reference":null,"display_name":"Path Modify","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":[],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":{"Absolute":[7,0]}}},"network_metadata":null}}]],"previewing":"No","navigation_metadata":{"node_graph_ptz":{"pan":[0.0,0.0],"tilt":0.0,"zoom":1.0},"node_graph_to_viewport":[1.0,0.0,0.0,1.0,0.0,0.0],"node_graph_top_right":[0.0,0.0]},"selection_undo_history":[],"selection_redo_history":[]}}}}],[2,{"document_node":{"inputs":[{"Node":{"node_id":3,"output_index":0,"lambda":false}},{"Value":{"tagged_value":{"Fill":{"Solid":{"red":0.99999994,"green":0.99999994,"blue":0.99999994,"alpha":1.0}}},"exposed":false}},{"Value":{"tagged_value":{"OptionalColor":{"red":0.99999994,"green":0.99999994,"blue":0.99999994,"alpha":1.0}},"exposed":false}},{"Value":{"tagged_value":{"Gradient":{"stops":[[0.0,{"red":0.0,"green":0.0,"blue":0.0,"alpha":1.0}],[1.0,{"red":1.0,"green":1.0,"blue":1.0,"alpha":1.0}]],"gradient_type":"Linear","start":[0.0,0.5],"end":[1.0,0.5],"transform":[1.0,0.0,0.0,1.0,0.0,0.0]}},"exposed":false}}],"manual_composition":{"Concrete":{"name":"core::option::Option<alloc::sync::Arc<graphene_core::context::OwnedContextImpl>>","alias":null}},"implementation":{"ProtoNode":{"name":"graphene_core::vector::FillNode"}},"visible":true,"skip_deduplication":false},"persistent_node_metadata":{"reference":"Fill","display_name":"","input_properties":[{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null},{"input_data":{},"widget_override":null}],"output_names":["Future<Instances<VectorData>>"],"has_primary_output":true,"locked":false,"pinned":false,"node_type_metadata":{"Node":{"position":"Chain"}},"network_metadata":null}}]],"selected":true,"visible":true,"locked":false,"collapsed":false}]

I'm going to merge this since it's useful to have the feature, despite the bug. But I hope you can try debugging and fixing that ASAP. Thanks.

.