calling a function which is outside the component same as explained in issue #395

[suchithmahadi]

I am calling a function which is outside the component same as explained in issue #395 but it is returning a string instead of a function I want to call defaults.drawGauge function in script and pass the id that is created dynamically

I am stuck please help me out grapesjs.plugins.add('liquid-gauge-plugin', function(editor, options){

let defaults = {
    // this function has to be called in  component script
    drawGauge:function(id){
        alert("draw" + id);
    }
}

for (let name in defaults) {
    if (!(name in options))
        options[name] = defaults[name];
}
var domComponents = editor.BlockManager;
domComponents.add('h1-block', {
    id: 'liquid',
    label: 'Liquid Gauge',
    category: 'plugin',
    attributes: {
        class: 'fa fa-square-o'
    },
    style: {
        padding: '100px'
    },
    content: {
        type: 'liquid'
    }
});

// Get DomComponents module
var comps = editor.DomComponents;

// Get the model and the view from the default Component type
var defaultType = comps.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
comps.addType('liquid', {
    model: defaultModel.extend({
            defaults: Object.assign({}, defaultModel.prototype.defaults, {
                removable: true,
                d: options.drawGauge,
                draggable: true,
                editable: true,
                copyable: true,
                badgable: true,
                highlightable: true,
                resizable: true,
                droppable: true,
                content: `<svg style="width:90%"; >
                </svg>`,
                script: function() {
                    console.log(this.id);
                    // I want to call defaults.drawGauge function here and pass this.id
                    var di =   `{[ d ]}`;
                    console.log(typeof(di));

                },

                traits: [

                    {
                        type: 'color',
                        label: 'Circle',
                        name: 'circles',
                        changeProp: 1,
                        // and update once traits changes
                        // options: options.drawGauge.update()
                    },
                    {
                        type: 'color',
                        label: 'wave',
                        name: 'wave',
                        changeProp: 1
                    },
                    {
                        type: 'color',
                        label: 'waveText',
                        name: 'waveText',
                        changeProp: 1
                    },
                    {
                        type: 'color',
                        label: 'Text Color',
                        name: 'textColor',
                        changeProp: 1
                    },
                ],
            })
        },
        {
            isComponent: function(el) {
                if (el.tagName == 'LIQUID') {
                    return {
                        type: 'liquid'
                    };
                }
            },
        }),

    // Define the View
    view: defaultType.view.extend({

        render: function() {
            defaultType.view.prototype.render.apply(this, arguments);
            return this;
        },
    }),
});

})

[artf]

If you want a function attached inside the string you have to pass a string

drawGauge: `function(id){
        alert(1);
}`

[suchithmahadi]

Sorry @artf i didn't understood what exactly you are saying, can you please elaborate? Here i want to call the function ("drawGauge" which is in 3rd line) in domComponents script function. Please explain related to the problem given above. Thanks for your help. please help in this as it is very critical for me and i am stuck on this from past 1 week.

[artf]

Inside your script property, {[ d ]} will be replaced with a d property of the componet and it can't be a function, so if your final result should be like this:

var di =  function() {...};

you have to set a string for d

...
removable: true,
d: "function() {...}",// <- string, NOT function
draggable: true,
editable: true,
...

[suchithmahadi]

One question so as per your explanation var di will be a string. But to achieve my goal i need to call drawGauge function in domComponents Script function. How to achieve this now ? Would be more help if you solve this.

[artf]

ok, d just can't be a function, it should contain your final string. It's up to you understand how/when to update it, eg. on init/trait change

..In your model
init() {
     this.set('d', options.drawGauge()); // initial value
     // then you could add a listener for your traits and change its value later
     this.listenTo(this, 'change:circles', this.doStuff)
},
doStuff() {
     this.set('d', options.drawGauge());
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.