diff --git a/index.html b/index.html index 499c231..de788dc 100644 --- a/index.html +++ b/index.html @@ -114,6 +114,7 @@ var N = let array = N.Step(inNode, inKey, inForward); for(let i=0; i N.Connect(modifier, n, "ModifyUp"); + + let gatherUp = n => + { + N.Connect(modified, n, "ModifyUp"); + }; let gatherDown = n => { - N.Connect(modifier, n, "ModifyDown"); + N.Connect(modified, n, "ModifyDown"); N.Step(n, "Hierarchy").length == 0 ? leaves.push(n) : null; }; - let gatherOut = n => N.Connect(modifier, n, "ModifyOut"); + let gatherOut = n => + { + N.Connect(modified, n, "ModifyOut"); + }; + + N.ID.Walk++; + inNode.ID.Walk = N.ID.Walk; + N.Connect(modified, inNode, "ModifyAt"); N.Walk(gatherUp, inNode, "Hierarchy", false); - N.Connect(modifier, inNode, "ModifyAt"); N.Walk(gatherDown, inNode, "Hierarchy"); leaves.forEach(leaf=>N.Walk(gatherOut, leaf, "Hierarchy", false)); - return modifier; + return modified; }, Unmodify(inNode) { @@ -289,56 +297,14 @@ let select = N.Path([0, 1], pivotRoot1, "Hierarchy"); let mod = Pivot.Modify(select); - -let Store = createContext(null); -let StoreState = -{ - count:7 -}; -let StoreReducer = (inState, inAction) => -{ - -}; - let ElNode = ({node, depth}) => { - var color; - - if(N.Step(node, "ModifyDown")) - { - color = `yellow`; - } - if(N.Step(node, "ModifyUp")) - { - color = `skyblue`; - } - if(N.Step(node, "ModifyOut")) - { - color = `lightgrey`; - } - if(N.Step(node, "ModifyAt")) - { - color = `red`; - } - let nodeBase = css` position:relative; padding:0; margin:0; border-top:1px solid lightgrey; - & > .Label - { - display:inline-block; - width:200px; - background:${color}; - } - & > .Label::before - { - content:" "; - display:inline-block; - width:${depth*15}px; - } .Table { display:inline-block; @@ -351,10 +317,45 @@ let ElNode = ({node, depth}) => padding:10px; } `; + let label = css` + display:inline-block; + width:200px; + + &::before + { + content:" "; + display:inline-block; + width:${depth*15}px; + } + .Modify + { + float:right; + } + `; + + let mCombined = cx( + css` + display:inline-block; + width:0px; + height:0px; + border:7px solid white; + `, + { + [css`border-bottom-color:lightblue;`]: N.Step(node, "ModifyUp" ), + [css`border-top-color:orange;` ]: N.Step(node, "ModifyDown"), + [css`border-left-color:grey;` ]: N.Step(node, "ModifyOut" ), + [css`border-right-color:red;` ]: N.Step(node, "ModifyAt" ) + }, + ); return h("div", {className:"Node"}, [ - h("div", {className:cx(css(nodeBase), "Upper")}, [ - h("div", {className:"Label"}, (node.Meta.Label || "a node") ), + h("div", {className:cx(nodeBase, "Upper")}, [ + h("div", {className:label}, [ + h("span", {className:"Icon Expand"}, "+"), + h("span", {className:"Name"}, (node.Meta.Label || "a node")+" "+node.ID.Walk), + h("span", {className:mCombined}), + h("span", {className:"Icon Modify"}, "Modify") + ] ), 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})) ) @@ -368,14 +369,10 @@ let ElPivot = ({pivot}) => } let ElRoot = ({pivots}) => { - let [get, set] = useReducer(StoreReducer, StoreState); - - return h(Store.Provider, {value:{get, set}}, [ - h("div", null, [ - h("h3", null, "tree view"), - ...pivots.map(pivot=>h(ElPivot, {pivot})) - ]) - ]); + return h("div", null, [ + h("h3", null, "tree view"), + ...pivots.map(pivot=>h(ElPivot, {pivot})) + ]) }; render(h(ElRoot, {pivots}, null), document.querySelector("#app"));