17 | Select a node to view its actionable items!
18 |
19 |
20 |
21 |
22 |
23 |
24 | Actionable items:
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/public/actionables-sidebar.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | // subscribe on user selected widgets
3 | miro.addListener(miro.enums.event.SELECTION_UPDATED, updateSidebar)
4 | // update the sidebar once when it first opens
5 | updateSidebar()
6 | })
7 |
8 | const MAX_NODES = 9999999
9 |
10 | // get the entire text of a node without any of the characters phloem adds
11 | function getFullTextFromNode(node) {
12 | html = node.text
13 | html = html.replace(//gi, '')
14 | html = html.replace(//gi, '')
15 | html = html.replace(/<\/div>/ig, '\n')
16 | html = html.replace(/<\/li>/ig, '\n')
17 | html = html.replace(/
/ig, ' * ')
18 | html = html.replace(/<\/ul>/ig, '\n')
19 | html = html.replace(/<\/p>/ig, '\n')
20 | html = html.replace(//gi, "\n")
21 | html = html.replace(/<[^>]+>/ig, '')
22 | text = html.replace(/⋅/g,'') // remove newline markers if there are any
23 | return text
24 | }
25 |
26 | // calculate the issue title from a node's text
27 | function getTitleFromNode(node) {
28 | const titleLength = 13
29 |
30 | var fullText = getFullTextFromNode(node)
31 |
32 | // remove metadata (stuff after ##)
33 | var textWithoutMetadata
34 | if (fullText.includes('##')) {
35 | textWithoutMetadata = fullText.split('##').slice(0, -1).join(' ')
36 | } else {
37 | textWithoutMetadata = fullText
38 | }
39 |
40 | // get the first x words to use as the title
41 | if (textWithoutMetadata.split(' ').length <= titleLength) {
42 | return textWithoutMetadata
43 | } else {
44 | // add ... if the text is longer than 10 words
45 | return textWithoutMetadata.split(' ').slice(0,titleLength).join(' ') + "..."
46 | }
47 | }
48 |
49 | // returns a hash of the ID and short and long text of each node in the given array.
50 | // Example: { 84759034802: ['This is...', 'This is a test node.'], 9879: ['Another...', 'Another one.'] }
51 | // later we use this hash to build the list of the parent and children nodes.
52 | // The title is required to display in the box, and the id is required so that
53 | // we can zoom the viewport to that node onclick.
54 | function makeNodeList(nodeArray) {
55 | nodeList = {}
56 | // console.log("nodearray:")
57 | // console.log(nodeArray)
58 | // trim list of nodes to max length
59 | nodeArrayTrimmed = nodeArray.slice(0, MAX_NODES)
60 | nodeArrayTrimmed.forEach(node => {
61 | if (node == undefined) {
62 | return
63 | }
64 | nodeList[node.id] = [getTitleFromNode(node), getFullTextFromNode(node)]
65 | })
66 | return nodeList
67 | }
68 |
69 | // remove all items from the lists
70 | function clearList() {
71 | while (listElement.firstChild) {
72 | listElement.removeChild(listElement.firstChild)
73 | }
74 | }
75 |
76 | // zoom out a bit and select the node when a list item is clicked on
77 | async function doOnclick(id) {
78 | // clear both lists so the sidebar is empty when the viewport is animating
79 | clearList()
80 | let zoomLevel = await miro.board.viewport.getZoom() // store current zoom level
81 | await miro.board.viewport.setZoom(zoomLevel * 1.10) // zoom in just a bit
82 | await miro.board.selection.selectWidgets(id) // then select the current widget
83 | }
84 | // when a list item is moused over, zoom to that widget after a quick pause.
85 | // once looking at it, zoom out a bunch to show the context (where in the tree)
86 | // the node is.
87 | function doOnMouseover(id) {
88 | // delay between mousing over a list item and zooming over to preview it (ms)
89 | const delayBeforePreviewZoom = 250
90 | // delay between starting to zoom to a widget and zooming out for context (ms)
91 | const delayBeforeShowContextZoom = 600
92 | // how much to zoom out to show context
93 | const showContextZoomFactor = .30
94 |
95 | function previewZoom() {
96 | async function showContextZoom() {
97 | let zoomLevel = await miro.board.viewport.getZoom()
98 | await miro.board.viewport.setZoom(zoomLevel * showContextZoomFactor)
99 | }
100 | miro.board.viewport.zoomToObject(id)
101 | showContextZoomTimer = window.setTimeout(showContextZoom, delayBeforeShowContextZoom)
102 | }
103 |
104 | previewZoomTimer = window.setTimeout(previewZoom, delayBeforePreviewZoom)
105 | }
106 | // when the mouse stops hovering over a list item, return to the viewport we
107 | // saved when updateSidebar was called (usually when the node was selected)
108 | function doOnMouseout(id) {
109 | miro.board.viewport.setViewportWithAnimation(viewport)
110 | window.clearTimeout(showContextZoomTimer)
111 | window.clearTimeout(previewZoomTimer)
112 | }
113 |
114 | // returns the style object of the element with the given ID so the list item in
115 | // the sidebar can match its background color, font weight, border color, and
116 | // border width.
117 | async function getNodeStyle(id) {
118 | let nodes = await miro.board.widgets.get({id: id})
119 | let node = nodes[0] // there can only be one node with a given ID
120 | return node.style
121 | }
122 |
123 | async function getNodeX(id) {
124 | let nodes = await miro.board.widgets.get({id: id})
125 | let node = nodes[0] // there can only be one node with a given ID
126 | return node.x
127 | }
128 |
129 | // Get html elements for tip and lists
130 | const tipElement = document.getElementById('tip')
131 | const listElement = document.getElementById('list')
132 | const nodeTitleElement = document.getElementById('node-title')
133 |
134 | // called each time the selection changes.
135 | // Takes 1 param: the triggering event which is sneakily passed in by the
136 | // listener. We check this event to make sure it has data because the listener
137 | // can be triggered by unresolved promises, which we want to ignore. trigger
138 | // defaults to a fake event with data so that if the function is called with no
139 | // parameters, it runs.
140 | async function updateSidebar(trigger = {data: ["go"]}) {
141 |
142 | // clear sidebar every time selection is updates so we don't build up more and
143 | // more list items
144 | clearSidebar()
145 |
146 | // don't do anything if the listener was triggered by an unresolved promise
147 | // this happens when deselecting
148 | if (trigger.data[0] == undefined) {
149 | console.log("Sidebar update without data!")
150 | return
151 | }
152 |
153 | ///// //// /// // / FUNCTIONS / // /// //// /////
154 | // hide tip and show current node in sidebar
155 | // requires title to be defined
156 | function hideTipShowText() {
157 | tipElement.style.opacity = '0'
158 | nodeTitleElement.style.opacity = '1'
159 | nodeTitleElement.textContent = title
160 | }
161 | // show tip, clear node title, and clear parents/children
162 | function clearSidebar() {
163 | tipElement.style.opacity = '1'
164 | nodeTitleElement.style.opacity = '0'
165 | nodeTitleElement.textContent = '-'
166 | clearList()
167 | }
168 |
169 | async function updateList(list) {
170 | // update the list of each relation (parents/children)
171 |
172 | // generate a list of html li elements from the list of relations
173 | var elementList = []
174 | for (var key in list) {
175 | // for each key, get the title and id
176 | let title = list[key][0]
177 | let id = key
178 |
179 | var o = document.createElement('li') // create the new html element 'o'
180 | o.classList.add("nav-link")
181 | o.onclick = function() { doOnclick(id) }
182 | o.onmouseover = function() { doOnMouseover(id) }
183 | o.onmouseout = function() { doOnMouseout(id) }
184 | o.appendChild(document.createTextNode(title)) // label with node title
185 |
186 | // give the element style to match the node it corresponds to
187 | let nodeStyle = await getNodeStyle(id)
188 | o.style.backgroundColor = nodeStyle.backgroundColor
189 | o.style.borderColor = nodeStyle.borderColor
190 | o.style.borderWidth = nodeStyle.borderWidth / 2 + "px"
191 | o.style.color = nodeStyle.textColor
192 | o.style.fontWeight = nodeStyle.bold == 1 ? "bold" : "inherit"
193 |
194 | // store the node's x coordinate as data-* attribute on the html element
195 | let nodeX = await getNodeX(id)
196 | o["data-x"] = nodeX
197 |
198 | elementList.push(o) // append the li element to the list
199 | }
200 |
201 | // sort the list of li elements by x coordinate
202 | elementList.sort((a, b) => a["data-x"] - b["data-x"])
203 |
204 | // append all the elements to the correct parent element (a ul) in order
205 | elementList.forEach(o => listElement.appendChild(o))
206 | }
207 |
208 | // walk the tree recursively to generate a list of all leaf nodes
209 | // then filter the list by background color to delete all complete nodes
210 | function getAllLeafNodes(node) {
211 | // get children of given node:
212 | // filter for the edges where the node of interest is the 'endWidgetId',
213 | // meaning it is the parent, and the 'startWidgetId' is the child
214 | var edges = allObjects.filter(i => i.type === 'LINE')
215 | let childNodes = []
216 | let childrenEdges = edges.filter(l => l.endWidgetId === node.id)
217 | childrenEdges.forEach(edge => {
218 | let childNode = allObjects.find(o => o.id === edge.startWidgetId)
219 | // only add valid nodes to the list
220 | if (typeof childNode.text !== 'string' || childNode.type != "SHAPE") {
221 | return
222 | }
223 | childNodes.push(childNode)
224 | })
225 |
226 | // if the node has no children, it's a leaf so return it
227 | if (childNodes.length == 0) {
228 | return [node]
229 | } else {
230 | // otherwise the node has children, so recurse:
231 | // return an array of the result of this function run on all the children
232 | // nodes
233 | let out = []
234 | childNodes.forEach(c => {
235 | // RECURSIVE STEP!
236 | // for each child node, recurse
237 | subChildren = getActionableNodes(c)
238 | // and combine the results into one array
239 | out = out.concat(subChildren)
240 | })
241 | return out
242 | }
243 | }
244 |
245 | // filter for nodes that aren't complete or purple
246 | function getActionableNodes(node) {
247 | const unactionableColors = ['#8fd14f', '#9510ac']
248 |
249 | leaves = getAllLeafNodes(node)
250 | return leaves.filter(l => {
251 | b = l.style.backgroundColor
252 | return !unactionableColors.includes(b)
253 | })
254 | }
255 | ///// //// /// // / END FUNCTIONS / // /// //// /////
256 |
257 | // Get selected widgets
258 | let widgets = await miro.board.selection.get()
259 | // If there's no selection, don't do anything
260 | if (widgets[0] == undefined) {
261 | return
262 | }
263 | // Get first widget from selected widgets
264 | var widget = widgets[0]
265 |
266 | var text = widget.text
267 | var type = widget.type
268 |
269 | // Check that widget is a valid node with a title. If it's not, stop.
270 | if (typeof text !== 'string' || type != "SHAPE") {
271 | console.log("Valid node must be selected!")
272 | return
273 | }
274 |
275 | // set up variables that updateList implicitly needs
276 | var title = getTitleFromNode(widgets[0])
277 | var allObjects = await miro.board.getAllObjects()
278 | viewport = await miro.board.viewport.getViewport()
279 | var showContextZoomTimer
280 | var previewZoomTimer
281 |
282 | // set up updateList parameters
283 | var nodeList = makeNodeList(getActionableNodes(widget))
284 |
285 | hideTipShowText() // show current node text
286 | updateList(nodeList)
287 | }
288 |
--------------------------------------------------------------------------------
/public/actionables.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/actionables.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const actionablesIcon = `
3 |
4 | A
5 | `
6 | miro.initialize({
7 | extensionPoints: {
8 | bottomBar: {
9 | title: 'ᴀᴄᴏʀɴ: Explore actionable smalls for selected node',
10 | svgIcon: actionablesIcon,
11 | positionPriority: 993,
12 | onClick: () => {
13 | miro.board.ui.openLeftSidebar('actionables-sidebar.html')
14 | }
15 | }
16 | }
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/public/climbing-harness-sidebar.css:
--------------------------------------------------------------------------------
1 | .scrollable-container {
2 | overflow-y: auto;
3 | position: absolute;
4 | bottom: 0;
5 | top: 63.5px;
6 | padding-right: 5%;
7 | }
8 | .rtb-sidebar-caption {
9 | font-size: 14px;
10 | font-weight: bold;
11 | color: rgba(0, 0, 0, 0.7);
12 | padding: 24px 0 20px 24px;
13 | }
14 | textarea {
15 | display: block;
16 | height: 25%;
17 | margin: 20px 0 0 20px;
18 | background-color: white;
19 | border-radius: 4px;
20 | border: .5;
21 | width: calc(100% - 40px);
22 | text-align: left;
23 | font-size: 14px;
24 | }
25 | .tip {
26 | color: #CCCCCC;
27 | margin: 20px 0 0 26px;
28 | }
29 | .node {
30 | margin: 20px 0 20px 10px;
31 | }
32 | .node-title {
33 | display: block;
34 | margin: 0 auto;
35 | width: 100%;
36 | text-align: center;
37 | font-weight: bold;
38 | }
39 | ul {
40 | padding-left: 5%;
41 | }
42 | li {
43 | list-style: none;
44 | margin: 2px 0 2px 0;
45 | padding: 2px 5px;
46 | }
47 | .nav-link {
48 | cursor: pointer;
49 | font-weight: 500;
50 | border: 1px solid black;
51 | }
52 | header {
53 | margin-left: 10px;
54 | font-weight: bold;
55 | font-size: larger;
56 | }
57 |
--------------------------------------------------------------------------------
/public/climbing-harness-sidebar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
Climbing Harness
14 |
15 |
16 | Parents:
17 |
18 |
19 |
20 | Select a node to view its connections.
21 |
22 |
23 |
24 |
25 |
26 | Children:
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/public/climbing-harness-sidebar.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | // subscribe on user selected widgets
3 | miro.addListener(miro.enums.event.SELECTION_UPDATED, updateSidebar)
4 | // update the sidebar once when it first opens
5 | updateSidebar()
6 | })
7 |
8 | // get the entire text of a node without any of the characters phloem adds
9 | function getFullTextFromNode(node) {
10 | html = node.text
11 | html = html.replace(//gi, '')
12 | html = html.replace(//gi, '')
13 | html = html.replace(/<\/div>/ig, '\n')
14 | html = html.replace(/<\/li>/ig, '\n')
15 | html = html.replace(/
/ig, ' * ')
16 | html = html.replace(/<\/ul>/ig, '\n')
17 | html = html.replace(/<\/p>/ig, '\n')
18 | html = html.replace(//gi, "\n")
19 | html = html.replace(/<[^>]+>/ig, '')
20 | text = html.replace(/⋅/g,'') // remove newline markers if there are any
21 | return text
22 | }
23 |
24 | // calculate the issue title from a node's text
25 | function getTitleFromNode(node) {
26 | let titleLength = 13
27 |
28 | var fullText = getFullTextFromNode(node)
29 |
30 | // remove metadata (stuff after ##)
31 | var textWithoutMetadata
32 | if (fullText.includes('##')) {
33 | textWithoutMetadata = fullText.split('##').slice(0, -1).join(' ')
34 | } else {
35 | textWithoutMetadata = fullText
36 | }
37 |
38 | // get the first x words to use as the title
39 | if (textWithoutMetadata.split(' ').length <= titleLength) {
40 | return textWithoutMetadata
41 | } else {
42 | // add ... if the text is longer than 10 words
43 | return textWithoutMetadata.split(' ').slice(0,titleLength).join(' ') + "..."
44 | }
45 | }
46 |
47 | // returns a hash of the ID and short and long text of each node in the given array.
48 | // Example: { 84759034802: ['This is...', 'This is a test node.'], 9879: ['Another...', 'Another one.'] }
49 | // later we use this hash to build the list of the parent and children nodes.
50 | // The title is required to display in the box, and the id is required so that
51 | // we can zoom the viewport to that node onclick.
52 | function makeNodeList(nodeArray) {
53 | nodeList = {}
54 | // console.log("nodearray:")
55 | // console.log(nodeArray)
56 | nodeArray.forEach(node => {
57 | if (node == undefined) {
58 | return
59 | }
60 | nodeList[node.id] = [getTitleFromNode(node), getFullTextFromNode(node)]
61 | })
62 | return nodeList
63 | }
64 |
65 | // remove all items from both lists
66 | function clearLists() {
67 | while (parentListElement.firstChild) {
68 | parentListElement.removeChild(parentListElement.firstChild)
69 | }
70 | while (childListElement.firstChild) { // refactor?
71 | childListElement.removeChild(childListElement.firstChild)
72 | }
73 | }
74 |
75 | // zoom out a bit and select the node when a list item is clicked on
76 | async function doOnclick(id) {
77 | // clear both lists so the sidebar is empty when the viewport is animating
78 | clearLists()
79 | let zoomLevel = await miro.board.viewport.getZoom() // store current zoom level
80 | await miro.board.viewport.setZoom(zoomLevel * 1.10) // zoom in just a bit
81 | await miro.board.selection.selectWidgets(id) // then select the current widget
82 | }
83 | // when a list item is moused over, zoom to that widget after a quick pause.
84 | // once looking at it, zoom out a bunch to show the context (where in the tree)
85 | // the node is.
86 | function doOnMouseover(id) {
87 | // delay between mousing over a list item and zooming over to preview it (ms)
88 | let delayBeforePreviewZoom = 250
89 | // delay between starting to zoom to a widget and zooming out for context (ms)
90 | let delayBeforeShowContextZoom = 600
91 | // how much to zoom out to show context
92 | let showContextZoomFactor = .30
93 |
94 | function previewZoom() {
95 | async function showContextZoom() {
96 | let zoomLevel = await miro.board.viewport.getZoom()
97 | await miro.board.viewport.setZoom(zoomLevel * showContextZoomFactor)
98 | }
99 | miro.board.viewport.zoomToObject(id)
100 | showContextZoomTimer = window.setTimeout(showContextZoom, delayBeforeShowContextZoom)
101 | }
102 |
103 | previewZoomTimer = window.setTimeout(previewZoom, delayBeforePreviewZoom)
104 | }
105 | // when the mouse stops hovering over a list item, return to the viewport we
106 | // saved when updateSidebar was called (usually when the node was selected)
107 | function doOnMouseout(id) {
108 | miro.board.viewport.setViewportWithAnimation(viewport)
109 | window.clearTimeout(showContextZoomTimer)
110 | window.clearTimeout(previewZoomTimer)
111 | }
112 |
113 | // returns the style object of the element with the given ID so the list item in
114 | // the sidebar can match its background color, font weight, border color, and
115 | // border width.
116 | async function getNodeStyle(id) {
117 | let nodes = await miro.board.widgets.get({id: id})
118 | let node = nodes[0] // there can only be one node with a given ID
119 | return node.style
120 | }
121 |
122 | async function getNodeX(id) {
123 | let nodes = await miro.board.widgets.get({id: id})
124 | let node = nodes[0] // there can only be one node with a given ID
125 | return node.x
126 | }
127 |
128 | // Get html elements for tip and lists
129 | const tipElement = document.getElementById('tip')
130 | const nodeElement = document.getElementById('node')
131 | const nodeTitleElement = nodeElement.children['node-title']
132 | const parentListElement = document.getElementById('parent-list')
133 | const childListElement = document.getElementById('child-list')
134 |
135 | // called each time the selection changes.
136 | // Takes 1 param: the triggering event which is sneakily passed in by the
137 | // listener. We check this event to make sure it has data because the listener
138 | // can be triggered by unresolved promises, which we want to ignore. trigger
139 | // defaults to a fake event with data so that if the function is called with no
140 | // parameters, it runs.
141 | async function updateSidebar(trigger = {data: ["go"]}) {
142 |
143 | // clear sidebar every time selection is updates so we don't build up more and
144 | // more list items
145 | clearSidebar()
146 |
147 | // don't do anything if the listener was triggered by an unresolved promise
148 | // this happens when deselecting
149 | if (trigger.data[0] == undefined) {
150 | console.log("Sidebar update without data!")
151 | return
152 | }
153 |
154 | ///// //// /// // / FUNCTIONS / // /// //// /////
155 | // hide tip and show current node in sidebar
156 | // requires title to be defined
157 | function hideTipShowText() {
158 | tipElement.style.opacity = '0'
159 | nodeElement.style.opacity = '1'
160 | nodeTitleElement.textContent = title
161 | }
162 | // show tip, clear node title, and clear parents/children
163 | function clearSidebar() {
164 | tipElement.style.opacity = '1'
165 | nodeElement.style.opacity = '0'
166 | nodeTitleElement.textContent = ' '
167 | clearLists()
168 | }
169 |
170 | async function updateLists(parentList, childList) {
171 | // update the list of each relation (parents/children)
172 | [[parentList,parentListElement], [childList,childListElement]].forEach(async relation => {
173 | var list = relation[0]
174 | var element = relation[1]
175 |
176 | // generate a list of html li elements from the list of relations
177 | var elementList = []
178 | for (var key in list) {
179 | // for each key, get the title and id
180 | let title = list[key][0]
181 | let id = key
182 |
183 | var o = document.createElement('li') // create the new html element 'o'
184 | o.classList.add("nav-link")
185 | o.onclick = function() { doOnclick(id) }
186 | o.onmouseover = function() { doOnMouseover(id) }
187 | o.onmouseout = function() { doOnMouseout(id) }
188 | o.appendChild(document.createTextNode(title)) // label with node title
189 |
190 | // give the element style to match the node it corresponds to
191 | let nodeStyle = await getNodeStyle(id)
192 | o.style.backgroundColor = nodeStyle.backgroundColor
193 | o.style.borderColor = nodeStyle.borderColor
194 | o.style.borderWidth = nodeStyle.borderWidth / 2 + "px"
195 | o.style.color = nodeStyle.textColor
196 | o.style.fontWeight = nodeStyle.bold == 1 ? "bold" : "inherit"
197 |
198 | // store the node's x coordinate as data-* attribute on the html element
199 | let nodeX = await getNodeX(id)
200 | o["data-x"] = nodeX
201 |
202 | elementList.push(o) // append the li element to the list
203 | }
204 |
205 | // sort the list of li elements by x coordinate
206 | elementList.sort((a, b) => a["data-x"] - b["data-x"])
207 |
208 | // append all the elements to the correct parent element (a ul) in order
209 | elementList.forEach(o => element.appendChild(o))
210 | })
211 | }
212 |
213 | function getChildNodes(node) {
214 | // filter for the edges where the node of interest
215 | // is the 'endWidgetId', meaning it is the parent, and the 'startWidgetId' is the child
216 | var edges = allObjects.filter(i => i.type === 'LINE')
217 | let childNodes = []
218 | let childrenEdges = edges.filter(l => l.endWidgetId === node.id)
219 | childrenEdges.forEach(edge => {
220 | let childNode = allObjects.find(o => o.id === edge.startWidgetId)
221 | // only add valid nodes to the list
222 | if (typeof childNode.text !== 'string' || childNode.type != "SHAPE") {
223 | return
224 | }
225 | childNodes.push(childNode)
226 | })
227 | return childNodes
228 | }
229 | function getParentNodes(node) { // FIXME refactor
230 | var edges = allObjects.filter(i => i.type === 'LINE')
231 | let parentNodes = []
232 | let parentEdges = edges.filter(l => l.startWidgetId === node.id)
233 | parentEdges.forEach(edge => {
234 | let parentNode = allObjects.find(o => o.id === edge.endWidgetId)
235 | if (typeof parentNode.text !== 'string' || parentNode.type != "SHAPE") {
236 | return
237 | }
238 | parentNodes.push(parentNode)
239 | })
240 | return parentNodes
241 | }
242 | ///// //// /// // / END FUNCTIONS / // /// //// /////
243 |
244 | // Get selected widgets
245 | let widgets = await miro.board.selection.get()
246 | // If there's no selection, don't do anything
247 | if (widgets[0] == undefined) {
248 | return
249 | }
250 | // Get first widget from selected widgets
251 | var widget = widgets[0]
252 |
253 | var text = widget.text
254 | var type = widget.type
255 |
256 | // Check that widget is a valid node with a title. If it's not, stop.
257 | if (typeof text !== 'string' || type != "SHAPE") {
258 | console.log("Valid node must be selected!")
259 | return
260 | }
261 |
262 | // set up variables that updateLists implicitly needs
263 | var title = getTitleFromNode(widgets[0])
264 | var allObjects = await miro.board.getAllObjects()
265 | viewport = await miro.board.viewport.getViewport()
266 | var showContextZoomTimer
267 | var previewZoomTimer
268 |
269 | // set up updateList parameters
270 | var parentNodeList = makeNodeList(getParentNodes(widget))
271 | var childNodeList = makeNodeList(getChildNodes(widget))
272 |
273 | hideTipShowText() // show current node text
274 | updateLists(parentNodeList, childNodeList)
275 | }
276 |
--------------------------------------------------------------------------------
/public/climbing-harness.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/climbing-harness.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const climbingHarnessIcon = `
3 |
4 |
9 |
10 |
11 |
12 | `
13 | miro.initialize({
14 | extensionPoints: {
15 | bottomBar: {
16 | title: 'ᴀᴄᴏʀɴ: Explore parents and children of selected node',
17 | svgIcon: climbingHarnessIcon,
18 | positionPriority: 994,
19 | onClick: () => {
20 | miro.board.ui.openLeftSidebar('climbing-harness-sidebar.html')
21 | }
22 | }
23 | }
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/public/create-issue-modal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
31 |
48 |
49 |
50 |
51 |
52 |
In which repo would you like to create this issue?
53 |
54 |
55 |
57 |
58 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/public/create-issue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/public/create-issue.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const createIssueIcon = `
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | `
42 |
43 | miro.initialize({
44 | extensionPoints: {
45 | bottomBar: {
46 | title: 'ᴀᴄᴏʀɴ: Create GitHub issue for selected node', // note: gets turned to lowercase by Miro
47 | svgIcon: createIssueIcon,
48 | positionPriority: 995,
49 | onClick: activateModal
50 | }
51 | }
52 | })
53 | })
54 |
55 | // get the entire text of a node without any of the characters phloem adds
56 | function getFullTextFromNode(root) {
57 | return root.text.replace(/⋅/g,'') // remove newline markers if there are any
58 | }
59 |
60 | // calculate the issue title from a node's text
61 | function getTitleFromNode(root) {
62 | let titleLength = 10
63 |
64 | var fullText = getFullTextFromNode(root)
65 | // get the first x words to use as the title
66 | if (fullText.split(' ').length <= titleLength) {
67 | return fullText
68 | } else {
69 | // add ... if the text is longer than 10 words
70 | return fullText.split(' ').slice(0,titleLength).join(' ') + "..."
71 | }
72 | }
73 |
74 | // calculate the issue body text from a node. This is the entire text plus a
75 | // link back to the node. Takes board info object because this has to be gotten
76 | // inside an async function.
77 | function getBodyFromNode(root, boardInfo) {
78 | var fullText = getFullTextFromNode(root)
79 | // append link to node in Miro
80 | return fullText + 'See card in SoA Tree'
81 | }
82 |
83 | // return the URL that is typed in a config node in Miro
84 | async function getServerURL() {
85 | let configBackgroundColor = "#CA59E2"
86 | // find nodes with the right background color. Miro turns hex codes lowercase
87 | var configNodes = await miro.board.widgets.get({type: 'shape', style:{backgroundColor: configBackgroundColor.toLowerCase()}})
88 | var configNode = configNodes[0]
89 | var serverURL = configNode.text
90 | // console.log(configNode)
91 | // console.log(serverURL)
92 | return serverURL
93 | }
94 |
95 | // check that the selection is valid and then activate the modal popup
96 | async function activateModal() {
97 | // gets the selected widgets on the board, returns an array
98 | let selection = await miro.board.selection.get()
99 | // validate that we can proceed with the selected item
100 | if (!validateSelection(selection)) return
101 |
102 | // prompt the user to choose the repo in which to create the issue
103 | miro.board.ui.openModal('create-issue-modal.html')
104 | }
105 |
106 | // create and send an issue of the selected node to the specified repo
107 | async function createAndSendIssue(repoPath) {
108 | // gets the selected widgets on the board, returns an array
109 | let selection = await miro.board.selection.get()
110 | // gets the board info
111 | let boardInfo = await miro.board.info.get()
112 |
113 | miro.showNotification('Creating issue...')
114 | console.log("creating issue to send to repo: " + repoPath)
115 |
116 | let root = selection[0]
117 |
118 | var title = getTitleFromNode(root)
119 | var text = getBodyFromNode(root, boardInfo)
120 |
121 | // send the issue to simpleserver.js to be sent to GitHub
122 | sendIssue(title, text, repoPath)
123 |
124 | miro.showNotification(`Successfully created issue in repo: ${repoPath}`)
125 | }
126 |
127 | const uncertainRed = "#f24726"
128 | const incompleteYellow = "#fac710"
129 | const completeGreen = "#8fd14f"
130 | const smallGreen = "#0ca789"
131 | const timeTeal = "#12cdd4"
132 |
133 | // var variables = {}
134 | // function setVariable(attribute, value) {
135 | // variables[attribute] = value
136 | // }
137 | //
138 | // function getVariable(attribute) {
139 | // return variables[attribute]
140 | // }
141 | // variables["test"] = 104
142 |
143 | async function sendIssue(title, body, repoPath, assignee = null, labels = null) {
144 |
145 | var serverURL = await getServerURL()
146 | var url = serverURL + "/create-issue"
147 |
148 | var xhr = new XMLHttpRequest()
149 | xhr.open('POST', url, true)
150 | xhr.setRequestHeader("Content-type", "application/json")
151 |
152 | // set up the issue JSON with the desired information
153 | var json = {
154 | "issueRepoPath": repoPath,
155 | "issueTitle": title,
156 | "issueBody": body,
157 | "issueLabels": [],
158 | "issueAssignee": null
159 | }
160 |
161 | // convert issue JSON to string
162 | var issue = JSON.stringify(json)
163 | // send issue
164 | xhr.send(issue)
165 |
166 | }
167 |
168 | function validateSelection(selection) {
169 | // validate only one selection
170 | if (selection.length > 1) {
171 | miro.showErrorNotification('You must only have one node selected')
172 | return false
173 | } else if (selection.length === 0) {
174 | miro.showErrorNotification('You must have at least one node selected')
175 | return false
176 | } else if (selection[0].type !== "SHAPE") {
177 | miro.showErrorNotification('The selected element must be a node')
178 | return false
179 | } else {
180 | return true
181 | }
182 | }
183 |
--------------------------------------------------------------------------------
/public/set-complete.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/set-complete.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const completeIcon = `
3 | `
4 |
5 | miro.initialize({
6 | extensionPoints: {
7 | bottomBar: {
8 | title: 'ᴀᴄᴏʀɴ: Set selected as complete',
9 | svgIcon: completeIcon,
10 | positionPriority: 997,
11 | onClick: completeSelected
12 | }
13 | }
14 | })
15 | })
16 |
17 |
18 | async function completeSelected() {
19 | // gets the selected widgets on the board, returns an array
20 | let selection = await miro.board.selection.get()
21 |
22 | // validate that we can proceed with the selected item
23 | if (!validateSelection(selection)) return
24 |
25 | let root = selection[0]
26 |
27 | miro.board.widgets.shapes.update(root.id, { style: {
28 | backgroundColor: completeGreen,
29 | }})
30 | }
31 |
32 | const uncertainRed = "#f24726"
33 | const incompleteYellow = "#fac710"
34 | const completeGreen = "#8fd14f"
35 | const smallGreen = "#0ca789"
36 | const timeTeal = "#12cdd4"
37 |
38 | function validateSelection(selection) {
39 | // validate only one selection
40 | if (selection.length > 1) {
41 | miro.showErrorNotification('You must only have one node selected')
42 | return false
43 | } else if (selection.length === 0) {
44 | miro.showErrorNotification('You must have at least one node selected')
45 | return false
46 | } else if (selection[0].type !== "SHAPE") {
47 | miro.showErrorNotification('The selected element must be a node')
48 | return false
49 | } else {
50 | return true
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/public/set-incomplete.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/set-incomplete.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const incompleteIcon =`
3 |
4 | `
5 |
6 | miro.initialize({
7 | extensionPoints: {
8 | bottomBar: {
9 | title: 'ᴀᴄᴏʀɴ: Set selected as incomplete',
10 | svgIcon: incompleteIcon,
11 | positionPriority: 998,
12 | onClick: incompleteSelected
13 | }
14 | }
15 | })
16 | })
17 |
18 |
19 | async function incompleteSelected() {
20 | // gets the selected widgets on the board, returns an array
21 | let selection = await miro.board.selection.get()
22 |
23 | // validate that we can proceed with the selected item
24 | if (!validateSelection(selection)) return
25 |
26 | let root = selection[0]
27 |
28 | miro.board.widgets.shapes.update(root.id, { style: {
29 | backgroundColor: incompleteYellow,
30 | borderColor: smallGreen,
31 | borderWidth: 16
32 | }})
33 | }
34 |
35 | const uncertainRed = "#f24726"
36 | const incompleteYellow = "#fac710"
37 | const completeGreen = "#8fd14f"
38 | const smallGreen = "#0ca789"
39 | const timeTeal = "#12cdd4"
40 |
41 | function validateSelection(selection) {
42 | // validate only one selection
43 | if (selection.length > 1) {
44 | miro.showErrorNotification('You must only have one node selected')
45 | return false
46 | } else if (selection.length === 0) {
47 | miro.showErrorNotification('You must have at least one node selected')
48 | return false
49 | } else if (selection[0].type !== "SHAPE") {
50 | miro.showErrorNotification('The selected element must be a node')
51 | return false
52 | } else {
53 | return true
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/public/set-uncertain.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/set-uncertain.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const uncertainIcon =`
3 |
4 | `
5 |
6 | miro.initialize({
7 | extensionPoints: {
8 | bottomBar: {
9 | title: 'ᴀᴄᴏʀɴ: Set selected as uncertain',
10 | svgIcon: uncertainIcon,
11 | positionPriority: 996,
12 | onClick: uncertainSelected
13 | }
14 | }
15 | })
16 | })
17 |
18 |
19 | async function uncertainSelected() {
20 | // gets the selected widgets on the board, returns an array
21 | let selection = await miro.board.selection.get()
22 |
23 | // validate that we can proceed with the selected item
24 | if (!validateSelection(selection)) return
25 |
26 | let root = selection[0]
27 |
28 | miro.board.widgets.shapes.update(root.id, { style: {
29 | backgroundColor: uncertainRed,
30 | borderColor: "#000000",
31 | borderWidth: 2
32 | }})
33 | }
34 |
35 | const uncertainRed = "#f24726"
36 | const incompleteYellow = "#fac710"
37 | const completeGreen = "#8fd14f"
38 | const smallGreen = "#0ca789"
39 | const timeTeal = "#12cdd4"
40 |
41 | function validateSelection(selection) {
42 | // validate only one selection
43 | if (selection.length > 1) {
44 | miro.showErrorNotification('You must only have one node selected')
45 | return false
46 | } else if (selection.length === 0) {
47 | miro.showErrorNotification('You must have at least one node selected')
48 | return false
49 | } else if (selection[0].type !== "SHAPE") {
50 | miro.showErrorNotification('The selected element must be a node')
51 | return false
52 | } else {
53 | return true
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/public/tree-logic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/public/tree-logic.js:
--------------------------------------------------------------------------------
1 | miro.onReady(() => {
2 | const treeLogicIcon = `
3 | `
39 |
40 | miro.initialize({
41 | extensionPoints: {
42 | bottomBar: {
43 | title: 'ᴀᴄᴏʀɴ: Calculate subtree sizes for selected', // note: gets turned to lowercase by Miro
44 | svgIcon: treeLogicIcon,
45 | positionPriority: 996,
46 | onClick: updateDataForSelected
47 | }
48 | }
49 | })
50 | })
51 |
52 |
53 | async function updateDataForSelected() {
54 | // gets the selected widgets on the board, returns an array
55 | let selection = await miro.board.selection.get()
56 |
57 | // validate that we can proceed with the selected item
58 | if (!validateSelection(selection)) return
59 |
60 | miro.showNotification('Calculating subtree sizes')
61 |
62 | // root is the widget that things will be calculated starting from and in relation to
63 | let root = selection[0]
64 |
65 | // get the entire list of objects on the board as an array
66 | let allObjects = await miro.board.getAllObjects()
67 |
68 | // collect the full list of edges
69 | let edges = allObjects.filter(i => i.type === 'LINE')
70 |
71 | // starting with the root and recursing, calculate all the sizes of the subtrees, and update the nodes
72 | getAndSetCountsForNode(root, allObjects, edges)
73 | miro.showNotification('Successfully set subtree sizes')
74 | }
75 |
76 | const uncertainRed = "#f24726"
77 | const incompleteYellow = "#fac710"
78 | const completeGreen = "#8fd14f"
79 | const smallGreen = "#0ca789"
80 | const timeTeal = "#12cdd4"
81 |
82 | const countPrefix = "##"
83 | const historySeparator = "--"
84 |
85 | function getAndSetCountsForNode(node, allObjects, edges) {
86 | // initialize the counts for this node
87 | let counts = {
88 | uncertain: {},
89 | completedSmall: {},
90 | uncompletedSmall:{}
91 | }
92 | // increase the counts for this node to include the counts of its children
93 | // filter for the edges where the node of interest
94 | // is the 'endWidgetId', meaning it is the parent, and the 'startWidgetId' is the child
95 | let childrenEdges = edges.filter(l => l.endWidgetId === node.id)
96 | childrenEdges.forEach(edge => {
97 | let childNode = allObjects.find(o => o.id === edge.startWidgetId)
98 | let childCounts = getAndSetCountsForNode(childNode, allObjects, edges)
99 | counts = {uncertain:{...childCounts.uncertain,...counts.uncertain},
100 | completedSmall:{...childCounts.completedSmall,...counts.completedSmall},
101 | uncompletedSmall:{...childCounts.uncompletedSmall,...counts.uncompletedSmall}
102 | }
103 | })
104 |
105 | const completedSmallCount = Object.keys(counts.completedSmall).length
106 | const uncompletedSmallCount = Object.keys(counts.uncompletedSmall).length
107 | const totalSmallCount = completedSmallCount + uncompletedSmallCount
108 | const uncertainCount = Object.keys(counts.uncertain).length
109 | // at this point, the counts only include the totals of its children
110 | // use this moment to update the label for this node
111 | var countText
112 |
113 | // get the main text from the current node
114 | const orig_text = node.text.split(" "+countPrefix+" ")
115 | var main_text = orig_text[0]
116 | // use ⋅ to recognize the end of a line and reinsert a line break
117 | main_text = main_text.replace(/⋅/g,"⋅ ")
118 | const old_counts = orig_text[1]
119 |
120 | // get the background color and border color, since that's representing completion and node-type
121 | let backgroundColor = node.style && (node.style.backgroundColor || node.style.stickerBackgroundColor)
122 | let borderColor = node.style && node.style.borderColor
123 |
124 | // update the history for time nodes. We only need to do this if there was an old_counts value,
125 | // i.e. we can skip this if this is the very time the tree is being calculated.
126 | if (backgroundColor === timeTeal && old_counts != undefined) {
127 | const count_parts = old_counts.split(" "+historySeparator+" ") // spaces because thats what the brs show up as
128 | const history_str = count_parts[1] === undefined ? "" : count_parts[1] ;
129 | countText = makeCountsWithHistoryStr(uncompletedSmallCount,totalSmallCount,uncertainCount,history_str)
130 | } else {
131 | // This is for non-time nodes, just use the plain counts string
132 | countText = makeCountsStr(uncompletedSmallCount,totalSmallCount,uncertainCount)
133 | }
134 |
135 | // now determine what this node itself is
136 |
137 | // uncertain or small?
138 | if (backgroundColor === uncertainRed) counts.uncertain[node.id] = true
139 | else if (borderColor === smallGreen) {
140 | if (backgroundColor === completeGreen) {
141 | counts.completedSmall[node.id] = true
142 | } else {
143 | counts.uncompletedSmall[node.id] = true
144 | }
145 | }
146 |
147 | // now update the text for the node
148 | const newText = `${main_text} ${countPrefix} ${countText}`
149 | miro.board.widgets.shapes.update(node.id, { text: newText })
150 |
151 |
152 | // return counts so that recursion can happen
153 | return counts
154 | }
155 |
156 | function makeCountsStr(uncompletedSmallCount,totalSmallCount,uncertainCount,prediction) {
157 | const base = `S: ${uncompletedSmallCount}/${totalSmallCount} U: ${uncertainCount}`
158 | return (!prediction) ? base : `${base} P: ${prediction}`
159 | }
160 |
161 | function makeCountsWithHistoryStr(uncompletedSmallCount,totalSmallCount,uncertainCount,history_str) {
162 | const history = history_str === "" ? [] : parseHistory(history_str)
163 | const prediction = predict(history)
164 | var countText = makeCountsStr(uncompletedSmallCount,totalSmallCount,uncertainCount,prediction)
165 | const d = new Date();
166 |
167 | // if there is no history at all, or if we are recalculating for the first time in a day
168 | // then add todays count to the top of the history.
169 | if (history.length == 0 || !isToday(history[0].date)) {
170 | const todays_date = dateStr(d)
171 | var today = `${todays_date}~ ${countText}`
172 | countText = `${countText} ${historySeparator} ${today}`
173 | if (history_str) {
174 | countText = `${countText}; ${historyToString(history)}`
175 | }
176 | } else {
177 | countText = `${countText} ${historySeparator} ${historyToString(history)}`
178 | }
179 | return countText
180 | }
181 |
182 |
183 | function parseDate(date_str) {
184 | const parts = date_str.split('-');
185 | return new Date(parts[0], parts[1] - 1, parts[2]);
186 | }
187 |
188 | function dateStr(d) {
189 | return d.getFullYear() + "-" + ("0"+(d.getMonth()+1)).slice(-2)+ "-"+ ("0" + d.getDate()).slice(-2)
190 | }
191 |
192 | function isToday(date_str) {
193 | const first = parseDate(date_str);
194 | const second = new Date();
195 | return first.getYear() == second.getYear() && first.getDate() == second.getDate() && first.getMonth() == second.getMonth()
196 | }
197 |
198 | function historyToString(history) {
199 | return history.map(x => {
200 | return `${x.date}~ ${makeCountsStr(x.uncomplete,x.total,x.unknown,x.prediction)}`
201 | }).join("; ")
202 | }
203 |
204 | function parseHistory(historyStr) {
205 | const h = historyStr.split(/; */).filter(x=> x!="");
206 |
207 | const re = /([^~]+)~ S: (.*?)\/(.*?) U: (.*)( P: (.*?))*/;
208 | const old_re = /(.*?): (.*)\/(.*)/;
209 | return h.map(x => {
210 | let m = re.exec(x)
211 | if (m) {
212 | return {
213 | date: m[1],
214 | uncomplete: m[2],
215 | total: m[3],
216 | unknown: !m[4]?"?":m[4],
217 | prediction: m[6],
218 | }
219 | }
220 | m = old_re.exec(x)
221 | if (m) {
222 | return {
223 | date: m[1],
224 | uncomplete: m[2],
225 | total: m[3],
226 | unknown: "?"
227 | }
228 | }
229 | })
230 | }
231 |
232 | function predict(history) {
233 | const points = history.map(x=>{const date = Date.parse(x.date); return [parseInt(x.uncomplete),date]})
234 | if (points.length <3) {return ""}
235 | const r = new regression("linear",points.reverse())
236 |
237 | // the slope of the result has to be negative otherwise it means
238 | // we'll never finish
239 | if (r.string.startsWith("y = -")) {
240 | const zeroPoint = r.equation[1]
241 | return dateStr(new Date(zeroPoint))
242 | } else {
243 | return "NEVER!";
244 | }
245 | }
246 |
247 | function validateSelection(selection) {
248 | // validate only one selection
249 | if (selection.length > 1) {
250 | miro.showErrorNotification('You must only have one node selected')
251 | return false
252 | } else if (selection.length === 0) {
253 | miro.showErrorNotification('You must have at least one node selected')
254 | return false
255 | } else if (selection[0].type !== "SHAPE") {
256 | miro.showErrorNotification('The selected element must be a node')
257 | return false
258 | } else {
259 | return true
260 | }
261 | }
262 |
--------------------------------------------------------------------------------
/simpleserver.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | var express = require('express')
3 | var cors = require('cors')
4 | var serveStatic = require('serve-static')
5 | var app = express()
6 | const config = require('./config.json')
7 | const request = require('request');
8 |
9 | let threeData = {
10 | nodes: [],
11 | links: []
12 | }
13 |
14 | // id, name, data, children []
15 | let spaceTreeData = {}
16 |
17 | // JSON parsing
18 | app.use(express.json({limit: '50mb'}))
19 |
20 | // necessary CORS headers
21 | app.use(cors({
22 | origin: 'https://miro.com'
23 | }))
24 |
25 | // static file server
26 | app.use(serveStatic('public'))
27 |
28 | // send out issue information to GitHub API
29 | app.post('/create-issue', function (req, res) {
30 | // console.log(`REQ: ${req}`)
31 | // req should contain information about the issue (title, body, labels), and
32 | // the repo it should be created in
33 | var url = 'https://api.github.com/repos/' + req.body.issueRepoPath + '/issues'
34 | // add acorn to the other labels
35 | req.body.issueLabels.push("acorn")
36 |
37 | // set up the issue JSON with the desired information
38 | var issue = {
39 | "title": req.body.issueTitle,
40 | "body": req.body.issueBody,
41 | "labels": req.body.issueLabels
42 | }
43 |
44 | request({
45 | url:url,
46 | method:"POST",
47 | json: true,
48 | body: issue,
49 | headers: {
50 | 'Authorization': 'Bearer ' + config.repos[req.body.issueRepoPath].accessToken, // look up access token
51 | 'Content-Type': 'application/json',
52 | 'User-Agent': 'soa-toolbox-server'
53 | }
54 | }, function (err, res, body) {
55 | // console.log(`RES: ${res}`)
56 | })
57 |
58 | })
59 |
60 | // share the list of repos from config file with Miro so we can display them in the modal pop-up
61 | app.get('/get-config-repos', function (req, res) {
62 | // extract repo names from config file
63 | var repos = Object.keys(config.repos)
64 | // console.log(repos)
65 | res.send(repos)
66 | })
67 |
68 |
69 | app.get('/get-3d-data', function (req, res) {
70 | res.send(threeData)
71 | })
72 |
73 | app.get('/get-spacetree-data', function (req, res) {
74 | res.send(spaceTreeData)
75 | })
76 |
77 | app.post('/update-soa-tree-data', function (req, res) {
78 |
79 | // reset and build the threeData
80 | threeData.nodes = []
81 | threeData.links = []
82 | req.body.forEach(widget => {
83 | switch (widget.type) {
84 | case 'LINE':
85 | if (widget.startWidgetId && widget.endWidgetId) {
86 | threeData.links.push({
87 | source: widget.startWidgetId,
88 | target: widget.endWidgetId,
89 | id: widget.id
90 | })
91 | }
92 | default:
93 | threeData.nodes.push({
94 | id: widget.id,
95 | name: widget.text || widget.title || "",
96 | val: 5,
97 | color: widget.style ? widget.style.backgroundColor || widget.style.stickerBackgroundColor : ''
98 | })
99 | }
100 | })
101 |
102 | // build the data for the spacetree
103 | // gets the Holochain root node
104 | var rootId = '3074457346387129258'
105 |
106 | var closedAlphaRootNode = '3074457346342611504'
107 | var root = req.body.find(i => i.id === closedAlphaRootNode)
108 | spaceTreeData = {
109 | id: root.id,
110 | name: root.text,
111 | data: {
112 | $color: root.style ? root.style.backgroundColor || root.style.stickerBackgroundColor : 'red'
113 | },
114 | children: []
115 | }
116 | let collectedLinks = {}
117 | function addChildren(node) {
118 | threeData.links
119 | // get all the links that haven't been collected yet, and that are either from or to the node of interest
120 | .filter(link => (link.source === node.id || link.target === node.id) && !collectedLinks[link.id] && link.id !== '3074457346469683813')
121 | // add them to collected links, and to the children of the node of interest, and recurse
122 | .forEach(link => {
123 | collectedLinks[link.id] = link
124 | let connectedNodeId = link.source === node.id ? link.target : link.source
125 | let connectedNode = req.body.find(i => i.id === connectedNodeId)
126 | let childNode = {
127 | id: connectedNode.id,
128 | name: connectedNode.text,
129 | data: {
130 | $color: connectedNode.style ? connectedNode.style.backgroundColor || connectedNode.style.stickerBackgroundColor : 'red',
131 | small: connectedNode.style ? connectedNode.style.borderColor === "#0ca789" : false
132 | },
133 | children: []
134 | }
135 | addChildren(childNode)
136 | node.children.push(childNode)
137 | })
138 | }
139 | addChildren(spaceTreeData)
140 |
141 | res.sendStatus(200)
142 | })
143 |
144 | app.listen(process.env.PORT || 8088, function () {
145 | console.log('CORS-enabled web server listening on port ' + (process.env.PORT || 8088))
146 | })
147 |
--------------------------------------------------------------------------------