Put icon inside a shape / node

[Scott Peal]

I need to create the ArchiMate library of shapes. Many of the shapes have a small icon in the top right corner that stays the same size when the node is resized. 

What is the best approach to accomplish this while still being able to export to PDF and printing?

Reference: https://drawio-app.com/blog/new-archimate-3-0-shapes/

I tried the Shapes.Path route but that only seems to create the outer shape. The Native and Image have warnings that they may not convert to image format. If I use a group, will the text editing style apply only to the outer box?

Thanks

[Balavignesh RaviChandran]

Hi Brian Peal,

Please find the response for your queries below,

Query	Response
I need to create the ArchiMate library of shapes.	We have prepared a sample where we have achieved the approximate shapes with the use of SVG nodes. Please refer to the sample and UG links below. Sample link:https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/Samples/ArchimateShapes/ArchimateShape/ArchimateShape Node UG link:https://blazor.syncfusion.com/documentation/diagram/nodes/nodes#how-to-create-node SymbolPalette UG link:https://blazor.syncfusion.com/documentation/diagram/symbol-palette
Many of the shapes have a small icon in the top-right corner that stays the same size when the node is resized.	Since the transform is applied to the parent upon resizing, all the children inherit the transform value and resize.
What is the best approach to accomplishing this while still being able to export to PDF and print?	We have also included the implementation for print and export in the supported formats, such as SVG, PNG, JPEG, and PDF.

 

[Scott Peal]

For others that may need to know this. I tried using the HTML node type; however, I had to use a textarea control inside to handle the label because the nodes annotation is hidden behind the HTML. BUT, when exported to PDF the textarea expanded to maximum side and didn't match the diagram. Also, I used SVG icons and they moved when exported also.

Then I discovered the Fixed Handles, so I switched to the Basic node type and use those with great results. 

[Sumathi Uthayakumar]

We are glad that the reported issue has been resolved while you were using the Basic Shape on your end.

 

In your query, you mentioned using the HTML shape type. However, when an annotation is added to an HTML shape, it becomes hidden beneath the HTML node. This is the expected behaviour of an HTML node with an annotation.

Regarding the approach you mentioned, where you used a textarea to handle labels on your end, we attempted the same and found that when exported to PDF, the textarea extended to the maximum size. However, when we tested it, the textarea was properly exported, just like the diagram output.

For your convenience, we have included a video demonstration showcasing the proper export of the textarea and the diagram.

Attachment: ExportToPDF_85149f3c.zip