Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic DiagramNode clipping area is not applying when exporting (Read 1621 times)
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
DiagramNode clipping area is not applying when exporting
Oct 17th, 2022 at 6:11am
Print Post  
For now, when we creating the diagram node and trying to apply the clip area by override the 'Draw' method - this clipping area is not applying when we trying to export the diagram by SvgExporter.

The code:
In this context the 'node' variable - it is another diagram node that exists under the mask (under the clipping area). We are just trying to apply the clipping area over another diagram node. That works good, but not with svg exporter.
Code
Select All
public override void Draw(DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
    {
        var maskBounds = mask.Rectangle.GetBoundingBox();
        var maskRect = DomainUtilities.CreateDomainRectangle(maskBounds);
        var clip = new RectangleGeometry(maskRect);

        graphics.PushClip(clip);
        node.Draw(graphics, options);
        graphics.Pop();
    }
 



1) The diagram node without the 'clipping area'
2) The diagram node with applied 'clipping area'
3) Check the 'output.pdf' where the exported svg is located.
  

Output.pdf ( 2 KB | 55 Downloads )
Without_mask.png ( 42 KB | 54 Downloads )
Without_mask.png
Mask_applied.png ( 29 KB | 51 Downloads )
Mask_applied.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: DiagramNode clipping area is not applying when exporting
Reply #1 - Oct 17th, 2022 at 10:58am
Print Post  
Indeed, SvgExporter does not apply generic clips, as our built-in node types usually draw within their Bounds. We'll try to add some clipping support for next release.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
Re: DiagramNode clipping area is not applying when exporting
Reply #2 - Dec 20th, 2022 at 5:15am
Print Post  
Please, let me know, are you still working on it?
If so, could you please let me know ETA of this feature?
« Last Edit: Dec 20th, 2022 at 10:43am by Dducky »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: DiagramNode clipping area is not applying when exporting
Reply #3 - Dec 22nd, 2022 at 6:08pm
Print Post  
Try new build here:
https://mindfusion.eu/_beta/wpfdiag39.zip

Clipping is behind a flag at this time; enable SvgExporter.SetClipPaths to test it.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
Re: DiagramNode clipping area is not applying when exporting
Reply #4 - Dec 23rd, 2022 at 6:03am
Print Post  
Its not working as expected with code above. Could you provide any sample how it works with SetClipPaths property?
Also, sometimes when i was trying to export diagram as svg - it cut off parts of some diagram items (without applied mask).
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: DiagramNode clipping area is not applying when exporting
Reply #5 - Dec 23rd, 2022 at 11:20am
Print Post  
Our test code is
Code
Select All
class ClipNode : DiagramNode
{
    public ClipNode()
    {
    }

    public override void Draw(
        DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
    {
        var node = new ShapeNode();
        node.Bounds = new Rect(0, 0, 160, 160);
        node.Shape = Shapes.Star16Pointed;

        var maskRect = this.GetLocalBounds();
        var clip = new RectangleGeometry(maskRect);

        graphics.PushClip(clip);
        graphics.PushTransform(new TranslateTransform(-20, -20));
        node.Draw(graphics, options);
        graphics.Pop();
        graphics.Pop();
    }
}

diagram.Nodes.Add(
    new ClipNode { Bounds = new Rect(20, 20, 120, 120) });

diagram.Nodes.Add(
    new ClipNode { Bounds = new Rect(160, 60, 120, 120) });

var svgEx = new SvgExporter();
svgEx.SetClipPaths = true;
svgEx.Export(diagram, "test.svg");
 





Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
Re: DiagramNode clipping area is not applying when exporting
Reply #6 - Dec 26th, 2022 at 8:06am
Print Post  
Thanks for sample, but for now SVG node doesn't support clipping area. See the code and attachments.

Light blue background displays the clipping area in 'testSvg.svg' file, the area around this background must be clipped, but it doesn't.

Also you can see the bounds of SVG node and clipping area (see the text in attached testSvg.svg file)

Code
Select All
public override void Draw(DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
        {
            // Just a SVG node with loaded svg content.
            svgNode.Text = $"Svg node bounds: {svgNode.Bounds} \n Clip area bounds: {clip.Bounds}";

            // 'Clip' bounds is lesser than SVG node bounds.
            // But it doesn't clip the resulting SVG node.
            graphics.PushClip(clip);

            // The clip area doesn't apply without 'push transform' call, even for shape node.
            graphics.PushTransform(new TranslateTransform(0, 0));

            // Here we are draw the SVG node under the clipping area (but it doesn't apply).
            svgNode.Draw(graphics, options);

            graphics.Pop();
        } 



  

testSvg.svg ( 25 KB | 55 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: DiagramNode clipping area is not applying when exporting
Reply #7 - Dec 26th, 2022 at 9:54am
Print Post  
Apparently the DrawingGroup.ClipGeometry property used by SvgExporter to find clips returns null if there's no transform applied on same element in visual tree (we guess some over-optimization in WPF code), so you will need to keep your fake transform. Our developer will check what happens with embedded SVG.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: DiagramNode clipping area is not applying when exporting
Reply #8 - Dec 26th, 2022 at 3:32pm
Print Post  
New build here should clip embedded SvgNode too -
https://mindfusion.eu/_beta/wpfdiag39.zip

Code
Select All
diagram.Nodes.Add(
    new ClipNode
    {
        Node = new ShapeNode
        {
            Bounds = new Rect(0, 0, 160, 160),
            Shape = Shapes.Star16Pointed
        },
        Bounds = new Rect(20, 20, 120, 120)
    });

diagram.Nodes.Add(
    new ClipNode
    {
        Node = new SvgNode
        {
            Bounds = new Rect(0, 0, 200, 200),
            Content = SvgContent.FromFile("img.svg"),
            Transparent = true
        },
        Bounds = new Rect(160, 60, 120, 120)
    });

var svgEx = new SvgExporter();
svgEx.SetClipPaths = true;
svgEx.Export(diagram, "test.svg");

class ClipNode : DiagramNode
{
    public ClipNode() {}

    public override void Draw(
        DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
    {
        if (Node != null)
        {
            var maskRect = this.GetLocalBounds();
            var clip = new RectangleGeometry(maskRect);

            graphics.PushClip(clip);
            graphics.PushTransform(new TranslateTransform(0, 0));
            Node.Draw(graphics, options);
            graphics.Pop();
            graphics.Pop();
        }
    }

    public DiagramNode Node { get; set; }
} 





Please attach your source SVG drawing if it's still not working for you.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint