ui-chart: spacetimechart: bordered path layer #962
Conversation
Math-R
force-pushed
the
mrd/spacetimechart/bordered-layer
branch
2 times, most recently
from
4da5206 to
1e55ad0
Compare
Math-R
force-pushed
the
mrd/spacetimechart/bordered-layer
branch
from
1e55ad0 to
720dca2
Compare
Math-R
changed the title
Math-R
changed the title
Math-R
force-pushed
the
mrd/spacetimechart/bordered-layer
branch
from
720dca2 to
fd1bfd7
Compare
ui-charts/src/spaceTimeChart/stories/additional-data.stories.tsx
Outdated
Show resolved
Hide resolved
Uriel-Sautron
force-pushed
the
mrd/spacetimechart/bordered-layer
branch
from
fd1bfd7 to
b833579
Compare
| drawSegments(totalPathWidth + borderWidth * 2); | ||
|
|
||
| if (border.backgroundColor) { | ||
| drawSegments(totalPathWidth, border.backgroundColor); |
There was a problem hiding this comment.
This is a bit confusing: when there is no background color, I would've expected a thin width-sized border offset away from the path. However a thick path is painted instead:
There was a problem hiding this comment.
(I suppose the right way to fix this would be to leave the space between the path and the border transparent, which would be tricky to do? Perhaps a workaround would be to use white.)
There was a problem hiding this comment.
Sorry i forgot to answer, but i fix this using globalCompositeOperation
| if (i === 0) { | ||
| ctx.moveTo(x, y); | ||
| } else if (i === segments.length - 1) { | ||
| ctx.lineTo(x - border.offset / 2, y); |
There was a problem hiding this comment.
Why the - border.offset / 2 here? It seems like the spacing on the right is smaller than offset with this adjustment.
There was a problem hiding this comment.
It was unnecessary, i wasn't seeing the end of the line well because of the display device so i tried unusefully to see something at the end i guess... so => removed ! thanks
| const borderWidth = border.width || 1; | ||
| const mainPathStyle = STYLES[level]; | ||
| const totalPathWidth = border.offset * 2 + mainPathStyle.width; | ||
| ctx.globalCompositeOperation = border.backgroundColor ? 'source-over' : 'xor'; |
There was a problem hiding this comment.
This works only when the paced train is the first one painted. When I move getPaths() for "Paced" to the end of the list in PATHS, I see this:
Probably a simple way to workaround this would be to:
- Set
strokeStyle = 'transparent' - Set
globalCompositeOperation = 'copy'for the seconddrawSegments()call
There was a problem hiding this comment.
Tried but still a problem with another behaviour. I also tried to drawImage from another context but this was not at all optimized in terms of performance, plus this occure blurry effect or aliasing depending of the device pixel ratio.
As the mockup by @thibautsailly use a background color between the path and the border, the fact that a path with border hide a path behind seems to be the normal behaviour.
So i put a default backgroundColor to white.
After a discussion with @jacomyal about these different behaviors, it seems that the only possibility for the user to have a transparent background (using xor for performance) would be to draw a bordered path in another layer.
But this seems heavy in terms of implementation and harder for everyone to use it in a simple way.
So, what you think ?
There was a problem hiding this comment.
Yeah, defaulting to solid white sounds completely reasonable to me! I'd be fine with making the field required as well, so that everything is more explicit (e.g. if the user uses a dark theme, white might be confusing).
Co-authored-by: Uriel-Sautron <uriel.sautron@gmail.com> Signed-off-by: Math_R_ <mathieu.richard747@gmail.com>
Math-R
force-pushed
the
mrd/spacetimechart/bordered-layer
branch
from
bfe88a6 to
e1d9a37
Compare
This PR allow the user to add a border around a PathLayer.
it closes #11056