diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/graph.js | 49 | ||||
| -rw-r--r-- | src/views/Detail.js | 4 |
2 files changed, 45 insertions, 8 deletions
diff --git a/src/graph.js b/src/graph.js index 640b42e..f7afe27 100644 --- a/src/graph.js +++ b/src/graph.js @@ -102,9 +102,50 @@ export default function buildGraph(db, handlers) { }) .onNodeClick(handlers.click); + const initialZoom = () => { + const distance = 20000; + let angle = 0; + graph.cameraPosition( + { + x: distance * Math.sin(angle), + z: distance * Math.cos(angle), + }, + { x: 0, y: 0, z: 0 }, + 0 + ); + setTimeout(() => zoomOut(1000)); + }; + + const zoomOut = (duration = 1000) => { + const distance = 415; + let angle = 0; + graph.cameraPosition( + { + x: distance * Math.sin(angle), + z: distance * Math.cos(angle), + }, + { x: 0, y: 0, z: 0 }, + duration + ); + }; + + const zoomIn = () => { + const distance = 200; + let angle = 0; + graph.cameraPosition( + { + x: distance * Math.sin(angle), + z: distance * Math.cos(angle), + }, + { x: 0, y: 0, z: 0 }, + 1000 + ); + }; + const handleSelect = (category) => { if (!category) { graph.graphData(data); + zoomOut(); return; } const { nodes, links } = data; @@ -128,17 +169,13 @@ export default function buildGraph(db, handlers) { }); console.log(selectedData); graph.graphData(selectedData); + zoomIn(); }; // graph.d3Force("charge").strength(-150); // camera orbit - const distance = 415; - let angle = 0; - graph.cameraPosition({ - x: distance * Math.sin(angle), - z: distance * Math.cos(angle), - }); + initialZoom(); return { onSelect: handleSelect, diff --git a/src/views/Detail.js b/src/views/Detail.js index 0a756c9..ec0f37c 100644 --- a/src/views/Detail.js +++ b/src/views/Detail.js @@ -38,8 +38,8 @@ export default function Detail({ node, visible, onClose }) { <div className="buttons close"> <img src="/assets/img/close.svg" onClick={onClose} /> </div> - {node.type === "video" ? ( - "video" + {data.type === "video" ? ( + "Video TBD" ) : ( <Gallery images={data.images} visible={visible} /> )} |