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); });


  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().

        'cell:pointerdblclick': function(elementView) {
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.

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.

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


Issue Title Created Date Updated Date