add:pages

.gitignore

@@ -60,6 +60,4 @@ typings/
 
 # next.js build output
 .next
-types/
-dist/
-doc/
+types/

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,10 @@ 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(
-      <>
-        <circle className="svg-item-output" r={radius + 2} cx={radius} cy={radius} />
-        <circle
-          className="svg-item"
-          r={radius - 1}
-          cx={radius}
-          cy={radius}
-          style={{
-            strokeWidth: 2,
-            fill: 'white',
-            stroke: 'blue',
-          }}
-        />
-      </>,
-      node.shape
-    );
-    return node.shape;
-  },
-});
-add()
-// result data
-console.log(editor.schema.getData())
-```
-
-# API 
-See the declaration file for more details.
+# API
+- [Get Start](./start.md)
+- [Custom Shape](./custom.md)
+- [API](./docs)
 
 # License
 

_config.yml

@@ -1 +1 @@
-theme: jekyll-theme-architect
+theme: jekyll-theme-cayman

custom.md

@@ -0,0 +1,69 @@
+
+# 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(
+      <>
+        <circle className="svg-item-output" r={radius + 2} cx={radius} cy={radius} />
+        <circle
+          className="svg-item"
+          r={radius - 1}
+          cx={radius}
+          cy={radius}
+          style={{
+            strokeWidth: 2,
+            fill: 'white',
+            stroke: 'blue',
+          }}
+        />
+      </>,
+      node.shape
+    );
+    return node.shape;
+  },
+});
+// result data
+```
+
+## Registe Line
+```ts
+import { DefaultLine } from '@vesoft-inc/veditor';
+const Path: DefaultLine.LineRender = {
+  type: 'path',
+  arcRatio: 4,
+  ...DefaultLine,
+
+  renderLabel(line: InstanceLine): SVGGElement {
+    const { label, startStep = 1, endStep = 1, stepType, filter = [] } = line.data as VisualQueryLine;
+    if(!line.label){
+      line.label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    }
+    line.shape?.appendChild(line.label);
+    // do some thing to render label
+    line.label.text = label;
+    return line.label.labelGroup;
+  },
+
+  checkNewLine(data: VisualQueryLine) {
+    const { from, to } = data;
+    if (from === to) {
+      return false;
+    }
+    return true;
+  },
+};
+editor.graph.line.registeLine('simple-label-line', Path);
+```
+```