From 4d79220b0c0898395e739ec2b19651463c3f3b07 Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Wed, 12 Jun 2024 13:57:26 +0100 Subject: [PATCH] refactor: fix spelling and wording errors --- .../web/src/components/EditorNew/Edge/Edge.jsx | 6 +++--- .../web/src/components/EditorNew/EditorNew.jsx | 12 ++++++------ .../EditorNew/FlowStepNode/FlowStepNode.jsx | 16 +++++----------- .../src/components/EditorNew/useAutoLayout.js | 12 ++++++------ ...ScrollBoundries.js => useScrollBoundaries.js} | 2 +- packages/web/src/components/EditorNew/utils.js | 6 +++--- 6 files changed, 24 insertions(+), 30 deletions(-) rename packages/web/src/components/EditorNew/{useScrollBoundries.js => useScrollBoundaries.js} (86%) diff --git a/packages/web/src/components/EditorNew/Edge/Edge.jsx b/packages/web/src/components/EditorNew/Edge/Edge.jsx index 75b30440..ff535fbf 100644 --- a/packages/web/src/components/EditorNew/Edge/Edge.jsx +++ b/packages/web/src/components/EditorNew/Edge/Edge.jsx @@ -12,7 +12,7 @@ export default function Edge({ targetX, targetY, source, - data: { layouted }, + data: { laidOut }, }) { const { stepCreationInProgress, flowActive, onAddStep } = useContext(EdgesContext); @@ -34,7 +34,7 @@ export default function Edge({ position: 'absolute', transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, pointerEvents: 'all', - visibility: layouted ? 'visible' : 'hidden', + visibility: laidOut ? 'visible' : 'hidden', }} disabled={stepCreationInProgress || flowActive} > @@ -52,6 +52,6 @@ Edge.propTypes = { targetY: PropTypes.number.isRequired, source: PropTypes.string.isRequired, data: PropTypes.shape({ - layouted: PropTypes.bool, + laidOut: PropTypes.bool, }).isRequired, }; diff --git a/packages/web/src/components/EditorNew/EditorNew.jsx b/packages/web/src/components/EditorNew/EditorNew.jsx index 7f35d71f..066d60a4 100644 --- a/packages/web/src/components/EditorNew/EditorNew.jsx +++ b/packages/web/src/components/EditorNew/EditorNew.jsx @@ -8,7 +8,7 @@ import { UPDATE_STEP } from 'graphql/mutations/update-step'; import { CREATE_STEP } from 'graphql/mutations/create-step'; import { useAutoLayout } from './useAutoLayout'; -import { useScrollBoundries } from './useScrollBoundries'; +import { useScrollBoundaries } from './useScrollBoundaries'; import FlowStepNode from './FlowStepNode/FlowStepNode'; import Edge from './Edge/Edge'; import InvisibleNode from './InvisibleNode/InvisibleNode'; @@ -47,7 +47,7 @@ const EditorNew = ({ flow }) => { ); useAutoLayout(); - useScrollBoundries(); + useScrollBoundaries(); const createdStepIdRef = useRef(null); @@ -157,7 +157,7 @@ const EditorNew = ({ flow }) => { zIndex: 1, data: { collapsed: false, - layouted: false, + laidOut: false, }, }; } @@ -192,7 +192,7 @@ const EditorNew = ({ flow }) => { target: targetId, type: 'addNodeEdge', data: { - layouted: edge ? edge?.data.layouted : false, + laidOut: edge ? edge?.data.laidOut : false, }, }; } @@ -212,10 +212,10 @@ const EditorNew = ({ flow }) => { target: INVISIBLE_NODE_ID, type: 'addNodeEdge', data: { - layouted: + laidOut: lastEdge?.id === generateEdgeId(lastStep.id, INVISIBLE_NODE_ID) - ? lastEdge?.data.layouted + ? lastEdge?.data.laidOut : false, }, }, diff --git a/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx b/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx index 5108f705..545331c9 100644 --- a/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx +++ b/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx @@ -7,15 +7,9 @@ import { NodeWrapper, NodeInnerWrapper } from './style.js'; import { useContext } from 'react'; import { NodesContext } from '../EditorNew.jsx'; -function FlowStepNode({ data: { collapsed, layouted }, id }) { - const { - openNextStep, - onStepOpen, - onStepClose, - onStepChange, - flowId, - steps, - } = useContext(NodesContext); +function FlowStepNode({ data: { collapsed, laidOut }, id }) { + const { openNextStep, onStepOpen, onStepClose, onStepChange, flowId, steps } = + useContext(NodesContext); const step = steps.find(({ id: stepId }) => stepId === id); @@ -23,7 +17,7 @@ function FlowStepNode({ data: { collapsed, layouted }, id }) { @@ -59,7 +53,7 @@ FlowStepNode.propTypes = { id: PropTypes.string, data: PropTypes.shape({ collapsed: PropTypes.bool.isRequired, - layouted: PropTypes.bool.isRequired, + laidOut: PropTypes.bool.isRequired, }).isRequired, }; diff --git a/packages/web/src/components/EditorNew/useAutoLayout.js b/packages/web/src/components/EditorNew/useAutoLayout.js index 7e6a9b23..a4dec029 100644 --- a/packages/web/src/components/EditorNew/useAutoLayout.js +++ b/packages/web/src/components/EditorNew/useAutoLayout.js @@ -4,7 +4,7 @@ import { usePrevious } from 'hooks/usePrevious'; import { isEqual } from 'lodash'; import { useNodesInitialized, useNodes, useReactFlow } from 'reactflow'; -const getLayoutedElements = (nodes, edges) => { +const getLaidOutElements = (nodes, edges) => { const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); graph.setGraph({ rankdir: 'TB', @@ -36,18 +36,18 @@ export const useAutoLayout = () => { const onLayout = useCallback( (nodes, edges) => { - const layoutedElements = getLayoutedElements(nodes, edges); + const laidOutElements = getLaidOutElements(nodes, edges); setNodes([ - ...layoutedElements.nodes.map((node) => ({ + ...laidOutElements.nodes.map((node) => ({ ...node, - data: { ...node.data, layouted: true }, + data: { ...node.data, laidOut: true }, })), ]); setEdges([ - ...layoutedElements.edges.map((edge) => ({ + ...laidOutElements.edges.map((edge) => ({ ...edge, - data: { ...edge.data, layouted: true }, + data: { ...edge.data, laidOut: true }, })), ]); }, diff --git a/packages/web/src/components/EditorNew/useScrollBoundries.js b/packages/web/src/components/EditorNew/useScrollBoundaries.js similarity index 86% rename from packages/web/src/components/EditorNew/useScrollBoundries.js rename to packages/web/src/components/EditorNew/useScrollBoundaries.js index e6c00014..ca0d8ece 100644 --- a/packages/web/src/components/EditorNew/useScrollBoundries.js +++ b/packages/web/src/components/EditorNew/useScrollBoundaries.js @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { useViewport, useReactFlow } from 'reactflow'; -export const useScrollBoundries = () => { +export const useScrollBoundaries = () => { const { setViewport } = useReactFlow(); const { x, y, zoom } = useViewport(); diff --git a/packages/web/src/components/EditorNew/utils.js b/packages/web/src/components/EditorNew/utils.js index 796acc09..cbaede60 100644 --- a/packages/web/src/components/EditorNew/utils.js +++ b/packages/web/src/components/EditorNew/utils.js @@ -31,7 +31,7 @@ export const generateInitialNodes = (flow) => { zIndex: collapsed ? 0 : 1, data: { collapsed, - layouted: false, + laidOut: false, }, }; }); @@ -61,7 +61,7 @@ export const generateInitialEdges = (flow) => { target: targetId, type: 'addNodeEdge', data: { - layouted: false, + laidOut: false, }, }; } @@ -80,7 +80,7 @@ export const generateInitialEdges = (flow) => { target: INVISIBLE_NODE_ID, type: 'addNodeEdge', data: { - layouted: false, + laidOut: false, }, }, ]