30:[] 2e:{"title":"Elk","cells":[{"id":0,"value":"# Elk","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"md`# Elk\n\n- Almost exact copy of https://observablehq.com/@tmcw/elk\n- Just added YAML support\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"yelky(`\nlayoutOptions:\n elk.direction: DOWN\nchildren:\n - 오직 수단으로만 취급하나?\n - 직접 피해를 입히나?\n - 간접 피해를 입히나?\n - 다른 이의 억압 경험을 비유로 사용하나?\n - 종합적으로 긍정적 영향이 월등히 큰가?\n - id: 위험!\n fill: red\n - id: 어쩌면 오케이\n fill: blue\nedges:\n - 오직 수단으로만 취급하나?-Yes-위험!\n - 오직 수단으로만 취급하나?-No-직접 피해를 입히나?\n - 직접 피해를 입히나?-Yes-위험!\n - 직접 피해를 입히나?-No-간접 피해를 입히나?\n - 간접 피해를 입히나?-Yes-위험!\n - 간접 피해를 입히나?-No-다른 이의 억압 경험을 비유로 사용하나?\n - 다른 이의 억압 경험을 비유로 사용하나?-Yes-위험!\n - 다른 이의 억압 경험을 비유로 사용하나?-No-종합적으로 긍정적 영향이 월등히 큰가?\n - 종합적으로 긍정적 영향이 월등히 큰가?-Yes-위험!\n - 종합적으로 긍정적 영향이 월등히 큰가?-No-어쩌면 오케이\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function yelky(rawYaml) {\n const obj = jsyaml.load(rawYaml) || {}\n\n // inject default id\n obj.id = obj.id || 'root'\n \n // inject defaults for children\n obj.children = (obj.children || []).map(e => {\n if(typeof(e) === 'string') e = {id: e}\n\n return {\n ...e,\n label: e.label || e.id\n }\n })\n \n // inject defaults for edges\n let nextId = 0\n obj.edges = (obj.edges || []).map(e => {\n if(typeof(e) === 'string') {\n const [_, rawSource, text, rawTarget] = e.match(/^(.+?)-(.+?)?-(.+?)$/)\n e = {\n sources: [rawSource],\n targets: [rawTarget],\n labels: [text ? {text} : {}]\n }\n }\n \n return {\n ...e,\n id: e.id || `_edge_${nextId++}`\n }\n })\n\n return elky(obj)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"child = ({ label, width, height, x, y, fill = '#000' }) => {\n return svg`\n \n \n ${label}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"elky = async graph => {\n const elk = new ELK();\n const textHeight = 20\n\n for (let child of graph.children) {\n if (child.width) continue\n // Add half-line height addition to accept more input nodes\n let inletCompensation =\n Math.max(\n 0,\n graph.edges.filter(edge => edge.targets[0] === child.id).length - 1\n ) *\n textHeight *\n 0.5;\n child.height = textHeight * 1.1 + inletCompensation;\n child.width = textSize(child.label) + 10;\n }\n \n for (let edge of graph.edges) {\n for (let label of edge.labels) {\n if (label.width) continue\n label.height = textHeight * 1.1;\n label.width = textSize(label.text) + 10;\n }\n }\n return showLayout(await elk.layout(graph));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"showLayout = layout => html`\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"edge = ({sections, labels}) => {\n const section = sections[0];\n const label = labels[0];\n\n return svg`\n \n \n ${label.text || ''}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"function textSize(text) {\n return ctx.measureText(text).width|0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"ctx = {\n const ctx = DOM.context2d(1000, 30)\n ctx.font = `${fontSize}px ${fontFamily}`;\n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"fontFamily = 'sans-serif'","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"fontSize = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"jsyaml = require('js-yaml/dist/js-yaml.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"ELK = require('elkjs/lib/elk.bundled.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}