2c:null 2d:["$","title",null,{"children":"Directed graph editor | dgaitsgo | Observable"}] 32:T4a4,viewof docForm = { const form = html` ` form.title.oninput = () => { console.log(form.title.value) state.currDoc.name = form.title.value } form.save.addEventListener('click', () => { state.currDoc.svg = d3.select('#chart').node() DocCtrl.save(state.currDoc) }) form.loadDocs.addEventListener('click', () => { const names = DocCtrl.loadDocNames() console.log('here are the names im getting back', names) const options = names.map(name => d3.select(form.docNames).node().appendChild( d3.create('option') .attr('selected', false) .html(name) .node())) return names }) form.clear.addEventListener('click', () => { d3.select(form.docNames).node().innerHTML = '' DocCtrl.clearStorage() }) return form }33:Teba,viewof nodeForm = { const form = html`

Edit Node

Style

Fill

Stroke color

Stroke width

Position

Text

text

font-size

Placement

Image

Image URL

Edit Edge

Style

Stroke color

Stroke width

Stroke type

Link

Type Sweep ` //node form.fill.oninput = () => setSelectedValue('fill', form.fill.value) form.nodeStrokeColor.oninput = () => setSelectedValue('stroke', form.nodeStrokeColor.value) form.nodeStrokeWidth.oninput = () => setSelectedValue('stroke-width', form.nodeStrokeWidth.value) form.r.oninput = () => setSelectedValue('r', form.r.value) form.cx.oninput = () => setSelectedValue('cx', form.cx.value) form.cy.oninput = () => setSelectedValue('cy', form.cy.value) form.nodeText.oninput = () => setSelectedValue('nodeText', form.nodeText.value) form.textPlacement.oninput = () => setSelectedValue('textPlacement', form.textPlacement.value) form.fontSize.oninput = () => setSelectedValue('fontSize', form.fontSize.value) // form.submitImage.addEventListener('click', () => { // setSelectedValue('image', form.imageURL.value) // }) form.submitImage.addEventListener('click', () => setSelectedValue('image', form.imageURL.value) ) //edge form.edgeStrokeWidth.oninput = () => setSelectedValue('stroke-width', form.edgeStrokeWidth.value) form.edgeStrokeColor.oninput = () => setSelectedValue('stroke', form.edgeStrokeColor.value) form.edgeStrokeType.oninput = () => setSelectedValue('stroke-type', form.edgeStrokeType.value) form.linkType.oninput = () => setSelectedValue('linkType', form.linkType.value) form.sweep.oninput = () => setSelectedValue('sweep', Number(form.sweep.value)) return form }34:T61f,chart = { const wrapper = d3.create('div').attr('id', 'chart-wrapper') const svg = d3.select(DOM.svg(width, height)).attr('id', 'chart') wrapper.node().appendChild(svg.node()) const g = svg.append('g') .attr('class', 'transform-group') state.currDoc = { id : randomString(5), svg, name : 'name' } console.log(svg, state.currDoc) const defs = svg.append('defs') defs.append('marker') .attr('id', 'mark-end-arrow') .attr('viewBox', '0 -5 10 10') .attr('refX', 7) .attr('markerWidth', 3.5) .attr('markerHeight', 3.5) .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5L10,0L0,5') const dragLine = g.append('path') .attr('id', 'dragline') .attr('class', 'link hidden') .attr('d', 'M0,0L0,0') .attr('stroke', 'black') .attr('stroke-width', 5) .style('marker-end', 'url(#mark-end-arrow)') g.append('g').attr('id', 'g-edges') g.append('g').attr('id', 'g-nodes') svg.call(d3.zoom() .filter(function() { return !d3.event.button && d3.event.type != 'dblclick' && d3.event.type != 'click' }) .on('zoom', function zoomed() { const { transform } = d3.event g.attr('transform', transform) })) svg.on('dblclick', function() { const point = d3.mouse(this) const transform = d3.zoomTransform(svg.node()) const invPoint = transform.invert(point) resetSelection() newNode(invPoint) }) svg.on('click', function() { resetSelection() }) return (wrapper.node()) }35:T8b6,function setSelectedValue(attr, value) { const node = state.selectedNode if (node) { switch(attr) { case 'stroke': case 'stroke-width': case 'fill': { node.attr(attr, value) break ; } case 'r': { node.attr(attr, value) placeText({ node }) updateEdgeLocation(node) updateImageLocation(node) break ; } case 'cx' : { node.attr(attr, value) updateNode(node) break ; } case 'cy' : { node.attr(attr, value) updateNode(node) break ; } case 'nodeText' : { let nodeText = getSubElemFromNode(node, 'text') if (nodeText.empty()) { nodeText = newTextNode(node) } nodeText.text(value) placeText({ node, text : nodeText, position : defaults.textPosition }) break ; } case 'textPlacement' : { const text = getSubElemFromNode(node, 'text') if (text.empty()) { return ; } placeText({ node, text, position : value }) break ; } case 'fontSize' : { const nodeText = getSubElemFromNode(node, 'text') if (!nodeText.empty()) { nodeText.attr('font-size', value) } break ; } case 'image' : { setNodeImage(node, value) break ; } } } else if (state.selectedEdge) { switch(attr) { case 'stroke': case 'stroke-width': state.selectedEdge.attr(attr, value) break ; case 'stroke-type' : state.selectedEdge.attr('stroke-dasharray', (value === 'solid' ? 'none' : '5 3')) break ; case 'linkType' : { const edge = state.selectedEdge const path = getElemData(edge, 'path') setElemData(edge, 'linkType', value) edge.attr('d', path[value]()) break ; } case 'sweep' : { const edge = state.selectedEdge const path = getElemData(edge, 'path') const linkType = getElemData(edge, 'linkType') path.sweepFlag = value edge.attr('d', path[linkType]()) } } } }36:T4be,function updateEdgeLocation(node) { const nodeId = node.attr('id') edges.forEach( ({ sourceId, targetId, el }) => { if (nodeId === sourceId || nodeId === targetId) { const path = getElemData(el, 'path') const linkType = getElemData(el, 'linkType') if (nodeId === sourceId) { const { x, y } = getNodeCoords(node) path.sx = x path.sy = y } if (linkType === 'line') { let [tx, ty] = getEdgeTargetWithOffset(sourceId, targetId) path.tx = tx path.ty = ty el.attr('d', path[linkType]()) } else if (linkType === 'arc') { const t = getNodeCoords(targetId) path.tx = t.x path.ty = t.y el.attr('d', path[linkType]()) const trPadded = t.r * 1.3 const len = el.node().getTotalLength() const endPoint = el.node().getPointAtLength(len - trPadded) console.log('my endpoints', endPoint) // el.attr('stroke-dasharray', `${len - trPadded},${len - trPadded}`) path.tx = endPoint.x path.ty = endPoint.y el.attr('d', path[linkType]()) } } }) }37:T62d,function newNode(point) { const id = randomString(5) const node = d3.select('#g-nodes') .append('g').attr('id', `node-group-${id}`) .append('circle') .attr('class', 'node') .attr('id', `node-${id}`) .attr('cx', point[0]) .attr('cy', point[1]) .attr('r', defaults.nodeRadius) .attr('fill', defaults.white) .attr('stroke', defaults.black) .attr('stroke-width', defaults.nodeStrokeWidth) .attr('tabindex', '0') .datum({}) // .attr('focusable', 'true') .call(d3.drag() .on('drag', dragNode) .on('end', dragNodeEnd)) .on('mouseover', function (d) { const node = d3.select(this) node.classed('hovered', true) state.mouseOverNode = node }) .on('mouseout', function (d) { const node = d3.select(this) node.classed('hovered', false) state.mouseOverNode = null }) .on('click', function(d) { const togglingSelected = state.selectedNode && state.selectedNode.attr('id') === node.attr('id') d3.event.stopPropagation() resetSelection() if (!togglingSelected) { node.classed('selected', true) if (state.selectedNode) { state.selectedNode.classed('hovered', false) } setNodeForm(node) state.selectedNode = node } }) .on('keypress', function(d) { const node = d3.select(this) //d for delete if (d3.event.keyCode === keyCodes['d']) { resetSelection() deleteNode(node) deleteEdgesFromNode({ node }) } }) }38:T667,function newEdge({ source, target }) { const sc = getNodeCoords(source) const tc = getEdgeTargetWithOffset(source.attr('id'), target.attr('id')) const path = new Path({ sx : sc.x, sy : sc.y, tx : tc[0], ty : tc[1] }) const edge = d3.select('#g-edges') .append('path') .attr('id', randomString(5)) .attr('class', 'edge') .attr('d', path.line()) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 5) .attr('stroke-dasharray', 'none') .style('marker-end', 'url(#mark-end-arrow)') .attr('tabindex', '0') .attr('focusable', 'true') .datum({ linkType : 'line', path }) .on('mouseover', function(d) { const edge = d3.select(this) edge.classed('hovered', true) }) .on('mouseout', function(d) { const node = d3.select(this) node.classed('hovered', false) }) .on('click', function(d) { const edge = d3.select(this) const togglingSelected = state.selectedEdge && state.selectedEdge.attr('id') === edge.attr('id') d3.event.stopPropagation() resetSelection() if (!togglingSelected) { edge.classed('selected', true) if (state.selectedEdge) { state.selectedEdge.classed('hovered', false) } setEdgeForm(edge) state.selectedEdge = edge } }) .on('keypress', function(d) { const edge = d3.select(this) //d for delete if (d3.event.keyCode === 100) { resetSelection() edge.remove() } }) edges.push({ el : edge, sourceId : source.attr('id'), targetId : target.attr('id') }) }39:T639,pathTool = new (function() { this.getLineXYPair = (pos) => new RegExp(`(${pos})(\.?\\d*\\.?\\d*),(\\.?\\d*\\.?\\d*)`) this.getLineStart = d => { const [x, y] = this.getLineXYPair('M') .exec(d) .slice(2, 4) .map(n => Number(n)) return ({ x, y }) } this.getLineEnd = d => { const [x, y] = this.getLineXYPair('L') .exec(d) .slice(2, 4) .map(n => Number(n)) return ({ x, y }) } this.getLineStartEnd = d => { const s = this.getLineStart(d) const t = this.getLineEnd(d) return ({ sx : s.x, sy : s.y, tx : t.x, ty : t.y }) } this.newLine = ({ sx, sy, tx, ty }) => this.lineSource({ x : sx, y : sy }) + this.lineTarget({ x : tx, y : ty }) this.lineSource = ({ x, y }) => `M${x},${y}` this.lineTarget = ({ x, y }) => `L${x},${y}` this.setSource = ({ d, x, y}) => d.replace(/M(.*(?=[A|L]))/, this.lineSource({ x, y })) this.setLineTarget = ({ d, x, y }) => d.replace(/L.*/, this.lineTarget({ x, y })) this.setTarget = ({ d, x, y }) => { const res = d.replace(/\d*(\.\d+)?,\d*(\.\d+)?$/, `${x},${y}`) return (res) } this.isCurve = d => d.indexOf('C') > -1 this.lineToArc = d => { const { sx, sy, tx, ty } = this.getLineStartEnd(d) const r = Math.hypot(tx - sx, ty - sy) // A rx ry x-axis-rotation large-arc-flag sweep-flag x y return d.replace(/L.*/, `A ${r} ${r} 0 0 1 ${tx},${ty}`) } this.setArcSweep = d => { } this.arcToLine = d => { return d } })3a:T5c1,class Path { constructor(path) { //Error check - path is defined and is a Dictionary if (!path || !path.constructor === Object) { throw Error("Path must be initialized with an object with keys 'sx' (source x), 'sy' (source y), 'tx' (target x), 'ty' (target y)") } //Error check - Required Arguments const reqKeys = ['sx', 'sy', 'tx', 'ty'] reqKeys.forEach(key => { const coord = path[key] if (coord === undefined || coord === null || (typeof(coord) != 'number' && Number(coord) === NaN)) { throw Error(`Required value not in good format : Got ${coord} for ${key}`) } }) this.sx = path.sx this.sy = path.sy this.tx = path.tx this.ty = path.ty this.rx = path.rx || Math.hypot(this.tx - this.sx, this.ty - this.sy) this.ry = path.ry || this.rx this.xAxisRot = path.xAxisRot || 0 this.largeArcFlag = path.largeArcFlag || 0 this.sweepFlag = path.sweepFlag || 1 } get target() { return ([this.tx, this.ty]) } set target(t) { this.tx = t[0] this.ty = t[1] } get source() { return ([this.sx, this.sy]) } set source(s) { this.sx = s[0] this.sy = s[1] } arc() { return (`M ${this.sx},${this.sy} A ${this.rx} ${this.ry} ${this.xAxisRot} ${this.largeArcFlag} ${this.sweepFlag} ${this.tx},${this.ty}`) } line() { return (`M ${this.sx},${this.sy} L ${this.tx},${this.ty}`) } }3b:[{"id":"2d6e2224781d353154d33be6e60dff5c4217986cedb63ed31e4a38c3ab7fd9866ed868d02c937b39c1083efa37ed026b52c0f982d3e19b12a18c7ef425bc15fb","href":"https://static.observableusercontent.com/files/2d6e2224781d353154d33be6e60dff5c4217986cedb63ed31e4a38c3ab7fd9866ed868d02c937b39c1083efa37ed026b52c0f982d3e19b12a18c7ef425bc15fb","name":"1.jpeg","type":"image/jpeg","lastModified":1592470593197.185,"size":7500}] 30:{"id":"04e3119e4d1bdc22","slug":null,"title":"Directed graph editor","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-05-26T17:13:48.232Z","update_time":"$D2024-10-14T12:02:30.773Z","view_time":null,"first_public_time":"$D2024-10-22T19:02:13.660Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024"},"version":1842,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null}],"members":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null,"role":"editor"},{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Directed graph editor","cells":[{"id":27,"value":"md`# Directed graph editor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"mutable state = ({\n mouseOverNode : null,\n selectedNode : null,\n selectedEdge : null,\n currDoc : null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"DocCtrl = new DocumentController(state.currDoc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1649,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"mutable edges = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"mutable nodes = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"function updateNode(node) {\n updateEdgeLocation(node)\n updateImageLocation(node)\n updateTextLocation(node)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"function newTextNode(node) {\n const id = getIdFromNode(node)\n return (d3.select(`#node-group-${id}`)\n .append('text')\n .attr('id', `text-${id}`)\n .attr('fill', defaults.black)\n .attr('x', node.attr('cx'))\n .attr('y', node.attr('cy'))\n .attr('dy', Number(node.attr('r')) * 1.2 + Number(defaults.fontSize))\n .attr('font-size', defaults.fontSize)\n .attr('text-anchor', 'middle'))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"function setNodeForm(node) {\n if (node === null) {\n viewof nodeForm.children[0].style.opacity = 0\n return ;\n }\n viewof nodeForm.children[0].style.opacity = 1\n viewof nodeForm.children[1].style.opacity = 0\n viewof nodeForm.nodeStrokeWidth.value = node.attr('stroke-width')\n viewof nodeForm.nodeStrokeColor.value = node.attr('stroke')\n viewof nodeForm.r.value = node.attr('r')\n viewof nodeForm.cx.value = node.attr('cx')\n viewof nodeForm.cy.value = node.attr('cy')\n\n //text\n const textElem = getSubElemFromNode(node, 'text')\n viewof nodeForm.nodeText.value = textElem.empty() ? '' : textElem.text()\n viewof nodeForm.textPlacement.value = node.datum().textPlacement\n viewof nodeForm.fontSize.value = textElem.empty() ? defaults.fontSize : textElem.attr('font-size')\n \n //image\n const imageElem = getSubElemFromNode(node, 'image')\n viewof nodeForm.imageURL.value = imageElem.empty() ? '' : imageElem.attr('xlink:href')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"function setEdgeForm(edge) {\n if (edge === null) {\n viewof nodeForm.children[1].style.opacity = 0\n return ;\n }\n viewof nodeForm.children[1].style.opacity = 1\n viewof nodeForm.children[0].style.opacity = 0\n viewof nodeForm.edgeStrokeWidth.value = edge.attr('stroke-width')\n viewof nodeForm.edgeStrokeColor.value = edge.attr('stroke')\n viewof nodeForm.edgeStrokeType.value = edge.attr('stroke-dasharray') === 'none' ? 'solid' : 'dashed'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"function updateTextLocation(node) { \n\n const text = getSubElemFromNode(node, 'text')\n \n if (text.empty()) {\n return ; \n }\n\n text.attr('x', node.attr('cx'))\n .attr('y', node.attr('cy'))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"function updateImageLocation(node) {\n\n const id = getIdFromNode(node)\n const nodeImage = d3.select(`#image-${id}`)\n console.log('wow image')\n if (!nodeImage.empty()) {\n\n d3.select(`#clip-${id} > circle`)\n .attr('r', node.attr('r'))\n .attr('cx', node.attr('cx'))\n .attr('cy', node.attr('cy'))\n\n nodeImage\n .attr('width', node.attr('r') * 2)\n .attr('height', node.attr('r') * 2)\n .attr('x', node.attr('cx') - node.attr('r'))\n .attr('y', node.attr('cy') - node.attr('r'))\n \n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"function getEdgeTargetWithOffset(sourceId, targetId) {\n const source = d3.select(`#${sourceId}`),\n target = d3.select(`#${targetId}`),\n sourceX = source.attr('cx'),\n sourceY = source.attr('cy'),\n targetX = target.attr('cx'),\n targetY = target.attr('cy'),\n targetR = target.attr('r'),\n diffX = targetX - sourceX,\n diffY = targetY - sourceY,\n pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY)),\n offsetX = ((diffX * targetR) / pathLength) * 1.2,\n offsetY = ((diffY * targetR) / pathLength) * 1.2\n \n return ([targetX - offsetX, targetY - offsetY])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"function deleteEdgesFromNode({ node }) {\n\n const nodeId = node.attr('id')\n\n edges.forEach((edge) => {\n if (nodeId === edge.sourceId || nodeId === edge.targetId) {\n edge.el.remove()\n edge = null\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"function deleteNode(node) {\n const id = getIdFromNode(node)\n const group = d3.select(`#node-group-${id}`)\n group.remove()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"function dragNode(d) {\n\n const node = d3.select(this)\n\n if (d3.event.sourceEvent.shiftKey) {\n drawDragLine({ x : node.attr('cx'), y : node.attr('cy') })\n } else {\n \n const { x, y } = d3.event\n \n node\n .attr('cx', x)\n .attr('cy', y)\n \n setNodeForm(node)\n updateNode(node)\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function dragNodeEnd() {\n \n const source = d3.select(this)\n\n if (d3.event.sourceEvent.shiftKey) {\n if (state.mouseOverNode) {\n if (state.mouseOverNode.attr('id') != source.attr('id')) {\n newEdge({ source, target : state.mouseOverNode })\n }\n }\n }\n \n const dragLine = d3.select('#dragline')\n dragLine.classed('hidden', true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"function drawDragLine(origin) {\n \n const svg = d3.select('#chart')\n const mouse = d3.mouse(svg.node())\n const transform = d3.zoomTransform(svg.node())\n const invMouse = transform.invert(mouse)\n const dragLine = d3.select('#dragline')\n \n dragLine.classed('hidden', false)\n dragLine.attr(\n 'd', 'M' + origin.x + ',' + origin.y + 'L' + invMouse[0] + ',' + invMouse[1]\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"function resetSelection() {\n if (state.selectedNode) {\n state.selectedNode.node().blur()\n state.selectedNode.classed('selected', false)\n state.selectedNode = null\n setNodeForm(null)\n } else if (state.selectedEdge) {\n state.selectedEdge.node().blur()\n state.selectedEdge.classed('selected', false)\n state.selectedEdge = null\n setEdgeForm(null)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"function getElementText(elem) {\n const id = elem.attr('id') \n return (d3.select(`text-${id}`))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"function getNodeDiameter(node) {\n return (Number(node.attr('r')) * 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"function getElemData(elem, key) {\n return (elem.datum()[key])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"function setElemData(elem, key, value) {\n let data = elem.datum()\n data[key] = value\n elem.datum(data)\n return (elem)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"function setNodeImage(node, url) {\n\n const id = getIdFromNode(node)\n const nodeImage = d3.select(`image-${id}`)\n \n if (nodeImage.empty()) {\n \n const nodeGroup = d3.select(`#node-group-${id}`)\n \n nodeGroup\n .append('defs')\n .append('clipPath')\n .attr('class', 'no_click')\n .attr('id', `clip-${id}`)\n .append('circle')\n .attr('r', node.attr('r'))\n .attr('cx', node.attr('cx'))\n .attr('cy', node.attr('cy'))\n .attr('fill', 'none')\n\n nodeGroup\n .append('image').attr('class', 'no_click')\n .attr('width', node.attr('r') * 2)\n .attr('height', node.attr('r') * 2)\n .attr('xlink:href', url)\n .attr('clip-path', `url(#clip-${id})`)\n .attr('x', node.attr('cx') - node.attr('r'))\n .attr('y', node.attr('cy') - node.attr('r'))\n .attr('id', `image-${id}`)\n \n } else {\n nodeImage.attr('xlink:href', url) \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"function placeText({ node, text, position }) {\n\n if (text === undefined) {\n text = getSubElemFromNode(node, 'text')\n if (text.empty()) {\n return ;\n }\n }\n \n if (position === undefined) {\n position = getElemData(node, 'textPlacement')\n }\n if (position === 'above') {\n text.attr('dy', -Number(node.attr('r')) * 1.2 - Number(text.attr('font-size')))\n text.attr('dominant-baseline', 'text-bottom')\n } else if (position === 'below') {\n text.attr('dy', Number(node.attr('r')) * 1.2 + Number(text.attr('font-size')))\n text.attr('dominant-baseline', 'text-top')\n } else if (position === 'middle') {\n text.attr('dy', 0)\n text.attr('dominant-baseline', 'central')\n }\n setElemData(node, 'textPlacement', position)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"function getIdFromNode(node) {\n return (node.attr('id').split('node-')[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"function getSubElemFromNode(node, prefix) { \n const id = getIdFromNode(node)\n const subElemId = `${prefix}-${id}`\n const subElem = d3.select('#' + subElemId)\n return (subElem)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"function getNodeCoords(node) {\n \n if (typeof(node) === \"string\") {\n node = d3.select(`#${node}`)\n }\n \n return ({\n x : Number(node.attr('cx')),\n y : Number(node.attr('cy')),\n r : Number(node.attr('r'))\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"function randomString(n) {\n return (Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, n))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"md `### Entities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1816,"value":"class Document {\n\n constructor({ id, name, svg }) {\n this.id\n this.name = name\n this.svg = svg\n this.selectedNode = null\n this.mouseOverNode = null\n this.selectedEdge = null\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"class DocumentController {\n \n constructor(currDoc) {\n this.currDoc = currDoc\n this.storeSchema = {\n docs : {}\n }\n this.store = this.getCurrentStorage() || Object.assign(this.storeSchema, {})\n }\n \n getCurrentStorage() {\n return (JSON.parse(localStorage.getItem('obshq-node-editor')))\n }\n \n loadDocNames() {\n return (Object.keys(this.store.docs)\n .map(id => this.store.docs[id].name))\n }\n \n getDoc(name) {\n return (this.store.docs[name])\n }\n \n clearStorage() {\n localStorage.clear('obshq-node-editor')\n }\n \n save(currDoc) {\n console.log(d3.select('#chart-wrapper').node().innerHTML)\n const { id } = currDoc\n const nextStore = this.store\n ? this.store\n : Object.assign(this.storeSchema, { })\n \n nextStore.docs[id] = { ...currDoc }\n localStorage.setItem(`obshq-node-editor`, JSON.stringify(nextStore))\n this.store = nextStore\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"defaults = ({\n fontSize : 16,\n nodeStrokeWidth : 4,\n nodeRadius : 35,\n textPosition: 'below',\n black : '#000000',\n white : '#ffffff',\n imgURL : await FileAttachment('1.jpeg').url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"keyCodes = ({\n 'd' : 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n### MVP To Do\n- ~~Arrow~~\n- ~~Text~~\n- ~~Images~~\n- ~~Curved lines~~\n- ~~Zoom/Pan~~\n- Save\n- Import\n- Export\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"