docs(website): texts, docs, examples, favicon, cleanup

2020-10-05 17:03:00 +02:00
parent 277e032770
commit aafae0ea70
41 changed files with 390 additions and 653 deletions
@@ -1,10 +1,8 @@
 ---
-id: edges
-title: Edges
+title: Edge Options
 ---

-
-React Flow comes with four [edge types](#edge-types--custom-edges) (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component.
+You create edges by adding them to your `elements` array of the `ReactFlow` component.

 Edge example:

@@ -42,72 +40,3 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
 - `data`: {} you can use this to pass data to your custom edges.

 You can find an example with different edges in the [edges example](https://reactflow.dev/edges).
-
-## Edge Types & Custom Edges
-
-The basic edge types are `default` (bezier), `straight`, `step` and `smoothstep`. The default `edgeTypes` object looks like this:
-
-```javascript
-{
-  default: BezierEdge,
-  straight: StraightEdge,
-  step: StepEdge,
-  smoothstep: SmoothStepEdge
-}
-```
-
-The keys represent the type names and the values are the edge components.
-If you want to introduce a new edge type you can pass an `edgeTypes` object to the `ReactFlow` component:
-
-```javascript
-edgeTypes={{
-  special: MyCustomEdge
-}}
-```
-
-Now you could use the new type `special` for an edge.
-The `straight`, `default` and `step` types would still be available unless you overwrote one of them.
-There is an implementation of a custom edge in the [edges example](/example/src/Edges/index.js).
-
-## Edge Utils
-
-There are several utils that help you to create a custom edge. They are used in the [custom edge](/example/src/Edges/CustomEdge.js) example.
-
-### `getBezierPath`
-
-Returns the path of a bezier edge.
-
-`getBezierPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-}: GetBezierPathParams): string`
-
-### `getSmoothStepPath`
-
-Returns the path of a smooth step edge. You can set `borderRadius` = `0` to get a step edge path.
-
-`getSmoothStepPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  borderRadius = 5,
-}: GetSmoothStepPathParams): string`
-
-### `getEdgeCenter`
-
-Returns the center poostion `[centerX, centerY]` of the edge.
-
-`getEdgeCenter({ sourceX, sourceY, targetX, targetY }: GetCenterParams): [number, number, number, number]`
-
-### `getMarkerEnd`
-
-Returns the marker end url for displaying the arrow head.
-
-`getMarkerEnd(arrowHeadType?: ArrowHeadType, markerEndId?: string): string`