function renderLeaf(leafInfos, linksDom){
return h("div.main-container", [
h("div.navigate-content", linksDom),
h("div.breadcrumb", [h("div", leafInfos.leaf.name)]),
renderShare("http://arbre-integral.net", leafInfos.leaf.content)
])
}
function renderLeaf(leafInfos, linksDom){
return h("div.main-container", [
h("div.navigate-content", linksDom),
h("div.breadcrumb", [h("div", leafInfos.leaf.name)]),
renderShare("http://mmai.github.io/poemaze/", leafInfos.leaf.content)
])
}
export function renderNeighorLink(id, neighbor){
let links = [];
if (neighbor && neighbor.leaf){
let classUp = isUp(neighbor.leaf)?"ai-up":"ai-down";
links.push(h(`a.${classUp}`, {attrs:{href: neighbor.leaf.id + "?trace=" + neighbor.fromId}}, neighbor.leaf.word));
}
if (links.length === 0) {
links = [h("a.txt-transparent", ".")]
}
return h("span.item-" + id, links);
}
const svgDropDownIcon = color =>
h('svg', {
attrs: {
fill: color,
height: 16,
viewBox: '0 0 16 16',
width: 16,
},
}, [
h('path', {attrs: {d: 'M7 10l5 5 5-5z'}}),
h('path', {attrs: {d: 'M0 0h24v24H0z', fill: 'none'}}),
])
const vtree$ = visitedLeaf$.map(leafInfos => {
if (leafInfos.history.length < pathsVtree.length - 1) {
// console.log(`[svgComponent ${debugName}] history:${leafInfos.history.length} pathsVtree: ${pathsVtree.length}`)
//Reset
pathsVtree = []
} else if (pathsVtree.length === 0) {
//Redraw from localstorage history
pathsVtree = makePathsFromHistory(leafInfos.history)
}
const newLeaf = leafInfos.leaf;
if (leafInfos.isNewLeaf) {
const fromLeaf = AI.getLeaf(leafInfos.fromId);
pathsVtree.push( makeJoinLine(fromLeaf, newLeaf))
}
let transform = `translate(${width/2},${height/2})`
const {rotation, animationClass} = getRotationAnimationInfo(leafInfos)
if (fixedSize === 'none' && rotation !== 0) {
transform += `, rotate(${rotation})`
}
let mainAttributes = {}
if (!clickable){
mainAttributes["pointer-events"] = "none"
}
if (fixedSize === 'none'){
mainAttributes.class = animationClass
if (viewBox !== false) {
mainAttributes.viewBox = viewBox
} else {
mainAttributes.width = width
mainAttributes.height = height
}
} else {
mainAttributes.width = fixedSize
mainAttributes.height = fixedSize
mainAttributes.viewBox = viewBox
}
return h('svg', {attrs: mainAttributes}, [
skeletonVtree,
h('g', {attrs:{transform}}, [
...pathsVtree,
...currentPositionVtree(newLeaf),
...neighborsVtree(leafInfos),
]),
])
})
return [].map.call(wrapper.childNodes, (el => {
switch (el.nodeName){
case "#text": return el.nodeValue;
case "EM": return h('em', el.innerHTML);
default: return undefined;
}
}))
export default ({title, className, iconName, clickable}) =>
h('div.row.' + className, {style: style(clickable)}, [
Col({type: 'xs-10'},[title]),
iconName ?
Col(
{type: 'xs-1', style: {width: '48px', 'font-size': '32px'}},
[icon(iconName, 'white')]
) : null,
])
/**
* Draw dots at each final tree node
*/
function drawSkeleton(){
//If pdf cover visualization : no skeleton
if (fixedSize !== 'none') { return h('g'); }
let points = []
for (let circ = 0; circ < 7; circ++){
const nbLeafs = Math.pow(2, circ);
for (let pos = 1; pos <= nbLeafs; pos++){
const {x, y} = getCoordsFromPos({circ, pos});
points[points.length] = h('circle', {attrs:{cx:x, cy:y, r:leafRadius, fill:color_skeleton}})
// circle.stroke = color_skeleton;
}
}
return h('g', {attrs:{transform:`translate(${width/2},${height/2})`}}, [
h('circle', {attrs:{ fill: color_background, cx: 0, cy: 0, r: circleRadius * 7 }}),
...points
]);
}
function renderLeafUpside(leafInfos){
return renderLeaf(leafInfos, [
renderNeighorLink("nw", leafInfos.neighbors.leftChild),
renderNeighorLink("ne", leafInfos.neighbors.rightChild),
renderNeighorLink("w", leafInfos.neighbors.leftBrother),
h("blockquote", getHtmlContents(leafInfos.leaf.content)),
renderNeighorLink("e", leafInfos.neighbors.rightBrother),
renderNeighorLink("s", leafInfos.neighbors.parent)
])
}
function renderLeafUpside(leafInfos){
let classUp = (leafInfos.type === "UP") ? "ai-up" : "ai-down";
let circleLevel = leafInfos.leaf.id.split('').length - 1;
return renderLeaf(leafInfos, [
renderNeighorLink("nw", leafInfos.neighbors.leftChild),
renderNeighorLink("ne", leafInfos.neighbors.rightChild),
renderNeighorLink("w", leafInfos.neighbors.leftBrother),
h("blockquote", getHtmlContents(leafInfos.leaf.content)),
renderNeighorLink("e", leafInfos.neighbors.rightBrother),
renderNeighorLink("s", leafInfos.neighbors.parent)
])
}
/**
* Virtual DOM of a SVG circle for a neighbor
*
* @param {leaf} neighbor
* @return {vdom tree}
*/
function makeNeighborLeaf (neighbor){
const leaf = neighbor.leaf
const coords = AI.getCoords(leaf);
const {x, y} = getCoordsFromPos(coords);
const type = AI.getType(leaf);
const color = (type == 'UP')?color_up:color_down;
return h('circle', {attrs:{
cx: x, cy: y, r: leafRadius * 2,
stroke: color, fill: color, class: 'viz-neighbor',
'data-neighbor-href': `${leaf.id}-${neighbor.fromId}`
}}
)
}
export function renderPoem(isUpside, leafInfos){
let circlesView = h("div");
switch(leafInfos.type){
case 'ROOT':
circlesView = renderRoot(leafInfos);
break;
case 'DOWN':
circlesView = isUpside?renderLeafReversed(leafInfos):renderLeafUpside(leafInfos);
break;
default:
circlesView = isUpside?renderLeafUpside(leafInfos):renderLeafReversed(leafInfos);
}
return circlesView;
}
export function renderJourney(journey){
return h("div.main-container", [
h("div.journey-content", journey.map(leaf => {
return h("div", `${leaf.content}`)
}
)),
h("div.breadcrumb", [ h("div", "Journey")]),
h("div.ai-last-restart", [ h("a", {attrs:{href: "/reset"}}, "Restart")]),
])
}
function makeArcBetweenLeafs (from, to, color){
const posfrom = getCoordsFromPos(from);
const posto = getCoordsFromPos(to);
const radius = Math.sqrt(Math.pow(posto.x - origin.x, 2) + Math.pow(posto.y - origin.y, 2));
let polarfrom = cartesianToPolar({x: posfrom.x - origin.x, y:origin.y - posfrom.y});
let polarto = cartesianToPolar({x: posto.x - origin.x, y:origin.y - posto.y});
return h('path', {attrs:{
d: describeSvgArc(radius, 0 - polarfrom.angle, 0 - polarto.angle),
stroke: color,
// fill: color_background,
'fill-opacity': 0,
'stroke-width': 1
}})
}
let view$ = model.loginInfo$.map( (auth) => {
var loginInfo = auth.userInfo;
return h('div', [
h('form.login_form', {} ,[
h('input.login_input', {props: {type: 'text', placeholder:'Enter Email' , name: 'email', id: 'email', value: loginInfo.email }}),
h('input.login_input', {props: {type: 'text', placeholder:'Enter Password' , name: 'password', id:'password', value: loginInfo.password }}),
h('button.login_button','Login'),
h('button.cancel_button','Cancel')
])
]);
})
export const icon = (name, className) =>
h(`i.icon-${name}.${className}`,[])
function makeLineBetweenLeafs (from, to, color){
const posfrom = getCoordsFromPos(from);
const posto = getCoordsFromPos(to);
return h('line', {attrs:{x1:posfrom.x, y1:posfrom.y, x2:posto.x, y2:posto.y, stroke:color, 'stroke-width':1 }});
}
/**
* Virtual DOM of a SVG circle at the current position
*
* @param {AI leaf} leaf - current visited leaf
* @return {vdom tree}
*/
function currentPositionVtree(leaf){
if (!displayNeighbors) return [];
const coords = AI.getCoords(leaf);
const {x, y} = getCoordsFromPos(coords);
return [h('circle', {attrs:{cx:x, cy:y, r:leafRadius*2, stroke: color_current, fill:color_current}})]
}
export function renderDashboard(showDashboard, isUpside, history, progressionVtree, aiLogoSvgVtree, aiSvgVtree){
//We can't put the link directly on a.dashboardLink due to a cycle-dom bug on internet explorer
const currentLeafId = history.length === 0 ? "0" : history[history.length-1].id;
return h("aside#side-panel", {class: {active: showDashboard}}, [
h("a.dashboardLink", {attrs: {href: showDashboard?"#main":"#dashboard"}}, [h("div.svgLogoContainer", [aiLogoSvgVtree])]),
h("div.side-panel-content", [
h("div.location", currentLeafId),
aiSvgVtree,
progressionVtree,
h("script", ` function aiOpenMenu(e){ document.getElementById(e.dataset.target).classList.toggle('active'); } `),
h('ul.navigation', [
h("li", [
buttonForList("historyList", "History"),
h('ul#historyList', history.map(url =>
h(`li.${isUp(url)?'ai-up':'ai-down'}`, [ h(`a`, {attrs: {href: `${url.id}`}}, `${url.word} (${url.id})`) ])
))
]),
h("li", [h("a", {attrs:{href: "reset"}}, "Restart")]),
h("li", [h("a", {attrs:{rel: "external", href: "http://github.com/mmai/poemaze"}}, "Source code")]),
]),
])
])
}
function buttonForList(listElement, caption){
return h('button.trigger.reset', { attrs: { type:"button", onclick:"aiOpenMenu(this)", "data-target": listElement}}, caption)
}
h('ul#historyList', history.map(url =>
h(`li.${isUp(url)?'ai-up':'ai-down'}`, [ h(`a`, {attrs: {href: `${url.id}`}}, `${url.word} (${url.id})`) ])
h("div.journey-content", journey.map(leaf => {
return h("div", `${leaf.content}`)
}
const _view = ({label}) =>
div({class: {'tab-label-content': true}},[
h('label',{attrs: {for: label}, style: {
color: material.primaryFontColor},
},[label]),
])
