diff --git a/package.json b/package.json index 564efa5..1051510 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "behavior3editor", - "version": "0.1.5", + "version": "0.1.6", "description": "行为树编辑器", "main": "./dist/main.js", "scripts": { diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index 1dc9d00..0ff04ec 100644 --- a/render-process/Editor/index.tsx +++ b/render-process/Editor/index.tsx @@ -19,6 +19,7 @@ import { clipboard } from "electron"; export interface EditorProps { filepath: string; + onChangeSaveState: (unsave: boolean) => void; } interface EditorState { @@ -50,6 +51,10 @@ export default class Editor extends React.Component { this.autoId = Utils.refreshNodeId(this.data); } + shouldComponentUpdate(nextProps: EditorProps, nextState: EditorState) { + return this.props.filepath != nextProps.filepath || this.state.curNodeId != nextState.curNodeId; + } + componentDidMount() { const graph = new TreeGraph({ container: this.ref.current, @@ -329,6 +334,8 @@ export default class Editor extends React.Component { this.graph.changeData(); this.graph.layout(); this.graph.set("animate", true); + + this.props.onChangeSaveState(true); } save() { @@ -343,6 +350,7 @@ export default class Editor extends React.Component { filepath, JSON.stringify(treeModel) ); + this.props.onChangeSaveState(false); return treeModel; } @@ -390,6 +398,8 @@ export default class Editor extends React.Component { this.graph.layout(); this.graph.fitCenter(); this.graph.set("animate", true); + + this.props.onChangeSaveState(true); } pushUndoStack(keepRedo?: boolean) { @@ -424,8 +434,8 @@ export default class Editor extends React.Component { } render() { - console.log("render tree"); const { curNodeId } = this.state; + console.log("render tree", curNodeId); var curNode: any; if (curNodeId) { curNode = this.graph.findDataById(curNodeId); @@ -449,6 +459,7 @@ export default class Editor extends React.Component { } const item = this.graph.findById(id); item.draw(); + this.props.onChangeSaveState(true); }} pushUndoStack={() => { this.pushUndoStack(); diff --git a/render-process/TreeTabs.tsx b/render-process/TreeTabs.tsx index 952b961..a56f1a5 100644 --- a/render-process/TreeTabs.tsx +++ b/render-process/TreeTabs.tsx @@ -14,14 +14,19 @@ interface TreeTabsProps { onTabSelected: (path: string) => void; } +interface TreeInfo { + filepath: string; + unsave?: boolean; +} + interface TreeTabsState { - filepaths: string[]; - curPath?: string; + trees: TreeInfo[]; + curTree?: string; } export default class TreeTabs extends Component { state: TreeTabsState = { - filepaths: [], + trees: [], }; editors: { [path: string]: Editor } = {}; @@ -48,7 +53,7 @@ export default class TreeTabs extends Component { }); ipcRenderer.on(MainEventType.SAVE, (event: any) => { - const { curPath } = this.state; + const { curTree: curPath } = this.state; if (!curPath) { return; } @@ -78,8 +83,8 @@ export default class TreeTabs extends Component { componentDidUpdate() { setTimeout(() => { - this.props.onTabSelected(this.state.curPath); - }, 100); + this.props.onTabSelected(this.state.curTree); + }, 500); } getOpenTreesModel() { @@ -94,7 +99,7 @@ export default class TreeTabs extends Component { } getCurEditor() { - const { curPath } = this.state; + const { curTree: curPath } = this.state; if (!curPath) { return; } @@ -102,26 +107,26 @@ export default class TreeTabs extends Component { } openFile(path: string) { - if (this.state.filepaths.indexOf(path) < 0) { - const filepaths = this.state.filepaths; - filepaths.push(path); - this.setState({ filepaths, curPath: path }); + if (!this.state.trees.find(e => e.filepath == path)) { + const trees = this.state.trees; + trees.push({ filepath: path }); + this.setState({ trees, curTree: path }); } else { - this.setState({ curPath: path }); + this.setState({ curTree: path }); } } closeFile(path: string) { - let filepaths = this.state.filepaths; - filepaths = filepaths.filter((filepath) => (filepath != path)); - const length = filepaths.length; - this.setState({ filepaths, curPath: length > 0 ? filepaths[0] : null }); + let trees = this.state.trees; + trees = trees.filter(tree => tree.filepath != path); + const length = trees.length; + this.setState({ trees: trees, curTree: length > 0 ? trees[0].filepath : null }); } render() { - console.log("render tabs"); - const { filepaths, curPath } = this.state; - if (!curPath) { + const { trees, curTree } = this.state; + console.log("render tabs", trees); + if (!curTree) { return
; } this.editors = {}; @@ -130,10 +135,10 @@ export default class TreeTabs extends Component { hideAdd className="tabs" type="editable-card" - defaultActiveKey={curPath} - activeKey={curPath} + defaultActiveKey={curTree} + activeKey={curTree} onChange={(activeKey) => { - this.setState({ curPath: activeKey }); + this.setState({ curTree: activeKey }); }} onEdit={(targetKey, action) => { if (action == "remove") { @@ -141,13 +146,19 @@ export default class TreeTabs extends Component { } }} > - {filepaths.map((filepath) => { + {trees.map((tree) => { return ( - + { + if(tree.unsave != unsave) { + tree.unsave = unsave; + this.forceUpdate(); + } + }} ref={(ref) => { - this.editors[filepath] = ref; + this.editors[tree.filepath] = ref; }} />