From 9d3464bf474641e712f2be59929499ccaecaa27a Mon Sep 17 00:00:00 2001 From: Joan Cejudo Date: Sat, 19 Dec 2020 11:40:22 -0500 Subject: [PATCH] Update makePath to fix curve for verticallly aligned ports --- docs/Links-Ports.md | 114 ++++++++++++++++++----------- src/components/Segment/makePath.js | 24 +++++- 2 files changed, 93 insertions(+), 45 deletions(-) diff --git a/docs/Links-Ports.md b/docs/Links-Ports.md index 8de11a4..a211770 100644 --- a/docs/Links-Ports.md +++ b/docs/Links-Ports.md @@ -1,7 +1,13 @@ ### Ports ```js -import Diagram, { Canvas, createSchema, useSchema, useCanvas, CanvasControls } from 'beautiful-react-diagrams'; +import Diagram, { + Canvas, + createSchema, + useSchema, + useCanvas, + CanvasControls, +} from 'beautiful-react-diagrams' const initialSchema = createSchema({ nodes: [ @@ -9,8 +15,8 @@ const initialSchema = createSchema({ content: 'Start', coordinates: [100, 150], disableDrag: true, - outputs: [ - { id: 'port-1', label: 'Source 1' }, + outputs: [ + { id: 'port-1', label: 'Source 1' }, { id: 'port-2', label: 'Source 2' }, ], outputsAlignment: 'right', @@ -18,17 +24,29 @@ const initialSchema = createSchema({ { content: 'Middle', coordinates: [300, 150], - inputs: [ - { id: 'port-3' }, - { id: 'port-4' }, - ], - outputs: [ - { id: 'port-5' }, - { id: 'port-6' }, - ], + inputs: [{ id: 'port-3' }, { id: 'port-4' }], + outputs: [{ id: 'port-5' }, { id: 'port-6' }], inputsAlignment: 'left', outputsAlignment: 'right', }, + { + content: 'StartDEBUG', + coordinates: [600, 50], + disableDrag: false, + outputs: [ + { id: 'portDEBUG-1', label: 'Source 1' }, + { id: 'portDEBUG-2', label: 'Source 2' }, + ], + outputsAlignment: 'bottom', + }, + { + content: 'MiddleDEBUG', + coordinates: [750, 350], + inputs: [{ id: 'portDEBUG-3' }, { id: 'portDEBUG-4' }], + outputs: [{ id: 'portDEBUG-5' }, { id: 'portDEBUG-6' }], + inputsAlignment: 'top', + outputsAlignment: 'bottom', + }, /*{ content: 'End', coordinates: [600, 150], @@ -40,56 +58,68 @@ const initialSchema = createSchema({ },*/ ], links: [ - { input: 'port-1', output: 'port-4' }, - ] -}); + { input: 'port-1', output: 'port-4' }, + { input: 'portDEBUG-1', output: 'portDEBUG-4' }, + ], +}) const UncontrolledDiagram = () => { - const [canvasState, handlers] = useCanvas(); // creates canvas state - const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema + const [canvasState, handlers] = useCanvas() // creates canvas state + const [schema, { onChange }] = useSchema(initialSchema) // creates diagrams schema return (
- - + +
- ); -}; + ) +} - +; ``` ### Readonly Links ```js -import Diagram, { Canvas, createSchema, useSchema, useCanvas, CanvasControls } from 'beautiful-react-diagrams'; +import Diagram, { + Canvas, + createSchema, + useSchema, + useCanvas, + CanvasControls, +} from 'beautiful-react-diagrams' // the diagram model const initialSchema = createSchema({ nodes: [ - { id: 'node-1', content: 'Hey Jude', coordinates: [312, 27], }, - { id: 'node-2', content: 'Don\'t', coordinates: [330, 90], }, - { id: 'node-3', content: 'be afraid', coordinates: [100, 320], }, - { id: 'node-4', content: 'let me down', coordinates: [306, 332], }, - { id: 'node-5', content: 'make it bad', coordinates: [515, 330], }, - { id: 'node-6', content: 'Take a sad song', coordinates: [295, 460], }, + { id: 'node-1', content: 'Hey Jude', coordinates: [312, 27] }, + { id: 'node-2', content: "Don't", coordinates: [330, 90] }, + { id: 'node-3', content: 'be afraid', coordinates: [100, 320] }, + { id: 'node-4', content: 'let me down', coordinates: [306, 332] }, + { id: 'node-5', content: 'make it bad', coordinates: [515, 330] }, + { id: 'node-6', content: 'Take a sad song', coordinates: [295, 460] }, ], links: [ - { input: 'node-1', output: 'node-2', readonly: true, className: 'my-custom-link-class' }, - { input: 'node-2', output: 'node-3', readonly: true }, - { input: 'node-2', output: 'node-4', readonly: true }, - { input: 'node-2', output: 'node-5', readonly: true }, - { input: 'node-3', output: 'node-6', readonly: true }, - { input: 'node-4', output: 'node-6', readonly: true }, - { input: 'node-5', output: 'node-6', readonly: true }, - ] -}); + { + input: 'node-1', + output: 'node-2', + readonly: true, + className: 'my-custom-link-class', + }, + { input: 'node-2', output: 'node-3', readonly: true }, + { input: 'node-2', output: 'node-4', readonly: true }, + { input: 'node-2', output: 'node-5', readonly: true }, + { input: 'node-3', output: 'node-6', readonly: true }, + { input: 'node-4', output: 'node-6', readonly: true }, + { input: 'node-5', output: 'node-6', readonly: true }, + ], +}) const DiagramExample = () => { - const [ canvasStates, canvasStateHandlers] = useCanvas(); // creates canvas states - const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema + const [canvasStates, canvasStateHandlers] = useCanvas() // creates canvas states + const [schema, { onChange }] = useSchema(initialSchema) // creates diagrams schema return (
@@ -98,8 +128,8 @@ const DiagramExample = () => {
- ); -}; + ) +} - +; ``` diff --git a/src/components/Segment/makePath.js b/src/components/Segment/makePath.js index c580abc..0a6b13f 100644 --- a/src/components/Segment/makePath.js +++ b/src/components/Segment/makePath.js @@ -25,10 +25,28 @@ const makePath = (from, to, inputEntityType, outputEntityType, inputAlignment, o // if both ports are vertically aligned // TODO: this formula is wrong, needs to be fixed if (isVerticalAlignment(inputAlignment) || isVerticalAlignment(outputAlignment)) { - const sourceCurve = sourceX + Math.abs(targetX - sourceX) * offsetCurve; - const targetCurve = targetX - Math.abs(targetX - sourceX) * offsetCurve; + // ********************** Solution with original naming convention ********************* + // Need to identify which element has the lowest Y + // const sourceCurve = targetY - Math.abs(targetY - sourceY) * offsetCurve; + // const targetCurve = sourceY + Math.abs(targetY - sourceY) * offsetCurve; - return `M ${sourceX} ${sourceY} C ${sourceCurve} ${sourceY} ${targetCurve} ${targetY} ${targetX} ${targetY}`; + // return `M ${sourceX} ${sourceY} C ${sourceX} ${sourceCurve} ${targetX} ${targetCurve} ${targetX} ${targetY}`; + + // ********************** Solution with proposed naming convention ********************* + // Proposal to rename variables + // C accepts two control points and a target to draw the bezier. + let controlOffset = Math.abs(targetY - sourceY) * offsetCurve; + // The initial implementation assumes a source is above the target, the same + // goes for horizontal alignment, it assume the source is to the left of the target + if (targetY < sourceY) { + controlOffset = -controlOffset; + } + const control1X = sourceX; + const control1Y = targetY - controlOffset; + const control2X = targetX; + const control2Y = sourceY + controlOffset; + + return `M ${sourceX} ${sourceY} C ${control1X} ${control1Y} ${control2X} ${control2Y} ${targetX} ${targetY}`; } // if input is vertical and output is horizontal