Having a couple of poblems creating an interactive table within diagram

Question

Hi, I'm trying to create a table that I can drag nodes on and off. It needs to act like a raft, so that if I have items on top of the table, they move with it. But if I drag an item out it behaves independently again.

Here is a video of what I am trying to do and the issues I am having.

The biggest issues I am having are:

positionChangeEvent: the 'Completed' state (args.state) is not always triggered. I am using this to figure out whether I have moved a node on top of the table. Is there a better event that I can use that will be called every time a selection moves?
When I remove a child from a group it only works 90% of the time this.diagram.deleteChild(selectedNode, parent);. I do this on selection at the moment
Once I have added the dragged nodes as children of the table, they don't behave quite right:
- When I move the table, they don't respect their position relative to the parent
- When I resize the parent, I'd like them not to resize

Here is a stackblitz of what I have so far

And a video

Maybe there is a much simpler way for me to create this kind of component? In some ways it is similar to the SwimLane shape. Is there a better way to create complex shapes like this?

Many thanks! Geoff

Geoff · Answer

Hi, I made a bit of progress with issue 1(one) by using the mouseUp event rather than the position change event.   I updated the stackblitz

Arunkumar Manoharan · Answer

Hi Geoff, 
 





positionChangeEvent: the 'Completed' state (args.state) is not always triggered.  I am using this to figure out whether I have moved a node on top of the table.  Is there a better event that I can use that will be called every time a selection moves?
 

On the further analysis of the shared sample, we suggest you use the AllowDrop constraints to node and use the drop event instead of position change event. If we enable the AllowDrop constraints to a node and drag and drop a node over other node means, the drop event will be trigger, in that event we can call addOrRemoveNodeFromTable method. We have added the suggested change in the sample and added below for your references.Sample link: https://stackblitz.com/edit/angular-przr62?file=src%2Fapp%2Fdata.ts 


Once I have added the dragged nodes as children of the table, they don't behave quite right: 

When I move the table, they don't respect their position relative to the parent
When I resize the parent, I'd like them not to resize
 

We will check and update the further details on July 15, 2021. We appreciate your patience until then. 
 
 
Regards,Arun

Geoff · Answer

Hi Arun, thanks very much for that response.

I was using drop originally, but it wasn't working when I was dropping nodes on top of nodes. Seems to work OK since I just use the window mouseUp. Note: I think that's why your stackblitz works :-).

This is still there, triggered:

  @HostListener('window:mouseup', ['$event'])
  mouseUp(event) {
    const nodes = this.diagram.selectedItems.nodes;
    const hasNodes: boolean = nodes && nodes.length > 0;
    if (hasNodes) {
      nodes.forEach(n => this.addOrRemoveNodeFromTable(n));
    }
  }

Anyhow, I'm fine with using the mouseUp event for now. Seems to work pretty well.

Arunkumar Manoharan · Answer

Hi Geoff, 
 




Once I have added the dragged nodes as children of the table, they don't behave quite right: 

When I move the table, they don't respect their position relative to the parent
When I resize the parent, I'd like them not to resize
 

On further analyses of the shared sample, we found that you have called addgroupToChild API in mouseUp event. The mouseUp triggers every time while you perform mouseUp action in the diagram it repeatedly calls addgroupToChild API every single time when you perform mouse action that is causing the reported issue. So, we suggest you add the following code snippet to avoid the repetitive call of API in mouseUP event. We have added the suggested change in the sample and added it below for your reference and video link. 
 
Code snippet: 




@HostListener('window:mouseup', ['$event']) 
  mouseUp(event) { 
    const nodes = this.diagram.selectedItems.nodes; 
    const hasNodes: boolean = nodes && nodes.length > 0; 
 
// initially, node parentID will be null and when you drag and drop a node over another node and call addgroupToChild API the selected node parentID will be updated as target node id. So hereby adding condition will prevent the repetitive calls to addgroupToChild when the node has parentID. 
 
    if (hasNodes && !nodes[0].parentId) { 
      nodes.forEach(n => this.addOrRemoveNodeFromTable(n)); 
    } 
  } 
Sample link: https://stackblitz.com/edit/angular-trdvqd?file=src%2Fapp%2Fapp.component.ts 
 
Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video-1882234094 
 
 
 
 
 
Regards,Arun

Geoff · Answer

Hi Arun, thanks very much 🙏, that was a great help in solving the issue, I had to do it slightly differently to allow notes to be dragged off and between sections of the table.

