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,59 +0,0 @@
|
||||
import React, { memo } from 'react';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
|
||||
import { isNode } from '../../utils/graph';
|
||||
|
||||
function renderNode(d, props, state) {
|
||||
const nodeType = d.type || 'default';
|
||||
|
||||
if (!props.nodeTypes[nodeType]) {
|
||||
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
|
||||
}
|
||||
|
||||
const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
|
||||
const selected = state.selectedElements
|
||||
.filter(isNode)
|
||||
.map(e => e.id)
|
||||
.includes(d.id);
|
||||
|
||||
return (
|
||||
<NodeComponent
|
||||
key={d.id}
|
||||
id={d.id}
|
||||
type={d.type}
|
||||
data={d.data}
|
||||
xPos={d.__rg.position.x}
|
||||
yPos={d.__rg.position.y}
|
||||
onClick={props.onElementClick}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
transform={state.transform}
|
||||
selected={selected}
|
||||
style={d.style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const NodeRenderer = memo((props) => {
|
||||
const state = useStoreState(s => ({
|
||||
nodes: s.nodes,
|
||||
transform: s.transform,
|
||||
selectedElements: s.selectedElements
|
||||
}));
|
||||
|
||||
const { transform, nodes } = state;
|
||||
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
|
||||
|
||||
return (
|
||||
<div
|
||||
className="react-flow__nodes"
|
||||
style={transformStyle}
|
||||
>
|
||||
{nodes.map(d => renderNode(d, props, state))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
NodeRenderer.displayName = 'NodeRenderer';
|
||||
NodeRenderer.whyDidYouRender = false;
|
||||
|
||||
export default NodeRenderer;
|
||||
@@ -0,0 +1,71 @@
|
||||
import React, { memo, ComponentType } from 'react';
|
||||
|
||||
import { useStoreState } from '../../store/hooks';
|
||||
import { isNode } from '../../utils/graph';
|
||||
import { Node, Transform, NodeTypesType, NodeComponentProps, } from '../../types';
|
||||
|
||||
interface NodeRendererProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
onElementClick: () => void;
|
||||
onNodeDragStop: () => void;
|
||||
};
|
||||
|
||||
interface NodeRendererState {
|
||||
nodes: Node[];
|
||||
transform: Transform;
|
||||
selectedElements: any;
|
||||
};
|
||||
|
||||
function renderNode(node: Node, props: NodeRendererProps, state: NodeRendererState) {
|
||||
const nodeType = node.type || 'default';
|
||||
|
||||
if (!props.nodeTypes[nodeType]) {
|
||||
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
|
||||
}
|
||||
|
||||
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
|
||||
const selected = state.selectedElements
|
||||
.filter(isNode)
|
||||
.map((e: Node) => e.id)
|
||||
.includes(node.id);
|
||||
|
||||
return (
|
||||
<NodeComponent
|
||||
key={node.id}
|
||||
id={node.id}
|
||||
type={node.type}
|
||||
data={node.data}
|
||||
xPos={node.__rg.position.x}
|
||||
yPos={node.__rg.position.y}
|
||||
onClick={props.onElementClick}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
transform={state.transform}
|
||||
selected={selected}
|
||||
style={node.style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const NodeRenderer = memo((props: NodeRendererProps) => {
|
||||
const state: NodeRendererState = useStoreState(s => ({
|
||||
nodes: s.nodes,
|
||||
transform: s.transform,
|
||||
selectedElements: s.selectedElements
|
||||
}));
|
||||
|
||||
const { transform, nodes } = state;
|
||||
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
|
||||
|
||||
return (
|
||||
<div
|
||||
className="react-flow__nodes"
|
||||
style={transformStyle}
|
||||
>
|
||||
{nodes.map(node => renderNode(node, props, state))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
NodeRenderer.displayName = 'NodeRenderer';
|
||||
|
||||
export default NodeRenderer;
|
||||
@@ -1,26 +0,0 @@
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
import OutputNode from '../../components/Nodes/OutputNode';
|
||||
import wrapNode from '../../components/Nodes/wrapNode';
|
||||
|
||||
export function createNodeTypes(nodeTypes) {
|
||||
const standardTypes = {
|
||||
input: wrapNode(nodeTypes.input || InputNode),
|
||||
default: wrapNode(nodeTypes.default || DefaultNode),
|
||||
output: wrapNode(nodeTypes.output || OutputNode)
|
||||
};
|
||||
|
||||
const specialTypes = Object
|
||||
.keys(nodeTypes)
|
||||
.filter(k => !['input', 'default', 'output'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapNode(nodeTypes[key] || DefaultNode);
|
||||
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { ComponentType } from 'react';
|
||||
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
import OutputNode from '../../components/Nodes/OutputNode';
|
||||
import wrapNode from '../../components/Nodes/wrapNode';
|
||||
import { NodeTypesType, NodeComponentProps } from '../../types';
|
||||
|
||||
export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
|
||||
const standardTypes: NodeTypesType = {
|
||||
input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeComponentProps>),
|
||||
default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeComponentProps>),
|
||||
output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeComponentProps>)
|
||||
};
|
||||
|
||||
const specialTypes: NodeTypesType = Object
|
||||
.keys(nodeTypes)
|
||||
.filter(k => !['input', 'default', 'output'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeComponentProps>);
|
||||
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user