Selection.plugin.js: selected() doesn't trigger

[fancydev18]

Using Selection plugin in vue component, selected() doesn't trigger when selecting empty cell blocks. selecting() works.

Replicate with

<template>
    <div id="app">
        <GSTC :config="config" @state="onState" />
    </div>
</template>

<script>
import Selection from 'gantt-schedule-timeline-calendar/dist/Selection.plugin.js'
import GSTC from 'vue-gantt-schedule-timeline-calendar'
let subs = []

export default {
    name: 'app',
    components: {
        GSTC,
    },
    data() {
        return {
            config: {
                plugins: [
                    Selection({
                        selecting(data, type) {
                            console.log(`selecting ${type}`, data)
                        },
                        deselecting(data, type) {
                            //console.log(`deselecting ${type}`, data);
                        },
                        selected(data, type) {
                            console.log(`selected ${type}`, data)
                        },
                        deselected(data, type) {
                            console.log(`deselected ${type}`, data)
                        },
                    }),
                ],
                height: 300,
                list: {
                    rows: {
                        '1': {
                            id: '1',
                            label: 'Row 1',
                        },
                        '2': {
                            id: '2',
                            label: 'Row 2',
                        },
                        '3': {
                            id: '3',
                            label: 'Row 3',
                        },
                        '4': {
                            id: '4',
                            label: 'Row 4',
                        },
                    },
                    columns: {
                        data: {
                            id: {
                                id: 'id',
                                data: 'id',
                                width: 50,
                                header: {
                                    content: 'ID',
                                },
                            },
                            label: {
                                id: 'label',
                                data: 'label',
                                width: 200,
                                header: {
                                    content: 'Label',
                                },
                            },
                        },
                    },
                },
                chart: {
                    items: {
                        '1': {
                            id: '1',
                            rowId: '1',
                            label: 'Item 1',
                            time: {
                                start: new Date().getTime(),
                                end: new Date().getTime() + 24 * 60 * 60 * 1000,
                            },
                        },
                        '2': {
                            id: '2',
                            rowId: '2',
                            label: 'Item 2',
                            time: {
                                start: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
                                end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000,
                            },
                        },
                        '3': {
                            id: '3',
                            rowId: '2',
                            label: 'Item 3',
                            time: {
                                start: new Date().getTime() + 6 * 24 * 60 * 60 * 1000,
                                end: new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
                            },
                        },
                        '4': {
                            id: '4',
                            rowId: '3',
                            label: 'Item 4',
                            time: {
                                start: new Date().getTime() + 10 * 24 * 60 * 60 * 1000,
                                end: new Date().getTime() + 12 * 24 * 60 * 60 * 1000,
                            },
                        },
                        '5': {
                            id: '5',
                            rowId: '4',
                            label: 'Item 5',
                            time: {
                                start: new Date().getTime() + 12 * 24 * 60 * 60 * 1000,
                                end: new Date().getTime() + 14 * 24 * 60 * 60 * 1000,
                            },
                        },
                    },
                },
            },
        }
    },
    methods: {
        onState(state) {
            this.state = state
            subs.push(
                state.subscribe('config.chart.items.1', item => {
                    //console.log('item 1 changed', item)
                })
            )
            subs.push(
                state.subscribe('config.list.rows.1', row => {
                    //console.log('row 1 changed', row)
                })
            )
        },
    },
    mounted() {
      
    },
    beforeDestroy() {
        subs.forEach(unsub => unsub())
    },
}
</script>

[mauricehofman]

I think this is the same problem as: https://github.com/neuronetio/gantt-schedule-timeline-calendar/issues/154

I am also experiencing this. Did you found a solution @fancydev18 ?