modifier-form #8
312
components.js
312
components.js
@ -1,312 +0,0 @@
|
|||||||
import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
|
|
||||||
import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
|
|
||||||
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
|
|
||||||
import htm from 'https://unpkg.com/htm?module';
|
|
||||||
const html = htm.bind(h);
|
|
||||||
|
|
||||||
let Styles = {
|
|
||||||
Form:css`
|
|
||||||
position:realtive;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 10px;
|
|
||||||
color:black;
|
|
||||||
font-family:sans-serif;
|
|
||||||
|
|
||||||
.Title
|
|
||||||
{
|
|
||||||
font-size:24px;
|
|
||||||
font-weight:100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Section
|
|
||||||
{
|
|
||||||
padding:10px 0 10px 0;
|
|
||||||
|
|
||||||
.Heading
|
|
||||||
{
|
|
||||||
display:inline-block;
|
|
||||||
color:#666;
|
|
||||||
font-family:sans-serif;
|
|
||||||
font-size:12px;
|
|
||||||
font-weight:900;
|
|
||||||
text-transform:uppercase;
|
|
||||||
}
|
|
||||||
.Group
|
|
||||||
{
|
|
||||||
display:inline-block;
|
|
||||||
padding:5px;
|
|
||||||
border-radius:5px;
|
|
||||||
margin:3px;
|
|
||||||
background:rgba(0, 0, 0, 0.3)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let PivotForm = props =>
|
|
||||||
{
|
|
||||||
|
|
||||||
let pivotColumns = N.Step(Pivot.Schema, "label")||[];
|
|
||||||
let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
|
|
||||||
|
|
||||||
let sumColumns = N.Step(Pivot.Schema, "sum")||[];
|
|
||||||
//let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
|
|
||||||
|
|
||||||
let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
|
|
||||||
let indiciesSum = sumColumns.map(node=>node.Meta.Index);
|
|
||||||
//let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
|
|
||||||
|
|
||||||
let displayPivotsAll = html`
|
|
||||||
<div class="Section">
|
|
||||||
<div class="Heading">Available Columns</div>
|
|
||||||
<div class="Group">
|
|
||||||
${pivotColumns.map( columnPivot =>
|
|
||||||
{
|
|
||||||
let attributes = {};
|
|
||||||
if(N.Step(columnPivot, "used-pivot", false))
|
|
||||||
{
|
|
||||||
attributes.disabled = true;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
attributes.onClick = e=>
|
|
||||||
{
|
|
||||||
N.Connect(Pivot.Proto, columnPivot, "used-pivot");
|
|
||||||
Render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return html`<button ...${attributes}>${columnPivot.Meta.Label}</button>`;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
let displayPivotsPending = null;
|
|
||||||
if(pivotColumnsUsed.length)
|
|
||||||
{
|
|
||||||
displayPivotsPending = html`
|
|
||||||
<div class="Section">
|
|
||||||
<div class="Heading">Pending Pivot</div>
|
|
||||||
<div class="Group">
|
|
||||||
${pivotColumnsUsed.map(columnPivot=>html`
|
|
||||||
<button onClick=${e=>{N.Disconnect(Pivot.Proto, columnPivot, "used-pivot");Render();}}>
|
|
||||||
${columnPivot.Meta.Label}
|
|
||||||
</button>
|
|
||||||
`)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button onClick=${e=>{
|
|
||||||
N.Disconnect(Pivot.Proto, null, "used-pivot");
|
|
||||||
N.Disconnect(Pivot.Proto, null, "used-sum");
|
|
||||||
Pivot.Create(indiciesPivot, indiciesSum);
|
|
||||||
Render();
|
|
||||||
}}>Create</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div class=${Styles.Form}>
|
|
||||||
<div class="Title">Create New Pivot</div>
|
|
||||||
${displayPivotsAll}
|
|
||||||
${displayPivotsPending}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
let Section = props =>
|
|
||||||
{
|
|
||||||
let styles = css`
|
|
||||||
.Heading
|
|
||||||
{
|
|
||||||
padding:6px 0 6px 0;
|
|
||||||
color:#666;
|
|
||||||
font-weight:900;
|
|
||||||
font-size:12px;
|
|
||||||
text-transform:uppercase;
|
|
||||||
cursor:pointer;
|
|
||||||
|
|
||||||
span
|
|
||||||
{
|
|
||||||
display:inline-block;
|
|
||||||
width:20px;
|
|
||||||
height:20px;
|
|
||||||
margin-right:10px;
|
|
||||||
border-radius:20px;
|
|
||||||
background:black;
|
|
||||||
color:white;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.Heading:hover
|
|
||||||
{
|
|
||||||
color:black;
|
|
||||||
}
|
|
||||||
.Body
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
padding:10px 0 20px 30px;
|
|
||||||
&::before
|
|
||||||
{
|
|
||||||
content: " ";
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
top:-8px;
|
|
||||||
left:8px;
|
|
||||||
width:3px;
|
|
||||||
height:100%;
|
|
||||||
background:black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
let [openGet, openSet] = useState(false);
|
|
||||||
return html`
|
|
||||||
<div class=${styles}>
|
|
||||||
<div class="Heading" onClick=${e=>openSet(!openGet)}>
|
|
||||||
<span>${openGet ? `−` : `+`}</span>
|
|
||||||
${props.label}
|
|
||||||
</div>
|
|
||||||
${ openGet ? html`<div class="Body">${props.children}</div>` : null }
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
let Modifier = props =>
|
|
||||||
{
|
|
||||||
let refNode = N.Step(props.modifier, "ModifyAt")[0];
|
|
||||||
|
|
||||||
let handleDelete = () =>
|
|
||||||
{
|
|
||||||
Pivot.Unmodify(props.modifier);
|
|
||||||
Render();
|
|
||||||
};
|
|
||||||
|
|
||||||
let displayFields = [];
|
|
||||||
N.Walk(node=>{
|
|
||||||
displayFields.push(html`<input type='number'/>`)
|
|
||||||
}, Pivot.Schema, "sum");
|
|
||||||
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div>
|
|
||||||
<div>${refNode.Meta.Label}</div>
|
|
||||||
<button onClick=${handleDelete}>Delete</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
let PivotBranch = props =>
|
|
||||||
{
|
|
||||||
let row = props.node.Meta.Row;
|
|
||||||
let displayCells = row.map(column=>h("td", null, column));
|
|
||||||
let displayCellsModify = row.map(column=>false);
|
|
||||||
props.node.Meta.IndexSum.forEach(i=>
|
|
||||||
{
|
|
||||||
displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
|
|
||||||
});
|
|
||||||
displayCellsModify.forEach((cell, i)=>
|
|
||||||
{
|
|
||||||
if(!cell)
|
|
||||||
{
|
|
||||||
displayCellsModify[i] = html`<td>${row[i]}</td>`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td colspan=${displayCells.length+1}><hr/></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>${props.node.Meta.Label}</strong>
|
|
||||||
</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td colspan=${displayCells.length+1}>Modifications</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>At</td>
|
|
||||||
${displayCellsModify}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Below</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Above</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Outside</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Computed</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td colspan=${displayCells.length+1}>Goals</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Max</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Min</td>
|
|
||||||
${displayCells}
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
let PivotRoot = ({pivot}) =>
|
|
||||||
{
|
|
||||||
|
|
||||||
let stylesRoot = css`
|
|
||||||
display:block;
|
|
||||||
box-sizing:border-box;
|
|
||||||
padding:15px;
|
|
||||||
font-family:sans-serif;
|
|
||||||
`;
|
|
||||||
let stylesHeading = css`
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
font-weight:0;
|
|
||||||
font-size:24px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
let modifiers = N.Step(pivot, "ModifyUp", false) || [];
|
|
||||||
let handleDelete = ()=>
|
|
||||||
{
|
|
||||||
Pivot.Delete(pivot);
|
|
||||||
Render();
|
|
||||||
};
|
|
||||||
|
|
||||||
let rows = [];
|
|
||||||
N.ID.Walk++;
|
|
||||||
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div class=${stylesRoot}>
|
|
||||||
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
|
||||||
<${Section} key="settings" label=${`Settings`}>
|
|
||||||
<button onClick=${handleDelete}>Destroy Pivot</button>
|
|
||||||
<//>
|
|
||||||
<${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
|
|
||||||
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
|
|
||||||
<//>
|
|
||||||
<${Section} key="tree" label=${"Tree"}>
|
|
||||||
<table>
|
|
||||||
${rows}
|
|
||||||
</table>
|
|
||||||
<//>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export {Section, PivotRoot, PivotForm};
|
|
||||||
380
index.html
380
index.html
@ -1,5 +1,6 @@
|
|||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<!-- N -->
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var N =
|
var N =
|
||||||
@ -168,35 +169,7 @@ var N =
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- calc testing -->
|
<!-- Pivot -->
|
||||||
<script>
|
|
||||||
let ModificationPull = (inDAG) =>
|
|
||||||
{
|
|
||||||
let collect = inArray => n => { n.Meta.Tweak.forEach((t, i)=>{ inArray[n.Meta.Indicies[i]] += t; }); };
|
|
||||||
let totalScale = [0, 0, 0, 0, 0, 0, 0, 0];
|
|
||||||
let totalAdd = [0, 0, 0, 0, 0, 0, 0, 0];
|
|
||||||
|
|
||||||
N.ID.Walk++;
|
|
||||||
N.Walk(collect(totalScale), inDAG, "ModifyAt", false);
|
|
||||||
N.Walk(collect(totalScale), inDAG, "ModifyDown", false);
|
|
||||||
N.Walk(collect(totalAdd), inDAG, "ModifyUp", false);
|
|
||||||
N.Walk(collect(totalAdd), inDAG, "ModifyOut", false);
|
|
||||||
|
|
||||||
return [totalScale, totalAdd];
|
|
||||||
};
|
|
||||||
|
|
||||||
let dag1 = N.Create({Label:"dag-1"});
|
|
||||||
let m0 = N.Create({Label:"m-0", Tweak:[-1, 2, 0.7], Indicies:[0, 1, 2]});
|
|
||||||
let m1 = N.Create({Label:"m-1", Tweak:[0.1, 0.1, 0.1], Indicies:[1, 2, 3]});
|
|
||||||
|
|
||||||
N.Connect(m0, dag1, "ModifyAt");
|
|
||||||
N.Connect(m1, dag1, "ModifyDown");
|
|
||||||
|
|
||||||
let results = ModificationPull(dag1);
|
|
||||||
console.log(results);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var Pivot =
|
var Pivot =
|
||||||
{
|
{
|
||||||
@ -381,18 +354,9 @@ var Pivot =
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<!-- rendering -->
|
||||||
var Render = () => {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
|
||||||
import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
|
|
||||||
import { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
|
|
||||||
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
|
|
||||||
|
|
||||||
import {PivotRoot, PivotForm} from './components.js';
|
|
||||||
|
|
||||||
Pivot.Init(
|
Pivot.Init(
|
||||||
["id", "type-a", "type-b", "count", "extra"],
|
["id", "type-a", "type-b", "count", "extra"],
|
||||||
["label", "label", "label", "sum", "sum"],
|
["label", "label", "label", "sum", "sum"],
|
||||||
@ -407,6 +371,312 @@ Pivot.Init(
|
|||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
|
||||||
|
import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
|
||||||
|
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
|
||||||
|
import htm from 'https://unpkg.com/htm?module';
|
||||||
|
const html = htm.bind(h);
|
||||||
|
|
||||||
|
let PivotForm = props =>
|
||||||
|
{
|
||||||
|
let styles = css`
|
||||||
|
position:realtive;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
color:black;
|
||||||
|
font-family:sans-serif;
|
||||||
|
|
||||||
|
.Title
|
||||||
|
{
|
||||||
|
font-size:24px;
|
||||||
|
font-weight:100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Section
|
||||||
|
{
|
||||||
|
padding:10px 0 10px 0;
|
||||||
|
|
||||||
|
.Heading
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
color:#666;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-size:12px;
|
||||||
|
font-weight:900;
|
||||||
|
text-transform:uppercase;
|
||||||
|
}
|
||||||
|
.Group
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
padding:5px;
|
||||||
|
border-radius:5px;
|
||||||
|
margin:3px;
|
||||||
|
background:rgba(0, 0, 0, 0.3)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
let pivotColumns = N.Step(Pivot.Schema, "label")||[];
|
||||||
|
let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
|
||||||
|
|
||||||
|
let sumColumns = N.Step(Pivot.Schema, "sum")||[];
|
||||||
|
//let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
|
||||||
|
|
||||||
|
let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
|
||||||
|
let indiciesSum = sumColumns.map(node=>node.Meta.Index);
|
||||||
|
//let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
|
||||||
|
|
||||||
|
let displayPivotsAll = html`
|
||||||
|
<div class="Section">
|
||||||
|
<div class="Heading">Available Columns</div>
|
||||||
|
<div class="Group">
|
||||||
|
${pivotColumns.map( columnPivot =>
|
||||||
|
{
|
||||||
|
let attributes = {};
|
||||||
|
if(N.Step(columnPivot, "used-pivot", false))
|
||||||
|
{
|
||||||
|
attributes.disabled = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
attributes.onClick = e=>
|
||||||
|
{
|
||||||
|
N.Connect(Pivot.Proto, columnPivot, "used-pivot");
|
||||||
|
Render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return html`<button ...${attributes}>${columnPivot.Meta.Label}</button>`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
let displayPivotsPending = null;
|
||||||
|
if(pivotColumnsUsed.length)
|
||||||
|
{
|
||||||
|
displayPivotsPending = html`
|
||||||
|
<div class="Section">
|
||||||
|
<div class="Heading">Pending Pivot</div>
|
||||||
|
<div class="Group">
|
||||||
|
${pivotColumnsUsed.map(columnPivot=>html`
|
||||||
|
<button onClick=${e=>{N.Disconnect(Pivot.Proto, columnPivot, "used-pivot");Render();}}>
|
||||||
|
${columnPivot.Meta.Label}
|
||||||
|
</button>
|
||||||
|
`)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onClick=${e=>{
|
||||||
|
N.Disconnect(Pivot.Proto, null, "used-pivot");
|
||||||
|
N.Disconnect(Pivot.Proto, null, "used-sum");
|
||||||
|
Pivot.Create(indiciesPivot, indiciesSum);
|
||||||
|
Render();
|
||||||
|
}}>Create</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class=${styles}>
|
||||||
|
<div class="Title">Create New Pivot</div>
|
||||||
|
${displayPivotsAll}
|
||||||
|
${displayPivotsPending}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let Section = props =>
|
||||||
|
{
|
||||||
|
let styles = css`
|
||||||
|
.Heading
|
||||||
|
{
|
||||||
|
padding:6px 0 6px 0;
|
||||||
|
color:#666;
|
||||||
|
font-weight:900;
|
||||||
|
font-size:12px;
|
||||||
|
text-transform:uppercase;
|
||||||
|
cursor:pointer;
|
||||||
|
|
||||||
|
span
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
width:20px;
|
||||||
|
height:20px;
|
||||||
|
margin-right:10px;
|
||||||
|
border-radius:20px;
|
||||||
|
background:black;
|
||||||
|
color:white;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.Heading:hover
|
||||||
|
{
|
||||||
|
color:black;
|
||||||
|
}
|
||||||
|
.Body
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
padding:10px 0 20px 30px;
|
||||||
|
&::before
|
||||||
|
{
|
||||||
|
content: " ";
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
top:-8px;
|
||||||
|
left:8px;
|
||||||
|
width:3px;
|
||||||
|
height:100%;
|
||||||
|
background:black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
let [openGet, openSet] = useState(false);
|
||||||
|
return html`
|
||||||
|
<div class=${styles}>
|
||||||
|
<div class="Heading" onClick=${e=>openSet(!openGet)}>
|
||||||
|
<span>${openGet ? `−` : `+`}</span>
|
||||||
|
${props.label}
|
||||||
|
</div>
|
||||||
|
${ openGet ? html`<div class="Body">${props.children}</div>` : null }
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let Modifier = props =>
|
||||||
|
{
|
||||||
|
let refNode = N.Step(props.modifier, "ModifyAt")[0];
|
||||||
|
|
||||||
|
let handleDelete = () =>
|
||||||
|
{
|
||||||
|
Pivot.Unmodify(props.modifier);
|
||||||
|
Render();
|
||||||
|
};
|
||||||
|
|
||||||
|
let displayFields = [];
|
||||||
|
N.Walk(node=>{
|
||||||
|
displayFields.push(html`<input type='number'/>`)
|
||||||
|
}, Pivot.Schema, "sum");
|
||||||
|
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div>
|
||||||
|
<div>${refNode.Meta.Label}</div>
|
||||||
|
<button onClick=${handleDelete}>Delete</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let PivotBranch = props =>
|
||||||
|
{
|
||||||
|
let row = props.node.Meta.Row;
|
||||||
|
let displayCells = row.map(column=>h("td", null, column));
|
||||||
|
let displayCellsModify = row.map(column=>false);
|
||||||
|
props.node.Meta.IndexSum.forEach(i=>
|
||||||
|
{
|
||||||
|
displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
|
||||||
|
});
|
||||||
|
displayCellsModify.forEach((cell, i)=>
|
||||||
|
{
|
||||||
|
if(!cell)
|
||||||
|
{
|
||||||
|
displayCellsModify[i] = html`<td>${row[i]}</td>`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colspan=${displayCells.length+1}><hr/></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>${props.node.Meta.Label}</strong>
|
||||||
|
</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan=${displayCells.length+1}>Modifications</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>At</td>
|
||||||
|
${displayCellsModify}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Below</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Above</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outside</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Computed</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan=${displayCells.length+1}>Goals</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Max</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Min</td>
|
||||||
|
${displayCells}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
let PivotRoot = ({pivot}) =>
|
||||||
|
{
|
||||||
|
|
||||||
|
let stylesRoot = css`
|
||||||
|
display:block;
|
||||||
|
box-sizing:border-box;
|
||||||
|
padding:15px;
|
||||||
|
font-family:sans-serif;
|
||||||
|
`;
|
||||||
|
let stylesHeading = css`
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
font-weight:0;
|
||||||
|
font-size:24px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
let modifiers = N.Step(pivot, "ModifyUp", false) || [];
|
||||||
|
let handleDelete = ()=>
|
||||||
|
{
|
||||||
|
Pivot.Delete(pivot);
|
||||||
|
Render();
|
||||||
|
};
|
||||||
|
|
||||||
|
let rows = [];
|
||||||
|
N.ID.Walk++;
|
||||||
|
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class=${stylesRoot}>
|
||||||
|
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
||||||
|
<${Section} key="settings" label=${`Settings`}>
|
||||||
|
<button onClick=${handleDelete}>Destroy Pivot</button>
|
||||||
|
<//>
|
||||||
|
<${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
|
||||||
|
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
|
||||||
|
<//>
|
||||||
|
<${Section} key="tree" label=${"Tree"}>
|
||||||
|
<table>
|
||||||
|
${rows}
|
||||||
|
</table>
|
||||||
|
<//>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
let ElRoot = props =>
|
let ElRoot = props =>
|
||||||
{
|
{
|
||||||
let pivots = N.Step(Pivot.Root, "Pivot")||[];
|
let pivots = N.Step(Pivot.Root, "Pivot")||[];
|
||||||
@ -415,7 +685,37 @@ let ElRoot = props =>
|
|||||||
pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}))
|
pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}))
|
||||||
])
|
])
|
||||||
};
|
};
|
||||||
Render = () => render(h(ElRoot), document.querySelector("#app"));
|
const Render = () => render(h(ElRoot), document.querySelector("#app"));
|
||||||
Render();
|
Render();
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- testing area -->
|
||||||
|
<script>
|
||||||
|
let ModificationPull = (inDAG) =>
|
||||||
|
{
|
||||||
|
let collect = inArray => n => { n.Meta.Tweak.forEach((t, i)=>{ inArray[n.Meta.Indicies[i]] += t; }); };
|
||||||
|
let totalScale = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||||
|
let totalAdd = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||||
|
|
||||||
|
N.ID.Walk++;
|
||||||
|
N.Walk(collect(totalScale), inDAG, "ModifyAt", false);
|
||||||
|
N.Walk(collect(totalScale), inDAG, "ModifyDown", false);
|
||||||
|
N.Walk(collect(totalAdd), inDAG, "ModifyUp", false);
|
||||||
|
N.Walk(collect(totalAdd), inDAG, "ModifyOut", false);
|
||||||
|
|
||||||
|
return [totalScale, totalAdd];
|
||||||
|
};
|
||||||
|
|
||||||
|
let dag1 = N.Create({Label:"dag-1"});
|
||||||
|
let m0 = N.Create({Label:"m-0", Tweak:[-1, 2, 0.7], Indicies:[0, 1, 2]});
|
||||||
|
let m1 = N.Create({Label:"m-1", Tweak:[0.1, 0.1, 0.1], Indicies:[1, 2, 3]});
|
||||||
|
|
||||||
|
N.Connect(m0, dag1, "ModifyAt");
|
||||||
|
N.Connect(m1, dag1, "ModifyDown");
|
||||||
|
|
||||||
|
let results = ModificationPull(dag1);
|
||||||
|
console.log(results);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user