From 1f5fbf002fea0a9b1837120d5cfa84f178d3761b Mon Sep 17 00:00:00 2001
From: mizy <1060950782@163.com>
Date: Tue, 16 Aug 2022 15:12:39 +0800
Subject: [PATCH 1/3] add:pages
---
.gitignore | 4 +-
README.md | 66 +-
_config.yml | 2 +-
custom.md | 38 +
demo/Content/RightBar.js | 505 +-
demo/Content/TopBar.js | 3 +-
index.js => demo/app.js | 2 +-
demo/index.js | 4 +-
dist/VEditor.js | 4851 +++++++++++++++++
dist/index.js | 3 +
dist/index.js.LICENSE.txt | 53 +
dist/index.js.map | 1 +
docs/.nojekyll | 1 +
docs/_config.yml | 1 +
docs/assets/highlight.css | 92 +
docs/assets/main.js | 54 +
docs/assets/search.js | 1 +
docs/assets/style.css | 1224 +++++
docs/assets/widgets.png | Bin 0 -> 480 bytes
docs/assets/widgets@2x.png | Bin 0 -> 855 bytes
docs/classes/AnchorLine.html | 258 +
docs/classes/Controller.html | 545 ++
docs/classes/Graph.html | 344 ++
docs/classes/History.html | 209 +
docs/classes/Line.default.html | 510 ++
docs/classes/Minimap.html | 303 +
docs/classes/Node.default.html | 466 ++
docs/classes/Schema.default.html | 296 +
docs/classes/Utils.BezierLine.html | 265 +
docs/classes/Utils.Event.html | 212 +
docs/classes/Utils.Path.html | 264 +
docs/classes/VEditor.html | 335 ++
docs/functions/Utils.Vector2.addVector.html | 90 +
.../Utils.Vector2.getVectorLength.html | 90 +
docs/functions/Utils.Vector2.multiple.html | 97 +
docs/functions/Utils.Vector2.normalize.html | 95 +
docs/functions/Utils.Vector2.subVector.html | 97 +
docs/functions/Utils.dom.animate.html | 114 +
.../functions/Utils.dom.createSVGElement.html | 95 +
docs/functions/Utils.dom.drag.html | 138 +
docs/functions/Utils.dom.getAngle.html | 95 +
docs/functions/Utils.dom.getDOMRect.html | 95 +
docs/functions/Utils.dom.getEase.html | 93 +
docs/functions/Utils.dom.setAttrs.html | 95 +
docs/functions/Utils.dom.setTransform.html | 97 +
docs/functions/Utils.dom.svgWrapper.html | 95 +
docs/index.html | 138 +
docs/index.md | 37 +
.../interfaces/DefaultLine.LabelInstance.html | 124 +
docs/interfaces/DefaultLine.LineRender.html | 207 +
docs/interfaces/Line.InstanceLine.html | 179 +
docs/interfaces/Node.InstanceNode.html | 180 +
docs/interfaces/Node.InstanceNodePoint.html | 154 +
docs/interfaces/Schema.VEditorData.html | 103 +
docs/interfaces/Schema.VEditorNode.html | 161 +
docs/interfaces/Schema.VEditorSchema.html | 103 +
docs/interfaces/Utils.Position.html | 106 +
docs/interfaces/Utils.Vector2.Vector2.html | 104 +
docs/interfaces/VEditorOptions.html | 150 +
docs/modules.html | 114 +
docs/modules/DefaultLine.html | 87 +
docs/modules/DefaultNode.html | 85 +
docs/modules/Line.html | 85 +
docs/modules/Node.html | 87 +
docs/modules/Schema.html | 94 +
docs/modules/Utils.Vector2.html | 94 +
docs/modules/Utils.dom.html | 97 +
docs/modules/Utils.html | 104 +
docs/variables/DefaultLine.default.html | 77 +
docs/variables/DefaultNode.default.html | 76 +
docs/variables/Utils.SVGHelper.html | 384 ++
package.json | 10 +-
public/demo.html | 9 +
public/flowChart.html | 2 +-
public/index.html | 14 +-
snapshot.png | Bin 120238 -> 0 bytes
snapshot1.png | Bin 65428 -> 0 bytes
snapshot2.png | Bin 158751 -> 0 bytes
src/Model/History.ts | 93 +-
src/Model/Schema.ts | 4 +
src/Plugins/Minimap.ts | 5 +-
src/Shape/Line.ts | 2 +-
src/Shape/Node.ts | 5 +-
src/Utils/index.ts | 3 +-
src/VEditor.ts | 215 +-
src/index.ts | 20 +-
start.md | 55 +
tsconfig.json | 3 +-
typedoc.js | 5 +
webpack.config.js | 128 +-
90 files changed, 15443 insertions(+), 558 deletions(-)
create mode 100644 custom.md
rename index.js => demo/app.js (82%)
create mode 100644 dist/VEditor.js
create mode 100644 dist/index.js
create mode 100644 dist/index.js.LICENSE.txt
create mode 100644 dist/index.js.map
create mode 100644 docs/.nojekyll
create mode 100644 docs/_config.yml
create mode 100644 docs/assets/highlight.css
create mode 100644 docs/assets/main.js
create mode 100644 docs/assets/search.js
create mode 100644 docs/assets/style.css
create mode 100644 docs/assets/widgets.png
create mode 100644 docs/assets/widgets@2x.png
create mode 100644 docs/classes/AnchorLine.html
create mode 100644 docs/classes/Controller.html
create mode 100644 docs/classes/Graph.html
create mode 100644 docs/classes/History.html
create mode 100644 docs/classes/Line.default.html
create mode 100644 docs/classes/Minimap.html
create mode 100644 docs/classes/Node.default.html
create mode 100644 docs/classes/Schema.default.html
create mode 100644 docs/classes/Utils.BezierLine.html
create mode 100644 docs/classes/Utils.Event.html
create mode 100644 docs/classes/Utils.Path.html
create mode 100644 docs/classes/VEditor.html
create mode 100644 docs/functions/Utils.Vector2.addVector.html
create mode 100644 docs/functions/Utils.Vector2.getVectorLength.html
create mode 100644 docs/functions/Utils.Vector2.multiple.html
create mode 100644 docs/functions/Utils.Vector2.normalize.html
create mode 100644 docs/functions/Utils.Vector2.subVector.html
create mode 100644 docs/functions/Utils.dom.animate.html
create mode 100644 docs/functions/Utils.dom.createSVGElement.html
create mode 100644 docs/functions/Utils.dom.drag.html
create mode 100644 docs/functions/Utils.dom.getAngle.html
create mode 100644 docs/functions/Utils.dom.getDOMRect.html
create mode 100644 docs/functions/Utils.dom.getEase.html
create mode 100644 docs/functions/Utils.dom.setAttrs.html
create mode 100644 docs/functions/Utils.dom.setTransform.html
create mode 100644 docs/functions/Utils.dom.svgWrapper.html
create mode 100644 docs/index.html
create mode 100644 docs/index.md
create mode 100644 docs/interfaces/DefaultLine.LabelInstance.html
create mode 100644 docs/interfaces/DefaultLine.LineRender.html
create mode 100644 docs/interfaces/Line.InstanceLine.html
create mode 100644 docs/interfaces/Node.InstanceNode.html
create mode 100644 docs/interfaces/Node.InstanceNodePoint.html
create mode 100644 docs/interfaces/Schema.VEditorData.html
create mode 100644 docs/interfaces/Schema.VEditorNode.html
create mode 100644 docs/interfaces/Schema.VEditorSchema.html
create mode 100644 docs/interfaces/Utils.Position.html
create mode 100644 docs/interfaces/Utils.Vector2.Vector2.html
create mode 100644 docs/interfaces/VEditorOptions.html
create mode 100644 docs/modules.html
create mode 100644 docs/modules/DefaultLine.html
create mode 100644 docs/modules/DefaultNode.html
create mode 100644 docs/modules/Line.html
create mode 100644 docs/modules/Node.html
create mode 100644 docs/modules/Schema.html
create mode 100644 docs/modules/Utils.Vector2.html
create mode 100644 docs/modules/Utils.dom.html
create mode 100644 docs/modules/Utils.html
create mode 100644 docs/variables/DefaultLine.default.html
create mode 100644 docs/variables/DefaultNode.default.html
create mode 100644 docs/variables/Utils.SVGHelper.html
create mode 100644 public/demo.html
delete mode 100644 snapshot.png
delete mode 100644 snapshot1.png
delete mode 100644 snapshot2.png
create mode 100644 start.md
create mode 100644 typedoc.js
diff --git a/.gitignore b/.gitignore
index 77469b6..2f107a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -60,6 +60,4 @@ typings/
# next.js build output
.next
-types/
-dist/
-doc/
\ No newline at end of file
+types/
\ No newline at end of file
diff --git a/README.md b/README.md
index 2ea71f8..a1af86f 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
NebulaGraph VEditor is a highly customizable flow chart library, with which you create flow charts, sequence diagrams, workflow, and more.
-![](./snapshot2.png)
-![](./snapshot1.png)
-![](./snapshot.png)
+![](https://user-images.githubusercontent.com/7129229/184819808-13aec715-3056-4e87-a5ee-944a3b4e1703.png)
+![](https://user-images.githubusercontent.com/7129229/184819760-615b53b7-d0c3-4e87-8ad3-d76b69db7821.png)
+![](https://user-images.githubusercontent.com/7129229/184819660-0f6da546-4d80-4c97-9fa0-2389d4122d0f.png)
# Features
- Typescript: Natively TS support
@@ -22,11 +22,13 @@ npm install @vesoft-inc/veditor
```bash
npm run start
```
++ [Basic Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/basic.html)
++ [FlowChart Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/flowChart.html)
++ [React Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/demo.html)
# Build
```bash
npm run build
-
# make declaration
npm run makeDts
```
@@ -65,59 +67,9 @@ for(let x = 0;x<10;x++){
console.log(editor.schema.getData())
```
-## Register Shape
-You can refer to src/Shape/Nodes, src/Shape/Lines to register your own shape.
-
-```javascript
-import VEditor from "@vesoft-inc/veditor";
-
-let index = 0;
-const editor = new VEditor({ dom: document.getElementById("root")});
-// add node
-function add(){
- editor.graph.node.addNode({
- uuid:index,
- type:"react-svg-node",
- name:"test"+index++,
- x:window.innerWidth*Math.random(),
- y:300*Math.random()
- })
-}
-// registe react-svg-node
-editor.graph.node.registeNode("react-svg-node", {
- linkPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }],
- adsorb: [20, 12],
- render: render: (node: InstanceNode) => {
- const radius = 30;
- // popOver
- node.shape = node.shape ? node.shape : document.createElementNS('http://www.w3.org/2000/svg', 'g');
- ReactDOM.render(
- <>
-
-
- >,
- node.shape
- );
- return node.shape;
- },
-});
-add()
-// result data
-console.log(editor.schema.getData())
-```
-
-# API
-See the declaration file for more details.
+# API
+- [Get Start](./docs/start.md)
+- [API](./api/_index.md)
# License
diff --git a/_config.yml b/_config.yml
index 3397c9a..c419263 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1 +1 @@
-theme: jekyll-theme-architect
\ No newline at end of file
+theme: jekyll-theme-cayman
\ No newline at end of file
diff --git a/custom.md b/custom.md
new file mode 100644
index 0000000..6a308ff
--- /dev/null
+++ b/custom.md
@@ -0,0 +1,38 @@
+
+# Register Shape
+You can refer to src/Shape/Nodes, src/Shape/Lines to register your own shape.
+
+
+## Registe React Node
+extend VEditor.Default.Node
+```javascript
+
+editor.graph.node.registeNode("react-svg-node", {
+ linkPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }],
+ adsorb: [20, 12],
+ render: render: (node: InstanceNode) => {
+ const radius = 30;
+ // popOver
+ node.shape = node.shape ? node.shape : document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ ReactDOM.render(
+ <>
+
+
+ >,
+ node.shape
+ );
+ return node.shape;
+ },
+});
+// result data
+```
diff --git a/demo/Content/RightBar.js b/demo/Content/RightBar.js
index 5cbff26..3a81daa 100644
--- a/demo/Content/RightBar.js
+++ b/demo/Content/RightBar.js
@@ -1,272 +1,273 @@
import React, { Fragment, PureComponent } from "react";
import { Table, Select, Input } from "antd";
import { Components, refreshs } from "../Components/index";
-import { SVGHelper } from "@";
+import { Utils } from "@";
+const { SVGHelper } = Utils;
class RightBar extends PureComponent {
- state = {};
- componentDidMount() {
- this.addEvents(this.props);
- this.updateNodes();
- }
+ state = {};
+ componentDidMount() {
+ this.addEvents(this.props);
+ this.updateNodes();
+ }
- updateNodes = () => {
- const {
- editor: {
- schema: { data },
- graph: {
- node: { nodes },
- line: { lines }
- }
- }
- } = this.props;
- this.rankNodes = [];
- const dataArray = Object.keys(data.nodesMap).map(key => data.nodesMap[key]);
- // 有向图排序刷新
- this.rankData(dataArray, data.linesMap);
- this.rankNodes.forEach(node => {
- const toNode = nodes[node.uuid];
- const fromLines = toNode.fromLines;
- fromLines.forEach(line => {
- const fromData = data.nodesMap[data.linesMap[line].from];
- this.refreshNode(fromData, toNode);
- });
- });
- };
+ updateNodes = () => {
+ const {
+ editor: {
+ schema: { data },
+ graph: {
+ node: { nodes },
+ line: { lines }
+ }
+ }
+ } = this.props;
+ this.rankNodes = [];
+ const dataArray = Object.keys(data.nodesMap).map(key => data.nodesMap[key]);
+ // 有向图排序刷新
+ this.rankData(dataArray, data.linesMap);
+ this.rankNodes.forEach(node => {
+ const toNode = nodes[node.uuid];
+ const fromLines = toNode.fromLines;
+ fromLines.forEach(line => {
+ const fromData = data.nodesMap[data.linesMap[line].from];
+ this.refreshNode(fromData, toNode);
+ });
+ });
+ };
- // 节点数据有向图排序
- rankData(data, linesMap) {
- let deleteLines = [];
- const others = [];
- data.forEach(node => {
- let nodeId = node.uuid;
- node.indexDepth = 0;
- node.fromLines = [];
- for (let key in linesMap) {
- const line = linesMap[key];
- if (line.to === nodeId) {
- node.indexDepth++;
- }
- if (line.from === nodeId) {
- line.uuid = key;
- node.fromLines.push(line);
- }
- }
- if (node.indexDepth === 0) {
- this.rankNodes.push(node);
- deleteLines = deleteLines.concat(node.fromLines);
- } else {
- others.push(node);
- }
- });
- if (others.length) {
- let newLinesMap = JSON.parse(JSON.stringify(linesMap));
- deleteLines.forEach(line => {
- delete newLinesMap[line.uuid];
- });
- this.rankData(others, newLinesMap);
- }
- }
+ // 节点数据有向图排序
+ rankData(data, linesMap) {
+ let deleteLines = [];
+ const others = [];
+ data.forEach(node => {
+ let nodeId = node.uuid;
+ node.indexDepth = 0;
+ node.fromLines = [];
+ for (let key in linesMap) {
+ const line = linesMap[key];
+ if (line.to === nodeId) {
+ node.indexDepth++;
+ }
+ if (line.from === nodeId) {
+ line.uuid = key;
+ node.fromLines.push(line);
+ }
+ }
+ if (node.indexDepth === 0) {
+ this.rankNodes.push(node);
+ deleteLines = deleteLines.concat(node.fromLines);
+ } else {
+ others.push(node);
+ }
+ });
+ if (others.length) {
+ let newLinesMap = JSON.parse(JSON.stringify(linesMap));
+ deleteLines.forEach(line => {
+ delete newLinesMap[line.uuid];
+ });
+ this.rankData(others, newLinesMap);
+ }
+ }
- addEvents(props) {
- props.editor.on("load", this.updateNodes);
- props.editor.graph.on("line:change", this.onLineChange);
- props.editor.graph.on("line:add", this.onLineChange);
- props.editor.graph.on("line:remove", this.onLineChange);
- // props.editor.graph.on("node:remove", this.onNodeRemove);
- }
+ addEvents(props) {
+ props.editor.on("load", this.updateNodes);
+ props.editor.graph.on("line:change", this.onLineChange);
+ props.editor.graph.on("line:add", this.onLineChange);
+ props.editor.graph.on("line:remove", this.onLineChange);
+ // props.editor.graph.on("node:remove", this.onNodeRemove);
+ }
- onNodeRemove = ({ node }) => {
- const {
- editor: {
- graph: {
- node: { nodes }
- },
- schema
- }
- } = this.props;
- node.toLines.forEach(item => {
- const before = schema.data.linesMap[item];
- const toNode = nodes[before.to];
- // 更新to的节点,然后遍历子节点
- this.updateParentNode(toNode, before);
- });
- };
+ onNodeRemove = ({ node }) => {
+ const {
+ editor: {
+ graph: {
+ node: { nodes }
+ },
+ schema
+ }
+ } = this.props;
+ node.toLines.forEach(item => {
+ const before = schema.data.linesMap[item];
+ const toNode = nodes[before.to];
+ // 更新to的节点,然后遍历子节点
+ this.updateParentNode(toNode, before);
+ });
+ };
- onLineChange = ({ line, before, type, byNode }) => {
- const {
- editor: {
- graph: {
- line: { lines },
- node: { nodes }
- }
- }
- } = this.props;
- const { activeNode = {} } = this.props;
- if (type === "remove" && nodes[line.data.to]) {
- this.updateParentNode(nodes[line.data.to], before);
- }
- if (type === "add") {
- this.updateNode(nodes[line.data.from]);
- }
- if (type === "change") {
- this.updateNode(nodes[line.data.from]);
- this.updateParentNode(nodes[before.to], before);
- }
- };
+ onLineChange = ({ line, before, type, byNode }) => {
+ const {
+ editor: {
+ graph: {
+ line: { lines },
+ node: { nodes }
+ }
+ }
+ } = this.props;
+ const { activeNode = {} } = this.props;
+ if (type === "remove" && nodes[line.data.to]) {
+ this.updateParentNode(nodes[line.data.to], before);
+ }
+ if (type === "add") {
+ this.updateNode(nodes[line.data.from]);
+ }
+ if (type === "change") {
+ this.updateNode(nodes[line.data.from]);
+ this.updateParentNode(nodes[before.to], before);
+ }
+ };
- updateParentNode(parentNode, before) {
- const {
- editor: { schema }
- } = this.props;
- const { data } = parentNode;
- const refresh = refreshs[data.component];
- if (!refresh) return false;
- const newData = refresh(
- {
- before
- },
- data,
- schema.data
- );
- schema.data.nodesMap[data.uuid] = newData;
- this.updateNode(parentNode);
- }
+ updateParentNode(parentNode, before) {
+ const {
+ editor: { schema }
+ } = this.props;
+ const { data } = parentNode;
+ const refresh = refreshs[data.component];
+ if (!refresh) return false;
+ const newData = refresh(
+ {
+ before
+ },
+ data,
+ schema.data
+ );
+ schema.data.nodesMap[data.uuid] = newData;
+ this.updateNode(parentNode);
+ }
- /**
- * 输出更新
- */
- onOutputChange = data => {
- const { editor } = this.props;
- const { activeNode = {} } = this.state;
- const { uuid } = activeNode;
- // 步骤名称
- activeNode.output = data;
- // 更新node
- const node = editor.graph.node.nodes[uuid];
- node.data = activeNode;
- editor.schema.data.nodesMap[uuid] = node.data;
- this.setState({ ...this.state });
- this.updateNode(node);
- };
+ /**
+ * 输出更新
+ */
+ onOutputChange = data => {
+ const { editor } = this.props;
+ const { activeNode = {} } = this.state;
+ const { uuid } = activeNode;
+ // 步骤名称
+ activeNode.output = data;
+ // 更新node
+ const node = editor.graph.node.nodes[uuid];
+ node.data = activeNode;
+ editor.schema.data.nodesMap[uuid] = node.data;
+ this.setState({ ...this.state });
+ this.updateNode(node);
+ };
- /**
- * 配置变化
- */
- onChange = data => {
- const { editor } = this.props;
- const { uuid } = data;
+ /**
+ * 配置变化
+ */
+ onChange = data => {
+ const { editor } = this.props;
+ const { uuid } = data;
- // 步骤名称
- data.name = data.config.name;
- // 更新editor
- const node = editor.graph.node.nodes[uuid];
- this.changeTiemout && clearTimeout(this.changeTiemout);
- this.changeTiemout = setTimeout(() => {
- if (JSON.stringify(node.data) === JSON.stringify(data)) {
- return false;
- }
- node.data.config = data.config;
- node.data.name = data.config.name;
- editor.graph.fire("node:change", { node });
- node.dom.querySelector("text").innerHTML = data.config.name;
- }, 300);
- };
+ // 步骤名称
+ data.name = data.config.name;
+ // 更新editor
+ const node = editor.graph.node.nodes[uuid];
+ this.changeTiemout && clearTimeout(this.changeTiemout);
+ this.changeTiemout = setTimeout(() => {
+ if (JSON.stringify(node.data) === JSON.stringify(data)) {
+ return false;
+ }
+ node.data.config = data.config;
+ node.data.name = data.config.name;
+ editor.graph.fire("node:change", { node });
+ node.dom.querySelector("text").innerHTML = data.config.name;
+ }, 300);
+ };
- // 递归更节点新树输入源
- updateNode(node) {
- const {
- editor: {
- graph: {
- line: { lines },
- node: { nodes }
- },
- schema
- }
- } = this.props;
- const { data } = node;
- const toLines = node.toLines;
- const toNodes = [];
- toLines.forEach(lineId => {
- toNodes.push(nodes[lines[lineId].data.to]);
- });
- toNodes.forEach(async toNode => {
- await this.refreshNode(data, toNode);
- this.updateNode(toNode);
- });
- }
+ // 递归更节点新树输入源
+ updateNode(node) {
+ const {
+ editor: {
+ graph: {
+ line: { lines },
+ node: { nodes }
+ },
+ schema
+ }
+ } = this.props;
+ const { data } = node;
+ const toLines = node.toLines;
+ const toNodes = [];
+ toLines.forEach(lineId => {
+ toNodes.push(nodes[lines[lineId].data.to]);
+ });
+ toNodes.forEach(async toNode => {
+ await this.refreshNode(data, toNode);
+ this.updateNode(toNode);
+ });
+ }
- async refreshNode(data, toNode) {
- const {
- editor: {
- schema,
- graph: {
- node: { nodes }
- }
- }
- } = this.props;
- const refresh = refreshs[toNode.data.component];
- // 上游数据修改导致下属节点全部更新输入
- let newData = refresh ? await refresh(data, toNode.data, schema.data) : toNode.data;
- // 刷新动画
- SVGHelper.animate(
- 0,
- 100,
- val => {
- const num = val < 50 ? 50 - val : val - 50;
- SVGHelper.setAttrs(toNode.shape, {
- fillOpacity: num / 50
- });
- },
- 1500,
- 'ease-in-out'
- );
+ async refreshNode(data, toNode) {
+ const {
+ editor: {
+ schema,
+ graph: {
+ node: { nodes }
+ }
+ }
+ } = this.props;
+ const refresh = refreshs[toNode.data.component];
+ // 上游数据修改导致下属节点全部更新输入
+ let newData = refresh ? await refresh(data, toNode.data, schema.data) : toNode.data;
+ // 刷新动画
+ SVGHelper.animate(
+ 0,
+ 100,
+ val => {
+ const num = val < 50 ? 50 - val : val - 50;
+ SVGHelper.setAttrs(toNode.shape, {
+ fillOpacity: num / 50
+ });
+ },
+ 1500,
+ 'ease-in-out'
+ );
- toNode.data = newData;
- schema.data.nodesMap[toNode.data.uuid] = newData;
- return toNode;
- }
+ toNode.data = newData;
+ schema.data.nodesMap[toNode.data.uuid] = newData;
+ return toNode;
+ }
- /**
- * 渲染
- */
- render() {
- const { activeNode } = this.state;
- const { editor } = this.props;
- if (!editor || !activeNode) return null;
- const input = [];
- const nodes = editor.graph.node.nodes;
- const lines = editor.graph.line.lines;
- const node = nodes[activeNode.uuid] || {};
- const fromLines = node.fromLines || [];
- fromLines.forEach(lineId => {
- const line = lines[lineId];
- input.push(nodes[line.data.from].data);
- });
+ /**
+ * 渲染
+ */
+ render() {
+ const { activeNode } = this.state;
+ const { editor } = this.props;
+ if (!editor || !activeNode) return null;
+ const input = [];
+ const nodes = editor.graph.node.nodes;
+ const lines = editor.graph.line.lines;
+ const node = nodes[activeNode.uuid] || {};
+ const fromLines = node.fromLines || [];
+ fromLines.forEach(lineId => {
+ const line = lines[lineId];
+ input.push(nodes[line.data.from].data);
+ });
- if (!input.length) {
- input[0] = { output: [] };
- }
- const Component = Components[activeNode.component];
- return (
-
-
{activeNode.name}
-
- {Component && (
-
- )}
-
-
- );
- }
+ if (!input.length) {
+ input[0] = { output: [] };
+ }
+ const Component = Components[activeNode.component];
+ return (
+
+
{activeNode.name}
+
+ {Component && (
+
+ )}
+
+
+ );
+ }
}
export default RightBar;
diff --git a/demo/Content/TopBar.js b/demo/Content/TopBar.js
index 96bb85b..f84d944 100644
--- a/demo/Content/TopBar.js
+++ b/demo/Content/TopBar.js
@@ -1,6 +1,7 @@
import React, { Fragment, PureComponent } from "react";
import { Icon, Tooltip, message, Modal, Input } from "antd";
-import { SVGHelper, BezierLine } from "@";
+import { Utils } from "@";
+const { SVGHelper } = Utils;
class TopBar extends PureComponent {
componentWillReceiveProps(props) {
if (props.editor && !this.props.editor) {
diff --git a/index.js b/demo/app.js
similarity index 82%
rename from index.js
rename to demo/app.js
index bdf5dfa..5f7ab16 100644
--- a/index.js
+++ b/demo/app.js
@@ -1,4 +1,4 @@
import React from "react";
import ReactDom from "react-dom";
-import Editor from "./demo/index";
+import Editor from "./index";
if (document.getElementById("root")) ReactDom.render(, document.getElementById("root"));
diff --git a/demo/index.js b/demo/index.js
index debf88a..cda1e90 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -2,7 +2,7 @@ import React, { Fragment, PureComponent } from 'react';
import ReactDom from 'react-dom';
import 'antd/dist/antd.css';
import './index.less';
-import VEditor, { SVGHelper } from '../src/index.ts';
+import VEditor, { Utils } from '../src/index.ts';
import LeftBar from './Content/LeftBar';
import RightBar from './Content/RightBar';
import TopBar from './Content/TopBar';
@@ -10,7 +10,7 @@ import { message, Popover, Drawer, Modal } from 'antd';
import RightMenu from './Content/RightMenu';
import testdata from './testdata';
window.VEditor = VEditor;
-
+const { SVGHelper } = Utils;
class Editor extends PureComponent {
state = {};
// 编辑器实例
diff --git a/dist/VEditor.js b/dist/VEditor.js
new file mode 100644
index 0000000..b6e30f4
--- /dev/null
+++ b/dist/VEditor.js
@@ -0,0 +1,4851 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+ if(typeof exports === 'object' && typeof module === 'object')
+ module.exports = factory(require("uuid"), require("dagre"), require("canvg"));
+ else if(typeof define === 'function' && define.amd)
+ define(["uuid", "dagre", "canvg"], factory);
+ else if(typeof exports === 'object')
+ exports["VEditor"] = factory(require("uuid"), require("dagre"), require("canvg"));
+ else
+ root["VEditor"] = factory(root["uuid"], root["dagre"], root["canvg"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE__459__, __WEBPACK_EXTERNAL_MODULE__987__, __WEBPACK_EXTERNAL_MODULE__973__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({
+
+/***/ 274:
+/***/ ((module, exports, __webpack_require__) => {
+
+exports = module.exports = __webpack_require__(252)(false);
+// imports
+
+
+// module
+exports.push([module.id, "@keyframes dashing {\n from {\n stroke-dashoffset: 200;\n }\n to {\n stroke-dashoffset: 0;\n }\n}\n.ve-editor {\n width: 100%;\n height: 100%;\n position: relative;\n}\n.ve-editor .ve-editor-back {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 0;\n left: 0;\n top: 0;\n}\n.ve-editor .ve-minimap {\n position: absolute;\n top: 10px;\n right: 10px;\n background: #fff;\n border: 1px solid #cecece;\n border-radius: 5px;\n overflow: hidden;\n width: 160px;\n height: 127px;\n}\n.ve-editor .ve-minimap .drag-rect {\n position: absolute;\n left: 0px;\n box-sizing: content-box;\n top: 0px;\n border: 2px solid #08c;\n cursor: pointer;\n transition: all 200ms ease;\n}\n.ve-editor .ve-minimap .drag-point {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n border: 2px solid #08c;\n background: #fff;\n position: absolute;\n right: -5px;\n bottom: -5px;\n cursor: nwse-resize;\n}\n.ve-editor > .ve-editor-svg {\n cursor: grab;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n.ve-editor > .ve-editor-svg svg {\n position: absolute;\n left: 0;\n top: 0;\n outline: none;\n}\n.ve-editor > .ve-editor-svg * {\n transition: x, y, transform, cx, cy, width, stroke, height, fill 400ms;\n outline: none;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-link-points {\n cursor: crosshair;\n display: none;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-link-points:hover,\n.ve-editor > .ve-editor-svg .ve-node .ve-link-points.hover {\n fill: #4c79ff;\n cursor: crosshair;\n display: block;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape {\n cursor: move;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape:hover > .icon-node {\n stroke: #4c79ff;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape.active > .icon-node {\n transition: stroke 400ms;\n stroke: #4c79ff;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape.success .icon-node {\n stroke: green;\n fill: #fff;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape.error .icon-node {\n stroke: red;\n}\n.ve-editor > .ve-editor-svg .ve-node .ve-node-shape.running .icon-node {\n stroke: #4c79ff;\n}\n.ve-editor > .ve-editor-svg .ve-line .ve-line-path {\n transition: stroke-dasharray 300ms ease-out;\n}\n.ve-editor > .ve-editor-svg .ve-line .ve-shdow-path {\n stroke: transparent;\n stroke-width: 3;\n fill: none;\n}\n.ve-editor > .ve-editor-svg .ve-line.active .ve-line-shape,\n.ve-editor > .ve-editor-svg .ve-line:hover .ve-line-shape {\n opacity: 0.5;\n}\n.ve-editor > .ve-editor-svg .ve-line.active .ve-line-arrow,\n.ve-editor > .ve-editor-svg .ve-line:hover .ve-line-arrow {\n opacity: 0.5;\n}\n.ve-editor > .ve-editor-svg .ve-line.running .ve-line-path {\n stroke-dasharray: 5 !important;\n animation: dashing 5s linear infinite;\n}\n.ve-editor > .ve-editor-svg .ve-line .ve-line-shape {\n cursor: pointer;\n}\n.ve-editor > .ve-editor-svg .ve-line .ve-line-arrow {\n cursor: crosshair;\n}\n.ve-editor > .ve-editor-svg .ve-line .ve-line-label text {\n text-anchor: middle;\n}\n.ve-editor > .ve-editor-svg .anchor-line {\n stroke: #4c79ff;\n}\n.ve-editor > .ve-editor-html {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n.ve-editor .anchor-back {\n position: absolute;\n top: 0;\n left: 0;\n}\n.ve-node-wrapper {\n border: 1px solid #08c;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n background-color: #fff;\n align-items: center;\n}\n", ""]);
+
+// exports
+
+
+/***/ }),
+
+/***/ 252:
+/***/ ((module) => {
+
+/*
+ MIT License http://www.opensource.org/licenses/mit-license.php
+ Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+module.exports = function(useSourceMap) {
+ var list = [];
+
+ // return the list of modules as css string
+ list.toString = function toString() {
+ return this.map(function (item) {
+ var content = cssWithMappingToString(item, useSourceMap);
+ if(item[2]) {
+ return "@media " + item[2] + "{" + content + "}";
+ } else {
+ return content;
+ }
+ }).join("");
+ };
+
+ // import a list of modules into the list
+ list.i = function(modules, mediaQuery) {
+ if(typeof modules === "string")
+ modules = [[null, modules, ""]];
+ var alreadyImportedModules = {};
+ for(var i = 0; i < this.length; i++) {
+ var id = this[i][0];
+ if(typeof id === "number")
+ alreadyImportedModules[id] = true;
+ }
+ for(i = 0; i < modules.length; i++) {
+ var item = modules[i];
+ // skip already imported module
+ // this implementation is not 100% perfect for weird media query combinations
+ // when a module is imported multiple times with different media queries.
+ // I hope this will never occur (Hey this way we have smaller bundles)
+ if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+ if(mediaQuery && !item[2]) {
+ item[2] = mediaQuery;
+ } else if(mediaQuery) {
+ item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+ }
+ list.push(item);
+ }
+ }
+ };
+ return list;
+};
+
+function cssWithMappingToString(item, useSourceMap) {
+ var content = item[1] || '';
+ var cssMapping = item[3];
+ if (!cssMapping) {
+ return content;
+ }
+
+ if (useSourceMap && typeof btoa === 'function') {
+ var sourceMapping = toComment(cssMapping);
+ var sourceURLs = cssMapping.sources.map(function (source) {
+ return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
+ });
+
+ return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+ }
+
+ return [content].join('\n');
+}
+
+// Adapted from convert-source-map (MIT)
+function toComment(sourceMap) {
+ // eslint-disable-next-line no-undef
+ var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+ var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
+
+ return '/*# ' + data + ' */';
+}
+
+
+/***/ }),
+
+/***/ 176:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+var content = __webpack_require__(274);
+
+if(typeof content === 'string') content = [[module.id, content, '']];
+
+var transform;
+var insertInto;
+
+
+
+var options = {"hmr":true}
+
+options.transform = transform
+options.insertInto = undefined;
+
+var update = __webpack_require__(723)(content, options);
+
+if(content.locals) module.exports = content.locals;
+
+if(false) {}
+
+/***/ }),
+
+/***/ 723:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+/*
+ MIT License http://www.opensource.org/licenses/mit-license.php
+ Author Tobias Koppers @sokra
+*/
+
+var stylesInDom = {};
+
+var memoize = function (fn) {
+ var memo;
+
+ return function () {
+ if (typeof memo === "undefined") memo = fn.apply(this, arguments);
+ return memo;
+ };
+};
+
+var isOldIE = memoize(function () {
+ // Test for IE <= 9 as proposed by Browserhacks
+ // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+ // Tests for existence of standard globals is to allow style-loader
+ // to operate correctly into non-standard environments
+ // @see https://github.com/webpack-contrib/style-loader/issues/177
+ return window && document && document.all && !window.atob;
+});
+
+var getTarget = function (target) {
+ return document.querySelector(target);
+};
+
+var getElement = (function (fn) {
+ var memo = {};
+
+ return function(target) {
+ // If passing function in options, then use it for resolve "head" element.
+ // Useful for Shadow Root style i.e
+ // {
+ // insertInto: function () { return document.querySelector("#foo").shadowRoot }
+ // }
+ if (typeof target === 'function') {
+ return target();
+ }
+ if (typeof memo[target] === "undefined") {
+ var styleTarget = getTarget.call(this, target);
+ // Special case to return head of iframe instead of iframe itself
+ if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+ try {
+ // This will throw an exception if access to iframe is blocked
+ // due to cross-origin restrictions
+ styleTarget = styleTarget.contentDocument.head;
+ } catch(e) {
+ styleTarget = null;
+ }
+ }
+ memo[target] = styleTarget;
+ }
+ return memo[target]
+ };
+})();
+
+var singleton = null;
+var singletonCounter = 0;
+var stylesInsertedAtTop = [];
+
+var fixUrls = __webpack_require__(947);
+
+module.exports = function(list, options) {
+ if (typeof DEBUG !== "undefined" && DEBUG) {
+ if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
+ }
+
+ options = options || {};
+
+ options.attrs = typeof options.attrs === "object" ? options.attrs : {};
+
+ // Force single-tag solution on IE6-9, which has a hard limit on the # of
+
+
+
+
+
+
+
+Properties
+
+anchorDistance
+anchorDistance: number
+
+anchorLines
+anchorLines: {}
+
+
+anchorXLength
+anchorXLength: number
+
+anchorYLength
+anchorYLength: number
+
+
+
+hideAchor
+hideAchor: boolean
+
+hideAchorLine
+hideAchorLine: boolean
+
+
+paper
+paper: SVGGElement
+
+path
+path: SVGPathElement
+
+Methods
+
+check
+
+- check(x: number, y: number): Position
+-
+
+
+
Parameters
+
+-
+
x: number
+-
+
y: number
+
+
+checkAchor
+
+- checkAchor(x: number, y: number): Position
+-
+
+
Parameters
+
+-
+
x: number
+-
+
y: number
+
+
+hidePath
+
+- hidePath(): void
+-
+
+
Returns void
+
+makeAllAnchors
+
+- makeAllAnchors(origin: InstanceNode): void
+-
+
+
+
Returns void
+
+
+
画节点
+