From 0a7fcc6bfd7b9f0702021afc94980b21589958c5 Mon Sep 17 00:00:00 2001 From: Alessandro Pelliccia Date: Tue, 21 Sep 2021 15:42:41 +0200 Subject: [PATCH] added port type "any" --- src/components/IoPorts/IoPorts.js | 31 ++++++++++++++++++++++++------- src/connectionCalculator.js | 6 +----- src/utilities.js | 5 +++++ 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/components/IoPorts/IoPorts.js b/src/components/IoPorts/IoPorts.js index 59836517..3eee13e2 100644 --- a/src/components/IoPorts/IoPorts.js +++ b/src/components/IoPorts/IoPorts.js @@ -14,6 +14,7 @@ import { PortTypesContext } from "../../context"; import usePrevious from "../../hooks/usePrevious"; import { calculateCurve, getPortRect } from "../../connectionCalculator"; import { STAGE_ID, DRAG_CONNECTION_ID } from '../../constants' +import { getPort } from "../../utilities"; function useTransputs (transputsFn, transputType, nodeId, inputData, connections) { const nodesDispatch = React.useContext(NodeDispatchContext); @@ -54,7 +55,7 @@ const IoPorts = ({ const triggerRecalculation = React.useContext(ConnectionRecalculateContext); const resolvedInputs = useTransputs(inputs, 'input', nodeId, inputData, connections); const resolvedOutputs = useTransputs(outputs, 'output', nodeId, inputData, connections); - + return (
{resolvedInputs.length ? ( @@ -265,18 +266,21 @@ const Port = ({ const droppedOnPort = !!e.target.dataset.portName; if (isInput) { + const { inputNodeId, inputPortName, outputNodeId, - outputPortName + outputPortName, } = lineInToPort.current.dataset; + nodesDispatch({ type: "REMOVE_CONNECTION", input: { nodeId: inputNodeId, portName: inputPortName }, output: { nodeId: outputNodeId, portName: outputPortName } }); if (droppedOnPort) { + const { portName: connectToPortName, nodeId: connectToNodeId, @@ -284,10 +288,17 @@ const Port = ({ portTransputType: connectToTransputType } = e.target.dataset; const isNotSameNode = outputNodeId !== connectToNodeId; + if (isNotSameNode && connectToTransputType !== "output") { - const inputWillAcceptConnection = inputTypes[ - connectToPortType - ].acceptTypes.includes(type); + + const outputPortType = getPort(outputNodeId, outputPortName, "output").dataset.portType + + const inputWillAcceptConnection = inputTypes[ + connectToPortType + ].acceptTypes.includes(outputPortType) || inputTypes[ + connectToPortType + ].acceptTypes.includes('any'); + if (inputWillAcceptConnection) { nodesDispatch({ type: "ADD_CONNECTION", @@ -308,8 +319,12 @@ const Port = ({ const isNotSameNode = inputNodeId !== nodeId; if (isNotSameNode && inputTransputType !== "output") { const inputWillAcceptConnection = inputTypes[ - inputNodeType - ].acceptTypes.includes(type); + inputNodeType + ].acceptTypes.includes(type) || inputTypes[ + inputNodeType + ].acceptTypes.includes('any') + + if (inputWillAcceptConnection) { nodesDispatch({ type: "ADD_CONNECTION", @@ -340,6 +355,7 @@ const Port = ({ ); const portIsConnected = !!lineInToPort.current; if (portIsConnected) { + lineInToPort.current.parentNode.style.zIndex = 9999; const outputPort = getPortRect( lineInToPort.current.dataset.outputNodeId, @@ -381,6 +397,7 @@ const Port = ({ } }; + return (
document - .querySelector( - `[data-node-id="${nodeId}"] [data-port-name="${portName}"][data-port-transput-type="${transputType}"]` - ) +import { getPort } from "./utilities"; export const getPortRect = (nodeId, portName, transputType = "input", cache) => { if(cache){ diff --git a/src/utilities.js b/src/utilities.js index 0c2caf70..9b8c3760 100644 --- a/src/utilities.js +++ b/src/utilities.js @@ -21,3 +21,8 @@ export const checkForCircularNodes = (nodes, startNodeId) => { walk(startNodeId) return isCircular; } + +export const getPort = (nodeId, portName, transputType = "input") => document + .querySelector( + `[data-node-id="${nodeId}"] [data-port-name="${portName}"][data-port-transput-type="${transputType}"]` + ) \ No newline at end of file