model-navigator-standalone/es/components/ModelNavigator/DataDictionary/ReactFlowGraph/Canvas/force-app.js

Standalone MDF graph model visualizer

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/esnext.iterator.map.js";
import "core-js/modules/web.dom-collections.iterator.js";
import { forceSimulation, forceLink, forceManyBody, forceX, forceY } from 'd3-force';
import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import ReactFlow, { ReactFlowProvider, Panel, useNodesState, useEdgesState, useReactFlow, useStore } from 'reactflow';
import { initialNodes, initialEdges } from './nodes-edges.js';
import { collide } from './collide.js';
import 'reactflow/dist/style.css';
const simulation = forceSimulation().force('charge', forceManyBody().strength(-1000)).force('x', forceX().x(0).strength(0.05)).force('y', forceY().y(0).strength(0.05)).force('collide', collide()).alphaTarget(0.05).stop();
const useLayoutedElements = () => {
  const {
    getNodes,
    setNodes,
    getEdges,
    fitView
  } = useReactFlow();
  const initialised = useStore(store => [...store.nodeInternals.values()].every(node => node.width && node.height));
  return useMemo(() => {
    let nodes = getNodes().map(node => _objectSpread(_objectSpread({}, node), {}, {
      x: node.position.x,
      y: node.position.y
    }));
    let edges = getEdges().map(edge => edge);
    let running = false;

    // If React Flow hasn't initialised our nodes with a width and height yet, or
    // if there are no nodes in the flow, then we can't run the simulation!
    if (!initialised || nodes.length === 0) return [false, {}];
    simulation.nodes(nodes).force('link', forceLink(edges).id(d => d.id).strength(0.05).distance(100));

    // The tick function is called every animation frame while the simulation is
    // running and progresses the simulation one step forward each time.
    const tick = () => {
      getNodes().forEach((node, i) => {
        const dragging = Boolean(document.querySelector("[data-id=\"".concat(node.id, "\"].dragging")));

        // Setting the fx/fy properties of a node tells the simulation to "fix"
        // the node at that position and ignore any forces that would normally
        // cause it to move.
        nodes[i].fx = dragging ? node.position.x : null;
        nodes[i].fy = dragging ? node.position.y : null;
      });
      simulation.tick();
      setNodes(nodes.map(node => _objectSpread(_objectSpread({}, node), {}, {
        position: {
          x: node.x,
          y: node.y
        }
      })));
      window.requestAnimationFrame(() => {
        // Give React and React Flow a chance to update and render the new node
        // positions before we fit the viewport to the new layout.
        fitView();

        // If the simulation hasn't be stopped, schedule another tick.
        if (running) tick();
      });
    };
    const toggle = () => {
      running = !running;
      running && window.requestAnimationFrame(tick);
    };
    const isRunning = () => running;
    return [true, {
      toggle,
      isRunning
    }];
  }, [initialised]);
};
const LayoutFlow = () => {
  const [nodes,, onNodesChange] = useNodesState(initialNodes);
  const [edges,, onEdgesChange] = useEdgesState(initialEdges);
  const [initialised, {
    toggle,
    isRunning
  }] = useLayoutedElements();
  return /*#__PURE__*/React.createElement(ReactFlow, {
    nodes: nodes,
    edges: edges,
    onNodesChange: onNodesChange,
    onEdgesChange: onEdgesChange
  }, /*#__PURE__*/React.createElement(Panel, null, initialised && /*#__PURE__*/React.createElement("button", {
    onClick: toggle
  }, isRunning() ? 'Stop' : 'Start', " force simulation")));
};
export default function () {
  return /*#__PURE__*/React.createElement(ReactFlowProvider, null, /*#__PURE__*/React.createElement(LayoutFlow, null));
}