I think we will be able to make this work for our use case! The outstanding issues I'm having, in the order I care about them...(please see video)

If I drag to select or do a select-all the children don't move in line with the table
Is it possible to allow user interaction with multiple of the children (notes)
Is it possible to prevent the children (notes) resizing with the parent?

---------

Stackblitz link: https://stackblitz.com/edit/angular-cmqmxe?file=src/app/data.ts

Video link: https://drive.google.com/file/d/1BgKh1Pm73IAbcP8kBPtkTL5wcp1WaEPU/view?usp=sharing

Gowtham Gunashekar · Answer

Hi Geoff,

Please find the response at the below table.

Query

Response

If I drag to select or do a select-all the children don't move in line with the table

We suggest you use the following code to avoid the children do not move along with the table. We set the true for the selection change event cancel argument as true and cancel the selection and add the selection to parent table alone by using the select API.

Code snippet:

public selectionCall = false;

public selectionChangeEvent(args: any) {

var parent = args.newValue.filter(node => !node.parentId);

if (

parent.length &&

parent[0].children &&

parent[0].children.length &&

!this.selectionCall &&

args.state === 'Changing' &&

args.type === 'Addition'

) {

this.currentSelection = [];

this.currentSelection = [...this.diagram.selectedItems.nodes];

//cancel the current selection by setting the true for the args.cancel

args.cancel = true;

this.selectionCall = true;

// select the parent node alone and while move the children move along the parent

this.diagram.select(parent);

this.selectionCall = false;

}

Is it possible to allow user interaction with multiple of the children (notes)

We understood that you want to multi select the children by using the “shift+ mouse Click”. When we click on the child node in the group the parent node will select the first click and at the second click the child node will get selected. It’s the default selection behavior of the group nodes. But we change the default behaviors using the key events, selection change events and click events. please find the below code snipper for your references.

Code snippet:

template: `

<ejs-diagram width="2000px" height="1000px" #diagram id="diagram"[nodes]="nodes" [snapSettings]="snapSettings"

(created)="onDiagramCreated()" (drop)="drop($event)" (click)="click($event)" (selectionChange)="selectionChangeEvent($event)"

(keyDown)="keyDown($event)"

(keyUp)="keyUp($event)"

></ejs-diagram>

`

public isShiftPressing: boolean = false;

public keyDown(arg: any) {

if (arg.key === 'Shift') {

// getting the information that the shift key is pressed or not

this.isShiftPressing = true;

}

public keyUp(arg: any) {

if (arg.key === 'Shift') {

// getting the information that the shift key is pressed or not

this.isShiftPressing = false;

}

public currentSelection = [];

public click(args: any) {

// when we click on the child the args.actualObject returns the node under the mouse pointer

if (

args.actualObject &&

args.actualObject instanceof Node &&

args.element &&

args.element instanceof Node &&

args.element.children

) {

var selectecItems = [];

if (this.isShiftPressing) {

// if shift key is being pressed we can get the existing child nodes from section

selectecItems = [...this.currentSelection];

}

// clear the existing selection using the following API

this.diagram.clearSelection();

// select the children using API

this.diagram.select([...selectecItems, args.actualObject]);

}

Is it possible to prevent the children (notes) resizing with the parent?

We can able to replicate the reported issue at our end we are validating the issue and update you with more details on 19^th July 2021.

We have added the suggested change in the shared sample and added below for your references.

Sample link: https://stackblitz.com/edit/angular-c5xc6s?file=src%2Fapp%2Fapp.component.ts

Regards,

Gowtham

Gowtham Gunashekar · Answer

Hi Geoff,  
  
Please find the response at the below table.  
 




Query 

Response 


Is it possible to prevent the children (notes) resizing with the parent?  

On the further analysis of the shared details, we understood you want to restrict the children scaling with respect to the parent group node is resizing. It's the implementational behavior of the group nodes. The inner children size changes with respect to the group resize. The group is a container of the children, the size of the group node is determined by the children's sizes. So, while resize the group the children get resize and while resize the child the group container gets resize. It’s the behavior of the group in diagram we don’t have any option to change this implementational behavior.  
    
 
 
 
Regards,  Gowtham

Geoff · Answer

Thanks very much @Gowtham, that was a great help

Gowtham Gunashekar · Answer

Hi Geoff, Thanks for
your update. Please let us know whether you need any further assistance on
this.Regards Gowtham