diff --git a/app/assets/html/bzGraflow/nodesTest2.html b/app/assets/html/bzGraflow/nodesTest2.html new file mode 100644 index 0000000..912b37a --- /dev/null +++ b/app/assets/html/bzGraflow/nodesTest2.html @@ -0,0 +1,172 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/html/test.html b/app/assets/html/test.html index 715c27d..342d069 100644 --- a/app/assets/html/test.html +++ b/app/assets/html/test.html @@ -1,17 +1,38 @@ - three.js webgl - FBX loader + graflow - + + + + + diff --git a/app/assets/json/bzGraflow/testFlow1.json b/app/assets/json/bzGraflow/testFlow1.json index 998f1a3..8c8968b 100644 --- a/app/assets/json/bzGraflow/testFlow1.json +++ b/app/assets/json/bzGraflow/testFlow1.json @@ -10,14 +10,14 @@ "id": "aze2", "coords": { "x": 220, "y": 10} }, - { "nodeType": "factor", - "id": "qsd2", - "coords": { "x": 470, "y": 170} - }, { "nodeType": "factor", "id": "qsd", + "coords": { "x": 470, "y": 170} + }, + { "nodeType": "factor", + "id": "qsd2", "coords": { "x": 470, "y": 50} - }, + }, { "nodeType": "wadder", "id": "wcx", "coords": { "x": 720, "y": 50} @@ -39,10 +39,10 @@ { "from": ["0000", "out1"], "to": ["aze", "inp1"] }, { "from": ["aze2", "out1"], "to": ["qsd2", "inp1"] }, { "from": ["aze", "out1"], "to": ["qsd", "inp1"] }, + { "from": ["qsd2", "out1"], "to": ["ert", "inp2"] }, { "from": ["0000", "out1"], "to": ["aze2", "inp1"] }, { "from": ["qsd2", "out1"], "to": ["wcx", "inp2"] }, { "from": ["wcx", "out1"], "to": ["ert", "inp1"] }, - { "from": ["qsd2", "out1"], "to": ["ert", "inp2"] }, { "from": ["qsd", "out1"], "to": ["wcx", "inp1"] }, { "from": ["ert", "out1"], "to": ["9999", "inp1"] } ] diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css index 4b999ed..4076af6 100644 --- a/app/thirdparty/buildoz/buildoz.css +++ b/app/thirdparty/buildoz/buildoz.css @@ -188,10 +188,17 @@ bz-slidepane[side="right"] div.handle { cursor: ew-resize; } bz-graflow { - position: relative; - display: block; - width: 100vw; - height: 100vh; + position: relative; + display: block; + width: 100vw; + height: 50vh; + box-sizing: border-box; +} +bz-graflow .bzgf-main-container{ + width: 100%; + height: 100%; + position: relative; + box-sizing: border-box; } bz-graflow .bzgf-wires-container, bz-graflow .bzgf-nodes-container{ diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js index 55d8ea3..a4aaada 100644 --- a/app/thirdparty/buildoz/bzGraflow.js +++ b/app/thirdparty/buildoz/bzGraflow.js @@ -15,13 +15,17 @@ class BZgraflow extends Buildoz{ console.warn('BZgraflow: No flow URL !?') return } - this.loadFlow(flowUrl) // Let it load async while we coat + this.loadFlow(flowUrl) // Let it load async while we coat + this.mainContainer = document.createElement('div') + this.mainContainer.classList.add('bzgf-main-container') this.nodesContainer = document.createElement('div') this.nodesContainer.classList.add('bzgf-nodes-container') this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') + this.wiresContainer.setAttribute('overflow','visible') this.wiresContainer.classList.add('bzgf-wires-container') - this.append(this.wiresContainer) - this.append(this.nodesContainer) + this.mainContainer.append(this.wiresContainer) + this.mainContainer.append(this.nodesContainer) + this.append(this.mainContainer) } async loadFlow(url){ @@ -114,16 +118,17 @@ class BZgraflow extends Buildoz{ e: { x: 1, y: 0 }, w: { x: -1, y: 0 }, } + const svgRect = this.wiresContainer.getBoundingClientRect() const node1 = this.stagedNodes[idNode1] const port1 = node1.ports[idPort1] const node2 = this.stagedNodes[idNode2] const port2 = node2.ports[idPort2] const bb1 = port1.el.getBoundingClientRect() const bb2 = port2.el.getBoundingClientRect() - const x1 = Math.floor(bb1.x + (bb1.width/2)) - const y1 = Math.floor(bb1.y + (bb1.height/2)) - const x2 = Math.floor(bb2.x + (bb2.width/2)) - const y2 = Math.floor(bb2.y + (bb2.height/2)) + const x1 = Math.floor(bb1.x + (bb1.width/2)) - svgRect.left + const y1 = Math.floor(bb1.y + (bb1.height/2)) - svgRect.top + const x2 = Math.floor(bb2.x + (bb2.width/2)) - svgRect.left + const y2 = Math.floor(bb2.y + (bb2.height/2)) - svgRect.top const dist = Math.abs(x2 - x1) + Math.abs(y2 - y1) let tension = dist * 0.4 if(tension < tensionMin) tension = tensionMin @@ -137,11 +142,8 @@ class BZgraflow extends Buildoz{ } autoPlace(orientation = 'horizontal', gapx = 80, gapy = 30){ - if(!['horizontal', 'vertical'].includes(orientation)) return - const parents = {} const adj = {} - this.flow.nodes.forEach(n => { parents[n.id] = [] adj[n.id] = [] @@ -155,33 +157,51 @@ class BZgraflow extends Buildoz{ }) const layers = this.computeLayers(this.flow.nodes, parents) - let maxHeight = 0 - const layerHeights = [] + let maxHeight = 0; let maxWidth = 0 + const layerHeights = []; const layerWidths = []; const indexes = {} // Todo: a for(const layer of layers){ - let totHeight = 0 + let totHeight = 0; let totWidth = 0 for(const [idx, nid] of layer.entries()){ const bb = this.stagedNodes[nid].getBoundingClientRect() - totHeight += bb.height+gapy + totHeight += bb.height + gapy + totWidth += bb.width + gapx indexes[nid] = idx } if(totHeight>maxHeight) maxHeight = totHeight layerHeights.push(totHeight) + if(totWidth>maxWidth) maxWidth = totWidth + layerWidths.push(totWidth) } this.reorderLayers(layers, parents, indexes) - let x = gapx - for(const [idx, layer] of layers.entries()){ - let wMax = 0 - let y = ((maxHeight - layerHeights[idx]) / 2) + gapy - for(const nid of layer){ - const bb = this.stagedNodes[nid].getBoundingClientRect() - wMax = (bb.width > wMax) ? bb.width : wMax - this.moveNode(nid, x, y, 1000) - y += gapy + bb.height + if(orientation=='horizontal'){ + let x = gapx + for(const [idx, layer] of layers.entries()){ + let wMax = 0 + let y = ((maxHeight - layerHeights[idx]) / 2) + gapy + for(const nid of layer){ + const bb = this.stagedNodes[nid].getBoundingClientRect() + wMax = (bb.width > wMax) ? bb.width : wMax + this.moveNode(nid, x, y, 1000) + y += gapy + bb.height + } + x += wMax + gapx } - x += wMax + gapx + } else if(orientation=='vertical'){ + let y = gapy + for(const [idx, layer] of layers.entries()){ + let hMax = 0 + let x = ((maxWidth - layerWidths[idx]) / 2) + gapx + for(const nid of layer){ + const bb = this.stagedNodes[nid].getBoundingClientRect() + hMax = (bb.height > hMax) ? bb.width : hMax + this.moveNode(nid, x, y, 1000) + x += gapx + bb.width + } + y += hMax + gapy + } } }