Home > Enterprise >  How to change property of parent element if at least one child selected?
How to change property of parent element if at least one child selected?

Time:07-07

I have a tree of nodes of type LayerNode. Where each node as children and parent reference.

I try to change property of parent if at least one child element has property selected = true.

  public recursiveSelectLayers(node: LayerNode) {
    if (node.children)
      node.children.forEach((childNode: LayerNode) => {
        childNode.parent = node;

        if (childNode?.parent?.selected)
          childNode.selected = childNode.parent.selected;

        if (childNode.selected && childNode.parent)
          childNode.parent.selected = childNode.selected;

        this.recursiveSelectLayers(childNode);
      });
  }

At the same time if parent is selected I need to set selected for all children.

Problem is if one of children has selected the function above selects all children from last children to the root.

My second attempt:

  public recursiveSelectLayers(node: LayerNode) {
    if (node.parent && node.selected) node.parent.selected = node.selected;

    if (node.children) {
      node.children.forEach((childNode: LayerNode) => {
        if (node?.selected) childNode.selected = node.selected;
        childNode.parent = node;
        this.recursiveSelectLayers(childNode);
      });
    }
  }

Case 1:

Parent 1 (selected)
   Child 1
   Child 2
   Child 3 (selected)

Case 2:

   Parent 1 (selected)
       Child 1 (selected)
       Child 2 (selected)
       Child 3 (selected)

Case 3:

   Parent 1 (selected)
       Child 1
       Child 2
       Child 3 (selected)
           Child 3.1 (selected)

CodePudding user response:

I'd go with this:

function recursiveSelectLayers(node) {
  node.children.forEach(recursiveSelectLayers);
  node.selected = [...node.children].some(({selected}) => !!selected) || node.parent.selected;
}

CodePudding user response:

I try this... but I'm testing it. Passed 4 cases.

function recursiveSelectLayers(node) {
  if (node.parent && node.parent.selected) {
    node.selected = true;
  }

  if (node.parent && node.selected) {
    node.parent.selected = true;
  }

  if (node.children) {
    node.children.forEach((childNode) => {

      recursiveSelectLayers(childNode);
    });
  }

  return node
}

// tests:

var case1 = {
  selected: true,
  children: [{}, {}, {
    selected: true
  }]
}
case1.children[0].parent = case1;
case1.children[1].parent = case1;
case1.children[2].parent = case1;

var case2 = {
  selected: true,
  children: [{
    selected: true
  }, {
    selected: true
  }, {
    selected: true
  }]
}
case2.children[0].parent = case2;
case2.children[1].parent = case2;
case2.children[2].parent = case2;

var case3 = {
  selected: true,
  children: [{}, {}, {
    selected: true,
    children: [{
      selected: true
    }]
  }]
}
case3.children[0].parent = case3;
case3.children[1].parent = case3;
case3.children[2].parent = case3;
case3.children[2].children[0].parent = case3.children[2];

var case4 = {
  children: [{}, {}, {
    selected: true,
    children: [{}]
  }]
}
case4.children[0].parent = case4;
case4.children[1].parent = case4;
case4.children[2].parent = case4;
case4.children[2].children[0].parent = case4.children[2];

console.log(recursiveSelectLayers(case1))
console.log(recursiveSelectLayers(case2))
console.log(recursiveSelectLayers(case3))
console.log(recursiveSelectLayers(case4))
<pre>
Case1: 
   Parent 1 (selected)
      Child 1
      Child 2
      Child 3 (selected)

Case 2:
   Parent 1 (selected)
       Child 1 (selected)
       Child 2 (selected)
       Child 3 (selected)

Case 3:
   Parent 1 (selected)
       Child 1
       Child 2
       Child 3 (selected)
           Child 3.1 (selected)
           
Case 4:
   Parent 1
       Child 1 
       Child 2
       Child 3 (selected)
           Child 3.1 
                     
</pre>

  • Related