Skip to content

Commit

Permalink
Applied some of the code review #29
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiboStr
TiboStr committed Aug 5, 2022
1 parent ddeba8f commit ee12a53
Show file tree
Hide file tree
Showing 12 changed files with 221 additions and 378 deletions.
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand All @@ -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. |
Expand All @@ -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: <number>, y: <number>}` | `{x: 0, y: 0}`<br/> 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. |
Expand Down Expand Up @@ -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`. |
Expand Down
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
47 changes: 0 additions & 47 deletions src/CustomEdge.js
View file

This file was deleted.

28 changes: 13 additions & 15 deletions src/custom/editors/MyEditor.js → src/custom/editors/CodeEditor.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
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

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,
Expand All @@ -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);
}


Expand All @@ -71,4 +69,4 @@ const MyEditor = ({language, data, setData, modelName, schema}) => {
</>
}

export default MyEditor;
export default CodeEditor;
40 changes: 16 additions & 24 deletions src/custom/editors/EditorArea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => {
Expand All @@ -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) {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 */}
<Modal show={errorModalVisible} onHide={handleErrorPopUpClose}
scrollable={true}>
<Modal.Header closeButton>
<Modal.Title>{errorMessageTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>
{errorMessages.map(e => <p>{e}</p>)}
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={handleErrorPopUpClose}>
OK
</Button>
</Modal.Footer>
</Modal>
<ErrorModal errorModalVisible={errorModalVisible}
errorMessageTitle={errorMessageTitle}
errorMessages={errorMessages}
handleErrorPopUpClose={handleErrorPopUpClose}
/>


<div className="d-flex">
{
Expand All @@ -243,7 +235,7 @@ const EditorArea = ({setNodes, setEdges}) => {
</Dropdown>


<div className="edit-area" id="global-default-editor" style={{width:"49%", display: "inline-block"}}>
<div className="edit-area" id="global-default-editor" style={{width: "49%", display: "inline-block"}}>
<div className="code-editor resizable" style={{height: "200px"}}>
<h5>Global defaults editor</h5>
<MyEditor language={language} data={globalDefaults} setData={setGlobalDefaults}
Expand Down
Loading

0 comments on commit ee12a53

Please sign in to comment.