Native Shapes Aspect Ratio

[ceds]

I have a variety of SVG shapes that are available through the Symbol palette.  Most of the shapes display correctly as their aspect ratios are close to 1:1.  However, other shapes look completely wrong.

For example, this shape icon in symbol palette:

When dragged to diagram:

After correcting (how it should look):

Is there any way to "fix" an aspect ratio for displaying in symbol palette as well as when first created ?

[ceds]

I have found a solution to "scale" the symbols correctly by setting the Scale property of the shape to "Meet". Increasing width and height of symbol now keeps the aspect ratio.

Only outstanding issue is the initial aspect ratio. Setting width and height properties to symbol does not work. The initial aspect ratio is set at 1:1 and I'm not able to find a way to change it.

[Vivisa Ganesan]

Hi,

We have created the sample using the SVG nodes. To control the aspect ratio for the node in the symbol palette at initial rendering, set the fit value to false in the getSymbolInfo method. You should avoid setting the symbolWidth and symbolHeight properties instead, establish the default width and height for the shape.

Code-snippet:

//Initializes the symbol palette

var palette = new ej.diagrams.SymbolPalette({

  expandMode: 'Multiple',

  palettes: [

    {

      id: 'flow',

      expanded: true,

      symbols: shapes,

      iconCss: 'e-ddb-icons e-flow',

      title: 'Native Shapes',

    },

  ],

  width: '100%',

  height: '700px',

  getSymbolInfo: function (symbol) {

    return { fit: false };

  },

});

palette.appendTo('#symbolpalette');

Sample

https://stackblitz.com/edit/b6a3dn-zeghx3?file=index.js,index.html

Regards,

Vivisa

[ceds]

Hi Vivisa,

This does not solve the problem.  In your example the aspect ratio in the symbol palette is 1:1 which squeezes the graphic.  I'm looking for a way to change the initial width/height to be different than 1:1.

You can better reproduce the problem by setting the propery "scale" of "shape" to "Meet".  This won't allow stretching beyond the initial aspect ratio.  In my example the icon looks as follows:

When placed on the diagram the aspect ratio is the same:

Increasing the shape the aspect ratio stays the same because of "Meet" scale issue:

There must be a way to set the initial width/height in order to set different aspect ratios.  I've tried all the width/height properties from previewSize to dragSize to shape to node without any success.

[ceds]

I have modified the code a little bit here to the one you shared:

https://stackblitz.com/edit/b6a3dn-yunwji?file=index.js,package.json

I made the SVG shape a bit wider to emphasize the issue and changed scale to "Meet". The aspect ratio is supposed to be 11.5:1 to show the image properly. Do try make it like that.

I honestly think this is a bug. You should be able to set an aspect ratio by changing width/height of the Shape object.  The Shape object is not rendered properly on the SVG transform to take into account the right aspect ratio of the width/height properties.

[Vivisa Ganesan]

Hi,

We have created the sample as per requirement. You can set symbolWidth and symbolHeight based on your requirement .When adding a node to the diagram, if you wish to maintain the same  width and height as in the symbol palette, you can achieve this by setting the width and height through the getNodeDefaults method. Additionally, if you want to preserve the aspect ratio while resizing the node, you can apply the aspect ratio constraints to the node. Refer the below sample and code-snippet.

Code-snippet:

var diagram = new ej.diagrams.Diagram({

  width: '100%',

  height: '700px',

  getNodeDefaults: function (obj) {

    obj.width = 200;

    obj.height = 60;

    obj.constraints =

      ej.diagrams.NodeConstraints.Default |

      ej.diagrams.NodeConstraints.AspectRatio;

  },

});

diagram.appendTo('#diagram');

Sample:

Tbu8zu (forked) - StackBlitz

Regards,

Vivisa

[ceds]

Hi Vivisa,

I think that is a step in the right direction.  However, when scale: 'Meet" is set the same problem persists.  Is there any way to make this work while scale is set to 'Meet'?  The functionality is not usable if the aspect ratio cannot be set.

[ceds]

Hi Vivisa,

I think that is a step in the right direction.  However, when scale: 'Meet" is set the same problem persists.  Is there any way to make this work while scale is set to 'Meet'?  The

[Preethi Rajakandham]

Hi Ceds,

We have created a new ticket to check and resolve the reported issue at your end. Please follow up for further updates in the ticket. Please let us know if you require any further assistance on this.  we will be happy to assist you. 

Regards,

Preethi R

[ceds]

Hi there,

Nobody seems to be replying there.  Can you please advise if this is a bug or are misunderstanding something ?

[Preethi Rajakandham]

Hi Ceds,

We have requested a meeting in the ticket. Please update us with your availability along with your time zone and follow up on the ticket link for further updates.

Regards,

Preethi R