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
@@ -0,0 +1,215 @@
|
||||
import { createStore, Action, action } from 'easy-peasy';
|
||||
import isEqual from 'fast-deep-equal';
|
||||
import { Selection as D3Selection, ZoomBehavior } from 'd3';
|
||||
|
||||
import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
|
||||
import {
|
||||
ElementId, Elements, Transform, Node,
|
||||
Edge, Rect, Dimensions, XYPosition,
|
||||
OnConnectFunc, SelectionRect, HandleElement
|
||||
} from '../types';
|
||||
|
||||
type TransformXYK = {
|
||||
x: number,
|
||||
y: number,
|
||||
k: number
|
||||
};
|
||||
|
||||
type NodePosUpdate = {
|
||||
id: ElementId,
|
||||
pos: XYPosition
|
||||
};
|
||||
|
||||
type NodeUpdate = {
|
||||
id: ElementId,
|
||||
width: number,
|
||||
height: number,
|
||||
handleBounds: {
|
||||
source: HandleElement,
|
||||
target: HandleElement
|
||||
}
|
||||
};
|
||||
|
||||
type SelectionUpdate = {
|
||||
isActive: boolean;
|
||||
selection?: SelectionRect;
|
||||
};
|
||||
|
||||
type D3Init = {
|
||||
zoom: ZoomBehavior<Element, unknown>;
|
||||
selection: D3Selection<Element, unknown, null, undefined>;
|
||||
};
|
||||
|
||||
export interface StoreModel {
|
||||
width: number;
|
||||
height: number;
|
||||
transform: Transform;
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
selectedElements: Elements;
|
||||
selectedNodesBbox: Rect;
|
||||
|
||||
d3Zoom: ZoomBehavior<Element, unknown>;
|
||||
d3Selection: D3Selection<Element, unknown, null, undefined>;
|
||||
d3Initialised: boolean;
|
||||
|
||||
nodesSelectionActive: boolean;
|
||||
selectionActive: boolean;
|
||||
selection: SelectionRect | null;
|
||||
|
||||
connectionSourceId: ElementId | null;
|
||||
connectionPosition: XYPosition;
|
||||
|
||||
onConnect: OnConnectFunc;
|
||||
|
||||
setOnConnect: Action<StoreModel, OnConnectFunc>;
|
||||
|
||||
setNodes: Action<StoreModel, Node[]>;
|
||||
|
||||
setEdges: Action<StoreModel, Edge[]>;
|
||||
|
||||
updateNodeData: Action<StoreModel, NodeUpdate>;
|
||||
|
||||
updateNodePos: Action<StoreModel, NodePosUpdate>;
|
||||
|
||||
setSelection: Action<StoreModel, boolean>;
|
||||
|
||||
setNodesSelection: Action<StoreModel, SelectionUpdate>;
|
||||
|
||||
setSelectedElements: Action<StoreModel, Elements | Node | Edge>
|
||||
|
||||
updateSelection: Action<StoreModel, SelectionRect>;
|
||||
|
||||
updateTransform: Action<StoreModel, TransformXYK>;
|
||||
|
||||
updateSize: Action<StoreModel, Dimensions>;
|
||||
|
||||
initD3: Action<StoreModel, D3Init>;
|
||||
|
||||
setConnectionPosition: Action<StoreModel, XYPosition>;
|
||||
|
||||
setConnectionSourceId: Action<StoreModel, ElementId>;
|
||||
};
|
||||
|
||||
const storeModel: StoreModel = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
transform: [0, 0, 1],
|
||||
nodes: [],
|
||||
edges: [],
|
||||
selectedElements: [],
|
||||
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
|
||||
|
||||
d3Zoom: null,
|
||||
d3Selection: null,
|
||||
d3Initialised: false,
|
||||
|
||||
nodesSelectionActive: false,
|
||||
selectionActive: false,
|
||||
selection: null,
|
||||
|
||||
connectionSourceId: null,
|
||||
connectionPosition: { x: 0, y: 0 },
|
||||
|
||||
onConnect: () => {},
|
||||
|
||||
setOnConnect: action((state, onConnect) => {
|
||||
state.onConnect = onConnect;
|
||||
}),
|
||||
|
||||
setNodes: action((state, nodes) => {
|
||||
state.nodes = nodes;
|
||||
}),
|
||||
|
||||
setEdges: action((state, edges) => {
|
||||
state.edges = edges;
|
||||
}),
|
||||
|
||||
updateNodeData: action((state, { id, ...data }) => {
|
||||
state.nodes.forEach((n) => {
|
||||
if (n.id === id) {
|
||||
n.__rg = {
|
||||
...n.__rg,
|
||||
...data
|
||||
};
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
updateNodePos: action((state, { id, pos }) => {
|
||||
state.nodes.forEach((n) => {
|
||||
if (n.id === id) {
|
||||
n.__rg = {
|
||||
...n.__rg,
|
||||
position: pos
|
||||
};
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
setSelection: action((state, isActive) => {
|
||||
state.selectionActive = isActive;
|
||||
}),
|
||||
|
||||
setNodesSelection: action((state, { isActive, selection }) => {
|
||||
if (!isActive) {
|
||||
state.nodesSelectionActive = false;
|
||||
state.selectedElements = [];
|
||||
|
||||
return;
|
||||
}
|
||||
const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
|
||||
const selectedNodesBbox = getBoundingBox(selectedNodes);
|
||||
|
||||
state.selection = selection;
|
||||
state.nodesSelectionActive = true;
|
||||
state.selectedNodesBbox = selectedNodesBbox;
|
||||
state.nodesSelectionActive = true;
|
||||
}),
|
||||
|
||||
setSelectedElements: action((state, elements) => {
|
||||
const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
|
||||
const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements);
|
||||
const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
|
||||
|
||||
state.selectedElements = selectedElements;
|
||||
}),
|
||||
|
||||
updateSelection: action((state, selection) => {
|
||||
const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
|
||||
const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
|
||||
|
||||
const nextSelectedElements = [...selectedNodes, ...selectedEdges];
|
||||
const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
|
||||
|
||||
state.selection = selection;
|
||||
state.selectedElements = selectedElementsUpdated ? nextSelectedElements: state.selectedElements
|
||||
}),
|
||||
|
||||
updateTransform: action((state, transform) => {
|
||||
state.transform = [transform.x, transform.y, transform.k];
|
||||
}),
|
||||
|
||||
updateSize: action((state, size) => {
|
||||
state.width = size.width;
|
||||
state.height = size.height;
|
||||
}),
|
||||
|
||||
initD3: action((state, { zoom, selection }) => {
|
||||
state.d3Zoom = zoom;
|
||||
state.d3Selection = selection;
|
||||
state.d3Initialised = true;
|
||||
}),
|
||||
|
||||
setConnectionPosition: action((state, position) => {
|
||||
state.connectionPosition = position;
|
||||
}),
|
||||
|
||||
setConnectionSourceId: action((state, sourceId) => {
|
||||
state.connectionSourceId = sourceId;
|
||||
})
|
||||
};
|
||||
|
||||
const store = createStore(storeModel);
|
||||
|
||||
export default store;
|
||||
Reference in New Issue
Block a user