alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(actions): split up

Browse Source
This commit is contained in:
moklick
2019-08-05 13:22:59 +02:00
parent 9edf30b71c
commit bcf5ea2ccd
6 changed files with 220 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
dist/ReactGraph.js vendored
View File

@@ -30070,20 +30070,6 @@
}
};
var updateTransform = function updateTransform(transform) {
return {
type: UPDATE_TRANSFORM,
payload: {
transform: [transform.x, transform.y, transform.k]
}
};
};
var updateSize = function updateSize(size) {
return {
type: UPDATE_SIZE,
payload: size
};
};
var setNodes = function setNodes(nodes) {
return {
type: SET_NODES,
@@ -30118,40 +30104,6 @@
}
};
};
var initD3 = function initD3(_ref) {
var zoom = _ref.zoom,
selection = _ref.selection;
return {
type: INIT_D3,
payload: {
d3Zoom: zoom,
d3Selection: selection,
d3Initialised: true
}
};
};
var fitView = function fitView() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$padding = _ref2.padding,
padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
return {
type: FIT_VIEW,
payload: {
padding: padding
}
};
};
var zoomIn = function zoomIn() {
return {
type: ZOOM_IN
};
};
var zoomOut = function zoomOut() {
return {
type: ZOOM_OUT
};
};
var setSelection = function setSelection(isActive) {
return {
type: SET_SELECTION,
@@ -30160,9 +30112,9 @@
}
};
};
var setNodesSelection = function setNodesSelection(_ref3) {
var isActive = _ref3.isActive,
selection = _ref3.selection;
var setNodesSelection = function setNodesSelection(_ref) {
var isActive = _ref.isActive,
selection = _ref.selection;
return {
type: SET_NODES_SELECTION,
payload: {
@@ -30172,11 +30124,10 @@
};
};
var setSelectedElements = function setSelectedElements(elements) {
var elementsArray = Array.isArray(elements) ? elements : [elements];
return {
type: SET_SELECTED_ELEMENTS,
payload: {
selectedElements: elementsArray
selectedElements: Array.isArray(elements) ? elements : [elements]
}
};
};
@@ -32879,6 +32830,55 @@
})));
});
var updateTransform = function updateTransform(transform) {
return {
type: UPDATE_TRANSFORM,
payload: {
transform: [transform.x, transform.y, transform.k]
}
};
};
var updateSize = function updateSize(size) {
return {
type: UPDATE_SIZE,
payload: size
};
};
var initD3 = function initD3(_ref) {
var zoom = _ref.zoom,
selection = _ref.selection;
return {
type: INIT_D3,
payload: {
d3Zoom: zoom,
d3Selection: selection,
d3Initialised: true
}
};
};
var fitView = function fitView() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$padding = _ref2.padding,
padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
return {
type: FIT_VIEW,
payload: {
padding: padding
}
};
};
var zoomIn = function zoomIn() {
return {
type: ZOOM_IN
};
};
var zoomOut = function zoomOut() {
return {
type: ZOOM_OUT
};
};
function useKeyPress(targetKey) {
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),

173
example/build/example.e31bb0bc.js
View File

