{"id":13554105,"url":"https://github.com/fibo/flow-view","last_synced_at":"2025-05-16T09:03:40.731Z","repository":{"id":23632280,"uuid":"27002039","full_name":"fibo/flow-view","owner":"fibo","description":"is a visual editor for Dataflow programming","archived":false,"fork":false,"pushed_at":"2025-01-23T03:32:38.000Z","size":13265,"stargazers_count":191,"open_issues_count":0,"forks_count":23,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-09T09:38:04.514Z","etag":null,"topics":["data-flow","dataflow-programming","nodejs","svg","visual-editor"],"latest_commit_sha":null,"homepage":"http://fibo.github.io/flow-view","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fibo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["fibo"],"patreon":"fibo"}},"created_at":"2014-11-22T14:55:34.000Z","updated_at":"2025-01-02T05:36:36.000Z","dependencies_parsed_at":"2024-02-18T21:25:06.599Z","dependency_job_id":"0a07e83f-d495-4f55-a6d6-72e220bf41bd","html_url":"https://github.com/fibo/flow-view","commit_stats":{"total_commits":1467,"total_committers":5,"mean_commits":293.4,"dds":"0.036809815950920255","last_synced_commit":"50812b12a3af059d33c5b34f08e55abe5c43e543"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Fflow-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Fflow-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Fflow-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Fflow-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fibo","download_url":"https://codeload.github.com/fibo/flow-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254306741,"owners_count":22048917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-flow","dataflow-programming","nodejs","svg","visual-editor"],"created_at":"2024-08-01T12:02:39.716Z","updated_at":"2025-05-16T09:03:40.708Z","avatar_url":"https://github.com/fibo.png","language":"JavaScript","readme":"# flow-view\n\n\u003e is a visual editor for [Dataflow programming][dataflow_wikipedia]\n\n\u003ca href=\"http://fibo.github.io/flow-view/\"\u003e\n\u003cdiv\u003eDemo\u003c/div\u003e\n\u003cimg width=\"517\" height=\"490\" src=\"screenshot.png\" alt=\"flow view Simpsons example\"\u003e\n\u003c/a\u003e\n\n## Installation\n\n### Using npm\n\nWith [npm](https://npmjs.org/) do\n\n```bash\nnpm install flow-view\n```\n\n### Using a CDN\n\nTry this in your HTML page\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { FlowView } from \"https://unpkg.com/flow-view\"\n\n  const flowView = new FlowView(document.body)\n\u003c/script\u003e\n```\n\n## Usage\n\n### GUI\n\nTry [demo here](http://fibo.github.io/flow-view/)\n\n\u003cul\u003e\n  \u003cli\u003eDrag on canvas to translate all items.\u003c/li\u003e\n  \u003cli\u003eClick on item to select it.\u003c/li\u003e\n  \u003cli\u003eClick while pressing \u003ckbd\u003eSHIFT\u003c/kbd\u003e to enable \u003cb\u003emulti\u003c/b\u003e selection.\u003c/li\u003e\n  \u003cli\u003eDrag selected items to translate them.\u003c/li\u003e\n  \u003cli\u003eDrag from a node output to a node input to create an edge.\u003c/li\u003e\n  \u003cli\u003ePress \u003ckbd\u003eBACKSPACE\u003c/kbd\u003e to delete selected items.\u003c/li\u003e\n  \u003cli\u003eDouble click on edge to delete it.\u003c/li\u003e\n  \u003cli\u003eDouble click on canvas to open the \u003cb\u003eselector\u003c/b\u003e.\u003c/li\u003e\n  \u003cli\u003eType into the selector then press \u003ckbd\u003eENTER\u003c/kbd\u003e to create a new node.\u003c/li\u003e\n\u003c/ul\u003e\n\n### Constructor\n\nCreate a `FlowView` instance and pass it a container. It will create a\n`flow-view` custom element and attach it to the _container_. Be aware that the\n`flow-view` custom element will fit the whole height of its container, so make\nsure to style properly to avoid a zero height container.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cscript type=\"module\"\u003e\n      import { FlowView } from \"https://unpkg.com/flow-view\"\n\n      const flowView = new FlowView(document.body)\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf some `flow-view` custom element is already in the page, it can be passed to\nthe `FlowView` constructor. argument.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cflow-view id=\"my-view\"\u003e\u003c/flow-view\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { FlowView } from \"https://unpkg.com/flow-view\"\n\n      const flowView = new FlowView(document.getElementById(\"my-view\"))\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Color schemes\n\nOptionally set _color scheme_. If not provided it defaults to both light and\ndark according to system preferences.\n\nLight scheme.\n\n```html\n\u003cflow-view light\u003e\u003c/flow-view\u003e\n```\n\nDark scheme.\n\n```html\n\u003cflow-view dark\u003e\u003c/flow-view\u003e\n```\n\nSee also\n[color schemes example](http://fibo.github.io/flow-view/examples/color-schemes/demo.html).\n\n### `addNodeDefinitions({ nodes?, types? })`\n\nAdd a list to define which nodes are available. It is not required but it makes\nsense to be provided in the majority of use cases.\n\n```javascript\nflowView.addNodeDefinitions({\n  nodes: [\n    { name: \"Marge\", type: \"parent\" },\n    { name: \"Homer\", type: \"parent\" },\n    { name: \"Bart\", type: \"child\" },\n    { name: \"Lisa\", type: \"child\" },\n    { name: \"Mr. Burns\" }\n  ],\n  types: {\n    parent: {\n      inputs: [],\n      outputs: [{ name: \"out\" }]\n    },\n    child: {\n      inputs: [{ name: \"in1\" }, { name: \"in2\" }],\n      outputs: []\n    }\n  }\n})\n```\n\n### `node(id)`\n\nGet _flow-view_ node by id.\n\n```javascript\nconst node = flowView.node(\"abc\")\n```\n\n### `edge(id)`\n\nGet _flow-view_ edge by id.\n\n```javascript\nconst edge = flowView.edge(\"abc\")\n```\n\n### `graph`\n\nAccess current _flow-view_ graph.\n\n```javascript\nconsole.log(flowView.graph)\n```\n\n### `loadGraph({ nodes = [], edges = [] })`\n\nLoad a _flow-view_ graph.\n\n```javascript\nflowView.loadGraph({\n  nodes: [\n    {\n      id: \"dad\",\n      text: \"Homer\",\n      x: 60,\n      y: 70,\n      outs: [{ id: \"children\" }]\n    },\n    {\n      id: \"mom\",\n      text: \"Marge\",\n      x: 160,\n      y: 70,\n      outs: [{ id: \"children\" }]\n    },\n    {\n      id: \"son\",\n      text: \"Bart\",\n      x: 60,\n      y: 240,\n      ins: [{ id: \"father\" }, { id: \"mother\" }]\n    },\n    {\n      id: \"daughter\",\n      text: \"Lisa\",\n      x: 220,\n      y: 220,\n      ins: [{ id: \"father\" }, { id: \"mother\" }]\n    }\n  ],\n  edges: [\n    { from: [\"dad\", \"children\"], to: [\"son\", \"father\"] },\n    { from: [\"dad\", \"children\"], to: [\"daughter\", \"father\"] },\n    { from: [\"mom\", \"children\"], to: [\"son\", \"mother\"] },\n    { from: [\"mom\", \"children\"], to: [\"daughter\", \"mother\"] }\n  ]\n})\n```\n\n### `clearGraph()`\n\nEmpty current graph.\n\n```javascript\nflowView.clearGraph()\n```\n\n### `destroy()`\n\nDelete `flow-view` custom element.\n\n```javascript\nflowView.destroy()\n```\n\nAn use case for `destroy()` is the following. Suppose you are using Next.js, you\nneed to load `flow-view` with an async import into a `useEffect` which needs to\nreturn a callback to be called when component is unmounted.\n\nThis is a sample code.\n\n```typescript\nimport type { FlowView } from \"flow-view\";\nimport { FC, useEffect, useRef } from \"react\";\n\nconst MyComponent: FC = () =\u003e {\n  const flowViewContainerRef = useRef\u003cHTMLDivElement | null\u003e(null);\n  const flowViewRef = useRef\u003cFlowView | null\u003e(null);\n\n  useEffect(() =\u003e {\n    let unmounted = false;\n\n    const importFlowView = async () =\u003e {\n      if (unmounted) return;\n      if (flowViewContainerRef.current === null) return;\n      if (flowViewRef.current !== null) return;\n\n      const { FlowView } = await import(\"flow-view\");\n\n      const flowView = new FlowView({\n        container: flowViewContainerRef.current,\n      });\n      flowViewRef.current = flowView;\n    };\n\n    importFlowView();\n\n    return () =\u003e {\n      unmounted = true;\n      if (flowViewRef.current !== null) flowViewRef.current.destroy();\n    };\n  }, [flowViewRef, flowViewContainerRef]);\n\n  return \u003cdiv ref={flowViewContainerRef}\u003e\u003c/div\u003e;\n};\n```\n\n### `newNode()` and `newEdge()`\n\nCreate nodes and edges programmatically. See\n[programmatic example here](http://fibo.github.io/flow-view/examples/programmatic/demo.html).\n\n```javascript\n// Create two nodes.\n\nconst node1 = flowView.newNode({\n  text: \"Hello\",\n  ins: [{}, {}],\n  outs: [{ id: \"output1\" }],\n  x: 100,\n  y: 100,\n  width: 80\n})\nconst node2 = flowView.newNode({\n  text: \"World\",\n  ins: [{ id: \"input1\" }],\n  width: 100,\n  x: 250,\n  y: 400\n})\n\n// Connect nodes with an edge.\nflowView.newEdge({\n  from: [node1.id, \"output1\"],\n  to: [node2.id, \"input1\"]\n})\n```\n\n### `deleteNode()` and `deleteEdge()`\n\nDelete nodes and edges programmatically. Notice that when a node is deleted, all\nits connected edges are deleted too.\n\n```javascript\nconst nodeId = \"abc\"\nconst edgeId = \"123\"\n\nflowView.deleteNode(nodeId)\nflowView.deleteEdge(edgeId)\n```\n\n### `addNodeClass(nodeType, NodeClass)`\n\nCan add custom node class. See\n[custom node example here](http://fibo.github.io/flow-view/examples/custom-node/demo.html).\n\n### `onChange(callback)`\n\nSet callback to be invoked on every view change. See\n[demo code here](https://github.com/fibo/flow-view/blob/main/index.html).\n\nCallback signature is `({ action, data }, info) =\u003e void`, where\n\n- **action** can be `CREATE_NODE`, `DELETE_NODE`, etc.\n- **data** change based on action\n- **info** can contain `{ isLoadGraph: true }` or other optional information.\n\n### `nodeTextToType(func)`\n\nSet a function that will be invoked on node creation to resolve node type from\nnode text.\n\n## License\n\n[MIT](http://fibo.github.io/mit-license)\n\n[dataflow_wikipedia]: https://en.wikipedia.org/wiki/Dataflow_programming \"Dataflow programming\"\n","funding_links":["https://github.com/sponsors/fibo","https://patreon.com/fibo"],"categories":["JavaScript","nodejs"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffibo%2Fflow-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffibo%2Fflow-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffibo%2Fflow-view/lists"}