I am using react-logic-circuit designer

[Ramki Marichamy]

Hi, 
I try to create new component in logic-circuit-designer.
I created my own svg and try to add means. I didn't get connector for that node.
How to create our own custom component.


I added ammeter, For your svg data like Pull Down, Pull Up connectors are coming.
How to make connector for this. Give me solution how to do our own components

For example:

             

             {

                id: 'Ammeter',

                shape: { type: 'Path', data: ammeterdata, shape: 'Ammeter' },

                style: { fill: '#000000', strokeWidth: 0 },

                height: 45,

                width: 73,

                constraints: NodeConstraints.Default & ~NodeConstraints.InConnect,

             },  

[Ramki Marichamy]

I added one palaettes named: passivecomponent

 export class Palettes {

     constructor() {

         this.expandMode = 'Multiple';

         this.symbolPreview = { height: 50, width: 50 };

         this.symbolMargin = { left: 5, right: 5, top: 10, bottom: 10 };

         this.palettes = [

             { id: 'input', expanded: true, symbols: this.input(), title: 'Input Controls'},

             { id: 'output', expanded: true, symbols: this.output(), title: 'Output Controls' },

             { id: 'flow', expanded: true, symbols: this.gates(), title: 'Logic Gates' },

             { id: 'flipflop', expanded: true, symbols: this.flipflops(), title: 'Flip flops' },

             { id: 'passivecomponent', expanded: true, symbols: this.passiveComponents(), title: 'Passive Components' },

             { id: 'other', expanded: true, symbols: this.other(), title: 'Other' },

         ];

    }

     

     

     //  Passive Component

     passiveComponents() {

        const passiveComponents = [

           

            {

               id: 'Ammeter',

               shape: { type: 'Path', data: ammeterdata, shape: 'Ammeter' },

               style: { fill: '#000000', strokeWidth: 0 },

               height: 45,

               width: 73,

               constraints: NodeConstraints.Default & ~NodeConstraints.InConnect,

            },  

        ];

        return passiveComponents;

         

    }

     

    This NodeConstraints it's not working i think,

     how to create connecting line for our new Palettes

[Vivisa Ganesan]

Hi,

Query	Solution
I added ammeter, For your svg data like Pull Down, Pull Up connectors are coming. How to make connector for this. Give me solution how to do our own components	Based on the information you provided, it seems you are indicating that you are using SVG data. If you are indeed using SVG data, please ensure that the shape type is set to 'Native' and not 'Path'. For more detailed information, please refer to the user guide below. UG: https://ej2.syncfusion.com/react/documentation/diagram/shapes#native
I added one palaettes named: passivecomponent This NodeConstraints it's not working i think,   how to create connecting line for our new Palettes	We couldn't understand your request. Could you please provide more details about what you mean by 'connecting line'? It would be helpful if you could share images or a video so that we can better understand your requirements and provide you with accurate information.

Regards,

Vivisa