diff --git a/README.md b/README.md index 4a52c66..e33e345 100644 --- a/README.md +++ b/README.md @@ -35,14 +35,14 @@ nodes or edges. #### Settings which apply to the entire graph | Key | Possible Values | Default | Explanation | -| :-----------: | :----------------------: | :----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|:-------------:|:------------------------:|:------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `autoLayout` | `true` or `false` | `false` | If set to `true`, [dagre](https://github.com/dagrejs/dagre) is used to automatically determine to positions of the nodes. Individually set positions will be overwritten see [Node positioning](#node-positioning) for more information. | | `orientation` | `horizontal`, `vertical` | `horizontal` | The orientation of the graph. If you want to work from top to bottom or from bottom to top, set `orientation` to `vertical`. | #### Settings which apply to the nodes | Key | Possible Values | Default | Explanation | -| :-----------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :---------------------------------------------------------------------------------------- | +|:-------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------:|:--------:|:------------------------------------------------------------------------------------------| | `fill` | Any CSS color | `white` | The color of the nodes. | | `fontsize` | Any number | `12` | The fontsize of the text in the nodes. | | `shape` | `8-star`, `big-star`, `circle`, `cylinder`, `diamond`, `hexagon`, `note`, `rectangle`, `square`, `star`, `triangle`, `comunica`, `rmlio`, `solid` | `square` | The shape of the nodes. | @@ -54,7 +54,7 @@ nodes or edges. #### Settings which apply to the edges | Key | Possible Values | Default | Explanation | -| :---------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +|:-----------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `animated` | `true` or `false` | `false` | Set a default animation for the edge. See also [Animations](#animations). | | `animation` | See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) about animation | | | `edgeColor` | Any [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color_keywords) is valid, e.g. `steelblue`, `#FFD700`, `rgb(65, 105, 225)` ... | `black` | The color of the edges between the nodes. | @@ -71,7 +71,7 @@ explained in the section [Global defaults](#global-defaults). | Key | Possible Values | Default | Explanation | -| :----------: | :------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|:------------:|:--------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `id` | Any string | If `title` is unique among the nodes with no ID's, `title` becomes the ID. Otherwise `label`, otherwise `shape`, otherwise `image`. If nothing of that is possible, a random number becomes the ID. | Used to refer to the node. | | `position` | `{x: , y: }` | `{x: 0, y: 0}`
Except for when `autoLayout` is `true` in the global default settings or when `vgroup` or `hgroup` is used. | The position of the node. | | `vgroup` | Any string | `undefined` | Used to vertically align a group of nodes. See [Node positioning](#node-positioning) for more information. | @@ -135,7 +135,7 @@ values in global defaults. | Key | Possible Values | Default | Explanation | -| :------------: | :----------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|:--------------:|:------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `source` | ID of the source node | `undefined` | Set the node from which the edge starts. This key is mandatory. | | `target` | ID of the target node | `undefined` | Set the node where the edge arrives. This key is mandatory. | | `zIndex` | Any number | 0 | Controls the layer order. If an edge crosses a node and you want the edge to be displayed on top of the edge, you can set `zIndex` to for example `1`. If an edge without zIndex specified, connects two nodes with the same `parentNode`, `zIndex` is automatically set to `1`. | diff --git a/src/App.js b/src/App.js index 77fc318..ea4000c 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import React, {useCallback} from 'react'; import ReactFlow, {addEdge, Controls, useEdgesState, useNodesState,} from 'react-flow-renderer'; -import SvgNode from "./custom/node/SvgNode"; +import SvgNode from "./custom/node/Node"; import EditorArea from "./custom/editors/EditorArea"; diff --git a/src/CustomEdge.js b/src/CustomEdge.js deleted file mode 100644 index 5808ca1..0000000 --- a/src/CustomEdge.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { getBezierPath, getMarkerEnd } from 'react-flow-renderer'; - -// TODO I don't think this file is being used? It's in the wrong location in any case -export default function CustomEdge({ - id, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - style = {}, - data, - markerEnd, - }) { - const edgePath = getBezierPath({ - sourceX, - sourceY, - sourcePosition, - targetX, - targetY, - targetPosition, - }); - - return ( - <> - - - - {data.text} - - - - ); -} diff --git a/src/custom/editors/MyEditor.js b/src/custom/editors/CodeEditor.js similarity index 68% rename from src/custom/editors/MyEditor.js rename to src/custom/editors/CodeEditor.js index 4a682a9..22f0406 100644 --- a/src/custom/editors/MyEditor.js +++ b/src/custom/editors/CodeEditor.js @@ -1,14 +1,12 @@ import Editor from "@monaco-editor/react"; import {useState} from "react"; -const MyEditor = ({language, data, setData, modelName, schema}) => { +const CodeEditor = ({language, data, setData, modelName, schema}) => { - // TODO I get the heebie jeebies of variables starting with `my`, can you come up with more descriptive names? - // TODO same remark for this entire component :) Suggestion: CodeEditor - const [myEditor, setMyEditor] = useState(null); - const [myMonaco, setMyMonaco] = useState(null); - const [myModel, setMyModel] = useState(null) - const [myModelUri, setMyModelUri] = useState(null) + const [editorInstance, setEditorInstance] = useState(null); + const [monacoInstance, setMonacoInstance] = useState(null); + const [modelInstance, setModelInstance] = useState(null) + const [modelUriInstance, setModelUriInstance] = useState(null) function editorDidMountNodes(editor, monaco) { // https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults @@ -16,10 +14,10 @@ const MyEditor = ({language, data, setData, modelName, schema}) => { const modelUri = monaco.Uri.parse(modelName + ".json"); // a made up unique URI for our model const model = monaco.editor.createModel(data, 'json', modelUri); - setMyEditor(editor); - setMyMonaco(monaco); - setMyModel(model); - setMyModelUri(modelUri) + setEditorInstance(editor); + setMonacoInstance(monaco); + setModelInstance(model); + setModelUriInstance(modelUri) monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ validate: true, @@ -40,18 +38,18 @@ const MyEditor = ({language, data, setData, modelName, schema}) => { // This component gets created multiple times and the changes you do on monaco or editor are probably overwritten // In this function, I just overwrite it again when you click with you mouse on the editor function initAgain() { - myMonaco.languages.json.jsonDefaults.setDiagnosticsOptions({ + monacoInstance.languages.json.jsonDefaults.setDiagnosticsOptions({ validate: true, schemas: [ { // uri: "http://.....-schema.json", - fileMatch: [myModelUri.toString()], + fileMatch: [modelUriInstance.toString()], schema: schema } ] }) - myEditor.setModel(myModel); + editorInstance.setModel(modelInstance); } @@ -71,4 +69,4 @@ const MyEditor = ({language, data, setData, modelName, schema}) => { } -export default MyEditor; +export default CodeEditor; diff --git a/src/custom/editors/EditorArea.js b/src/custom/editors/EditorArea.js index 4d197e2..3539fee 100644 --- a/src/custom/editors/EditorArea.js +++ b/src/custom/editors/EditorArea.js @@ -40,10 +40,11 @@ import { } from "../../data/exampleData6"; -import {GRAPH, parseEdges, parseGlobalDefaults, parseNodes} from "./editorUtil"; +import {GRAPH, parseEdges, parseGlobalDefaults, parseNodes} from "./configParsing"; import {getLayoutedElementsDagre} from "./editorUtilPositioning"; import {edgeSchema, globalDefaultSchema, nodeSchema, validateJSON} from "./schemaValidation"; -import MyEditor from "./MyEditor"; +import MyEditor from "./CodeEditor"; +import ErrorModal from "./ErrorModal"; const EditorArea = ({setNodes, setEdges}) => { @@ -66,11 +67,6 @@ const EditorArea = ({setNodes, setEdges}) => { [globalDefaultsJSON5, nodesJSON5, edgesJSON5], [globalDefaultsJSON6, nodesJSON6, edgesJSON6], ]; - function handleErrorPopUpClose() { - setErrorMessageTitle("") - setErrorMessages([]) - setErrorModalVisible(false) - } // TODO this is generic code function json2yaml(jsonData) { @@ -115,7 +111,6 @@ const EditorArea = ({setNodes, setEdges}) => { setEdgesData(edges); } - // TODO note how I changed the very vague `e` to a more descriptive variable name function changeLanguage(eventKey) { let newLang = eventKey; @@ -204,22 +199,19 @@ const EditorArea = ({setNodes, setEdges}) => { } + function handleErrorPopUpClose() { + setErrorMessageTitle("") + setErrorMessages([]) + setErrorModalVisible(false) + } + return <> - {/* TODO Feels like this modal could be a separate component */} - - - {errorMessageTitle} - - - {errorMessages.map(e =>

{e}

)} - - - - - + +
{ @@ -243,7 +235,7 @@ const EditorArea = ({setNodes, setEdges}) => { -
+
Global defaults editor
{ + + + return <> + + + + {errorMessageTitle} + + + {errorMessages.map(e =>

{e}

)} + + + + + + + + +} + +export default ErrorModal; diff --git a/src/custom/editors/editorUtil.js b/src/custom/editors/configParsing.js similarity index 82% rename from src/custom/editors/editorUtil.js rename to src/custom/editors/configParsing.js index fec1920..559cb06 100644 --- a/src/custom/editors/editorUtil.js +++ b/src/custom/editors/configParsing.js @@ -1,13 +1,11 @@ -// These are the keys that can be used in globalDefaults -// These keys are not standard supported by the library, that's why they are in a dict -// The values of this dict should be used in the JSON representation -import {fixNodeGroups} from "./editorUtilPositioning"; -// TODO I have the feeling you should either have a 'constants.js' file, or rename this 'editorUtil.js' to 'configParsing.js' or smth export const GRAPH = "graph"; export const NODE = "node"; export const EDGE = "edge"; +// These are the keys that can be used in globalDefaults +// These keys are not standard supported by the library, that's why they are in a dict +// The values of this dict should be used in the JSON representation export const KEY_VALUES = { [GRAPH]: { @@ -470,3 +468,133 @@ function getSourceNode_targetNode_fromId(edge, nodes) { return [sourceNode, targetNode]; } + + + +function fixNodeGroups(nodes) { + // loop over nodes and store all groups + // let groups = {"vgroups": new Set(), "hgroups": new Set()} + let groupsHash = new Set(); + let groups = []; + /*for (let n of nodes) { + // TODO: met ID's werken voor vgroup en hgroup + if (n.hasOwnProperty("vgroup")) { + groups["vgroups"].add(n["vgroup"]); + } + if (n.hasOwnProperty("hgroup")) { + groups["hgroups"].add(n["hgroup"]); + } + } + + groups["vgroups"].forEach(g => fixVgroups(nodes, g)); + groups["hgroups"].forEach(g => fixHgroups(nodes, g));*/ + + for (let n of nodes) { + if (n.hasOwnProperty("vgroup") && !groupsHash.has(n["vgroup"])) { + groups.push(["vgroup", n["vgroup"]]); + groupsHash.add(n["vgroup"]) + } + if (n.hasOwnProperty("hgroup") && !groupsHash.has(n["hgroup"])) { + groups.push(["hgroup", n["hgroup"]]); + groupsHash.add(n["hgroup"]); + } + } + + for (let g of groups) { + if (g[0] === "vgroup") { + fixVgroups(nodes, g[1]); + } else { + fixHgroups(nodes, g[1]) + } + } + +} + +function fixVgroups(allNodes, vgroupId) { + // search all nodes within that vgroup + let nodes = allNodes.filter(n => n.vgroup === vgroupId); + + // Look for reference position + let pos = {x: 0, y: 0}; + let i = 0; + while (i < nodes.length && nodes[i].position.x === 0 && nodes[i].position.y === 0) { + i++; + } + if (i < nodes.length) { + pos.x = nodes[i].position.x; + pos.y = nodes[i].position.y; + } + + // Look for highest node height, the vertical space between the nodes will be this value + let maxHeight = Math.max(...nodes.map(n => n.data.height)) + + + i = 0; + while (nodes[i].position.x !== pos.x && nodes[i].position.y !== pos.y) { + i++; + } + + let referenceNode = nodes.slice(i, 1)[0]; + + // TODO mss als de orientatie horizontaal is, beetje dichter en als de orientatie verticaal is, wat verder + // mss gwn algemeen een manier vinden om de spacing te definiëren + + let deltaY = maxHeight / 2; + let previousY = pos.y; + let previousHeight = referenceNode.data.height; + let previousWidth = referenceNode.data.width; + + for (let n of nodes.filter((_, index) => index !== i)) { + n.position.x = pos.x + (previousWidth - n.data.width) / 2; + n.position.y = previousY + previousHeight + deltaY; + previousY = n.position.y + previousWidth = n.data.width; + previousHeight = n.data.height; + } + +} + +function fixHgroups(allNodes, hgroupId) { + // search all nodes within that vgroup + let nodes = allNodes.filter(n => n.hgroup === hgroupId); + + + // Look for reference position + let pos = {x: 0, y: 0}; + let i = 0; + while (i < nodes.length && nodes[i].position.x === 0 && nodes[i].position.y === 0) { + i++; + } + if (i < nodes.length) { + pos.x = nodes[i].position.x; + pos.y = nodes[i].position.y; + } + + + // Look for highest node height, the vertical space between the nodes will be this value + let maxWidth = Math.max(...nodes.map(n => n.data.width)) + + + i = 0; + while (nodes[i].position.x !== pos.x && nodes[i].position.y !== pos.y) { + i++; + } + + + let referenceNode = nodes.slice(i, 1)[0]; + + let deltaX = maxWidth / 2; //TODO mss als de orientatie horizontaal is, beetje dichter en als de orientatie verticaal is, wat verder + let previousX = pos.x; + let previousHeight = referenceNode.data.height; + let previousWidth = referenceNode.data.width; + + for (let n of nodes.filter((_, index) => index !== i)) { + n.position.y = pos.y + (previousHeight - n.data.height) / 2; + n.position.x = previousX + previousWidth + deltaX; + previousX = n.position.x + previousWidth = n.data.width; + previousHeight = n.data.height; + } + + +} diff --git a/src/custom/editors/editorUtilPositioning.js b/src/custom/editors/editorUtilPositioning.js index d4ce2b9..a347068 100644 --- a/src/custom/editors/editorUtilPositioning.js +++ b/src/custom/editors/editorUtilPositioning.js @@ -1,5 +1,5 @@ import dagre from "dagre"; -import {GRAPH, KEY_VALUES, NODE} from "./editorUtil"; +import {GRAPH, KEY_VALUES, NODE} from "./configParsing"; // TODO: overal met keys werken uit de hashmap @@ -38,131 +38,4 @@ export function getLayoutedElementsDagre(dagreGraph, nodes, edges, globalDefault } -// TODO this function is only used for `editorUtil`: why not move it there so you can keep it private? -export function fixNodeGroups(nodes) { - // loop over nodes and store all groups - // let groups = {"vgroups": new Set(), "hgroups": new Set()} - let groupsHash = new Set(); - let groups = []; - /*for (let n of nodes) { - // TODO: met ID's werken voor vgroup en hgroup - if (n.hasOwnProperty("vgroup")) { - groups["vgroups"].add(n["vgroup"]); - } - if (n.hasOwnProperty("hgroup")) { - groups["hgroups"].add(n["hgroup"]); - } - } - groups["vgroups"].forEach(g => fixVgroups(nodes, g)); - groups["hgroups"].forEach(g => fixHgroups(nodes, g));*/ - - for (let n of nodes) { - if (n.hasOwnProperty("vgroup") && !groupsHash.has(n["vgroup"])) { - groups.push(["vgroup", n["vgroup"]]); - groupsHash.add(n["vgroup"]) - } - if (n.hasOwnProperty("hgroup") && !groupsHash.has(n["hgroup"])) { - groups.push(["hgroup", n["hgroup"]]); - groupsHash.add(n["hgroup"]); - } - } - - for (let g of groups) { - if (g[0] === "vgroup") { - fixVgroups(nodes, g[1]); - } else { - fixHgroups(nodes, g[1]) - } - } - -} - -function fixVgroups(allNodes, vgroupId) { - // search all nodes within that vgroup - let nodes = allNodes.filter(n => n.vgroup === vgroupId); - - // Look for reference position - let pos = {x: 0, y: 0}; - let i = 0; - while (i < nodes.length && nodes[i].position.x === 0 && nodes[i].position.y === 0) { - i++; - } - if (i < nodes.length) { - pos.x = nodes[i].position.x; - pos.y = nodes[i].position.y; - } - - // Look for highest node height, the vertical space between the nodes will be this value - let maxHeight = Math.max(...nodes.map(n => n.data.height)) - - - i = 0; - while (nodes[i].position.x !== pos.x && nodes[i].position.y !== pos.y) { - i++; - } - - let referenceNode = nodes.slice(i, 1)[0]; - - // TODO mss als de orientatie horizontaal is, beetje dichter en als de orientatie verticaal is, wat verder - // mss gwn algemeen een manier vinden om de spacing te definiëren - - let deltaY = maxHeight / 2; - let previousY = pos.y; - let previousHeight = referenceNode.data.height; - let previousWidth = referenceNode.data.width; - - for (let n of nodes.filter((_, index) => index !== i)) { - n.position.x = pos.x + (previousWidth - n.data.width) / 2; - n.position.y = previousY + previousHeight + deltaY; - previousY = n.position.y - previousWidth = n.data.width; - previousHeight = n.data.height; - } - -} - -function fixHgroups(allNodes, hgroupId) { - // search all nodes within that vgroup - let nodes = allNodes.filter(n => n.hgroup === hgroupId); - - - // Look for reference position - let pos = {x: 0, y: 0}; - let i = 0; - while (i < nodes.length && nodes[i].position.x === 0 && nodes[i].position.y === 0) { - i++; - } - if (i < nodes.length) { - pos.x = nodes[i].position.x; - pos.y = nodes[i].position.y; - } - - - // Look for highest node height, the vertical space between the nodes will be this value - let maxWidth = Math.max(...nodes.map(n => n.data.width)) - - - i = 0; - while (nodes[i].position.x !== pos.x && nodes[i].position.y !== pos.y) { - i++; - } - - - let referenceNode = nodes.slice(i, 1)[0]; - - let deltaX = maxWidth / 2; //TODO mss als de orientatie horizontaal is, beetje dichter en als de orientatie verticaal is, wat verder - let previousX = pos.x; - let previousHeight = referenceNode.data.height; - let previousWidth = referenceNode.data.width; - - for (let n of nodes.filter((_, index) => index !== i)) { - n.position.y = pos.y + (previousHeight - n.data.height) / 2; - n.position.x = previousX + previousWidth + deltaX; - previousX = n.position.x - previousWidth = n.data.width; - previousHeight = n.data.height; - } - - -} diff --git a/src/custom/editors/schemaValidation.js b/src/custom/editors/schemaValidation.js index 3836fbc..2c6d8f9 100644 --- a/src/custom/editors/schemaValidation.js +++ b/src/custom/editors/schemaValidation.js @@ -3,7 +3,7 @@ import Ajv from "ajv"; import { EDGE, KEY_VALUES, NODE -} from "./editorUtil"; +} from "./configParsing"; const ajv = new Ajv({allErrors: true}); require("ajv-errors")(ajv, /*{keepErrors: false}*/); diff --git a/src/custom/node/SvgNode.js b/src/custom/node/Node.js similarity index 80% rename from src/custom/node/SvgNode.js rename to src/custom/node/Node.js index 85d5ac1..689e5d5 100644 --- a/src/custom/node/SvgNode.js +++ b/src/custom/node/Node.js @@ -2,10 +2,12 @@ import React, {memo} from 'react'; import {Handle} from 'react-flow-renderer'; -import {KEY_VALUES, NODE} from "../editors/editorUtil"; +import {KEY_VALUES, NODE} from "../editors/configParsing"; import {getShape} from "./nodeUtil"; -// TODO rename this file to better cover its contents + +import cylinder from "../../assets/cylinder.svg" + export default memo(({data, isConnectable}) => { let width = data[KEY_VALUES[NODE].WIDTH.id]; @@ -17,13 +19,29 @@ export default memo(({data, isConnectable}) => { return ( <> - - + + {/* + + https://www.geeksforgeeks.org/how-to-import-a-svg-file-in-javascript/ + + + Logo + + */} + + {/* + some file + */} + + + + { element } - diff --git a/src/custom/node/nodeUtil.js b/src/custom/node/nodeUtil.js index ceaeaaa..46fe8ec 100644 --- a/src/custom/node/nodeUtil.js +++ b/src/custom/node/nodeUtil.js @@ -4,6 +4,7 @@ import solid from "../../assets/solid.svg"; // TODO rename this file to better cover its contents // TODO why not put these svgs as actual files and import them? Makes this code a lot cleaner + you can edit the svgs in dedicated programs more easily + export function getShape(shapeId, fill, stroke, strokeWidth) { const SHAPES = { "8-star": diff --git a/src/data/data.js b/src/data/data.js deleted file mode 100644 index 40bf689..0000000 --- a/src/data/data.js +++ /dev/null @@ -1,147 +0,0 @@ -import {MarkerType} from "react-flow-renderer"; - -// TODO I don't think this file is still being used -export const nodesData = [ - { - id: 'edges-1', - type: "custom", - //type: 'input', - data: { label: 'Input 1', shape: "cylinder" }, - position: { x: 250, y: 0 }, - }, - { id: 'edges-2', data: { label: 'Node 2' }, position: { x: 150, y: 100 }, style: {"backgroundColor": "red"}, width: 30, height: 30, color: "red", shape: "circle"/*, shape:{type:"image", source: "https://cdnuploads.aa.com.tr/uploads/Contents/2020/04/02/thumbs_b_c_85523f47f4fe985f91c1749dd22ad424.jpg?v=094735", scale: "None"}*/ }, - { id: 'edges-2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } }, - { id: 'edges-3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } }, - { id: 'edges-4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } }, - { id: 'edges-3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } }, - { id: 'edges-5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } }, - { - id: 'edges-6', - type: 'output', - data: { label: 'Output 6' }, - position: { x: 50, y: 550 }, - }, - { - id: 'edges-7', - type: 'output', - data: { label: 'Output 7' }, - position: { x: 250, y: 550 }, - }, - { - id: 'edges-8', - type: 'custom', - data: { label: '', shape: "comunica" }, - position: { x: 525, y: 600 }, - - }, - { - id: 'edges-9', - type: 'custom', - data: { label: '', shape: "rmlio" }, - position: { x: 560, y: 600 }, - - }, -]; - - -export const edgesData = [ - { - id: 'edges-e1-2', - source: 'edges-1', - target: 'edges-2', - label: 'bezier edge (default)', - className: 'normal-edge', - markerStart: { - type: MarkerType.ArrowClosed, - color: "blue", - orient: "auto-start-reverse" - // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient - }, - markerEnd: { - type: MarkerType.ArrowClosed, - color: "green", - }, - style: {strokeWidth: 10} - }, - { - id: 'edges-e2-2a', - source: 'edges-2', - target: 'edges-2a', - type: 'smoothstep', - label: 'smoothstep edge', - // markerEnd: { - // type: MarkerType.ArrowClosed, - //}, - //markerStart: { - // type: MarkerType.ArrowClosed, - // color: "green" - // } - }, - { - id: 'edges-e2-3', - source: 'edges-2', - target: 'edges-3', - type: 'step', - label: 'step edge', - }, - { - id: 'edges-e3-4', - source: 'edges-3', - target: 'edges-4', - type: 'straight', - label: 'straight edge', - }, - { - id: 'edges-e3-3a', - source: 'edges-3', - target: 'edges-3a', - type: 'straight', - label: 'label only edge', - style: { stroke: 'none' }, - }, - { - id: 'edges-e3-5', - source: 'edges-4', - target: 'edges-5', - animated: true, - label: 'animated styled edge', - style: { stroke: 'red', strokeWidth: 30 }, - }, - { - id: 'edges-e5-6', - source: 'edges-5', - target: 'edges-6', - label: 'styled label', - labelStyle: { fill: 'red', fontWeight: 700 }, - // markerEnd: { - // type: MarkerType.Arrow, - //}, - }, - { - id: 'edges-e5-7', - source: 'edges-5', - target: 'edges-7', - label: 'label with styled bg', - labelBgPadding: [8, 4], - labelBgBorderRadius: 4, - labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7}, - style: { stroke: "red", strokeWidth: 10 }, - markerEnd: { - type: MarkerType.ArrowClosed, - color: "red" - }, - }, - { - id: 'edges-e5-8', - source: 'edges-5', - target: 'edges-8', - - label: "customm", - //type: 'custom', - data: { text: 'custom edge' }, - - markerEnd: { - type: MarkerType.ArrowClosed, - }, - }, -];