New Feature: Perspective Piping

This is how a colleague’s pipes are displaying in Firefox:

image

They’re displaying correctly in Chrome (the bottom left thick pipe is how all of them should be displaying)

would you mind copy-pasting the affected pipe here? Also which version of Firefox? And is this in a Fixed or Percent coordinate container?

I just tested with Firefox 93.0, and P&ID widths appear to be working on mine, but maybe I’m missing something

Was using Firefox 93.0 and had the pipes in a fixed coordinate container. The issue seems to be somewhat inconsistent as it doesn’t affect all the pipes on the screen.

[{
        "appearance": "p&id",
        "end": "none",
        "fill": "",
        "flanges": true,
        "lineVariant": "solid",
        "name": "pipe_2",
        "origin": {
            "connections": [{
                    "connections": [{
                            "connections": [{
                                    "connections": [{
                                            "connections": [{
                                                    "x": 18.5,
                                                    "y": 494.14
                                                }, {
                                                    "connections": [{
                                                            "x": 293.52,
                                                            "y": 568.1
                                                        }
                                                    ],
                                                    "x": 220.51,
                                                    "y": 568.12
                                                }
                                            ],
                                            "x": 220.5,
                                            "y": 494.11
                                        }, {
                                            "connections": [{
                                                    "x": 315.49,
                                                    "y": 567.6
                                                }
                                            ],
                                            "x": 381,
                                            "y": 567.59
                                        }
                                    ],
                                    "x": 380.98,
                                    "y": 494.1
                                }, {
                                    "connections": [{
                                            "connections": [{
                                                    "connections": [],
                                                    "x": 1241,
                                                    "y": 156.75
                                                }
                                            ],
                                            "x": 1409.94,
                                            "y": 156.79
                                        }
                                    ],
                                    "x": 1409.94,
                                    "y": 493.95
                                }
                            ],
                            "x": 978.87,
                            "y": 494.01
                        }, {
                            "connections": [],
                            "x": 978.9,
                            "y": 610.55
                        }
                    ],
                    "x": 978.9,
                    "y": 588.01
                }, {
                    "x": 1097,
                    "y": 612.06
                }
            ],
            "x": 1097,
            "y": 587.98
        },
        "start": "none",
        "stroke": "var(--neutral-50)",
        "width": 10
    }
]

does your view contain multiple coordinate containers with Pipe’s? We recently discovered an issue pertaining to that use case which causes Pipes to incorrectly render

Yes it does, in order to have pipes on top of components

to verify, copy-paste the pipes that are giving you issues into a fresh coordinate container root. with no nested pipes. If they display properly, it’s likely BUG-4892, which I already have a fix for. I’ll push to get the fix out asap

1 Like

I have tried it in a new coordinate container on the same page but it did not fix the issue.

A fix for performance while zooming- as well as a few overall performance enhancements will be in the next nightly @nader.chinichian Bug-4551

Also a fix for displaying multiple coordinate containers containing pipes will be in the next nightly- I believe this was the issue that @nminchin was encountering. Bug-4892

More bug fixes, performance optimizations, and streamlining the piping UI are in the “pipe line” :slightly_smiling_face:

5 Likes

The next nightly will contain a feature for toggling the visibility of pipes. This is a per pipe prop, ie props.pipes[3].visibility. The default is true, but any value other than false will keep the pipe visible.

Also the Pipe Property Editor has been updated to reflect this new visibility setting.

pipe_editor_single_simple

pipe_editor_multiple_mimic

2 Likes

The next nightly will contain a new Coordinate Container Component event: onPipeClicked, the arguments include self (a reference to the coordinate container), pipeIndex (the index within the pipes array of the pipe being clicked), pipeName (the name of the pipe being clicked), and an event object containing most of the same properties as an onClick event’s properties.

3 Likes

Hi @mperkins

Do you know why the style doesn’t work on pipes?
Also, it is very helpful if we have a style for each pipe instead of a total pipe folder.

Hi Nader,
That style prop, like other props when pipes/pipe folder are selected, actually belong to the coordinate container.

I agree that it would be nice to be able to style individual pipes. However, I’m doubtful that having style props for individual pipes would allow you to use filter: I tried using Chromes development tools, modifying the inline styles for pipe elements to include that filter and it doesn’t appear to work. My guess is that SVG elements are limited in which CSS properties they support.

Interesting but I’m sure the filter will work because until now I use background SVG which is draw in Inkscape and import it in perspective and apply the filter: drop-shadow and it works OK. The only thing is it only runs in runtime and not designer if I add style to individual elements in the SVG tree.
In any case, the style would be perfect for us.

Also, could you increase the crossing space between two cross pipe?

There is a strange bug in binding in the color part of pipes lines.
The binding doesn’t work every time and rolls back to its previous value after changing it.

1 Like

that is odd, I see it too. Though it seems to fix itself when reopening the edit binding window. (probably) has more to do with bindings than piping itself though.

2 Likes

if you’re referring to the gaps with P&ID pipes crossing, I believe @nminchin requested that New Feature: Perspective Piping - #4 by nminchin

I’ll go ahead and create an enhancement ticket right now so it doesn’t get lost in the shuffle

2 Likes

Yes but some times it restore its first binding value after apply the new one and close and open popup.
So at the end the new value doesn’t change for me.
This behaviour only apply for pipe lines properties.

Hi @mperkins

Is there any way by CSS injection in perspective global CSS file I can change the look of pipes right now?
As I use this pipe for single line diagram of power system I want to add some filter: drop-shadow to them to make them glow.

:wave: I’m back from holiday vacation.

try this:

.ia_pipe {
  filter: drop-shadow(2px 2px 6px #4444dd);
}

Great, now I am stuck on how to dynamically on/off shadow.

I try this for specificity selection and apply style on root style but not working:
.psc-mypipe-on .ia_pipe {
filter: drop-shadow(2px 2px 6px #4444dd);
}

.psc-mypipe-off .ia_pipe {
filter: none;
}