3d-force-graph.module.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. import { AmbientLight, DirectionalLight, Vector3 } from 'three';
  2. import { DragControls } from 'three/examples/jsm/controls/DragControls.js';
  3. import ThreeForceGraph from 'three-forcegraph';
  4. import ThreeRenderObjects from 'three-render-objects';
  5. import accessorFn from 'accessor-fn';
  6. import Kapsule from 'kapsule';
  7. function styleInject(css, ref) {
  8. if (ref === void 0) ref = {};
  9. var insertAt = ref.insertAt;
  10. if (!css || typeof document === 'undefined') {
  11. return;
  12. }
  13. var head = document.head || document.getElementsByTagName('head')[0];
  14. var style = document.createElement('style');
  15. style.type = 'text/css';
  16. if (insertAt === 'top') {
  17. if (head.firstChild) {
  18. head.insertBefore(style, head.firstChild);
  19. } else {
  20. head.appendChild(style);
  21. }
  22. } else {
  23. head.appendChild(style);
  24. }
  25. if (style.styleSheet) {
  26. style.styleSheet.cssText = css;
  27. } else {
  28. style.appendChild(document.createTextNode(css));
  29. }
  30. }
  31. var css_248z = ".graph-info-msg {\n top: 50%;\n width: 100%;\n text-align: center;\n color: lavender;\n opacity: 0.7;\n font-size: 22px;\n position: absolute;\n font-family: Sans-serif;\n}\n\n.scene-container .clickable {\n cursor: pointer;\n}\n\n.scene-container .grabbable {\n cursor: move;\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n\n.scene-container .grabbable:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}";
  32. styleInject(css_248z);
  33. function ownKeys(object, enumerableOnly) {
  34. var keys = Object.keys(object);
  35. if (Object.getOwnPropertySymbols) {
  36. var symbols = Object.getOwnPropertySymbols(object);
  37. if (enumerableOnly) {
  38. symbols = symbols.filter(function (sym) {
  39. return Object.getOwnPropertyDescriptor(object, sym).enumerable;
  40. });
  41. }
  42. keys.push.apply(keys, symbols);
  43. }
  44. return keys;
  45. }
  46. function _objectSpread2(target) {
  47. for (var i = 1; i < arguments.length; i++) {
  48. var source = arguments[i] != null ? arguments[i] : {};
  49. if (i % 2) {
  50. ownKeys(Object(source), true).forEach(function (key) {
  51. _defineProperty(target, key, source[key]);
  52. });
  53. } else if (Object.getOwnPropertyDescriptors) {
  54. Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
  55. } else {
  56. ownKeys(Object(source)).forEach(function (key) {
  57. Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
  58. });
  59. }
  60. }
  61. return target;
  62. }
  63. function _defineProperty(obj, key, value) {
  64. if (key in obj) {
  65. Object.defineProperty(obj, key, {
  66. value: value,
  67. enumerable: true,
  68. configurable: true,
  69. writable: true
  70. });
  71. } else {
  72. obj[key] = value;
  73. }
  74. return obj;
  75. }
  76. function _toConsumableArray(arr) {
  77. return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  78. }
  79. function _arrayWithoutHoles(arr) {
  80. if (Array.isArray(arr)) return _arrayLikeToArray(arr);
  81. }
  82. function _iterableToArray(iter) {
  83. if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
  84. }
  85. function _unsupportedIterableToArray(o, minLen) {
  86. if (!o) return;
  87. if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  88. var n = Object.prototype.toString.call(o).slice(8, -1);
  89. if (n === "Object" && o.constructor) n = o.constructor.name;
  90. if (n === "Map" || n === "Set") return Array.from(o);
  91. if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  92. }
  93. function _arrayLikeToArray(arr, len) {
  94. if (len == null || len > arr.length) len = arr.length;
  95. for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  96. return arr2;
  97. }
  98. function _nonIterableSpread() {
  99. throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  100. }
  101. function linkKapsule (kapsulePropName, kapsuleType) {
  102. var dummyK = new kapsuleType(); // To extract defaults
  103. return {
  104. linkProp: function linkProp(prop) {
  105. // link property config
  106. return {
  107. "default": dummyK[prop](),
  108. onChange: function onChange(v, state) {
  109. state[kapsulePropName][prop](v);
  110. },
  111. triggerUpdate: false
  112. };
  113. },
  114. linkMethod: function linkMethod(method) {
  115. // link method pass-through
  116. return function (state) {
  117. var kapsuleInstance = state[kapsulePropName];
  118. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  119. args[_key - 1] = arguments[_key];
  120. }
  121. var returnVal = kapsuleInstance[method].apply(kapsuleInstance, args);
  122. return returnVal === kapsuleInstance ? this // chain based on the parent object, not the inner kapsule
  123. : returnVal;
  124. };
  125. }
  126. };
  127. }
  128. var three = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
  129. : {
  130. AmbientLight: AmbientLight,
  131. DirectionalLight: DirectionalLight,
  132. Vector3: Vector3
  133. };
  134. var CAMERA_DISTANCE2NODES_FACTOR = 170; //
  135. // Expose config from forceGraph
  136. var bindFG = linkKapsule('forceGraph', ThreeForceGraph);
  137. var linkedFGProps = Object.assign.apply(Object, _toConsumableArray(['jsonUrl', 'graphData', 'numDimensions', 'dagMode', 'dagLevelDistance', 'dagNodeFilter', 'onDagError', 'nodeRelSize', 'nodeId', 'nodeVal', 'nodeResolution', 'nodeColor', 'nodeAutoColorBy', 'nodeOpacity', 'nodeVisibility', 'nodeThreeObject', 'nodeThreeObjectExtend', 'linkSource', 'linkTarget', 'linkVisibility', 'linkColor', 'linkAutoColorBy', 'linkOpacity', 'linkWidth', 'linkResolution', 'linkCurvature', 'linkCurveRotation', 'linkMaterial', 'linkThreeObject', 'linkThreeObjectExtend', 'linkPositionUpdate', 'linkDirectionalArrowLength', 'linkDirectionalArrowColor', 'linkDirectionalArrowRelPos', 'linkDirectionalArrowResolution', 'linkDirectionalParticles', 'linkDirectionalParticleSpeed', 'linkDirectionalParticleWidth', 'linkDirectionalParticleColor', 'linkDirectionalParticleResolution', 'forceEngine', 'd3AlphaDecay', 'd3VelocityDecay', 'd3AlphaMin', 'ngraphPhysics', 'warmupTicks', 'cooldownTicks', 'cooldownTime', 'onEngineTick', 'onEngineStop'].map(function (p) {
  138. return _defineProperty({}, p, bindFG.linkProp(p));
  139. })));
  140. var linkedFGMethods = Object.assign.apply(Object, _toConsumableArray(['refresh', 'getGraphBbox', 'd3Force', 'd3ReheatSimulation', 'emitParticle'].map(function (p) {
  141. return _defineProperty({}, p, bindFG.linkMethod(p));
  142. }))); // Expose config from renderObjs
  143. var bindRenderObjs = linkKapsule('renderObjs', ThreeRenderObjects);
  144. var linkedRenderObjsProps = Object.assign.apply(Object, _toConsumableArray(['width', 'height', 'backgroundColor', 'showNavInfo', 'enablePointerInteraction'].map(function (p) {
  145. return _defineProperty({}, p, bindRenderObjs.linkProp(p));
  146. })));
  147. var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['cameraPosition', 'postProcessingComposer'].map(function (p) {
  148. return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
  149. })).concat([{
  150. graph2ScreenCoords: bindRenderObjs.linkMethod('getScreenCoords'),
  151. screen2GraphCoords: bindRenderObjs.linkMethod('getSceneCoords')
  152. }])); //
  153. var _3dForceGraph = Kapsule({
  154. props: _objectSpread2(_objectSpread2({
  155. nodeLabel: {
  156. "default": 'name',
  157. triggerUpdate: false
  158. },
  159. linkLabel: {
  160. "default": 'name',
  161. triggerUpdate: false
  162. },
  163. linkHoverPrecision: {
  164. "default": 1,
  165. onChange: function onChange(p, state) {
  166. return state.renderObjs.lineHoverPrecision(p);
  167. },
  168. triggerUpdate: false
  169. },
  170. enableNavigationControls: {
  171. "default": true,
  172. onChange: function onChange(enable, state) {
  173. var controls = state.renderObjs.controls();
  174. if (controls) {
  175. controls.enabled = enable;
  176. }
  177. },
  178. triggerUpdate: false
  179. },
  180. enableNodeDrag: {
  181. "default": true,
  182. triggerUpdate: false
  183. },
  184. onNodeDrag: {
  185. "default": function _default() {},
  186. triggerUpdate: false
  187. },
  188. onNodeDragEnd: {
  189. "default": function _default() {},
  190. triggerUpdate: false
  191. },
  192. onNodeClick: {
  193. triggerUpdate: false
  194. },
  195. onNodeRightClick: {
  196. triggerUpdate: false
  197. },
  198. onNodeHover: {
  199. triggerUpdate: false
  200. },
  201. onLinkClick: {
  202. triggerUpdate: false
  203. },
  204. onLinkRightClick: {
  205. triggerUpdate: false
  206. },
  207. onLinkHover: {
  208. triggerUpdate: false
  209. },
  210. onBackgroundClick: {
  211. triggerUpdate: false
  212. },
  213. onBackgroundRightClick: {
  214. triggerUpdate: false
  215. }
  216. }, linkedFGProps), linkedRenderObjsProps),
  217. methods: _objectSpread2(_objectSpread2({
  218. zoomToFit: function zoomToFit(state, transitionDuration, padding) {
  219. var _state$forceGraph;
  220. for (var _len = arguments.length, bboxArgs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
  221. bboxArgs[_key - 3] = arguments[_key];
  222. }
  223. state.renderObjs.fitToBbox((_state$forceGraph = state.forceGraph).getGraphBbox.apply(_state$forceGraph, bboxArgs), transitionDuration, padding);
  224. return this;
  225. },
  226. pauseAnimation: function pauseAnimation(state) {
  227. if (state.animationFrameRequestId !== null) {
  228. cancelAnimationFrame(state.animationFrameRequestId);
  229. state.animationFrameRequestId = null;
  230. }
  231. return this;
  232. },
  233. resumeAnimation: function resumeAnimation(state) {
  234. if (state.animationFrameRequestId === null) {
  235. this._animationCycle();
  236. }
  237. return this;
  238. },
  239. _animationCycle: function _animationCycle(state) {
  240. if (state.enablePointerInteraction) {
  241. // reset canvas cursor (override dragControls cursor)
  242. this.renderer().domElement.style.cursor = null;
  243. } // Frame cycle
  244. state.forceGraph.tickFrame();
  245. state.renderObjs.tick();
  246. state.animationFrameRequestId = requestAnimationFrame(this._animationCycle);
  247. },
  248. scene: function scene(state) {
  249. return state.renderObjs.scene();
  250. },
  251. // Expose scene
  252. camera: function camera(state) {
  253. return state.renderObjs.camera();
  254. },
  255. // Expose camera
  256. renderer: function renderer(state) {
  257. return state.renderObjs.renderer();
  258. },
  259. // Expose renderer
  260. controls: function controls(state) {
  261. return state.renderObjs.controls();
  262. },
  263. // Expose controls
  264. tbControls: function tbControls(state) {
  265. return state.renderObjs.tbControls();
  266. },
  267. // To be deprecated
  268. _destructor: function _destructor() {
  269. this.pauseAnimation();
  270. this.graphData({
  271. nodes: [],
  272. links: []
  273. });
  274. }
  275. }, linkedFGMethods), linkedRenderObjsMethods),
  276. stateInit: function stateInit(_ref5) {
  277. var controlType = _ref5.controlType,
  278. rendererConfig = _ref5.rendererConfig,
  279. extraRenderers = _ref5.extraRenderers;
  280. return {
  281. forceGraph: new ThreeForceGraph(),
  282. renderObjs: ThreeRenderObjects({
  283. controlType: controlType,
  284. rendererConfig: rendererConfig,
  285. extraRenderers: extraRenderers
  286. })
  287. };
  288. },
  289. init: function init(domNode, state) {
  290. // Wipe DOM
  291. domNode.innerHTML = ''; // Add relative container
  292. domNode.appendChild(state.container = document.createElement('div'));
  293. state.container.style.position = 'relative'; // Add renderObjs
  294. var roDomNode = document.createElement('div');
  295. state.container.appendChild(roDomNode);
  296. state.renderObjs(roDomNode);
  297. var camera = state.renderObjs.camera();
  298. var renderer = state.renderObjs.renderer();
  299. var controls = state.renderObjs.controls();
  300. controls.enabled = !!state.enableNavigationControls;
  301. state.lastSetCameraZ = camera.position.z; // Add info space
  302. var infoElem;
  303. state.container.appendChild(infoElem = document.createElement('div'));
  304. infoElem.className = 'graph-info-msg';
  305. infoElem.textContent = ''; // config forcegraph
  306. state.forceGraph.onLoading(function () {
  307. infoElem.textContent = 'Loading...';
  308. }).onFinishLoading(function () {
  309. infoElem.textContent = '';
  310. }).onUpdate(function () {
  311. // sync graph data structures
  312. state.graphData = state.forceGraph.graphData(); // re-aim camera, if still in default position (not user modified)
  313. if (camera.position.x === 0 && camera.position.y === 0 && camera.position.z === state.lastSetCameraZ && state.graphData.nodes.length) {
  314. camera.lookAt(state.forceGraph.position);
  315. state.lastSetCameraZ = camera.position.z = Math.cbrt(state.graphData.nodes.length) * CAMERA_DISTANCE2NODES_FACTOR;
  316. }
  317. }).onFinishUpdate(function () {
  318. // Setup node drag interaction
  319. if (state._dragControls) {
  320. var curNodeDrag = state.graphData.nodes.find(function (node) {
  321. return node.__initialFixedPos && !node.__disposeControlsAfterDrag;
  322. }); // detect if there's a node being dragged using the existing drag controls
  323. if (curNodeDrag) {
  324. curNodeDrag.__disposeControlsAfterDrag = true; // postpone previous controls disposal until drag ends
  325. } else {
  326. state._dragControls.dispose(); // cancel previous drag controls
  327. }
  328. state._dragControls = undefined;
  329. }
  330. if (state.enableNodeDrag && state.enablePointerInteraction && state.forceEngine === 'd3') {
  331. // Can't access node positions programatically in ngraph
  332. var dragControls = state._dragControls = new DragControls(state.graphData.nodes.map(function (node) {
  333. return node.__threeObj;
  334. }).filter(function (obj) {
  335. return obj;
  336. }), camera, renderer.domElement);
  337. dragControls.addEventListener('dragstart', function (event) {
  338. controls.enabled = false; // Disable controls while dragging
  339. // track drag object movement
  340. event.object.__initialPos = event.object.position.clone();
  341. event.object.__prevPos = event.object.position.clone();
  342. var node = getGraphObj(event.object).__data;
  343. !node.__initialFixedPos && (node.__initialFixedPos = {
  344. fx: node.fx,
  345. fy: node.fy,
  346. fz: node.fz
  347. });
  348. !node.__initialPos && (node.__initialPos = {
  349. x: node.x,
  350. y: node.y,
  351. z: node.z
  352. }); // lock node
  353. ['x', 'y', 'z'].forEach(function (c) {
  354. return node["f".concat(c)] = node[c];
  355. }); // drag cursor
  356. renderer.domElement.classList.add('grabbable');
  357. });
  358. dragControls.addEventListener('drag', function (event) {
  359. var nodeObj = getGraphObj(event.object);
  360. if (!event.object.hasOwnProperty('__graphObjType')) {
  361. // If dragging a child of the node, update the node object instead
  362. var initPos = event.object.__initialPos;
  363. var prevPos = event.object.__prevPos;
  364. var _newPos = event.object.position;
  365. nodeObj.position.add(_newPos.clone().sub(prevPos)); // translate node object by the motion delta
  366. prevPos.copy(_newPos);
  367. _newPos.copy(initPos); // reset child back to its initial position
  368. }
  369. var node = nodeObj.__data;
  370. var newPos = nodeObj.position;
  371. var translate = {
  372. x: newPos.x - node.x,
  373. y: newPos.y - node.y,
  374. z: newPos.z - node.z
  375. }; // Move fx/fy/fz (and x/y/z) of nodes based on object new position
  376. ['x', 'y', 'z'].forEach(function (c) {
  377. return node["f".concat(c)] = node[c] = newPos[c];
  378. });
  379. state.forceGraph.d3AlphaTarget(0.3) // keep engine running at low intensity throughout drag
  380. .resetCountdown(); // prevent freeze while dragging
  381. node.__dragged = true;
  382. state.onNodeDrag(node, translate);
  383. });
  384. dragControls.addEventListener('dragend', function (event) {
  385. delete event.object.__initialPos; // remove tracking attributes
  386. delete event.object.__prevPos;
  387. var node = getGraphObj(event.object).__data; // dispose previous controls if needed
  388. if (node.__disposeControlsAfterDrag) {
  389. dragControls.dispose();
  390. delete node.__disposeControlsAfterDrag;
  391. }
  392. var initFixedPos = node.__initialFixedPos;
  393. var initPos = node.__initialPos;
  394. var translate = {
  395. x: initPos.x - node.x,
  396. y: initPos.y - node.y,
  397. z: initPos.z - node.z
  398. };
  399. if (initFixedPos) {
  400. ['x', 'y', 'z'].forEach(function (c) {
  401. var fc = "f".concat(c);
  402. if (initFixedPos[fc] === undefined) {
  403. delete node[fc];
  404. }
  405. });
  406. delete node.__initialFixedPos;
  407. delete node.__initialPos;
  408. if (node.__dragged) {
  409. delete node.__dragged;
  410. state.onNodeDragEnd(node, translate);
  411. }
  412. }
  413. state.forceGraph.d3AlphaTarget(0) // release engine low intensity
  414. .resetCountdown(); // let the engine readjust after releasing fixed nodes
  415. if (state.enableNavigationControls) {
  416. controls.enabled = true; // Re-enable controls
  417. controls.domElement && controls.domElement.ownerDocument && controls.domElement.ownerDocument.dispatchEvent( // simulate mouseup to ensure the controls don't take over after dragend
  418. new PointerEvent('pointerup', {
  419. pointerType: 'touch'
  420. }));
  421. } // clear cursor
  422. renderer.domElement.classList.remove('grabbable');
  423. });
  424. }
  425. }); // config renderObjs
  426. state.renderObjs.objects([// Populate scene
  427. new three.AmbientLight(0xbbbbbb), new three.DirectionalLight(0xffffff, 0.6), state.forceGraph]).hoverOrderComparator(function (a, b) {
  428. // Prioritize graph objects
  429. var aObj = getGraphObj(a);
  430. if (!aObj) return 1;
  431. var bObj = getGraphObj(b);
  432. if (!bObj) return -1; // Prioritize nodes over links
  433. var isNode = function isNode(o) {
  434. return o.__graphObjType === 'node';
  435. };
  436. return isNode(bObj) - isNode(aObj);
  437. }).tooltipContent(function (obj) {
  438. var graphObj = getGraphObj(obj);
  439. return graphObj ? accessorFn(state["".concat(graphObj.__graphObjType, "Label")])(graphObj.__data) || '' : '';
  440. }).hoverDuringDrag(false).onHover(function (obj) {
  441. // Update tooltip and trigger onHover events
  442. var hoverObj = getGraphObj(obj);
  443. if (hoverObj !== state.hoverObj) {
  444. var prevObjType = state.hoverObj ? state.hoverObj.__graphObjType : null;
  445. var prevObjData = state.hoverObj ? state.hoverObj.__data : null;
  446. var objType = hoverObj ? hoverObj.__graphObjType : null;
  447. var objData = hoverObj ? hoverObj.__data : null;
  448. if (prevObjType && prevObjType !== objType) {
  449. // Hover out
  450. var fn = state["on".concat(prevObjType === 'node' ? 'Node' : 'Link', "Hover")];
  451. fn && fn(null, prevObjData);
  452. }
  453. if (objType) {
  454. // Hover in
  455. var _fn = state["on".concat(objType === 'node' ? 'Node' : 'Link', "Hover")];
  456. _fn && _fn(objData, prevObjType === objType ? prevObjData : null);
  457. } // set pointer if hovered object is clickable
  458. renderer.domElement.classList[hoverObj && state["on".concat(objType === 'node' ? 'Node' : 'Link', "Click")] || !hoverObj && state.onBackgroundClick ? 'add' : 'remove']('clickable');
  459. state.hoverObj = hoverObj;
  460. }
  461. }).clickAfterDrag(false).onClick(function (obj, ev) {
  462. var graphObj = getGraphObj(obj);
  463. if (graphObj) {
  464. var fn = state["on".concat(graphObj.__graphObjType === 'node' ? 'Node' : 'Link', "Click")];
  465. fn && fn(graphObj.__data, ev);
  466. } else {
  467. state.onBackgroundClick && state.onBackgroundClick(ev);
  468. }
  469. }).onRightClick(function (obj, ev) {
  470. // Handle right-click events
  471. var graphObj = getGraphObj(obj);
  472. if (graphObj) {
  473. var fn = state["on".concat(graphObj.__graphObjType === 'node' ? 'Node' : 'Link', "RightClick")];
  474. fn && fn(graphObj.__data, ev);
  475. } else {
  476. state.onBackgroundRightClick && state.onBackgroundRightClick(ev);
  477. }
  478. }); //
  479. // Kick-off renderer
  480. this._animationCycle();
  481. }
  482. }); //
  483. function getGraphObj(object) {
  484. var obj = object; // recurse up object chain until finding the graph object
  485. while (obj && !obj.hasOwnProperty('__graphObjType')) {
  486. obj = obj.parent;
  487. }
  488. return obj;
  489. }
  490. export default _3dForceGraph;