Page Index Toggle Pages: [1] 2 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Issue with text on SVG node. (Read 13966 times)
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Issue with text on SVG node.
Oct 17th, 2022 at 4:48am
Print Post  
Hi,
We need help with text on SVG node.
When we export svg from diagram with text and past this svg to another diagram then svg image incorrect small. If this svg without text - it works OK.
Left part of screenshot with text, right is exactly same but without text.
  

Screenshot_2022-10-17_114352.png ( 82 KB | 185 Downloads )
Screenshot_2022-10-17_114352.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #1 - Oct 17th, 2022 at 9:53am
Print Post  
Hi,

What do you mean by diagram with text? Showing text using a ShapeNode does not change SVG content size in my test:

Code
Select All
var node1 = diagram.Factory.CreateShapeNode(
	0, 0, 100, 100, Shapes.Rectangle);
node1.Brush = Brushes.Transparent;
var node2 = diagram.Factory.CreateShapeNode(
	0, 100, 100, 100, Shapes.Rectangle);
node2.Brush = Brushes.Transparent;
diagram.ResizeToFitItems(0);

new SvgExporter().Export(diagram, "test1.svg");

var text = diagram.Factory.CreateShapeNode(10, 30, 50, 20);
text.Text = "test";
text.Transparent = true;

new SvgExporter().Export(diagram, "test2.svg");

var svg1 = new SvgContent();
svg1.Parse("test1.svg");
var svgNode1 = diagram.Factory.CreateSvgNode(
	200, 0, 100, 200, svg1);
svgNode1.Shape = Shapes.Rectangle;
svgNode1.Transparent = true;

var svg2 = new SvgContent();
svg2.Parse(@"test2.svg");
var svgNode2 = diagram.Factory.CreateSvgNode(
	330, 0, 100, 200, svg2);
svgNode2.Shape = Shapes.Rectangle;
svgNode2.Transparent = true;

diagram.ResizeToFitItems(50); 



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


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #2 - Oct 17th, 2022 at 10:02am
Print Post  
If your text is transparent ShapeNode, check if its Bounds value isn't larger than the geometric nodes. Node coordinates might be what determines exported SVG viewbox size, and not the actual text placement.
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #3 - Oct 17th, 2022 at 10:35am
Print Post  
For ex. I attached svg file with text which I exported form svg exporter. It looks like good on browser view but on canvas it becomes lower than bounding boxes. We don't use ShapeNode, but we use diagram.DrawStyledText
  

