flow-view, 是数据流编程的可视化编辑器

分享于 

9分钟阅读

GitHub

  繁體 雙語
Visual editor for dataflow programming, powered by svg.js
  • 源代码名称:flow-view
  • 源代码网址:http://www.github.com/fibo/flow-view
  • flow-view源代码文档
  • flow-view源代码下载
  • Git URL:
    git://www.github.com/fibo/flow-view.git
    Git Clone代码到本地:
    git clone http://www.github.com/fibo/flow-view
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/fibo/flow-view
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    流视图

    是一个可视化编辑器,用于数据流编程,由响应( )。

    Description | 安装 Installation | | Examples |许可

    WhatchersStargazersForks

    NPM versionBuild StatusDependency StatusJavaScript Style GuideChange log

    映像 below 是一个由流视图 Canvas 生成的SVG服务器端: 点击它查看在线示例。

    sample view {:.responsive}

    以下动画gif代表家庭树。 由于 nodeList 选项参数,你可以使用自动补全。

    The Simpsons

    描述

    基于xml的流视图是一个可以重用的可视编辑器,你可以使用它向数据流项目提供 GUI。 我将它用于一个最小的数据流编程引擎: dflow

    实现了以下功能:

    • 使用可视界面创建节点和链接。
    • SVG服务器端呈现。
    • 自定义项:可以使用 React customized自定义节点。
    • 发出事件以实现与其他包的集成。

    让我们给 node.js 一个通用的可视化接口。 使用流视图 !

    欢迎任何反馈 !

    安装

    使用 npm

    请注意,流视图需要响应作为对等依赖项。 如果它们还没有安装,则使用 npm

    npm install react react-dom --save-dev

    你可能需要它作为开发依赖项来构建项目,因此你可能需要启动

    npm install flow-view --save-dev

    使用 CDN

    将这里内容添加到HTML页面

    <scriptsrc="https://unpkg.com/flow-view/dist/flow-view.min.js"></script>

    API

    new Canvas(opt?)

    流视图画布构造函数

    • 英镑 @param {Object} [opt] 是一系列选项
    • 收费的@param {Object} 英镑 [opt.node] 是自定义节点的集合
    • 英镑 @param {Object} 英镑为基本类组件
    • 英镑 @param {Array}[opt.nodeList] 是用于节点自动补全的字符串列表。
    • 收费为英镑的@param{Object} 查看 theme.js 源文件
    • 磅磅的@returns {Object}帆布

    假设你的容器是一个带 id drawing的div。 在HTML中,放置一个 div,你希望在其中挂载画布。

    <style>#drawing {display: inline-block;width: 100%;height: 100%; }</style>
    <divid="drawing"></div>

    创建一个空的画布,默认选项。

    constCanvas=require('flow-view').Canvas// Or use ES6 syntax: import { Canvas } from 'flow-view'constcanvas=newCanvas()

    请注意,除非你调用 canvas.load(view)canvas.mountOn(container) 方法,否则不会发生任何事情。

    canvas.load(view: FlowView): FlowViewCanvas

    加载视图,即节点和链接的集合。

    • @param{Object} 英镑 [view]
    • @param{Number} [view.height] defaults默认为容器高度
    • 英镑 @param {Number} 英镑 [view.width] 默认为容器宽度
    • @param{Object} 镑 view.link,请参见下面的链接规范
    • @param{Object} view.node,请参见下面的 node 规范。
    • 在服务器端上下文中调用 @param{Object} [callback]
    • @returns{Object} flowViewCanvas

    例如:

    constview= {
     nodes: [
     {
     id:'a',
     x:80,
     y:100,
     text:'Drag me',
     outs: [
     { name:'out1' },
     { name:'out2' },
     { name:'out3' }
     ]
     },
     {
     id:'b',
     x:180,
     y:200,
     text:'Click me',
     ins: [
     { name:'in0' },
     { name:'in1', type:'bool' }
     ],
     outs: [
     { name:'return' }
     ]
     }
     ],
     links: [
     {
     id:'c',
     from: ['a', 0],
     to: ['b', 1]
     }
     ]
    }canvas.load(view)

    canvas.mountOn(container: Element): void

    在DOM元素上挂载画布并呈现它的视图,这是节点和链接的集合。

    • @param{HTMLElement} 镑容器
    • @returns{void}

    例如:

    canvas.mountOn(document.getElementById('drawing'))

    canvas.resize({ width: number, height: number }): void

    canvas.toSVG(width: number, height: number, callback: func): void

    呈现到 SVG。可以用于服务器端渲染。

    请参见呈现/服务器端。js示例。

    事件

    以下事件由 canvas 发出:

    名称数据
    createInputPin{ 映射,位置,pin }
    createLink链接
    createNodenode
    createOutputPin{ 映射,位置,pin }
    deleteLink链接
    deleteNodenode
    deleteInputPin{ 映射,位置 }
    deleteOutputPin{ 映射,位置 }
    updateNodesGeometry[ nodes ]

    请参见事件/发射器。js示例。

    热键

    定义了几个 hotkyes。

    箭头 ↑ → ↓ ←翻译当前选定的节点,如果也按SHIFT键按像素进行平移。 ESC取消当前选择。键i 和o 分别创建当前选定 node的输入和输出引脚。 如果同时按下了SHIFT键,则删除销。

    node-规范

    node 描述一个元素并具有以下属性:

    • @paramNumber 左顶点x 坐标
    • @paramNumber 左顶点的y 轴坐标
    • 磅磅的@param String文本
    • 费用为英镑的@param 是输入引脚的列表
    • 英镑的@param Array | undefined 是输出引脚的一个列表
    • 收费为英镑/Number 英镑,缺省值取决于文本长度和引脚数。

    pin是具有 name 属性的对象,它必须是字符串。 输入引脚默认为 { name: in${position} } 输出引脚默认为 { name: out${position} } 如果未定义 ,则为 root。 如果没有定义,则 node 是一个叶子。

    链路规范

    链接描述元素之间的连接,并具有以下属性:

    • 从收取英镑 @param 英镑的价格正好有两个元素。
    • 从 [0] 收取英镑 @param 英镑是源 node的关键。
    • 从 [1] 收取英镑 @param Number是输出管脚位置
    • @param 英镑 elements elements
    • 向 [0] 收费英镑 @param 英镑,是目标 node的关键
    • @paramNumber 英镑为 [1] input是输入管脚位置

    示例

    试用联机示例。

    你还可以克隆这里 repo 并安装依赖项以在本地运行示例

    git clone https://github.com/fibo/flow-viewcd flow-view
    npm install

    每个例子都有它的homonym脚本,例如基本/用法。js示例是通过命令启动

    npm run example_basic_usage

    可用的示例包括:

    注意,示例用于开发,因此在开始时有一个开销。 例如:客户端示例使用热重载,并且是transpiled的,并且服务器端示例在启动之前启动;。

    许可证


    相关文章