element:pointerclick is not working on Stencil

This issue has been tracked since 2022-01-25.

Hi, I'm trying to attach event listener on stencil elements by using .on method, but seems it's not working.

I tried 2 ways actually

  1. Like this
    const stencil = new joint.ui.Stencil({ paper, }) .on('cell:pointerdblclick', () => { console.log(11); }) .on('click', () => { console.log(22); }) .on('element:pointerdown', () => { console.log(33); }) .on('element:pointerclick', () => { console.log(44); });

and

  1. Attached events on basic.Image Shape as well when adding them on stencil.load

Any ideas how to workaround this?

jamesgeorgewilliams wrote this answer on 2022-01-25

Hi, you can use stencil.getPaper().on().

 stencil.getPaper().on({
        'cell:pointerdblclick': function(elementView) {
            console.log(22);
        }
    });
rubenyeghikyan-highway wrote this answer on 2022-01-26

Hello @jamesgeorgewilliams, stencil.getPaper().on({... works fine.

Just curios on which event reacts.on methods that I used on examples above? seems .on is redundant. The only usage I can Imagine if you trigger custom events manually.

Anyways closing this issue

jamesgeorgewilliams wrote this answer on 2022-01-26

The stencil object does trigger events such as element:drag or element:drop. They would be used like your 1st method.

stencil.on('element:drop', (elementView) => {
  // Do something
});

A full list of the events can be found here: https://resources.jointjs.com/docs/rappid/v3.4/ui.html#ui.Stencil

It is possible to add events to subelements as described in this tutorial. This would help with the 2nd method.
https://resources.jointjs.com/tutorial/events

Or events when adding elements to the paper too:

graph.on('add', function(cell, collection, opt) {
      // The stencil adds the `stencil` property to the option object with value
      // set to a client id (`cid`) of the stencil view.
      if (opt.stencil) {
          console.log('A cell with id', cell.id, 'was just added to the paper from the stencil.');
      }
  });

We also have 2 demos TreeStencil and DynamicStencil where we work with stencil events, so you can certainly get some inspiration there too.
https://resources.jointjs.com/demos/tree-stencil
https://resources.jointjs.com/demos/dynamic-stencil

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-06
Star Count 3717
Watcher Count 155
Fork Count 817
Issue Count 53

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date