Pipe Tool Placement Mission Impossible

It's been a little while since I've had to do a P&ID screen, and I'm struggling to use the pipe tool... There are waay too many snap points on the screen, the large majority of them being in not-useful places, for the piping tool to be useable :confused:
We need to be able to position these using the arrow keys, and have modifier keys available to us to, with the mouse:

  1. ignore snap points
  2. move a point along the same vert/horizontal line / at fixed angles from the adjoining point (currently possible with alt, however this also ignore snap points. These two functions should be separated to give better control)

with the arrow keys:

  1. move the point along the same vert/horizontal line
  2. move by 10px instead of 1px

I don't know how I'm going to be able to position all of these pipes to be honest...

1 Like

The current pipe tool is a manifestation of the phrase "technically correct, but practically useless".


Reminds me a bit of trying to rearrange the components within a column container back in the day when I first looked at using them. I don't know if that's gotten any better as I very quickly removed them from my repertoire, but that was always something that induced a flurry of curse words!

I think I'll have to use an SVG...

1 Like

Same :laughing: Tried it once, realized “huh, this isn’t great”, and then have exclusively used Flexbox since.

That, or I’d also recommended the classic “labels-as-pipes” trick.


I used to use these, but always ran into the issue of them not aligning properly at slightly different resolutions :weary: a single SVG will always be aligned, at least to itself

This isn't great about the Piping Tool either:


zoomed in...



It's the details that are the difference between amateur and professional for a GUI

1 Like

I'm going this route after all... SVGs are too hard to manipulate

1 Like

Disclaimer: I’m not trying to put down the work IA has done on the piping tool. It’s a technical challenge, and it’s obvious that a lot of thought has been put into the tool to get it to its current state. However, if I can’t get a tool to put a line where I want 100.00% of the time, I’m going to use something else instead.

It’s also kinda funny how using keyboard shortcuts to align lines has been the workflow for building P&IDs across all HMI platforms since forever.


Hello! I'm the developer of Perspective Piping. I understand your frustrations: honestly there are many things I would do differently if I were redeveloping Piping including:

  • Rendering I'd lean towards a single element versus the current method of a jumble of elements with complex clipping and masking. Not that there aren't other complexities that this would introduce including how to handle onClick events and fill gradients
  • Direct DOM updates - a technique I've used in the Drawing Editor to increase performance. React is great at many things, but it's lifecycle is noticeably slower than ideal for real time drawing apps
  • Snapping, as noted here, becomes unusable with the ever increasing number of snap points. It would be great if we had a configuration panel/setting to control instead of an on-off modifier. Keyboard shortcuts would massively improve the experience as well.

Unfortunately these ideas for improvements aren't likely to be implemented in the short term as the Drawing Editor has my attention, but they are on my radar.

In the mean time, @nminchin I suggest nesting a Coordinate container, and using that nested Coordinate container as a "Pipe Container". This will limit the snapping to pipes within the Pipe Container.