From 0c5a1142d39edbb8807c18efec256bb6228974e0 Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Mon, 24 May 2021 11:35:06 -0400 Subject: [PATCH] new "leaf" convention for terminal branches --- components.js | 38 +++++++++++++++++++++---- index.html | 78 +++++++++++++++++++++++++++------------------------ 2 files changed, 75 insertions(+), 41 deletions(-) diff --git a/components.js b/components.js index d9d1135..d7c03f6 100644 --- a/components.js +++ b/components.js @@ -117,7 +117,6 @@ let PivotForm = props => let Section = props => { let styles = css` - border-top:1px solid #aaa; .Heading { padding:6px 0 6px 0; @@ -145,7 +144,19 @@ let Section = props => } .Body { - margin:10px 0 10px 0; + position:relative; + padding:10px 0 20px 30px; + &::before + { + content: " "; + display:block; + position:absolute; + top:-8px; + left:8px; + width:3px; + height:100%; + background:black; + } } `; @@ -165,20 +176,37 @@ let Modifier = props => { let refNode = N.Step(props.modifier, "ModifyAt")[0]; - let handlerClick = () => + let handleDelete = () => { Pivot.Unmodify(props.modifier); Render(); }; + let displayFields = []; + N.Walk(node=>{ + displayFields.push(html``) + }, Pivot.Schema, "sum"); + + return html`
${refNode.Meta.Label}
- +
`; } +let PivotBranch = ({node, widths}) => +{ + let sumCells = node.Meta.Row.map(column=>h("td", null, column)); + return html` + + + ${sumCells} + + `; +}; + let PivotRoot = ({pivot, children}) => { @@ -194,7 +222,7 @@ let PivotRoot = ({pivot, children}) => font-size:24px; `; - let modifiers = N.Step(pivot, "Modifier") || []; + let modifiers = N.Step(pivot, "ModifyUp", false) || []; let handleDelete = ()=> { diff --git a/index.html b/index.html index 4879633..18d0431 100755 --- a/index.html +++ b/index.html @@ -236,7 +236,6 @@ var Pivot = { iterator = inLastBranch => { - N.Connect(inRoot, inLastBranch, "Terminal"); inLastBranch.Meta.Leaves.forEach( inLeaf => { // collect modifiers effecting leaves @@ -267,7 +266,7 @@ var Pivot = } // lastly connect the leaf to the branch - N.Connect(inLastBranch, inLeaf, "Hierarchy"); + N.Connect(inLastBranch, inLeaf, "Leaf"); }); delete inLastBranch.Meta.Leaves; } @@ -296,7 +295,7 @@ var Pivot = Delete(inRoot) { // disconnect modifiers - let check = N.Step(inRoot, "Modifier"); + let check = N.Step(inRoot, "ModifyUp", false); if(check) { while(check.length>0) @@ -306,8 +305,8 @@ var Pivot = } // disconnect terminal branches - N.Walk(()=>{}, inRoot, "Terminal", inNode=>{ - N.Disconnect(inNode, null, "Hierarchy"); + N.Walk(()=>{}, inRoot, "Hierarchy", inNode=>{ + N.Disconnect(inNode, null, "Leaf"); }); // disconnect from app @@ -317,41 +316,37 @@ var Pivot = { let modified = N.Create({Label:"Modifier"}); - // add the modifier to the appropriate root - N.ID.Walk++; - if(N.Step(inNode, "Hierarchy").length) - { - N.Walk(()=>{}, inNode, "Hierarchy", false, (inRoot)=> - { - N.Connect(inRoot, modified, "Modifier"); - }); - } - else - { - N.Connect(Pivot.Root, modified, "Modifier"); - } - // traverse - let leaves = []; - let gatherUp = n => N.Connect(modified, n, "ModifyUp"); - let gatherDown = n => - { - N.Connect(modified, n, "ModifyDown"); - N.Step(n, "Hierarchy").length == 0 ? leaves.push(n) : null; - }; - let gatherOut = n => { - - N.Connect(modified, n, "ModifyOut"); - - }; + let gatherUp = n => N.Connect(modified, n, "ModifyUp"); + let gatherDown = n => N.Connect(modified, n, "ModifyDown"); + let gatherOut = n => N.Connect(modified, n, "ModifyOut"); N.ID.Walk++; inNode.ID.Walk = N.ID.Walk; + + // at N.Connect(modified, inNode, "ModifyAt"); - + + // up N.Walk(gatherUp, inNode, "Hierarchy", false); - N.Walk(gatherDown, inNode, "Hierarchy"); - leaves.forEach(leaf=>N.Walk(gatherOut, leaf, "Hierarchy", false)); + + // down 1 + N.Walk(gatherDown, inNode, "Hierarchy", true, terminal=> + { + // down 2 + // for each terminal node, step down into its leaves and gather down + N.Walk(gatherDown, terminal, "Leaf", true, leaf=> + { + // out 1 + // walk back up on the leaf connections on other trees + N.Walk(gatherOut, leaf, "Leaf", false, terminal=> + { + // out 2 + // and continueup the hierarchy + N.Walk(gatherOut, terminal, "Hierarchy", false); + }); + }); + }); return modified; }, @@ -460,17 +455,28 @@ let ElNode = ({node, depth}) => } }, "Unmodify"); + let children = N.Step(node, "Hierarchy"); + let childrenDisplay = {}; + if(children.length) + { + childrenDisplay = h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) ); + } + else + { + childrenDisplay = h("div", {className:"Nodes Leaf"}, N.Step(node, "Leaf").map(child=>h(ElNode, {node:child, depth:depth+1})) ); + } + return h("div", {className:"Node"}, [ h("div", {className:cx(nodeBase, "Upper")}, [ h("div", {className:label}, [ - h("span", {className:"Icon Expand"}, "+"), + h("span", {className:"Icon Expand"}), h("span", {className:"Name"}, (node.Meta.Label || "a node")+" "+node.ID.Walk), h("span", {className: icon}), N.Step(node, "ModifyAt") ? buttonUnmodify : buttonModify ] ), h("div", {className:"Table"}, (node.Meta.Row || []).map( cell => h("div", {className:"Cell"}, cell)) ) ]), - h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) ) + childrenDisplay ]); };