@@ -37973,30 +37973,10 @@ exports.reducer = reducer;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = void 0;
var _index = require("./index");
var updateTransform = function updateTransform(transform) {
return {
type: _index.UPDATE_TRANSFORM,
payload: {
transform: [transform.x, transform.y, transform.k]
}
};
};
exports.updateTransform = updateTransform;
var updateSize = function updateSize(size) {
return {
type: _index.UPDATE_SIZE,
payload: size
};
};
exports.updateSize = updateSize;
var setNodes = function setNodes(nodes) {
return {
type: _index.SET_NODES,
@@ -38043,52 +38023,6 @@ var updateNodePos = function updateNodePos(id, pos) {
exports.updateNodePos = updateNodePos;
var initD3 = function initD3(_ref) {
var zoom = _ref.zoom,
selection = _ref.selection;
return {
type: _index.INIT_D3,
payload: {
d3Zoom: zoom,
d3Selection: selection,
d3Initialised: true
}
};
};
exports.initD3 = initD3;
var fitView = function fitView() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$padding = _ref2.padding,
padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
return {
type: _index.FIT_VIEW,
payload: {
padding: padding
}
};
};
exports.fitView = fitView;
var zoomIn = function zoomIn() {
return {
type: _index.ZOOM_IN
};
};
exports.zoomIn = zoomIn;
var zoomOut = function zoomOut() {
return {
type: _index.ZOOM_OUT
};
};
exports.zoomOut = zoomOut;
var setSelection = function setSelection(isActive) {
return {
type: _index.SET_SELECTION,
@@ -38100,9 +38034,9 @@ var setSelection = function setSelection(isActive) {
exports.setSelection = setSelection;
var setNodesSelection = function setNodesSelection(_ref3) {
var isActive = _ref3.isActive,
selection = _ref3.selection;
var setNodesSelection = function setNodesSelection(_ref) {
var isActive = _ref.isActive,
selection = _ref.selection;
return {
type: _index.SET_NODES_SELECTION,
payload: {
@@ -38115,11 +38049,10 @@ var setNodesSelection = function setNodesSelection(_ref3) {
exports.setNodesSelection = setNodesSelection;
var setSelectedElements = function setSelectedElements(elements) {
var elementsArray = Array.isArray(elements) ? elements : [elements];
return {
type: _index.SET_SELECTED_ELEMENTS,
payload: {
selectedElements: elementsArray
selectedElements: Array.isArray(elements) ? elements : [elements]
}
};
};
@@ -38127,11 +38060,10 @@ var setSelectedElements = function setSelectedElements(elements) {
exports.setSelectedElements = setSelectedElements;
var removeNodes = function removeNodes(ids) {
var idArray = Array.isArray(ids) ? ids : [ids];
return {
type: _index.REMOVE_NODES,
payload: {
ids: idArray
ids: Array.isArray(ids) ? ids : [ids]
}
};
};
@@ -41020,7 +40952,82 @@ var _default = (0, _react.memo)(function () {
});
exports.default = _default;
},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js","../state/actions":"../src/state/actions.js"}],"../src/hooks.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js","../state/actions":"../src/state/actions.js"}],"../src/state/view-actions.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateSize = exports.updateTransform = void 0;
var _index = require("./index");
var updateTransform = function updateTransform(transform) {
return {
type: _index.UPDATE_TRANSFORM,
payload: {
transform: [transform.x, transform.y, transform.k]
}
};
};
exports.updateTransform = updateTransform;
var updateSize = function updateSize(size) {
return {
type: _index.UPDATE_SIZE,
payload: size
};
};
exports.updateSize = updateSize;
var initD3 = function initD3(_ref) {
var zoom = _ref.zoom,
selection = _ref.selection;
return {
type: _index.INIT_D3,
payload: {
d3Zoom: zoom,
d3Selection: selection,
d3Initialised: true
}
};
};
exports.initD3 = initD3;
var fitView = function fitView() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$padding = _ref2.padding,
padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
return {
type: _index.FIT_VIEW,
payload: {
padding: padding
}
};
};
exports.fitView = fitView;
var zoomIn = function zoomIn() {
return {
type: _index.ZOOM_IN
};
};
exports.zoomIn = zoomIn;
var zoomOut = function zoomOut() {
return {
type: _index.ZOOM_OUT
};
};
exports.zoomOut = zoomOut;
},{"./index":"../src/state/index.js"}],"../src/hooks.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41100,6 +41107,8 @@ var _NodesSelection = _interopRequireDefault(require("../NodesSelection"));
var _actions = require("../state/actions");
var _viewActions = require("../state/view-actions");
var _hooks = require("../hooks");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41117,7 +41126,7 @@ var GraphView = (0, _react.memo)(function (props) {
var shiftPressed = (0, _hooks.useKeyPress)('Shift');
(0, _react.useEffect)(function () {
var selection = (0, _d3Selection.select)(zoomPane.current).call(d3ZoomInstance);
dispatch((0, _actions.initD3)({
dispatch((0, _viewActions.initD3)({
zoom: d3ZoomInstance,
selection: selection
}));
@@ -41131,7 +41140,7 @@ var GraphView = (0, _react.memo)(function (props) {
return false;
}
dispatch((0, _actions.updateTransform)(_d3Selection.event.transform));
dispatch((0, _viewActions.updateTransform)(_d3Selection.event.transform));
props.onMove();
});
@@ -41143,7 +41152,7 @@ var GraphView = (0, _react.memo)(function (props) {
}
}, [shiftPressed]);
(0, _react.useEffect)(function () {
return dispatch((0, _actions.updateSize)(props.size));
return dispatch((0, _viewActions.updateSize)(props.size));
}, [props.size.width, props.size.height]);
(0, _react.useEffect)(function () {
if (state.d3Initialised) {
@@ -41151,13 +41160,13 @@ var GraphView = (0, _react.memo)(function (props) {
nodes: state.nodes,
edges: state.edges,
fitView: function fitView(opts) {
return dispatch((0, _actions.fitView)(opts));
return dispatch((0, _viewActions.fitView)(opts));
},
zoomIn: function zoomIn() {
return dispatch((0, _actions.zoomIn)());
return dispatch((0, _viewActions.zoomIn)());
},
zoomOut: function zoomOut() {
return dispatch((0, _actions.zoomOut)());
return dispatch((0, _viewActions.zoomOut)());
}
});
}
@@ -41199,7 +41208,7 @@ var _default = _reactSizeme.default.withSize({
})(GraphView);
exports.default = _default;
},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../ConnectionContext":"../src/ConnectionContext/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../ConnectionContext":"../src/ConnectionContext/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../state/view-actions":"../src/state/view-actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {

2
example/build/example.e31bb0bc.js.map
View File

File diff suppressed because one or more lines are too long

5
src/GraphView/index.js
View File

@@ -9,10 +9,11 @@ import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import UserSelection from '../UserSelection';
import NodesSelection from '../NodesSelection';
import { setNodesSelection } from '../state/actions';
import {
updateTransform, updateSize, initD3, fitView,
zoomIn, zoomOut, setNodesSelection
} from '../state/actions';
zoomIn, zoomOut
} from '../state/view-actions';
import { useKeyPress } from '../hooks';
const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);

129
src/state/actions.js
View File

@@ -1,101 +1,52 @@
import {
UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
SET_NODES, SET_EDGES, UPDATE_NODE_DATA, UPDATE_NODE_POS,
UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
SET_SELECTED_ELEMENTS, REMOVE_NODES,
} from './index';
export const updateTransform = (transform) => {
return {
type: UPDATE_TRANSFORM,
payload: { transform: [transform.x, transform.y, transform.k] }
};
};
export const setNodes = nodes => ({
type: SET_NODES,
payload: { nodes }
});
export const updateSize = (size) => {
return {
type: UPDATE_SIZE,
payload: size
};
};
export const setEdges = edges => ({
type: SET_EDGES,
payload: { edges }
});
export const setNodes = (nodes) => {
return {
type: SET_NODES,
payload: { nodes }
};
};
export const updateNodeData = (id, data) => ({
type: UPDATE_NODE_DATA,
payload: { id, data }
});
export const setEdges = (edges) => {
return {
type: SET_EDGES,
payload: { edges }
};
};
export const updateNodePos = (id, pos) => ({
type: UPDATE_NODE_POS,
payload: { id, pos }
});
export const updateNodeData = (id, data) => {
return {
type: UPDATE_NODE_DATA,
payload: { id, data }
};
};
export const setSelection = isActive => ({
type: SET_SELECTION,
payload: { selectionActive: isActive }
});
export const updateNodePos = (id, pos) => {
return {
type: UPDATE_NODE_POS,
payload: { id, pos }
};
};
export const setNodesSelection = ({ isActive, selection }) => ({
type: SET_NODES_SELECTION,
payload: { nodesSelectionActive: isActive, selection }
});
export const initD3 = ({ zoom, selection }) => {
return {
type: INIT_D3,
payload: { d3Zoom: zoom, d3Selection: selection, d3Initialised: true }
};
};
export const setSelectedElements = elements => ({
type: SET_SELECTED_ELEMENTS,
payload: {
selectedElements: Array.isArray(elements) ? elements : [elements]
}
});
export const fitView = ({ padding = 0 } = {}) => {
return { type: FIT_VIEW, payload: { padding } };
};
export const removeNodes = ids => ({
type: REMOVE_NODES,
payload: { ids: Array.isArray(ids) ? ids : [ids] }
});
export const zoomIn = () => {
return { type: ZOOM_IN };
};
export const zoomOut = () => {
return { type: ZOOM_OUT };
};
export const setSelection = (isActive) => {
return { type: SET_SELECTION, payload: { selectionActive: isActive } };
};
export const setNodesSelection = ({ isActive, selection }) => {
return { type: SET_NODES_SELECTION, payload: { nodesSelectionActive: isActive, selection } };
};
export const setSelectedElements = (elements) => {
const elementsArray = Array.isArray(elements) ? elements : [elements];
return {
type: SET_SELECTED_ELEMENTS,
payload: {
selectedElements: elementsArray
}
};
};
export const removeNodes = (ids) => {
const idArray = Array.isArray(ids) ? ids : [ids];
return { type: REMOVE_NODES, payload: { ids: idArray } };
};
export const updateSelection = (selection) => {
return {
type: UPDATE_SELECTION,
payload: {
selection
}
};
};
export const updateSelection = selection => ({
type: UPDATE_SELECTION,
payload: { selection }
});

32
src/state/view-actions.js Normal file
View File

@@ -0,0 +1,32 @@
import {
UPDATE_TRANSFORM, UPDATE_SIZE, INIT_D3,
FIT_VIEW, ZOOM_IN, ZOOM_OUT
} from './index';
export const updateTransform = transform => ({
type: UPDATE_TRANSFORM,
payload: { transform: [transform.x, transform.y, transform.k] }
});
export const updateSize = size => ({
type: UPDATE_SIZE,
payload: size
});
export const initD3 = ({ zoom, selection }) => ({
type: INIT_D3,
payload: { d3Zoom: zoom, d3Selection: selection, d3Initialised: true }
});
export const fitView = ({ padding = 0 } = {}) => ({
type: FIT_VIEW,
payload: { padding }
});
export const zoomIn = () => ({
type: ZOOM_IN
});
export const zoomOut = () => ({
type: ZOOM_OUT
});