{"id":18722030,"url":"https://github.com/realign/flow-editor","last_synced_at":"2025-07-21T21:37:24.490Z","repository":{"id":124607708,"uuid":"155039596","full_name":"ReAlign/flow-editor","owner":"ReAlign","description":"✏️ A flow editor based on canvas and native javascript.","archived":false,"fork":false,"pushed_at":"2022-04-03T17:30:24.000Z","size":35,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-19T15:56:17.953Z","etag":null,"topics":["canvas","editor","javascript"],"latest_commit_sha":null,"homepage":"https://codepen.io/realign/full/EGxyzZ","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ReAlign.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}},"created_at":"2018-10-28T05:46:55.000Z","updated_at":"2022-04-03T17:31:00.000Z","dependencies_parsed_at":"2023-06-08T13:15:27.615Z","dependency_job_id":null,"html_url":"https://github.com/ReAlign/flow-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ReAlign/flow-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReAlign%2Fflow-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReAlign%2Fflow-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReAlign%2Fflow-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReAlign%2Fflow-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReAlign","download_url":"https://codeload.github.com/ReAlign/flow-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReAlign%2Fflow-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266384491,"owners_count":23921057,"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","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["canvas","editor","javascript"],"created_at":"2024-11-07T13:39:33.650Z","updated_at":"2025-07-21T21:37:24.471Z","avatar_url":"https://github.com/ReAlign.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# flow-editor api\n\n## DEMO\n\n![png](https://gw.alicdn.com/imgextra/i1/O1CN01E5Em8h1EkCohw1CRZ_!!6000000000389-2-tps-3074-1540.png)\n\n* [online-demo](https://codepen.io/realign/full/EGxyzZ)\n\n## 功能说明\n\n* 待补充\n\n## Usage\n\n```javascript\n// umd\nimport { FlowEditor } from 'flow-editor.min';\n// esm\nimport FlowEditor from 'flow-editor.esm.min';\n// browser\n\u003cscript type=\"text/javascript\" src=\"flow-editor.min.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\n### 实例化\n\n```javascript\nconst flowEditor = new FlowEditor();\n```\n\n### 创建\n\n```javascript\nflowEditor.create(conf);\n\nconf = {\n    el: '#app',         // dom 节点\n    data,               // 流程数据，见数据说明\n    options,            // 流程配置，见数据说明\n}\n\nel          | String   | ''         | inject 节点\ndata        | Object   | {}         | 流程数据\noptions     | Object   | auto       | 内置流程配置\n```\n\n### 更新\n\n```javascript\nflowEditor.update(data);\n\ndata        | Object   | {}         | 流程数据\n```\n\n### 设置默认选中\n\n```javascript\nflowEditor.setSelected(path);\n\npath        | String   | ''         | 节点路径\n\n* 注：节点路径，就是相对于根节点的路径，如：\n    * `children[0]`\n    * `children[1].children[0]`\n    * `children[0].children[1].children[2]`\n```\n\n### 缩放\n\n\u003e 触发太频繁会出现重影（堆叠），最好是调用间隔控制一下\n\n\u003e 已知问题，待修复\n\n```javascript\nflowEditor.scale(ratio);\n\nratio       | Number   | 1         | 缩放比例\n```\n\n### 生成图片\n\n```javascript\nflowEditor.getImage(opts);\n\nwithBg      | boolean   | true      | 是否带背景\ntype        | string    | 'png'     | 图片类型\nbase64      | boolean   | true      | 是否base64\n\n@return     | Promise   | then(img) | Promise\n```\n\n### 查找\n\n```javascript\nflowEditor.find(data, nodePath, defVal);\n\ndata        // 流程数据\nnodePath    // 选中操作中返回的 targetPath\ndefVal      // 默认值\n\n@return     data 中的引用数据，用来更新编辑\n```\n\n### 选中节点\n\n```javascript\nflowEditor.selectedFENodes      // array\n\n{\n    target,                     // 节点\n    targetPath,                 // 节点路径\n    targetAttach,               // 节点相关信息\n}\n```\n\n### 数据说明\n\n#### 流程数据\n\n```javascript\ndata = {\n    text: 'node',                   // 显示文本\n    shape: 'round-rectangle',       // 节点的形状\n    highlight: {                    // 高亮\n        type: 'error',              // 高亮类型\n    },\n    customData: {                   // 用户自定义\n\n    },\n    children: []                    // 子节点\n}\n```\n\n#### 配置数据\n\n```javascript\n// 样式配置\noptions: {\n    styles: {\n        // 画布整体样式\n        canvas: {\n            bg: '#fff',\n            bgImg: 'img url', // 优先于 bg\n        },\n        // 图形尺寸（全局）\n        size: {\n            width: 120,\n            height: 36\n        },\n        // 图形之间的间距\n        gutter: {\n            vertical: 100, // 图形垂直间距 默认：100\n            horizontal: 60, // 图形水平间距 默认：60\n        },\n        /**\n        * @name 形状配置\n        * key: shape / shape__(具体填充)\n        */\n        shape: {\n            // 圆\n            circle: {},\n            // 矩形\n            rectangle: {\n                bg: '#FFBB00',                      // 背景色\n                bgImg: '',                          // 背景图（优先）\n                rBorder: 2,                         // 圆角度数\n                text: {                             // 文本相关\n                    family: 'Arial',                // 字体\n                    color: '#333',                  // 颜色\n                    size: 12,                       // 字号\n                    lineHeight: 18,                 // 行高\n                    align: 'left',                  // 对齐(有其他注意点)\n                    indent: 46,                     // 偏移\n                    maxLen: 7,                      // 显示最大字数，超出...\n                },\n                highlight: {                        // 高亮样式（会与hover、active叠加）\n                    error: {                        // 具体高亮类型\n                        bg: 'red',\n                        border: '1px solid red',\n                    }\n                }\n            },\n            // 圆角矩形\n            'round-rectangle': {},\n            // 圆角矩形\n            'round-rectangle__1': {},\n        },\n        // 连线\n        line: {\n            color: '#B4B4B4',                       // 线色\n            width: 1,                               // 线宽\n            borderRadius: 6                         // 拐点\n        },\n    },\n    eventBind: {                                    // 事件绑定开关\n        click: false,\n        contextmenu: false,\n        mouse: false,\n    },\n    events: {                                       // 绑定事件\n        click(e) {},\n        contextmenu(e) {},\n        mousemove(e) {},\n        mouseover(e) {},\n        mouseout(e) {},\n        clickEmpty(e) {}, // 点击空白区域，只有 eventBind 不全为 false 时有效\n    }\n},\n```\n\n#### 抛出事件对象\n\n```javascript\ne = {\n    type: 'click',          // 事件类型\n    target: FENode(),       // 作用节点\n    targetPath: '',         // 作用节点路径\n    targetAttach: {         // 作用节点相关信息\n        parentPath: '',     // 父节点路径\n        index: Number,      // children 中的位置\n    },\n    event: MouseEvent(),    // 原生鼠标事件对象\n    eventFrom: '',          // 事件触发来源: { 'simulation'-\u003e模拟, 'trigger'-\u003e手动触发 }\n    shapePoint: {           // 当前作用 shape 区域\n        topLeft: { x, y, },\n        topRight: { },\n        bottomLeft: { },\n        bottomRight: { },\n    },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealign%2Fflow-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealign%2Fflow-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealign%2Fflow-editor/lists"}