- {gists.map((cell) => {
+ {cells.map((cell) => {
const Cell = Cells[cell.type];
return (
diff --git a/packages/core/src/components/toolbar.tsx b/packages/core/src/components/toolbar.tsx
index 957654a..c39d3d6 100644
--- a/packages/core/src/components/toolbar.tsx
+++ b/packages/core/src/components/toolbar.tsx
@@ -8,6 +8,7 @@ import 'antd/lib/tooltip/style';
export interface ToolbarProps {
graph: Graph;
+ onSave: (data: { nodes: any; edges: any }) => void;
}
const Group = styled.div`
@@ -48,7 +49,7 @@ const Item = styled.span`
}
`;
-const Toolbar = ({ graph }: ToolbarProps): JSX.Element => {
+const Toolbar = ({ graph, onSave }: ToolbarProps): JSX.Element => {
const undoManager = UndoManager.create(graph);
const commands = getCommands(graph, undoManager);
@@ -60,7 +61,18 @@ const Toolbar = ({ graph }: ToolbarProps): JSX.Element => {
i.name).join('-')}>
{items.map((item) => (
- - {item.icon}
+ - {
+ if (item.name === 'save') {
+ const graphData = graph.toJSON();
+ onSave(graphData);
+ return;
+ }
+ item.handler();
+ }}
+ >
+ {item.icon}
+
))}
diff --git a/packages/core/src/data/commands.tsx b/packages/core/src/data/commands.tsx
index cb56f17..bf12726 100644
--- a/packages/core/src/data/commands.tsx
+++ b/packages/core/src/data/commands.tsx
@@ -81,8 +81,7 @@ export default function getCommands(graph: Graph, undoManager: UndoManager): Com
tooltip: '保存',
shortcut: `${ctrlKey} + S`,
handler: (): void => {
- const graphData = graph.toJSON();
- console.log(JSON.stringify(graphData));
+ // code
},
},
],
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index dce45d0..dc0fc96 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -7,14 +7,11 @@ import Sidebar from './components/sidebar';
import Toolbar from './components/toolbar';
import Setting from './components/setting';
import createGraph from './utils/create-graph';
+import { DataItem } from './data/cells';
import 'antd/lib/layout/style';
Shape.register('react', ReactShape, true);
-export interface CoreState {
- inited: boolean;
-}
-
const { Header, Sider, Content } = Layout;
const IMoveLayout = styled(Layout)`
@@ -49,12 +46,21 @@ const ToolWrapper = styled.div`
background: #fff;
`;
-class Core extends React.Component<{}, CoreState> {
+interface CoreProps {
+ cells: DataItem[];
+ onSave: (data: { nodes: any; edges: any }) => void;
+}
+
+interface CoreState {
+ inited: boolean;
+}
+
+class Core extends React.Component {
private graph: Graph | null = null;
private container = React.createRef();
- constructor(props: {}) {
+ constructor(props: CoreProps) {
super(props);
this.state = {
inited: false,
@@ -75,15 +81,20 @@ class Core extends React.Component<{}, CoreState> {
render(): JSX.Element {
const { inited } = this.state;
+ const { cells, onSave } = this.props;
return (
iMove
- {this.graph && inited && }
+
+ {this.graph && inited && }2
+
- {this.graph && inited && }
+
+ {this.graph && inited && }
+