withEditorContext

render-process/Editor/BehaviorTree.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import GGEditor, { Mind, RegisterNode } from 'gg-editor';
+import GGEditor, { Mind, RegisterNode, setAnchorPointsState } from 'gg-editor';
 import { MindData } from 'gg-editor/lib/common/interfaces';
 const data: MindData = {
   id: "1",
@@ -20,14 +20,44 @@ const data: MindData = {
   ],
 };
 
-export default class BehaviorTree extends React.Component {
+interface BehaviorTreeProps{
+
+}
+
+class BehaviorTree extends React.Component <BehaviorTreeProps> {
+  componentDidMount() {
+    // const { graph } = this.props;
+    // graph.on('click', (ev: any) => {
+    //   console.log("click", ev);
+    // });
+
+    // graph.on('dbclick', (ev: any) => {
+    //   console.log("dbclick", ev);
+    // });
+
+    // graph.on('dragenter', (ev: any) => {
+    //   console.log("dragenter", ev);
+    // });
+  }
+
   render() {
     return (
         <Mind
           style={{ width: "70vw", height: "100vh" }}
-        graphConfig= {{fitView: true, maxZoom:2, fitViewPadding:[20, 20, 20, 20]}}
+          graphConfig={{
+            fitView: true,
+            maxZoom: 2,
+            fitViewPadding: [20, 20, 20, 20]
+          }}
           data={data}
+          ref={component => {
+            if (component) {
+              console.log('graph:', component.graph);
+            }
+          }}
         />
     );
   }
 }
+
+export default BehaviorTree;

render-process/Editor/NodePanel.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Card } from 'antd';
 import { DetailPanel, withEditorContext } from 'gg-editor';
 import { EditorContextProps } from 'gg-editor/lib/components/EditorContext';
-import { DetailPanelComponentProps } from 'gg-editor/lib/components/DetailPanel';
 
 
-interface NodePanelProps extends EditorContextProps, DetailPanelComponentProps {
+interface NodePanelProps extends EditorContextProps {
 
 }
 
@@ -13,33 +12,17 @@ interface NodePanelState {
 
 }
 
-class Panel extends React.Component<NodePanelProps, NodePanelState> {
-  render() {
-    const { nodes } = this.props;
-    console.log("NodePanel render", nodes);
-    const node = nodes[0];
-    if (node) {
-      return (
-        <Card title="节点信息">
-          {node ? node.getModel().label : ''}
-        </Card>
-      )
-    } else {
-      return (
-        <Card title="节点信息">
-          未选中
-        </Card>
-      )
+class Panel extends React.Component<NodePanelProps> {
+  componentDidMount() {
+    console.log(this.props);
+    this.props.graph.on("click", (ev: any) => {
+      console.log("on click", ev);
+    })
   }
-
-  }
-}
-
-export default class NodePanel extends React.Component {
   render() {
-    console.log("NodePanel render");
+    console.log("NodePanel render", this.props);
     return (
-      <Card title="节点信息" style = {{height:"100%"}}>
+      <Card title="节点信息" style={{ height: "100%" }}>
         未选中fefqwefqwefwewef
       </Card>
     )
@@ -47,4 +30,4 @@ export default class NodePanel extends React.Component {
 
 }
 
-// export default DetailPanel.create<NodePanelProps>('node')(withEditorContext(Panel));
+export default withEditorContext<NodePanelProps, Panel>(Panel);

render-process/Editor/index.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
-import GGEditor, { Mind, RegisterNode } from 'gg-editor';
-import { MindData } from 'gg-editor/lib/common/interfaces';
+import GGEditor, { Mind, RegisterNode, withEditorContext } from 'gg-editor';
 import { Row, Col } from 'antd';
-import './Editor.css';
 import NodePanel from './NodePanel';
 import BehaviorTree from './BehaviorTree';
 
+import './Editor.css';
+
 export interface EditorProps {
 
 }
 
 export default class Editor extends React.Component<EditorProps> {
+  componentDidMount() {
+    console.log("props", this.props);
+  }
+
   render() {
     return (
       <GGEditor className="editor">
@@ -22,16 +26,7 @@ export default class Editor extends React.Component<EditorProps> {
             <NodePanel />
           </Col>
         </Row>
-        {/* <MindContextMenu />
-        <MindCopy />
-        <MindPaste />
-        <MindSave />
-        <RegisterBehaviour name="dblclickItemEditLabel" behaviour={() => { }} /> */}
       </GGEditor>
     );
   }
 }
-
-function getExclamationMarks(numChars: number) {
-  return Array(numChars + 1).join('!');
-}