FingerTreeWithShow = { var digit1, digit2, digit3, digit4, empty, single, tree; const dotSize = 5 const valueSize = 26 const valueR = valueSize / 2 const nodeSize = 66 const nodeR = nodeSize / 2 const vStep = 10 const sq32 = Math.sqrt(3)/2 const gap = 5 const Gap = 30 const linkColor = '#00ff00' const endColor = '#ff0000' function insert(element, elements) { let buf = element.buf; let w = element.w; let h = element.h; var q; for (var i = 0; i < elements.length; i++) { buf += elements[i].buf } return { buf: buf, w: w, h: h, cx: element.cx, cy: element.cy, r: element.r, q: elements[0].q }; } function join(elements) { let buf = ''; let w = 0; let h = 0; let q = 1; for (var i = 0; i < elements.length; i++) { buf += elements[i].buf; w += elements[i].w; h = Math.max(h, elements[i].h); q = Math.min(h, elements[i].q); } return { buf: buf, w: w, h: h, q: q, cx: elements[0].cx, cy: elements[0].cy, r: elements[0].r }; } const circle = radius => `` const valueCircle = circle(valueR) const nodeCircle = { buf: circle(nodeR), w: nodeSize, h: nodeSize, cx: 0, cy: nodeR, r: nodeR, q: 1 }; const translate = (x, y) => element => (x==0 && y==0) ? element : ({ buf:`\n\n${element.buf}\n`, w: element.w, h: element.h, cx: element.cx + x, cy: element.cy + y, r: element.r, q: element.q, elements: element.elements ? element.elements.map(e => translate(x,y)(e)) : undefined }) ; const scale = s => element => s==1 ? element : ({ buf: `\n\n${element.buf}\n`, w: element.w * s, h: element.h * s, cx: element.cx * s, cy: element.cy * s, r: element.r * s, q: element.q* s }); const valueContainer = a => ({ buf: `${valueCircle} ${a}`, w: valueSize, h: valueSize, cx: 0, cy: valueR, r: valueR, q: 1 }) const show = a => function(x,y) { let element = (a.show === undefined) ? valueContainer(a) : a.show(0, 0); return translate(x, y)(element) } const line = (x1,y1) => (x2,y2) => `` function trimmedLine(left, right, x0, y0, x1, y1) { let len = Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) let x0fixed = x0 + left/len*(x1-x0) let x1fixed = x1 - right/len*(x1-x0) let y0fixed = y0 + left/len*(y1-y0) let y1fixed = y1 - right/len*(y1-y0) return line(x0fixed,y0fixed)(x1fixed,y1fixed) } function showFingers(values) { var elements = []; var pos = 0; for (var i = 0; i < values.length; i++) { let element = show(values[i])(0, 0); let q = Math.sqrt(element.q) let positionedElement = translate(pos, 0)(scale(1/q)(element)) elements.push(positionedElement); pos += positionedElement.w + gap; } let result = join(elements) result.elements = elements return result } function showNode2(a, b, x, y) { let left0 = show(a)(0, 0); let innerR = left0.r let xInner = nodeR/2 let s = Math.min((nodeR - gap*2)/innerR, 1) let yInner = nodeR - s*innerR/2 + gap/2 let left = translate(-xInner, yInner)(scale(s)(left0)) let right = translate(xInner, yInner)(scale(s)(show(b)(0, 0))); return translate(x,y)(insert(nodeCircle, [left, right])); } function showNode3(a, b, c, x, y) { let top0 = show(a)(0, 0) let innerR = top0.r let s = Math.min((nodeR - gap*2)/innerR/2, 1) let dSize = nodeR - s*innerR let top1 = scale(s)(top0) let top = translate(0, dSize/2 - gap)(top1) let left = translate(-nodeR*sq32/2, nodeR)(scale(s)(show(b)(0, 0))) let right = translate(nodeR*sq32/2, nodeR)(scale(s)(show(c)(0, 0))) let at0 = insert(nodeCircle, [top, left, right]); return translate(x,y)(at0); } const dot0 = color => ({ buf: ``, w: dotSize + Gap, h: dotSize, cx: 0, cy: 0, r: dotSize, q: 1}) const dot = (x,y) => color => translate(x,y)(dot0(color)) const connect = (element1) => (element2) => line(element1.cx, element1.cy + element1.r)(element2.cx, element2.cy - element2.r) // trimmedLine(element1.r, element2.r, element1.cx, element1.cy, element2.cx, element2.cy) tree = (left, subtree, right) => ({ toString: () => `tree(${left},${subtree},${right})`, snoc: a => (right.snoc)(a)(left, subtree), st: subtree, show: function(x, y) { let m0 = (show(subtree)(0, 0)); let l0 = left.show(0, 0); let r0 = right.show(0, 0); let fingerH = l0.h let halfSize = fingerH/2 let branchY = halfSize/2 + vStep let anchor = dot(0,0)(linkColor) let m = translate(0, 0 + fingerH + branchY)(m0) m.buf += line(0, anchor.r)(0, m.cy - m.r) let shift = Gap + halfSize let l = translate(-shift, branchY)(l0); let withAnchor = connect(anchor) l.buf += l.elements.map(e => withAnchor(e)).join('\n') let r = translate( shift, branchY)(r0); r.buf += r.elements.map(e => withAnchor(e)).join('\n') // if (r0.elements.length > 1) throw r.elements return translate(x,y)(join([anchor, m, l, r])); }}); single = a => ({ toString: () => `single(${a})`, snoc: b => (tree(digit1(a), empty, digit1(b))), show: function(x, y) { let element = showFingers([a]) let cell = element.elements[0] let shift = cell.h/4 + vStep let positioned = translate(0, shift)(cell) let anchor = dot(0,0)(linkColor) positioned.buf += line(0, anchor.r)(0, positioned.cy - positioned.r) return translate(x,y)(insert(anchor, [positioned])) } }); empty = { toString: () => "<>", snoc: single, show: (x,y) => ({ buf: dot(x,y)(endColor).buf, w: dotSize, h: dotSize, cx: x, cy: y, r: dotSize, q: 1}) }; digit1 = a => ({ toString: () => `[${a}]`, snoc: b => (left, subtree) => tree(left, subtree, digit2(a,b)), show: (x,y) => translate(x, y)(showFingers([a])) }); digit2 = (a,b) => ({ toString: () => `[${a},${b}]`, snoc: c => (left, subtree) => tree(left, subtree, digit3(a,b,c)), show: (x,y) => translate(x, y)(showFingers([a,b])) }); digit3 = (a,b,c) => ({ toString: () => `[${a},${b},${c}]`, snoc: d => (left, subtree) => tree(left, subtree, digit4(a,b,c,d)), show: (x,y) => translate(x, y)(showFingers([a,b,c])) }); digit4 = (a,b,c,d) => ({ toString: () => `[${a},${b},${c},${d}]`, snoc: e => (left, subtree) => tree(left, subtree.snoc(node3(a,b,c)), digit2(d,e)), show: (x,y) => translate(x, y)(showFingers([a,b,c,d])) }); const node2 = (a,b) => ({ toString: () => `node(${a},${b})`, show: (x,y) => showNode2(a,b,x,y) }); const node3 = (a,b,c) => ({ toString: () => `node(${a},${b},${c})`, show: (x,y) => showNode3(a,b,c,x,y) }); return { empty: empty, single: single, tree: tree, digit1: digit1, digit2: digit2, digit3: digit3, digit4: digit4, node2: node2, node3: node3, show: show } }