refactor(edgesUpdatable): pass to store

This commit is contained in:
moklick
2023-03-27 16:53:55 +02:00
parent 5f2f5db519
commit 65b2d9ccef
6 changed files with 13 additions and 7 deletions
@@ -20,6 +20,7 @@ type StoreUpdaterProps = Pick<
| 'nodesConnectable' | 'nodesConnectable'
| 'nodesFocusable' | 'nodesFocusable'
| 'edgesFocusable' | 'edgesFocusable'
| 'edgesUpdatable'
| 'minZoom' | 'minZoom'
| 'maxZoom' | 'maxZoom'
| 'nodeExtent' | 'nodeExtent'
@@ -98,6 +99,7 @@ const StoreUpdater = ({
nodesConnectable, nodesConnectable,
nodesFocusable, nodesFocusable,
edgesFocusable, edgesFocusable,
edgesUpdatable,
elevateNodesOnSelect, elevateNodesOnSelect,
minZoom, minZoom,
maxZoom, maxZoom,
@@ -162,6 +164,7 @@ const StoreUpdater = ({
useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState); useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState); useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState);
useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState); useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState);
useDirectStoreUpdater('edgesUpdatable', edgesUpdatable, store.setState);
useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState); useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState); useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);
@@ -67,10 +67,8 @@ const EdgeRenderer = ({
onEdgeUpdateEnd, onEdgeUpdateEnd,
children, children,
}: EdgeRendererProps) => { }: EdgeRendererProps) => {
const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } =
selector, useStore(selector, shallow);
shallow
);
const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect); const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect);
if (!width) { if (!width) {
@@ -115,7 +113,9 @@ const EdgeRenderer = ({
const sourcePosition = sourceHandle?.position || Position.Bottom; const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top; const targetPosition = targetHandle?.position || Position.Top;
const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
const isUpdatable = edge.updatable || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined'); const isUpdatable =
typeof onEdgeUpdate !== 'undefined' &&
(edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
if (!sourceHandle || !targetHandle) { if (!sourceHandle || !targetHandle) {
onError?.('008', errorMessages['error008'](sourceHandle, edge)); onError?.('008', errorMessages['error008'](sourceHandle, edge));
@@ -115,6 +115,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
nodesFocusable, nodesFocusable,
nodeOrigin = initNodeOrigin, nodeOrigin = initNodeOrigin,
edgesFocusable, edgesFocusable,
edgesUpdatable,
elementsSelectable, elementsSelectable,
defaultViewport = initDefaultViewport, defaultViewport = initDefaultViewport,
minZoom = 0.5, minZoom = 0.5,
@@ -266,6 +267,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
nodesConnectable={nodesConnectable} nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable} nodesFocusable={nodesFocusable}
edgesFocusable={edgesFocusable} edgesFocusable={edgesFocusable}
edgesUpdatable={edgesUpdatable}
elementsSelectable={elementsSelectable} elementsSelectable={elementsSelectable}
elevateNodesOnSelect={elevateNodesOnSelect} elevateNodesOnSelect={elevateNodesOnSelect}
minZoom={minZoom} minZoom={minZoom}
+1 -1
View File
@@ -48,7 +48,7 @@ const initialState: ReactFlowStore = {
nodesConnectable: true, nodesConnectable: true,
nodesFocusable: true, nodesFocusable: true,
edgesFocusable: true, edgesFocusable: true,
edgesUpdatable: false, edgesUpdatable: true,
elementsSelectable: true, elementsSelectable: true,
elevateNodesOnSelect: true, elevateNodesOnSelect: true,
fitViewOnInit: false, fitViewOnInit: false,
@@ -112,6 +112,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
nodesFocusable?: boolean; nodesFocusable?: boolean;
nodeOrigin?: NodeOrigin; nodeOrigin?: NodeOrigin;
edgesFocusable?: boolean; edgesFocusable?: boolean;
edgesUpdatable?: boolean;
initNodeOrigin?: NodeOrigin; initNodeOrigin?: NodeOrigin;
elementsSelectable?: boolean; elementsSelectable?: boolean;
selectNodesOnDrag?: boolean; selectNodesOnDrag?: boolean;
+1 -1
View File
@@ -39,7 +39,7 @@ type DefaultEdge<T = any> = {
updatable?: EdgeUpdatable; updatable?: EdgeUpdatable;
} & EdgeLabelOptions; } & EdgeLabelOptions;
export type EdgeUpdatable = boolean | 'target' | 'source'; export type EdgeUpdatable = boolean | HandleType;
export type SmoothStepPathOptions = { export type SmoothStepPathOptions = {
offset?: number; offset?: number;