1.svg ( 0 KB | 204 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #4 - Oct 17th, 2022 at 11:06am
Print Post  
Do you call DrawStyledText from a custom node's Draw override, or e.g. from event handlers such as diagram.DrawForeground?
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #5 - Oct 18th, 2022 at 3:39am
Print Post  
Yes, I call it in
Code
Select All
override void Draw 

.
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #6 - Oct 20th, 2022 at 3:25am
Print Post  
Besides it when we make SVG from text and make SVG from this text-SVG -> We get filled text.
  

Screenshot_2022-10-20_102326.png ( 2 KB | 186 Downloads )
Screenshot_2022-10-20_102326.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #7 - Oct 21st, 2022 at 8:53am
Print Post  
Quote:
Besides it when we make SVG from text and make SVG from this text-SVG -> We get filled text.


Do you mean converting text to a path in some SVG editor? Please attach the SVG file.

Try new build here for text bounds problem -
https://mindfusion.eu/_beta/wpfdiag383.zip

If that's not helping, please post your drawing code. Our test node is -

Code
Select All
class TextNode : DiagramNode
{
	public override void DrawLocal(
		DrawingContext graphics,
		MindFusion.Diagramming.Wpf.RenderOptions options)
	{
		base.DrawLocal(graphics, options);

		if (Parent != null)
		{
			Parent.DrawStyledText(
				graphics, Text, this, GetLocalBounds());
		}
	}
} 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #8 - Oct 24th, 2022 at 3:42am
Print Post  
To draw text I use this code and it works OK, but when I export SVG by MindFusion.Diagramming.Wpf.Export.SvgExporter - I get file path1.svg (in new build it is not working too). If I export this svg with text again I get path2.svg with filled characters (next message):
Code
Select All
public override void Draw(DrawingContext graphics, RenderOptions options)
    {
        if (!ShouldRender())
        {
            return;
        }

        var bounds = GetBounds();
        var center = bounds.Location.ToVector() - Bounds.TopLeft.ToVector();
        bounds.Location = new Point(center.X, center.Y);
        var textAttributes = DiagramTextUtils.GetTextAttributesFromDomainEntity(TextGeometry.FontStyle);
        var translationResult = translationService.TranslateVariables(TextGeometry);
        attachedObjects = translationResult.AttachedObjects;
        var coloredText = DiagramTextUtils.ColorizeText(translationResult.TranslatedText, TextGeometry.FontStyle.FontColor);
        ParentDiagram.DrawStyledText(graphics, coloredText, textAttributes, bounds);
    }
 

  

path1.svg ( 0 KB | 165 Downloads )
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #9 - Oct 24th, 2022 at 3:42am
Print Post  
path2.svg
  

path2.svg ( 9 KB | 201 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #10 - Oct 24th, 2022 at 10:27am
Print Post  
This is what we can test without having your TextGeometry / attachedObjects definitions:

Code
Select All
// TextNode.cs
public override void Draw(DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
{
	var bounds = GetBounds();
	var center = new Vector(bounds.Location.X, bounds.Location.Y) - new Vector(Bounds.TopLeft.X, Bounds.TopLeft.Y);
	bounds.Location = new Point(center.X, center.Y);
	//var textAttributes = DiagramTextUtils.GetTextAttributesFromDomainEntity(TextGeometry.FontStyle);
	//var translationResult = translationService.TranslateVariables(TextGeometry);
	//attachedObjects = translationResult.AttachedObjects;
	//var coloredText = DiagramTextUtils.ColorizeText(translationResult.TranslatedText, TextGeometry.FontStyle.FontColor);
	Parent.DrawStyledText(graphics, Text, this, bounds);
}

...
// Window.cs
void TestSvgExIm()
{
	var node1 = diagram.Factory.CreateShapeNode(
		0, 0, 100, 100, Shapes.Ellipse);
	node1.Brush = Brushes.Transparent;
	var node2 = diagram.Factory.CreateShapeNode(
		0, 100, 100, 100, Shapes.RoundRect);
	node2.Brush = Brushes.Transparent;
	diagram.ResizeToFitItems(0);

	new SvgExporter().Export(diagram, "test1.svg");

	var text = new TextNode();
	text.Bounds = new Rect(10, 30, 50, 20);
	text.Text = "test";
	diagram.Nodes.Add(text);

	new SvgExporter().Export(diagram, "test2.svg");

	var svg1 = new SvgContent();
	svg1.Parse("test1.svg");
	var svgNode1 = diagram.Factory.CreateSvgNode(
		200, 0, 100, 200, svg1);
	svgNode1.Shape = Shapes.Rectangle;
	svgNode1.Transparent = true;

	var svg2 = new SvgContent();
	svg2.Parse("test2.svg");
	var svgNode2 = diagram.Factory.CreateSvgNode(
		330, 0, 100, 200, svg2);
	svgNode2.Shape = Shapes.Rectangle;
	svgNode2.Transparent = true;

	diagram.ResizeToFitItems(50);
} 



and it's showing no difference in SVG bounds. Note that SVG viewport size is set to diagram.Bounds and not to bounding box of just graphics elements, so our best guess is the diagram is larger when you add the TextNode to it.  Either the text node itself is larger than the surrounding graphics nodes from your screenshots (which might not be obvious if only drawing text in its center), or the 'attachedObjects' thing from your Draw method adds some invisible nodes that make the diagram larger.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #11 - Oct 25th, 2022 at 5:27am
Print Post  
What about filled characters after reexport?
  
Back to top
 
IP Logged
 
nullable
Full Member
***
Offline


I Love MindFusion!

Posts: 124
Joined: Aug 25th, 2022
Re: Issue with text on SVG node.
Reply #12 - Oct 25th, 2022 at 9:16am
Print Post  
I think that text in SVG using transform matrix and it could be issue. Can we bake it instantly? But without filling closed characters. Maybe pathes instead of text tag in .svg?
Bounding boxes are correct. But svg content inside incorrect.
It is more reproducible when we start export text not from top-left. After move text to center of diagram size of svg content decreasing.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #13 - Oct 25th, 2022 at 3:15pm
Print Post  
Quote:
What about filled characters after reexport?


Your path2.svg example shows a filled "e" in browsers and Inkscape too, so the path definitions it contains fill the "e" area, or maybe do not set proper fill-rules. What tool / code are you using exactly to "make SVG from text"?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3440
Joined: Oct 19th, 2005
Re: Issue with text on SVG node.
Reply #14 - Oct 25th, 2022 at 3:31pm
Print Post  
Quote:
It is more reproducible when we start export text not from top-left. After move text to center of diagram size of svg content decreasing.


Right, we have reproduced that now. Our developer will investigate.

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