@ant-design/pro-flow
Version:
A React based Flow components
307 lines (301 loc) • 12.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { uuid } from "../../utils/uuid";
import { generateEdgeId } from "../../utils/edge";
export var generalActionSlice = function generalActionSlice(set, get) {
return {
internalUpdateSelection: function internalUpdateSelection(selectedKeys, payload) {
var _get$onSelectionChang, _get;
set({
selectedKeys: selectedKeys
}, false, payload);
(_get$onSelectionChang = (_get = get()).onSelectionChange) === null || _get$onSelectionChang === void 0 || _get$onSelectionChang.call(_get, selectedKeys);
},
onElementSelectChange: function onElementSelectChange(id, selected) {
if (selected) {
get().selectElement(id);
} else {
get().deselectElement(id);
}
},
actionList: function actionList() {
var _get2 = get(),
yjsDoc = _get2.yjsDoc;
return {
undo: yjsDoc.undoManager.undoStack.length,
redo: yjsDoc.undoManager.redoStack.length
};
},
// 选择
selectElement: function selectElement(id) {
if (get().selectedKeys.includes(id)) return;
get().internalUpdateSelection([].concat(_toConsumableArray(get().selectedKeys), [id]), {
type: 'selection/selectElement',
payload: {
id: id
}
});
},
selectElements: function selectElements(ids) {
var expendSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
get().internalUpdateSelection(expendSelection ? [].concat(_toConsumableArray(get().selectedKeys), _toConsumableArray(ids)) : ids, {
type: 'selection/selectElements',
payload: {
ids: ids
}
});
},
selectAll: function selectAll() {
var nodes = get().reactflow.getNodes();
var edges = get().reactflow.getEdges();
var ids = [].concat(_toConsumableArray(nodes.map(function (n) {
return n.id;
})), _toConsumableArray(edges.map(function (e) {
return e.id;
})));
get().internalUpdateSelection(ids, {
type: 'selection/selectAll',
payload: {
ids: ids
}
});
},
deselectElement: function deselectElement(id) {
get().internalUpdateSelection(get().selectedKeys.filter(function (k) {
return k !== id;
}), {
type: 'selection/deselectElement',
payload: {
id: id
}
});
},
deselectAll: function deselectAll() {
get().internalUpdateSelection([], {
type: 'selection/deselectAll',
payload: {}
});
},
deleteSelection: function deleteSelection() {
var _get3 = get(),
selectedKeys = _get3.selectedKeys,
flattenEdges = _get3.flattenEdges,
flattenNodes = _get3.flattenNodes,
dispatchNodes = _get3.dispatchNodes,
dispatchEdges = _get3.dispatchEdges,
deselectAll = _get3.deselectAll;
deselectAll();
selectedKeys.forEach(function (id) {
if (flattenNodes[id]) dispatchNodes({
type: 'deleteNode',
id: id
});
if (flattenEdges[id]) dispatchEdges({
type: 'deleteEdge',
id: id
});
});
},
// 复制粘贴
copySelection: function () {
var _copySelection = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _get4, selectedKeys, flattenEdges, flattenNodes, nodes, edges, selectedElements, jsonBlob, textBlob, item;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_get4 = get(), selectedKeys = _get4.selectedKeys, flattenEdges = _get4.flattenEdges, flattenNodes = _get4.flattenNodes;
if (!(selectedKeys.length === 0)) {
_context.next = 3;
break;
}
return _context.abrupt("return");
case 3:
nodes = Object.values(flattenNodes).filter(function (n) {
return selectedKeys.includes(n.id);
});
edges = Object.values(flattenEdges).filter(function (n) {
return selectedKeys.includes(n.id);
});
selectedElements = {
nodes: nodes,
edges: edges
};
jsonBlob = new Blob([JSON.stringify(selectedElements)], {
type: 'text/html'
});
textBlob = new Blob([JSON.stringify(selectedElements)], {
type: 'text/plain'
});
item = new ClipboardItem({
'text/html': jsonBlob,
'text/plain': textBlob
});
_context.next = 11;
return navigator.clipboard.write([item]);
case 11:
return _context.abrupt("return", selectedElements);
case 12:
case "end":
return _context.stop();
}
}, _callee);
}));
function copySelection() {
return _copySelection.apply(this, arguments);
}
return copySelection;
}(),
paste: function () {
var _paste = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var clipboardItems;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return navigator.clipboard.read();
case 2:
clipboardItems = _context2.sent;
clipboardItems.forEach(function (item) {
var _iterator = _createForOfIteratorHelper(item.types),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var type = _step.value;
// 判断是否是
if (type === 'text/plain') {
var blob = item.getType(type);
blob.then(function (b) {
b.text().then(function (t) {
var data = undefined;
try {
data = JSON.parse(t);
} catch (e) {}
if (!data) return;
// 粘贴逻辑
get().pasteIntoFlow(data);
});
});
}
// 检测文本
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
});
case 4:
case "end":
return _context2.stop();
}
}, _callee2);
}));
function paste() {
return _paste.apply(this, arguments);
}
return paste;
}(),
pasteIntoFlow: function pasteIntoFlow(data) {
var _get5 = get(),
yjsDoc = _get5.yjsDoc,
addEdges = _get5.addEdges,
addNodes = _get5.addNodes,
deselectAll = _get5.deselectAll,
selectElements = _get5.selectElements;
var nodes = {};
var edges = {};
// 首先取消选择旧的选区
deselectAll();
data.nodes.forEach(function (node) {
var id = uuid();
nodes[id] = _objectSpread(_objectSpread({}, node), {}, {
id: id,
// 默认偏移 10px
position: {
x: node.position.x + 10,
y: node.position.y + 10
}
});
// 在 edge 中查找旧的 node id，替换为新的：
data.edges.forEach(function (edge) {
if (edge.source === node.id) {
edge.source = id;
}
if (edge.target === node.id) {
edge.target = id;
}
});
});
data.edges.forEach(function (edge) {
var edgeId = generateEdgeId(edge.source, edge.target, edge.sourceHandle, edge.targetHandle);
edges[edgeId] = _objectSpread(_objectSpread({}, edge), {}, {
id: edgeId
});
});
addNodes(nodes, {
recordHistory: false
});
addEdges(edges, {
recordHistory: false
});
yjsDoc.recordHistoryData({
flattenNodes: get().flattenNodes,
flattenEdges: get().flattenEdges
}, {
type: 'paste',
name: '粘贴',
timestamp: Date.now()
});
// 最后将新的节点添加到选区
var newSelections = Object.keys(nodes).concat(Object.keys(edges));
selectElements(newSelections);
},
// 撤销重做
undo: function undo() {
var _get6 = get(),
yjsDoc = _get6.yjsDoc,
internalUpdateEdges = _get6.internalUpdateEdges,
internalUpdateNodes = _get6.internalUpdateNodes;
var stack = yjsDoc.undo();
var _yjsDoc$getHistoryJSO = yjsDoc.getHistoryJSON(),
flattenNodes = _yjsDoc$getHistoryJSO.flattenNodes,
flattenEdges = _yjsDoc$getHistoryJSO.flattenEdges;
// if(!!flattenNodes)
internalUpdateNodes(flattenNodes || {}, {
type: 'history/undo',
payload: stack
});
// if (!!flattenEdges)
internalUpdateEdges(flattenEdges || {}, {
type: 'history/undo',
payload: stack
});
},
redo: function redo() {
var _get7 = get(),
yjsDoc = _get7.yjsDoc,
internalUpdateEdges = _get7.internalUpdateEdges,
internalUpdateNodes = _get7.internalUpdateNodes;
var stack = yjsDoc.redo();
var _yjsDoc$getHistoryJSO2 = yjsDoc.getHistoryJSON(),
flattenNodes = _yjsDoc$getHistoryJSO2.flattenNodes,
flattenEdges = _yjsDoc$getHistoryJSO2.flattenEdges;
internalUpdateNodes(flattenNodes, {
type: 'history/redo',
payload: stack
});
internalUpdateEdges(flattenEdges, {
type: 'history/redo',
payload: stack
});
}
// 分组
};
};