Click Event is a PointerEvent and not IClickEventArgs

[Sébastien Sivignon]

Hi,

I'm trying to execute custom actions when a user click on a node, for that I need to know which node was clicked to access it's id at least.

I'm using the ComplexHierarchicalTree, and my setup is like that:

<ejs-diagram

#diagram

width="100%"

height="100%"

[getConnectorDefaults]="connDefaults"

[getNodeDefaults]="nodeDefaults"

[tool]="tool"

[layout]="layout"

[dataSourceSettings]="data"

[snapSettings]="snapSettings"

(created)="created()"

(click)="onClick($event)"

></ejs-diagram>

onClick(event: IClickEventArgs) {

console.log('click', event); // logs a PointerEvent

}

When I left click on a node, the "onClick" function is called but the event sent is a classic PointerEvent without any information from your IClickEventArgs.

Ideally, the user should be able to see which node is selected (change node color or whatever) in readonly, no edition at all and when the node is selected it should do my custom actions.

Any idea on what goes wrong or what I'm doing bad ?

Best regards

[Arunkumar Manoharan]

Hi CYBLEX,

We have created a ComplexHierarchicalTree sample with click event. When we click on the node, the click event gets triggered in which you can get a selected node/connector object id. For more info, please refer to the below code snippet and sample link below.

Code snippet:

    public click(args: IClickEventArgs): void {

        if (args.element) {

            console.log(args.element)

            console.log('Node ID :' + args.element.id)

        }

    }

Sample Link: https://stackblitz.com/edit/angular-xyph5h-mhvy2r?file=app.component.ts

Regards,

Arun Kumar.

[Sébastien Sivignon]

Hi,

Thanks for the stackblitz, now I get why the click event doesn't work.

The problem comes from the tool I use which is commented in your example :

tool: DiagramTools = DiagramTools.ZoomPan;

If I change it to SingleSelect in my project your code snippet works.

I don't want my users to be able to edit the nodes: move, rescale, rotate... I only want my user to be able to Zoom, Pan, and Select a node without any kind of edition.

Query: Is there any way to disable all kinds of edition while keeping the SingleSelect tool or any other tool (as long as the user can still zoom, pan and select only 1 node) so that when users click on a node I can know which node it is ?

Best Regards

[Arunkumar Manoharan]

Hi CYBLEX,

We suggest you use NodeConstraints and SelectorConstraints for your requirement. For more info, please refer to the below code snippet and the attached sample link below.

Code snippet:

<ejs-diagram

        #diagram

        id="diagram"

        width="100%"

        height="580px"

        [tool]='tool'

        [getNodeDefaults]="nodeDefaults"

        (created)="created()"

      >

      </ejs-diagram>

 

public tool: DiagramTools = DiagramTools.ZoomPan | DiagramTools.SingleSelect;

 

public nodeDefaults(obj: NodeModel): NodeModel {

        obj.constraints = NodeConstraints.Default &~ NodeConstraints.Drag;

        return obj;

    };

 

public created(): void {

        this.diagram.selectedItems.constraints &= SelectorConstraints.None;

    };

Sample Link: https://stackblitz.com/edit/angular-xyph5h-ekwx9s?file=app.component.ts

Regards,

Arun Kumar.

[Sébastien Sivignon]

Hi, 

Thanks a lot that's what I was looking for.

I just need to know if I can change the style of the selection and if it is possible to disable the text edition with double click ?

Best Regards

[Arunkumar Manoharan]

Hi CYBLEX,

if I can change the style of the selection

You can set the border color for the selector by the CSS properties. For more info, please refer to the below code snippet and sample link below.   Code snippet: <style>     .e-diagram-pivot-line {     stroke: blue;   }     .e-diagram-border {     stroke: blue !important;     stroke-dasharray: 30,2;     stroke-width: 3px;   } </style>

if it is possible to disable the text edition with double click

You can disable the text editing by setting the AnnotationConstraints as ReadOnly. For more info, please refer to the below code snippet and sample link below.   Code snippet: public nodeDefaults(obj: NodeModel): NodeModel {         obj.width = 40; obj.height = 40;         obj.annotations= [             {                 content: "Nodes",                 constraints: AnnotationConstraints.ReadOnly             }         ]         return obj;     };

Sample Link: https://stackblitz.com/edit/angular-xyph5h-kiwxih?file=app.component.ts

Regards,

Arun Kumar.

[Sébastien Sivignon]

Hi,

Thank you for the solution, I can do exactly what I want from here.

Best regards,

[Aravind Ravi]

Hi Cyblex,

Most welcome.

Regards

Aravind Ravi