Custom Palette Symbol Size

[Manuel]

Hi,

currently i'm adding my DiagramNodes directly to the SymbolPalette to make them available for usage.

The problem i got here is, that the Palette is resizing them to the given SymbolWidth and SymbolHight (60x60).

So a DiagramNode with a size of 200x120 becomes a size of 60x60 in the palette.

Is there any option to set a symbol size for a DiagramNode in the Palette?

Regards

Manuel

[Naganathan Ganesh Babu]

Hi Manuel, 

 

Please remove symbolWidth and symbolHeight properties from the symbol palette, so that the specified node width and height value will be rendered in symbol palette. 

 

The Code example we have initialized the symbolpalette without symbolWidth and symbolHeight properties: 

<EjsSymbolPalette id="symbolPalette" Width="100%" Height="700px"  

                              ExpandMode="@ExpandMode.Multiple" 

                              SymbolInfo="@SymbolInfo"> 

                <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin> 

                <SymbolPalettePalettes> 

                    <SymbolPalettePalette Id="flowShapePalette" Expanded="true" Symbols="@FlowShapeList" IconCss="e-ddb-icons e-flow" Title="Flow Shapes"> 

                    </SymbolPalettePalette> 

                    <SymbolPalettePalette Id="connectorPalette" Expanded="true" Symbols="@ConnectorList" IconCss="e-ddb-icons e-connector" Title="Connectors"> 

                    </SymbolPalettePalette> 

                </SymbolPalettePalettes> 

            </EjsSymbolPalette> 

 

 

 

Regards, 

 

Naganathan K G 

[Manuel]

Thank you, but than all symbols in the palette are getting the dimension of the shapes.

I'd like to set the symbol size for each shape in the palette separately.

[Naganathan Ganesh Babu]

Hi Manuel, 

 

Sorry for inconvenience caused. 

 

As we informed earlier, please remove the symbolpalette’s  SymbolHeight and SymbolWidth properties, so that each symbols will render with user defined width and height in the symbol palette as shown in the below image. Please refer to the below code example and sample. 

 

Code example: 

 

private void InitPaletteModel() 

{ 

SymbolInfo = new SymbolInfo() { Fit = true }; 

FlowShapeList = new ObservableCollection<DiagramNode>(); 

 

CreatePaletteNode(FlowShapes.Terminator, 100, 100); 

CreatePaletteNode(FlowShapes.Process, 150, 150); 

 

ConnectorList = new ObservableCollection<DiagramConnector>(); 

CreatePaletteConnector("Link1", DiagramSegments.Orthogonal, DecoratorShapes.Arrow); 

CreatePaletteConnector("Link2", DiagramSegments.Orthogonal, DecoratorShapes.None); 

 

} 

private void CreatePaletteNode(FlowShapes flowShape, float width, float height) 

{ 

DiagramNode diagramNode = new DiagramNode() 

{ 

Width = width, 

Height = height, 

Id = flowShape.ToString(), 

Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = flowShape } 

}; 

FlowShapeList.Add(diagramNode); 

} 

 

 

 

  

  

  

Sample link: https://www.syncfusion.com/downloads/support/forum/151299/ze/DiagramBlazor-126180684  

 

Regards, 

 

Naganathan K G 

[Manuel]

Hi,

thanks for your help, but maybe i did not descriped my problem well enought.

The situation i have is, that my palette symbols have to be much smaller than
the nodes i'd like to drop to the diagram. When i modify the palette symbol
width and heigth i lose the format relation the shapes have and when i modify
the node heigth and width directly they are to small when i drop them to the diagram.

I need a solution where  the nodes automatically fitting the palette symbol max height
and max width i set before, without losing it's dimensions. So a rectangle stays as rectangle
and a square stays as square.

Regards

Manuel

[Naganathan Ganesh Babu]

Hi Manuel, 

The symbol palette item renders with the user defined width and height and it doesn’t loses its dimensions. Also, when we drag a node from the palette onto the diagram, the node size will be same as the symbol size. Please refer to a below video for more details. 

Video: https://www.syncfusion.com/downloads/support/forum/151299/7z/video2966950583  

Sample link:  https://www.syncfusion.com/downloads/support/forum/151299/ze/DiagramBlazor-126180684  

If we misunderstood your requirement, please share us more details such as modify the below sample or video to demonstrate the issue.  

Regards, 

Naganathan K G 

[Manuel]

Hi, thanks for your response. I made a screenshot for better understanding.

I dropped all symbols i have on my palette to the diagram.

As you can see, the symbols in the palette have to be much smaller than
the shapes on the diagram. But everything i tried to fit this requirement,

ends in losing the dimensions for my rectangles (white and yellow shapes).

[Aravind Ravi]

Hi Manuel,   

   

We suspect that the issue occurs due to you have set the symbol preview height and width for palette symbols. If you set symbol preview height and width for symbols, then the node will be rendered in a diagram based on symbol preview height and width. We suggest you to remove the symbol preview height and width from palettes.   

  

Please remove the below highlighted code from your sample and also refer the below sample.  

  

   

<EjsSymbolPalette @ref="palette" id="palettes" Width="100%" Height="700px" ExpandMode="Syncfusion.EJ2.Blazor.Navigations.ExpandMode.Multiple">   

            <SymbolPaletteSymbolPreview Height="100" Width="100"></SymbolPaletteSymbolPreview>   

            <SymbolMargin Left="12" Right="12" Bottom="12" Top="12"></SymbolMargin>   

   

            <SymbolPalettePalettes>   

                <SymbolPalettePalette Id="flow" Expanded="true" Symbols="@flowShapes" IconCss="e-ddb-icons e-flow" Title="Flow Shapes">   

                </SymbolPalettePalette>   

                   

            </SymbolPalettePalettes>   

   

   

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Palettes-483723857    

   

If the issue still exists, then please share your sample project or code snippet of how do you create symbol palette. This will help us to serve you better.   

   

Regards   

Aravind Ravi