Change width and height proportional

[Eden Zadikove]

Hey,

I have 2 questions about the symbol palette:

Question #1:

I have the following symbol palatte component:

   <SymbolPaletteComponent id="symbolpalette"

                //Defines how many palettes can be at expanded mode at a time

                expandMode={

                    "Multiple"

                }

                //Defines the palette collection

                palettes={

                    [

                        {

                            id: 'avatars',

                            expanded: false,

                            symbols: getAvatars(),

                            title: 'Avatars',

                            iconCss: 'e-ddb-icons e-basic'

                        }

                    ]

                }

                symbolPreview={

                    {

                        height: 80,

                        width: 80,

                    }

                }

                //Specifies the default size to render symbols

                symbolHeight={

                    80

                }

                symbolWidth={

                    80

                }

            />

the getAvatars() function:

export function getAvatars(): NodeModel[] {

     

    let avatars: NodeModel[] = [{

        id: 'worker 1',

        shape: {

            type: 'Image',

            source: "/images/icons/floorPlan/worker_1.png"

        },

        style: {

            fill: 'none',

            strokeColor:'none'

        },

        addInfo:{

            order:1,

            name:"notebook worker",

            symbolGroup:"Avatars",

            objectType:"nodes",

            propertiesGroup:"avatar"

        },

        width: 10,

        height:80

    },

    {

        id: 'worker 2',

        shape: {

            type: 'Image',

            source: "/images/icons/floorPlan/worker_2.png"

        },

        style: {

            fill: 'none',

            strokeColor:'none'

        },

        addInfo:{

            order:2,

            name:"hand up worker",

            symbolGroup:"Avatars",

            objectType:"nodes",

            propertiesGroup:"avatar"

        },

        width: 10,

        height:80

    },

    {

        id: 'worker 3',

        shape: {

            type: 'Image',

            source: "/images/icons/floorPlan/worker_3.png"

        },

        style: {

            fill: 'none',

            strokeColor:'none'

        },

        addInfo:{

            order:3,

            name:"Two Workers",

            symbolGroup:"Avatars",

            objectType:"nodes",

            propertiesGroup:"avatar"

        },

        width: 10,

        height:80

    },

    ];

    return avatars;

}

The result:

I'm trying to figure out how I can set a unique height and width for the "avatars" shapes,

but still leave the default height and width for the other shapes.

Question #2:

Is there a way to force proportional rezise on run time (in the diagram) for the shapes from the symbol palette?

BR,

Eden

[Aravind Ravi]

Hi Eden, 

We have added a sample link to demonstrate how to set the width and height property for symbol palette items and for the symbol palette items that are to be dragged into the diagram. When we drag the symbol and enter into symbol palette dragEnter event gets triggered. In that event, you can change the node height and width. In this sample, we used dragEnter for setting width and height for symbol palette items when it's dragged into the diagram. For more information, please refer to the below code snippet and sample link. 

 
code snippet: 

//Setting properties for element to be dragged into diagram
dragEnter={args => { 

                  let enteredNode = args.element; 

                  if (enteredNode) { 

                    enteredNode.height = 60; 

                    enteredNode.width = 60; 

                  } 

                }} 

 

Sample link: https://stackblitz.com/edit/react-jlhb3h-nrujzi?file=index.js 

 

Regards,
Aravind Ravi