@nokecy/qc-ui 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ag-grid-plus/ag-gridPlus.d.ts +1 -0
- package/dist/cjs/ag-grid-plus/ag-gridPlus.js +140 -38
- package/dist/cjs/ag-grid-plus/global.scss +18 -34
- package/dist/cjs/ag-grid-plus/queryForm/index.js +1 -3
- package/dist/cjs/ag-grid-plus/queryForm/queryForm.js +4 -2
- package/dist/cjs/ag-grid-plus/settingItem/index.d.ts +3 -0
- package/dist/cjs/ag-grid-plus/settingItem/index.js +27 -0
- package/dist/cjs/ag-grid-plus/toolBar/index.d.ts +20 -0
- package/dist/cjs/ag-grid-plus/toolBar/index.js +196 -0
- package/dist/cjs/ag-grid-plus/toolBar/style.d.ts +5 -0
- package/dist/cjs/ag-grid-plus/toolBar/style.js +142 -0
- package/dist/cjs/ag-grid-plus/utils.d.ts +8 -0
- package/dist/cjs/ag-grid-plus/utils.js +113 -0
- package/dist/cjs/array-table/index.d.ts +0 -2
- package/dist/cjs/array-table/index.js +0 -4
- package/dist/cjs/{elsaFlow/react-edge/edge1.less → elsa/components/finishNode.d.ts} +0 -0
- package/dist/cjs/elsa/components/finishNode.js +1 -0
- package/dist/cjs/{elsaFlow/react-edge/edge2.less → elsa/components/forkNode.d.ts} +0 -0
- package/dist/cjs/elsa/components/forkNode.js +1 -0
- package/dist/{esm/elsaFlow/react-edge/edge1.less → cjs/elsa/components/ifNode.d.ts} +0 -0
- package/dist/cjs/elsa/components/ifNode.js +1 -0
- package/dist/{esm/elsaFlow/react-edge/edge2.less → cjs/elsa/components/joinNode.d.ts} +0 -0
- package/dist/cjs/elsa/components/joinNode.js +1 -0
- package/dist/cjs/elsa/components/setNameNode.d.ts +0 -0
- package/dist/cjs/elsa/components/setNameNode.js +1 -0
- package/dist/cjs/elsa/components/startNode.d.ts +3 -0
- package/dist/cjs/elsa/components/startNode.js +24 -0
- package/dist/cjs/elsa/components/switchNode.d.ts +0 -0
- package/dist/cjs/elsa/components/switchNode.js +1 -0
- package/dist/cjs/elsa/components/timerNode.d.ts +0 -0
- package/dist/cjs/elsa/components/timerNode.js +1 -0
- package/dist/cjs/elsa/components/userTaskNode/index.d.ts +7 -0
- package/dist/cjs/elsa/components/userTaskNode/index.js +50 -0
- package/dist/cjs/elsa/components/userTaskNode/index.less +0 -0
- package/dist/cjs/elsa/components/userTaskNode/register.d.ts +1 -0
- package/dist/cjs/elsa/components/userTaskNode/register.js +54 -0
- package/dist/cjs/elsa/elsa.design.d.ts +4 -0
- package/dist/cjs/elsa/elsa.design.js +123 -0
- package/dist/cjs/elsa/index.d.ts +4 -0
- package/dist/cjs/elsa/index.js +40 -0
- package/dist/cjs/elsa/index.less +21 -0
- package/dist/cjs/extensible-grid/index.d.ts +4 -0
- package/dist/cjs/extensible-grid/index.js +39 -0
- package/dist/cjs/extensible-grid/interface.d.ts +10 -0
- package/dist/cjs/extensible-grid/interface.js +5 -0
- package/dist/cjs/index.d.ts +3 -1
- package/dist/cjs/index.js +16 -0
- package/dist/cjs/xflow/components/Wrapper.d.ts +3 -0
- package/dist/cjs/xflow/components/Wrapper.js +26 -0
- package/dist/cjs/xflow/components/XFlow.d.ts +3 -0
- package/dist/cjs/xflow/components/XFlow.js +47 -0
- package/dist/cjs/xflow/components/XFlowGraph.d.ts +4 -0
- package/dist/cjs/xflow/components/XFlowGraph.js +73 -0
- package/dist/cjs/xflow/components/graph-toolbar/index.d.ts +19 -0
- package/dist/cjs/xflow/components/graph-toolbar/index.js +60 -0
- package/dist/cjs/xflow/components/graph-toolbar/index.less +11 -0
- package/dist/cjs/xflow/components/index.d.ts +3 -0
- package/dist/cjs/xflow/components/index.js +31 -0
- package/dist/cjs/xflow/components/keyboard/index.d.ts +3 -0
- package/dist/cjs/xflow/components/keyboard/index.js +40 -0
- package/dist/cjs/xflow/components/minimap/index.d.ts +3 -0
- package/dist/cjs/xflow/components/minimap/index.js +53 -0
- package/dist/cjs/xflow/components/scroller/index.d.ts +4 -0
- package/dist/cjs/xflow/components/scroller/index.js +49 -0
- package/dist/cjs/xflow/components/selection/index.d.ts +3 -0
- package/dist/cjs/xflow/components/selection/index.js +40 -0
- package/dist/cjs/xflow/components/snapline/index.d.ts +3 -0
- package/dist/cjs/xflow/components/snapline/index.js +40 -0
- package/dist/cjs/xflow/components/transform/index.d.ts +3 -0
- package/dist/cjs/xflow/components/transform/index.js +38 -0
- package/dist/cjs/xflow/context/GraphContext.d.ts +10 -0
- package/dist/cjs/xflow/context/GraphContext.js +21 -0
- package/dist/cjs/xflow/hooks/clipboard/index.d.ts +2 -0
- package/dist/cjs/xflow/hooks/clipboard/index.js +34 -0
- package/dist/cjs/xflow/hooks/dnd/index.d.ts +2 -0
- package/dist/cjs/xflow/hooks/dnd/index.js +29 -0
- package/dist/cjs/xflow/hooks/format/index.d.ts +5 -0
- package/dist/cjs/xflow/hooks/format/index.js +60 -0
- package/dist/cjs/xflow/hooks/graph/index.d.ts +1 -0
- package/dist/cjs/xflow/hooks/graph/index.js +19 -0
- package/dist/cjs/xflow/hooks/history/index.d.ts +4 -0
- package/dist/cjs/xflow/hooks/history/index.js +63 -0
- package/dist/cjs/xflow/hooks/keyboard/index.d.ts +13 -0
- package/dist/cjs/xflow/hooks/keyboard/index.js +55 -0
- package/dist/cjs/xflow/hooks/selection/index.d.ts +3 -0
- package/dist/cjs/xflow/hooks/selection/index.js +41 -0
- package/dist/cjs/xflow/hooks/snapline/index.d.ts +2 -0
- package/dist/cjs/xflow/hooks/snapline/index.js +21 -0
- package/dist/cjs/xflow/hooks/transform/index.d.ts +2 -0
- package/dist/cjs/xflow/hooks/transform/index.js +21 -0
- package/dist/cjs/xflow/index.d.ts +3 -0
- package/dist/cjs/xflow/index.js +44 -0
- package/dist/cjs/xflow/styles/index.less +0 -0
- package/dist/cjs/xflow/types/index.d.ts +19 -0
- package/dist/cjs/xflow/types/index.js +5 -0
- package/dist/cjs/xflow/util/algorithm.d.ts +1 -0
- package/dist/cjs/xflow/util/algorithm.js +10 -0
- package/dist/cjs/xflow/util/index.d.ts +2 -0
- package/dist/cjs/xflow/util/index.js +16 -0
- package/dist/cjs/xflow/util/main.d.ts +2 -0
- package/dist/cjs/xflow/util/main.js +31 -0
- package/dist/cjs/xflow/util/model.d.ts +2 -0
- package/dist/cjs/xflow/util/model.js +29 -0
- package/dist/esm/ag-grid-plus/ag-gridPlus.d.ts +1 -0
- package/dist/esm/ag-grid-plus/ag-gridPlus.js +136 -39
- package/dist/esm/ag-grid-plus/global.scss +18 -34
- package/dist/esm/ag-grid-plus/queryForm/index.js +1 -3
- package/dist/esm/ag-grid-plus/queryForm/queryForm.js +4 -2
- package/dist/esm/ag-grid-plus/settingItem/index.d.ts +3 -0
- package/dist/esm/ag-grid-plus/settingItem/index.js +17 -0
- package/dist/esm/ag-grid-plus/toolBar/index.d.ts +20 -0
- package/dist/esm/ag-grid-plus/toolBar/index.js +176 -0
- package/dist/esm/ag-grid-plus/toolBar/style.d.ts +5 -0
- package/dist/esm/ag-grid-plus/toolBar/style.js +135 -0
- package/dist/esm/ag-grid-plus/utils.d.ts +8 -0
- package/dist/esm/ag-grid-plus/utils.js +94 -0
- package/dist/esm/array-table/index.d.ts +0 -2
- package/dist/esm/array-table/index.js +0 -2
- package/dist/esm/elsa/components/finishNode.d.ts +0 -0
- package/dist/esm/elsa/components/finishNode.js +0 -0
- package/dist/esm/elsa/components/forkNode.d.ts +0 -0
- package/dist/esm/elsa/components/forkNode.js +0 -0
- package/dist/esm/elsa/components/ifNode.d.ts +0 -0
- package/dist/esm/elsa/components/ifNode.js +0 -0
- package/dist/esm/elsa/components/joinNode.d.ts +0 -0
- package/dist/esm/elsa/components/joinNode.js +0 -0
- package/dist/esm/elsa/components/setNameNode.d.ts +0 -0
- package/dist/esm/elsa/components/setNameNode.js +0 -0
- package/dist/esm/elsa/components/startNode.d.ts +3 -0
- package/dist/esm/elsa/components/startNode.js +14 -0
- package/dist/esm/elsa/components/switchNode.d.ts +0 -0
- package/dist/esm/elsa/components/switchNode.js +0 -0
- package/dist/esm/elsa/components/timerNode.d.ts +0 -0
- package/dist/esm/elsa/components/timerNode.js +0 -0
- package/dist/esm/elsa/components/userTaskNode/index.d.ts +7 -0
- package/dist/esm/elsa/components/userTaskNode/index.js +33 -0
- package/dist/esm/elsa/components/userTaskNode/index.less +0 -0
- package/dist/esm/elsa/components/userTaskNode/register.d.ts +1 -0
- package/dist/esm/elsa/components/userTaskNode/register.js +48 -0
- package/dist/esm/elsa/elsa.design.d.ts +4 -0
- package/dist/esm/elsa/elsa.design.js +105 -0
- package/dist/esm/elsa/index.d.ts +4 -0
- package/dist/esm/elsa/index.js +25 -0
- package/dist/esm/elsa/index.less +21 -0
- package/dist/esm/extensible-grid/index.d.ts +4 -0
- package/dist/esm/extensible-grid/index.js +28 -0
- package/dist/esm/extensible-grid/interface.d.ts +10 -0
- package/dist/esm/extensible-grid/interface.js +1 -0
- package/dist/esm/index.d.ts +3 -1
- package/dist/esm/index.js +3 -2
- package/dist/esm/xflow/components/Wrapper.d.ts +3 -0
- package/dist/esm/xflow/components/Wrapper.js +15 -0
- package/dist/esm/xflow/components/XFlow.d.ts +3 -0
- package/dist/esm/xflow/components/XFlow.js +32 -0
- package/dist/esm/xflow/components/XFlowGraph.d.ts +4 -0
- package/dist/esm/xflow/components/XFlowGraph.js +54 -0
- package/dist/esm/xflow/components/graph-toolbar/index.d.ts +19 -0
- package/dist/esm/xflow/components/graph-toolbar/index.js +44 -0
- package/dist/esm/xflow/components/graph-toolbar/index.less +11 -0
- package/dist/esm/xflow/components/index.d.ts +3 -0
- package/dist/esm/xflow/components/index.js +3 -0
- package/dist/esm/xflow/components/keyboard/index.d.ts +3 -0
- package/dist/esm/xflow/components/keyboard/index.js +22 -0
- package/dist/esm/xflow/components/minimap/index.d.ts +3 -0
- package/dist/esm/xflow/components/minimap/index.js +35 -0
- package/dist/esm/xflow/components/scroller/index.d.ts +4 -0
- package/dist/esm/xflow/components/scroller/index.js +28 -0
- package/dist/esm/xflow/components/selection/index.d.ts +3 -0
- package/dist/esm/xflow/components/selection/index.js +22 -0
- package/dist/esm/xflow/components/snapline/index.d.ts +3 -0
- package/dist/esm/xflow/components/snapline/index.js +22 -0
- package/dist/esm/xflow/components/transform/index.d.ts +3 -0
- package/dist/esm/xflow/components/transform/index.js +20 -0
- package/dist/esm/xflow/context/GraphContext.d.ts +10 -0
- package/dist/esm/xflow/context/GraphContext.js +9 -0
- package/dist/esm/xflow/hooks/clipboard/index.d.ts +2 -0
- package/dist/esm/xflow/hooks/clipboard/index.js +22 -0
- package/dist/esm/xflow/hooks/dnd/index.d.ts +2 -0
- package/dist/esm/xflow/hooks/dnd/index.js +17 -0
- package/dist/esm/xflow/hooks/format/index.d.ts +5 -0
- package/dist/esm/xflow/hooks/format/index.js +48 -0
- package/dist/esm/xflow/hooks/graph/index.d.ts +1 -0
- package/dist/esm/xflow/hooks/graph/index.js +8 -0
- package/dist/esm/xflow/hooks/history/index.d.ts +4 -0
- package/dist/esm/xflow/hooks/history/index.js +45 -0
- package/dist/esm/xflow/hooks/keyboard/index.d.ts +13 -0
- package/dist/esm/xflow/hooks/keyboard/index.js +40 -0
- package/dist/esm/xflow/hooks/selection/index.d.ts +3 -0
- package/dist/esm/xflow/hooks/selection/index.js +25 -0
- package/dist/esm/xflow/hooks/snapline/index.d.ts +2 -0
- package/dist/esm/xflow/hooks/snapline/index.js +9 -0
- package/dist/esm/xflow/hooks/transform/index.d.ts +2 -0
- package/dist/esm/xflow/hooks/transform/index.js +9 -0
- package/dist/esm/xflow/index.d.ts +3 -0
- package/dist/esm/xflow/index.js +3 -0
- package/dist/esm/xflow/styles/index.less +0 -0
- package/dist/esm/xflow/types/index.d.ts +19 -0
- package/dist/esm/xflow/types/index.js +1 -0
- package/dist/esm/xflow/util/algorithm.d.ts +1 -0
- package/dist/esm/xflow/util/algorithm.js +1 -0
- package/dist/esm/xflow/util/index.d.ts +2 -0
- package/dist/esm/xflow/util/index.js +2 -0
- package/dist/esm/xflow/util/main.d.ts +2 -0
- package/dist/esm/xflow/util/main.js +2 -0
- package/dist/esm/xflow/util/model.d.ts +2 -0
- package/dist/esm/xflow/util/model.js +19 -0
- package/dist/umd/qc-ui.min.css +1 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +18 -6
- package/dist/cjs/elsaFlow/config-graph.d.ts +0 -1
- package/dist/cjs/elsaFlow/config-graph.js +0 -57
- package/dist/cjs/elsaFlow/index.d.ts +0 -6
- package/dist/cjs/elsaFlow/index.js +0 -199
- package/dist/cjs/elsaFlow/react-edge/edge1.d.ts +0 -4
- package/dist/cjs/elsaFlow/react-edge/edge1.js +0 -31
- package/dist/cjs/elsaFlow/react-edge/edge2.d.ts +0 -4
- package/dist/cjs/elsaFlow/react-edge/edge2.js +0 -31
- package/dist/cjs/elsaFlow/react-node/node1.d.ts +0 -4
- package/dist/cjs/elsaFlow/react-node/node1.js +0 -28
- package/dist/cjs/elsaFlow/react-node/node1.less +0 -11
- package/dist/cjs/elsaFlow/react-node/node2.d.ts +0 -4
- package/dist/cjs/elsaFlow/react-node/node2.js +0 -28
- package/dist/cjs/elsaFlow/react-node/node2.less +0 -11
- package/dist/esm/elsaFlow/config-graph.d.ts +0 -1
- package/dist/esm/elsaFlow/config-graph.js +0 -42
- package/dist/esm/elsaFlow/index.d.ts +0 -6
- package/dist/esm/elsaFlow/index.js +0 -189
- package/dist/esm/elsaFlow/react-edge/edge1.d.ts +0 -4
- package/dist/esm/elsaFlow/react-edge/edge1.js +0 -18
- package/dist/esm/elsaFlow/react-edge/edge2.d.ts +0 -4
- package/dist/esm/elsaFlow/react-edge/edge2.js +0 -18
- package/dist/esm/elsaFlow/react-node/node1.d.ts +0 -4
- package/dist/esm/elsaFlow/react-node/node1.js +0 -16
- package/dist/esm/elsaFlow/react-node/node1.less +0 -11
- package/dist/esm/elsaFlow/react-node/node2.d.ts +0 -4
- package/dist/esm/elsaFlow/react-node/node2.js +0 -16
- package/dist/esm/elsaFlow/react-node/node2.less +0 -11
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useGraph } from "../hooks/graph";
|
|
3
|
+
|
|
4
|
+
var Wrapper = function Wrapper(_ref) {
|
|
5
|
+
var children = _ref.children;
|
|
6
|
+
var graph = useGraph();
|
|
7
|
+
|
|
8
|
+
if (graph) {
|
|
9
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return null;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default Wrapper;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
|
|
5
|
+
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); }
|
|
6
|
+
|
|
7
|
+
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; }
|
|
8
|
+
|
|
9
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
+
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
|
|
13
|
+
import React, { useState } from 'react';
|
|
14
|
+
import { Provider } from "../context/GraphContext";
|
|
15
|
+
|
|
16
|
+
var XFlow = function XFlow(_ref) {
|
|
17
|
+
var children = _ref.children;
|
|
18
|
+
|
|
19
|
+
var _useState = useState(null),
|
|
20
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
+
graph = _useState2[0],
|
|
22
|
+
setGraph = _useState2[1];
|
|
23
|
+
|
|
24
|
+
return /*#__PURE__*/React.createElement(Provider, {
|
|
25
|
+
value: {
|
|
26
|
+
graph: graph,
|
|
27
|
+
setGraph: setGraph
|
|
28
|
+
}
|
|
29
|
+
}, children);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export default XFlow;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import React, { useContext, useRef, useEffect, useLayoutEffect } from 'react';
|
|
8
|
+
import { GraphContext } from "../context/GraphContext";
|
|
9
|
+
import { Graph } from '@antv/x6';
|
|
10
|
+
import { Util } from "../util";
|
|
11
|
+
|
|
12
|
+
var XFlowGraph = function XFlowGraph(props) {
|
|
13
|
+
var container = useRef(null);
|
|
14
|
+
|
|
15
|
+
var _useContext = useContext(GraphContext),
|
|
16
|
+
graph = _useContext.graph,
|
|
17
|
+
setGraph = _useContext.setGraph;
|
|
18
|
+
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
var graph = new Graph(_objectSpread({
|
|
21
|
+
container: container.current,
|
|
22
|
+
autoResize: true
|
|
23
|
+
}, props.configs));
|
|
24
|
+
setGraph(graph);
|
|
25
|
+
}, []);
|
|
26
|
+
useLayoutEffect(function () {
|
|
27
|
+
if (graph && props.data.length > 0) {
|
|
28
|
+
var data = props.data,
|
|
29
|
+
defaultNodeOptions = props.defaultNodeOptions,
|
|
30
|
+
defaultEdgeOptions = props.defaultEdgeOptions,
|
|
31
|
+
centerContent = props.centerContent;
|
|
32
|
+
var model = Util.preprocess(data, defaultNodeOptions, defaultEdgeOptions);
|
|
33
|
+
graph.fromJSON(model);
|
|
34
|
+
|
|
35
|
+
if (centerContent) {
|
|
36
|
+
graph.centerContent();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}, [graph, props.data]);
|
|
40
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
41
|
+
style: {
|
|
42
|
+
width: '100%',
|
|
43
|
+
height: '100%'
|
|
44
|
+
}
|
|
45
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
ref: container,
|
|
47
|
+
style: {
|
|
48
|
+
width: '100%',
|
|
49
|
+
height: '100%'
|
|
50
|
+
}
|
|
51
|
+
}));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export default XFlowGraph;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
2
|
+
export declare enum Direction {
|
|
3
|
+
vertical = "vertical",
|
|
4
|
+
horizontal = "horizontal"
|
|
5
|
+
}
|
|
6
|
+
export interface GraphToolbarItem {
|
|
7
|
+
name: string;
|
|
8
|
+
text?: string;
|
|
9
|
+
tooltip: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
icon: ReactElement;
|
|
12
|
+
onClick: () => void;
|
|
13
|
+
}
|
|
14
|
+
export interface GraphToolbarProps {
|
|
15
|
+
className: string;
|
|
16
|
+
items: GraphToolbarItem[];
|
|
17
|
+
direction?: Direction;
|
|
18
|
+
}
|
|
19
|
+
export declare const GraphToolbar: FC<GraphToolbarProps>;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tooltip } from 'antd';
|
|
5
|
+
import classnames from 'classnames';
|
|
6
|
+
import style from "./index.less";
|
|
7
|
+
export var Direction;
|
|
8
|
+
|
|
9
|
+
(function (Direction) {
|
|
10
|
+
Direction["vertical"] = "vertical";
|
|
11
|
+
Direction["horizontal"] = "horizontal";
|
|
12
|
+
})(Direction || (Direction = {}));
|
|
13
|
+
|
|
14
|
+
var ToolbarItem = function ToolbarItem(props) {
|
|
15
|
+
var name = props.name,
|
|
16
|
+
text = props.text,
|
|
17
|
+
icon = props.icon,
|
|
18
|
+
disabled = props.disabled,
|
|
19
|
+
_onClick = props.onClick;
|
|
20
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
21
|
+
key: name,
|
|
22
|
+
disabled: disabled,
|
|
23
|
+
onClick: function onClick() {
|
|
24
|
+
return disabled && _onClick();
|
|
25
|
+
},
|
|
26
|
+
className: classnames(style.item, _defineProperty({}, style.disabled, disabled))
|
|
27
|
+
}, icon, text);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export var GraphToolbar = function GraphToolbar(props) {
|
|
31
|
+
var _classnames2;
|
|
32
|
+
|
|
33
|
+
var className = props.className,
|
|
34
|
+
items = props.items,
|
|
35
|
+
direction = props.direction;
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: classnames(className, style.graphToolbar, (_classnames2 = {}, _defineProperty(_classnames2, style.vertical, direction === Direction.vertical), _defineProperty(_classnames2, style.horizontal, direction === Direction.horizontal), _classnames2))
|
|
38
|
+
}, items.map(function (item) {
|
|
39
|
+
return item.tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
40
|
+
key: item.name,
|
|
41
|
+
title: item.tooltip
|
|
42
|
+
}, /*#__PURE__*/React.createElement(ToolbarItem, item)) : /*#__PURE__*/React.createElement(ToolbarItem, item);
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
|
+
import { Keyboard as X6Keyboard } from '@antv/x6-plugin-keyboard';
|
|
3
|
+
import { useGraph } from "../../hooks/graph";
|
|
4
|
+
export var Keyboard = function Keyboard(props) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var initKeyboard = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var keyboard = graph.getPlugin(X6Keyboard.name);
|
|
9
|
+
|
|
10
|
+
if (keyboard) {// TODO: add setOptions function to handle
|
|
11
|
+
// scroller.setOptions(options)
|
|
12
|
+
} else {
|
|
13
|
+
var graphKeyboard = new X6Keyboard(props);
|
|
14
|
+
graph.use(graphKeyboard);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, [graph, props]);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
initKeyboard();
|
|
20
|
+
}, [graph, props, initKeyboard]);
|
|
21
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import React, { useRef, useEffect, useCallback } from 'react';
|
|
8
|
+
import { MiniMap } from '@antv/x6-plugin-minimap';
|
|
9
|
+
import { useGraph } from "../../hooks/graph";
|
|
10
|
+
export var Minimap = function Minimap(props) {
|
|
11
|
+
var graph = useGraph();
|
|
12
|
+
var mapRef = useRef(null);
|
|
13
|
+
var initMinimap = useCallback(function () {
|
|
14
|
+
if (mapRef.current && graph) {
|
|
15
|
+
var options = _objectSpread(_objectSpread({}, props), {}, {
|
|
16
|
+
container: mapRef.current
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var minimap = graph.getPlugin(MiniMap.name);
|
|
20
|
+
|
|
21
|
+
if (minimap) {// TODO: add setOption function
|
|
22
|
+
// minimap.setOptions(options)
|
|
23
|
+
} else {
|
|
24
|
+
var GraphMinimap = new MiniMap(options);
|
|
25
|
+
graph.use(GraphMinimap);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}, [mapRef, props, graph]);
|
|
29
|
+
useEffect(function () {
|
|
30
|
+
initMinimap();
|
|
31
|
+
}, [mapRef, graph, initMinimap]);
|
|
32
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
ref: mapRef
|
|
34
|
+
});
|
|
35
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
2
|
+
import { Scroller as X6Scroll } from '@antv/x6-plugin-scroller';
|
|
3
|
+
import { useGraph } from "../../hooks/graph";
|
|
4
|
+
export var Scroller = function Scroller(props) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var initScroller = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var scroller = graph.getPlugin(X6Scroll.name);
|
|
9
|
+
|
|
10
|
+
if (scroller) {// TODO: add setOptions function to handle
|
|
11
|
+
// scroller.setOptions(options)
|
|
12
|
+
} else {
|
|
13
|
+
var graphScroller = new X6Scroll(props);
|
|
14
|
+
graph.use(graphScroller);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, [graph, props]);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
initScroller();
|
|
20
|
+
}, [graph, props, initScroller]);
|
|
21
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
+
};
|
|
23
|
+
export var useScroller = function useScroller() {
|
|
24
|
+
var graph = useGraph();
|
|
25
|
+
return useMemo(function () {
|
|
26
|
+
return graph && graph.getPlugin(X6Scroll.name);
|
|
27
|
+
}, [graph]);
|
|
28
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
|
+
import { Selection as X6Selection } from '@antv/x6-plugin-selection';
|
|
3
|
+
import { useGraph } from "../../hooks/graph";
|
|
4
|
+
export var Selection = function Selection(props) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var initSelection = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var selection = graph.getPlugin(X6Selection.name);
|
|
9
|
+
|
|
10
|
+
if (selection) {// TODO: add setOptions function to handle
|
|
11
|
+
// selection.setOptions(options)
|
|
12
|
+
} else {
|
|
13
|
+
var xflowSelection = new X6Selection(props);
|
|
14
|
+
graph.use(xflowSelection);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, [graph, props]);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
initSelection();
|
|
20
|
+
}, [graph]);
|
|
21
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
|
+
import { Snapline as X6Snapline } from '@antv/x6-plugin-snapline';
|
|
3
|
+
import { useGraph } from "../../hooks/graph";
|
|
4
|
+
export var Snapline = function Snapline(props) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var initSnapline = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var snapline = graph.getPlugin(X6Snapline.name);
|
|
9
|
+
|
|
10
|
+
if (snapline) {// TODO: add setOption function
|
|
11
|
+
// snapline.setOption(props)
|
|
12
|
+
} else {
|
|
13
|
+
var graphSnapline = new X6Snapline(props);
|
|
14
|
+
graph.use(graphSnapline);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, [graph, props]);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
initSnapline();
|
|
20
|
+
}, [graph]);
|
|
21
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
|
+
import { Transform as X6Transform } from '@antv/x6-plugin-transform';
|
|
3
|
+
import { useGraph } from "../../hooks/graph";
|
|
4
|
+
export var Transform = function Transform(props) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var initTransform = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
if (!graph.getPlugin(X6Transform.name)) {
|
|
9
|
+
var transform = new X6Transform(props);
|
|
10
|
+
graph.use(transform);
|
|
11
|
+
}
|
|
12
|
+
} else {
|
|
13
|
+
console.error('Transform has been initialized, can not initialize again!');
|
|
14
|
+
}
|
|
15
|
+
}, [graph, props]);
|
|
16
|
+
useEffect(function () {
|
|
17
|
+
initTransform();
|
|
18
|
+
}, [graph]);
|
|
19
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
20
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { Graph } from '@antv/x6';
|
|
3
|
+
interface GraphContextValue {
|
|
4
|
+
graph: Graph | null;
|
|
5
|
+
setGraph: (graph: Graph) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const GraphContext: import("react").Context<GraphContextValue>;
|
|
8
|
+
export declare const Provider: import("react").Provider<GraphContextValue>;
|
|
9
|
+
export declare const Consumer: import("react").Consumer<GraphContextValue>;
|
|
10
|
+
export default GraphContext;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
var defaultValue = {
|
|
3
|
+
graph: null,
|
|
4
|
+
setGraph: function setGraph() {}
|
|
5
|
+
};
|
|
6
|
+
export var GraphContext = /*#__PURE__*/createContext(defaultValue);
|
|
7
|
+
export var Provider = GraphContext.Provider;
|
|
8
|
+
export var Consumer = GraphContext.Consumer;
|
|
9
|
+
export default GraphContext;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { Clipboard } from '@antv/x6-plugin-clipboard';
|
|
3
|
+
import { useGraph } from "../graph";
|
|
4
|
+
export var useClipboard = function useClipboard(options) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
return useMemo(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var clipboard = graph.getPlugin(Clipboard.name);
|
|
9
|
+
|
|
10
|
+
if (options) {
|
|
11
|
+
if (clipboard) {// TODO: add setOptions function
|
|
12
|
+
// clipboard.setOptions(options)
|
|
13
|
+
} else {
|
|
14
|
+
var graphClipboard = new Clipboard(options);
|
|
15
|
+
return graphClipboard;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return clipboard;
|
|
20
|
+
}
|
|
21
|
+
}, [graph, options]);
|
|
22
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import { useMemo } from 'react';
|
|
8
|
+
import { Dnd } from '@antv/x6-plugin-dnd';
|
|
9
|
+
import { useGraph } from "../graph";
|
|
10
|
+
export var useDnd = function useDnd(options) {
|
|
11
|
+
var graph = useGraph();
|
|
12
|
+
return useMemo(function () {
|
|
13
|
+
return graph && new Dnd(_objectSpread(_objectSpread({}, options), {}, {
|
|
14
|
+
target: graph
|
|
15
|
+
}));
|
|
16
|
+
}, [graph, options]);
|
|
17
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
|
|
5
|
+
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); }
|
|
6
|
+
|
|
7
|
+
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; }
|
|
8
|
+
|
|
9
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
+
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
|
|
13
|
+
import { useEffect, useState, useCallback, useMemo } from 'react';
|
|
14
|
+
import { Export } from '@antv/x6-plugin-export';
|
|
15
|
+
import { useGraph } from "../graph";
|
|
16
|
+
export var useFormat = function useFormat(formatOptions) {
|
|
17
|
+
var _useState = useState(),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
options = _useState2[0],
|
|
20
|
+
setOptions = _useState2[1];
|
|
21
|
+
|
|
22
|
+
var graph = useGraph();
|
|
23
|
+
var initFormat = useCallback(function () {
|
|
24
|
+
if (graph) {
|
|
25
|
+
var format = new Export();
|
|
26
|
+
graph.use(format);
|
|
27
|
+
return format;
|
|
28
|
+
}
|
|
29
|
+
}, [graph]);
|
|
30
|
+
useEffect(function () {
|
|
31
|
+
if (formatOptions) {
|
|
32
|
+
setOptions(formatOptions);
|
|
33
|
+
}
|
|
34
|
+
}, [formatOptions]);
|
|
35
|
+
return useMemo(function () {
|
|
36
|
+
if (graph) {
|
|
37
|
+
var graphFormat = graph.getPlugin(Export.name) || initFormat();
|
|
38
|
+
return graphFormat && {
|
|
39
|
+
exportPng: function exportPng(fileName) {
|
|
40
|
+
return graphFormat.exportPNG(fileName, options);
|
|
41
|
+
},
|
|
42
|
+
exportJPEG: function exportJPEG(fileName) {
|
|
43
|
+
return graphFormat.exportJPEG(fileName, options);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
}, [graph, options, initFormat]);
|
|
48
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useGraph: () => import("@antv/x6").Graph | null;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { History } from '@antv/x6-plugin-history';
|
|
2
|
+
export declare const useHistory: (options?: History.Options) => History | undefined;
|
|
3
|
+
export declare const useOnHistoryUndo: (callback: (args: History.EventArgs['undo']) => void) => void;
|
|
4
|
+
export declare const useOnHistoryRedo: (callback: (args: History.EventArgs['redo']) => void) => void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useMemo, useEffect } from 'react';
|
|
2
|
+
import { History } from '@antv/x6-plugin-history';
|
|
3
|
+
import { useGraph } from "../graph";
|
|
4
|
+
export var useHistory = function useHistory(options) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
return useMemo(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var history = graph.getPlugin(History.name);
|
|
9
|
+
|
|
10
|
+
if (options) {
|
|
11
|
+
if (history) {// TODO: add setOptions function
|
|
12
|
+
// history.setOptions(options)
|
|
13
|
+
} else {
|
|
14
|
+
var graphHistory = new History(options);
|
|
15
|
+
graph.use(graphHistory);
|
|
16
|
+
return graphHistory;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return history;
|
|
21
|
+
}
|
|
22
|
+
}, [graph, options]);
|
|
23
|
+
};
|
|
24
|
+
export var useOnHistoryUndo = function useOnHistoryUndo(callback) {
|
|
25
|
+
var history = useHistory();
|
|
26
|
+
useEffect(function () {
|
|
27
|
+
if (history) {
|
|
28
|
+
history.on('undo', callback);
|
|
29
|
+
return function () {
|
|
30
|
+
history.off('undo', callback);
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
}, [history]);
|
|
34
|
+
};
|
|
35
|
+
export var useOnHistoryRedo = function useOnHistoryRedo(callback) {
|
|
36
|
+
var history = useHistory();
|
|
37
|
+
useEffect(function () {
|
|
38
|
+
if (history) {
|
|
39
|
+
history.on('redo', callback);
|
|
40
|
+
return function () {
|
|
41
|
+
history.off('redo', callback);
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
}, [history]);
|
|
45
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare type Actions = 'keypress' | 'keydown' | 'keyup';
|
|
2
|
+
export interface BindKeyOptions {
|
|
3
|
+
keys: string | string[];
|
|
4
|
+
callback: (e: KeyboardEvent) => void;
|
|
5
|
+
action?: Actions;
|
|
6
|
+
}
|
|
7
|
+
export interface UnBndKeyOptions {
|
|
8
|
+
keys: string | string[];
|
|
9
|
+
action?: Actions;
|
|
10
|
+
}
|
|
11
|
+
export declare const useBindKey: (options: BindKeyOptions) => void;
|
|
12
|
+
export declare const useUnbindKey: (options: UnBndKeyOptions) => void;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useCallback, useEffect } from 'react';
|
|
2
|
+
import { Keyboard } from '@antv/x6-plugin-keyboard';
|
|
3
|
+
import { useGraph } from "../graph";
|
|
4
|
+
export var useBindKey = function useBindKey(options) {
|
|
5
|
+
var graph = useGraph();
|
|
6
|
+
var getKeyboard = useCallback(function () {
|
|
7
|
+
if (graph) {
|
|
8
|
+
var keyboard = graph.getPlugin(Keyboard.name);
|
|
9
|
+
|
|
10
|
+
if (!keyboard) {
|
|
11
|
+
var graphKeyboard = new Keyboard({
|
|
12
|
+
enabled: true
|
|
13
|
+
});
|
|
14
|
+
graph.use(graphKeyboard);
|
|
15
|
+
return graphKeyboard;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return keyboard;
|
|
19
|
+
}
|
|
20
|
+
}, [graph]);
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
var keyboard = getKeyboard();
|
|
23
|
+
|
|
24
|
+
if (keyboard) {
|
|
25
|
+
keyboard.bindKey(options.keys, options.callback, options.action);
|
|
26
|
+
return function () {
|
|
27
|
+
keyboard.unbindKey(options.keys, options.action);
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}, [graph, options, getKeyboard]);
|
|
31
|
+
};
|
|
32
|
+
export var useUnbindKey = function useUnbindKey(options) {
|
|
33
|
+
var graph = useGraph();
|
|
34
|
+
useEffect(function () {
|
|
35
|
+
if (graph) {
|
|
36
|
+
var keyboard = graph.getPlugin(Keyboard.name);
|
|
37
|
+
keyboard === null || keyboard === void 0 ? void 0 : keyboard.unbindKey(options.keys, options.action);
|
|
38
|
+
}
|
|
39
|
+
}, [graph, options]);
|
|
40
|
+
};
|