Develop (#35)
* refactor(ts): add ReactFlowProps * Refactor/grid.tsx (#24) * chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5 Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5. - [Release notes](https://github.com/bahmutov/start-server-and-test/releases) - [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * chore(deps-dev): bump typescript from 3.6.3 to 3.6.4 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * refactor: grid.js -> grid.tsx * refactor(bg): remove unused renderer * refactor(connectionline): use ts * refactor(ts): edges * chore(build): update * Refactor/typescript (WIP) (#25) * refactor(store): use ts * refactor(edgewrapper): use ts * fix(handle): provide onConnect default func * refactor(nodeselection): use ts * refactor(userselction): use ts * refactor(plugins): use ts * refactor(hooks): use ts * refactor(nodes): use ts * refactor(edgerenderer): use ts * refactor(graphview): use ts * refactor(utils): rename js to ts * refactor(app): fix ts errors * fix(ts): errors * fix(app): ts errors * refactor(app): ts erros * refactor(app): ts errors * fix(utils): removeElements * feat(example): add empty renderer closes #34 * fix(connect): dont drag node on connect * chore(build): update
This commit is contained in:
Moritz
@@ -1,10 +1,36 @@
|
||||
import React, { memo } from 'react';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
import React, { memo, SVGAttributes } from 'react';
|
||||
|
||||
import ConnectionLine from '../../components/ConnectionLine';
|
||||
import { useStoreState } from '../../store/hooks';
|
||||
import ConnectionLine from '../../components/ConnectionLine/index';
|
||||
import { isEdge } from '../../utils/graph';
|
||||
import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';
|
||||
|
||||
function getHandlePosition(position, node, handle = null) {
|
||||
interface EdgeRendererProps {
|
||||
width: number;
|
||||
height: number;
|
||||
edgeTypes: any;
|
||||
connectionLineStyle?: SVGAttributes<{}>;
|
||||
connectionLineType?: string;
|
||||
onElementClick?: () => void;
|
||||
};
|
||||
|
||||
interface EdgeRendererState {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
transform: Transform;
|
||||
selectedElements: any;
|
||||
connectionSourceId: ElementId | null;
|
||||
position: XYPosition;
|
||||
};
|
||||
|
||||
interface EdgePositions {
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
targetX: number;
|
||||
targetY: number;
|
||||
};
|
||||
|
||||
function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
|
||||
if (!handle) {
|
||||
switch (position) {
|
||||
case 'top': return {
|
||||
@@ -24,6 +50,8 @@ function getHandlePosition(position, node, handle = null) {
|
||||
y: node.__rg.height / 2
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (position) {
|
||||
@@ -46,7 +74,7 @@ function getHandlePosition(position, node, handle = null) {
|
||||
}
|
||||
}
|
||||
|
||||
function getHandle(bounds, handleId) {
|
||||
function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement | null {
|
||||
let handle = null;
|
||||
|
||||
if (!bounds) {
|
||||
@@ -64,7 +92,10 @@ function getHandle(bounds, handleId) {
|
||||
return handle;
|
||||
}
|
||||
|
||||
function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode, targetHandle, targetPosition }) {
|
||||
function getEdgePositions(
|
||||
sourceNode: Node, sourceHandle: HandleElement, sourcePosition: Position,
|
||||
targetNode: Node, targetHandle: HandleElement, targetPosition: Position
|
||||
): EdgePositions {
|
||||
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
|
||||
const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
|
||||
const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
|
||||
@@ -78,17 +109,17 @@ function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode
|
||||
};
|
||||
}
|
||||
|
||||
function renderEdge(e, props, state) {
|
||||
const edgeType = e.type || 'default';
|
||||
function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
|
||||
const edgeType = edge.type || 'default';
|
||||
|
||||
const hasSourceHandleId = e.source.includes('__');
|
||||
const hasTargetHandleId = e.target.includes('__');
|
||||
const hasSourceHandleId = edge.source.includes('__');
|
||||
const hasTargetHandleId = edge.target.includes('__');
|
||||
|
||||
const sourceId = hasSourceHandleId ? e.source.split('__')[0] : e.source;
|
||||
const targetId = hasTargetHandleId ? e.target.split('__')[0] : e.target;
|
||||
const sourceId = hasSourceHandleId ? edge.source.split('__')[0] : edge.source;
|
||||
const targetId = hasTargetHandleId ? edge.target.split('__')[0] : edge.target;
|
||||
|
||||
const sourceHandleId = hasSourceHandleId ? e.source.split('__')[1] : null;
|
||||
const targetHandleId = hasTargetHandleId ? e.target.split('__')[1] : null;
|
||||
const sourceHandleId = hasSourceHandleId ? edge.source.split('__')[1] : null;
|
||||
const targetHandleId = hasTargetHandleId ? edge.target.split('__')[1] : null;
|
||||
|
||||
const sourceNode = state.nodes.find(n => n.id === sourceId);
|
||||
const targetNode = state.nodes.find(n => n.id === targetId);
|
||||
@@ -107,23 +138,23 @@ function renderEdge(e, props, state) {
|
||||
const sourcePosition = sourceHandle ? sourceHandle.position : 'bottom';
|
||||
const targetPosition = targetHandle ? targetHandle.position : 'top';
|
||||
|
||||
const { sourceX, sourceY, targetX, targetY } = getEdgePositions({
|
||||
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
|
||||
sourceNode, sourceHandle, sourcePosition,
|
||||
targetNode, targetHandle, targetPosition
|
||||
});
|
||||
);
|
||||
const selected = state.selectedElements
|
||||
.filter(isEdge)
|
||||
.find(elm => elm.source === sourceId && elm.target === targetId);
|
||||
.find((elm: Edge) => elm.source === sourceId && elm.target === targetId);
|
||||
|
||||
return (
|
||||
<EdgeComponent
|
||||
key={e.id}
|
||||
id={e.id}
|
||||
type={e.type}
|
||||
key={edge.id}
|
||||
id={edge.id}
|
||||
type={edge.type}
|
||||
onClick={props.onElementClick}
|
||||
selected={selected}
|
||||
animated={e.animated}
|
||||
style={e.style}
|
||||
animated={edge.animated}
|
||||
style={edge.style}
|
||||
source={sourceId}
|
||||
target={targetId}
|
||||
sourceHandleId={sourceHandleId}
|
||||
@@ -138,8 +169,10 @@ function renderEdge(e, props, state) {
|
||||
);
|
||||
}
|
||||
|
||||
const EdgeRenderer = memo((props) => {
|
||||
const state = useStoreState(s => ({
|
||||
const EdgeRenderer = memo(({
|
||||
width, height, connectionLineStyle, connectionLineType, ...rest
|
||||
}: EdgeRendererProps) => {
|
||||
const state: EdgeRendererState = useStoreState(s => ({
|
||||
nodes: s.nodes,
|
||||
edges: s.edges,
|
||||
transform: s.transform,
|
||||
@@ -147,10 +180,6 @@ const EdgeRenderer = memo((props) => {
|
||||
connectionSourceId: s.connectionSourceId,
|
||||
position: s.connectionPosition
|
||||
}));
|
||||
const {
|
||||
width, height, connectionLineStyle, connectionLineType
|
||||
} = props;
|
||||
|
||||
if (!width) {
|
||||
return null;
|
||||
}
|
||||
@@ -165,7 +194,7 @@ const EdgeRenderer = memo((props) => {
|
||||
className="react-flow__edges"
|
||||
>
|
||||
<g transform={transformStyle}>
|
||||
{edges.map(e => renderEdge(e, props, state))}
|
||||
{edges.map((e: Edge) => renderEdge(e, { width, height, connectionLineStyle, connectionLineType, ...rest }, state))}
|
||||
{connectionSourceId && (
|
||||
<ConnectionLine
|
||||
nodes={nodes}
|
||||
@@ -1,24 +0,0 @@
|
||||
import StraightEdge from '../../components/Edges/StraightEdge';
|
||||
import BezierEdge from '../../components/Edges/BezierEdge';
|
||||
import wrapEdge from '../../components/Edges/wrapEdge';
|
||||
|
||||
export function createEdgeTypes(edgeTypes) {
|
||||
const standardTypes = {
|
||||
default: wrapEdge(edgeTypes.default || BezierEdge),
|
||||
straight: wrapEdge(edgeTypes.bezier || StraightEdge)
|
||||
};
|
||||
|
||||
const specialTypes = Object
|
||||
.keys(edgeTypes)
|
||||
.filter(k => !['default', 'bezier'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapEdge(edgeTypes[key] ||BezierEdge);
|
||||
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { ComponentType } from 'react';
|
||||
|
||||
import StraightEdge from '../../components/Edges/StraightEdge';
|
||||
import BezierEdge from '../../components/Edges/BezierEdge';
|
||||
import wrapEdge from '../../components/Edges/wrapEdge';
|
||||
|
||||
import { EdgeTypesType, EdgeWrapperProps } from '../../types';
|
||||
|
||||
export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType{
|
||||
const standardTypes: EdgeTypesType = {
|
||||
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeWrapperProps>),
|
||||
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeWrapperProps>)
|
||||
};
|
||||
|
||||
const specialTypes: EdgeTypesType = Object
|
||||
.keys(edgeTypes)
|
||||
.filter(k => !['default', 'bezier'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeWrapperProps>);
|
||||
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user