完成删除节点的操作

Ji-Yuhang · Ji-Yuhang · commit 1fa96205f200 · 2017-12-03T21:42:57.000+08:00
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 
 ## TODO
-- 节点为文字为空时再按删除键，删除当前节点
+- ~~节点为文字为空时再按删除键，删除当前节点~~
 - 序列化和反序列化
 - 使用 redux 随时保存文档状态到 LocalStroage
 - 同步文档到服务器(需要后台 API)
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "babel-plugin-import": "^1.6.2",
     "babel-runtime": "^6.9.2",
     "dva": "^1.2.1",
+    "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Dva Demo</title>
+  <title>like Workflowy</title>
   <link rel="stylesheet" href="/index.css" />
 </head>
 <body>
diff --git a/src/components/AppView.js b/src/components/AppView.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import _ from 'lodash';
 import {Affix, Button} from 'antd';
 import NodeView from './NodeView';
+import { relativeTimeRounding } from 'moment';
 class AppView extends Component {
   constructor(props) {
     super(props);
@@ -474,7 +475,7 @@ class AppView extends Component {
     
   }
   onFocusChanged = (id, isFocus)=> {
-    // console.log('onFocusChanged',id, isFocus)
+    console.log('onFocusChanged',id, isFocus)
     let {focusId} = this.state
     if (isFocus) focusId = id
     else focusId = null
@@ -517,8 +518,12 @@ class AppView extends Component {
     
 
 
-    let rootNode = {id: 'root'}    
+    let rootNode = {id: 'root'}
+    console.log('begin generateStateData' ,rootNode,nodes, _.cloneDeep(releations))
+    
     this.generateStateData(rootNode, nodes, releations)
+    console.log('after generateStateData' ,rootNode,nodes, _.cloneDeep(releations))
+    
     this.setState({
       data: rootNode,
       nodes,
@@ -529,10 +534,137 @@ class AppView extends Component {
     this.printReleations(_.cloneDeep(releations))
     
   }
+  onDelete = (id) => {
+    console.log('onDelete', id);
+    let {data, nodes, releations} = this.state
+    console.log('begin----------------------onDelete------------------------------------begin')
+    this.printReleations(_.cloneDeep(releations))
+    console.log('begin onDelete' , _.cloneDeep(releations))  
+    // console.log('clone releations', _.cloneDeep(releations))
+    
+    console.log('onDelete', id)
+    let rootNode = {id: 'root'}
+    // _.find(releations, d => d.id == id).text = text
+    let node = _.find(releations, d => d.id == id)
+    let parentNode =null
+    if(node) parentNode = _.find(releations, d => d.id == node.parent_id)
+    let leftNode =null
+    if(node) leftNode = _.find(releations, d => d.id == node.left_id)
+    let rightNode =null
+    if(node) rightNode = _.find(releations, d => d.id == node.right_id)
+    let parentParentNode = null
+    if (parentNode) parentParentNode = _.find(releations, d => d.id == parentNode.parent_id)
+    
+
+    console.log('curentNode', node)
+    console.log('parentNode', parentNode)
+    console.log('leftNode', leftNode)
+    console.log('rightNode', rightNode)
+    console.log('parentParentNode', parentParentNode)
+    // if (n)
+    if (parentNode.id == 'root' && !leftNode) {
+      console.log('only one node , skip delete ')
+      return
+      
+    }
+    let children = _.find(releations, d => d.parent_id == id)
+    if (_.isEmpty(children)) {
+      // DO Delete
+      console.log(' DO Delete ')
+      // node.parent_id = parentNode.id
+     
+      if (leftNode && rightNode){
+        leftNode.right_id = rightNode.id
+        rightNode.left_id = leftNode.id
+      } else {
+        if (leftNode && !rightNode){
+          leftNode.right_id = null
+        }
+        if (rightNode && !leftNode){
+          rightNode.left_id = null
+        }
+      
+      }
+      let new_releation = null;
+      if (leftNode){
+        new_releation = leftNode
+      } else {
+        if (parentNode) new_releation = parentNode
+      }
+      let focusId = new_releation ? new_releation.id : null
+      this.check(_.clone(releations))
+      
+      this.setState({focusId}, ()=> {
+        releations = _.filter(releations, d => d.id != id)
+        nodes = _.filter(nodes, d => d.id != id)
+        // this.setState({releations, nodes})
+        // let rootNode = {id: 'root'}    
+        this.generateStateData(rootNode, nodes, releations)
+        this.setState({
+          data: rootNode,
+          nodes,
+          releations,
+          focusId
+        }, () => this.save())
+        this.domFocus(focusId);
+        console.log('end onDelete setState' ,rootNode,nodes, _.cloneDeep(releations), focusId)
+        this.printReleations(_.cloneDeep(releations))
+      })
+      
+     
+      
+    }
+    
+  }
+  onDirectionChange = (id, direction)=> {
+    console.log('onDirectionChange' , id, direction);
+    let {data, nodes, releations} = this.state
+    // console.log('begin----------------------onDirectionChange------------------------------------begin')
+    // this.printReleations(_.cloneDeep(releations))
+    // console.log('begin onDirectionChange' , _.cloneDeep(releations))  
+    // console.log('clone releations', _.cloneDeep(releations))
+    
+    // console.log('onDirectionChange', id)
+    let rootNode = {id: 'root'}
+    // _.find(releations, d => d.id == id).text = text
+    let node = _.find(releations, d => d.id == id)
+    let parentNode =null
+    if(node) parentNode = _.find(releations, d => d.id == node.parent_id)
+    let leftNode =null
+    if(node) leftNode = _.find(releations, d => d.id == node.left_id)
+    let rightNode =null
+    if(node) rightNode = _.find(releations, d => d.id == node.right_id)
+    let parentParentNode = null
+    if (parentNode) parentParentNode = _.find(releations, d => d.id == parentNode.parent_id)
+    
+    let focusId = null
+    if (direction == 'up'){
+      if (leftNode) focusId = leftNode.id
+      if (!leftNode && parentNode) focusId = parentNode.id
+      if(focusId) this.setState({focusId}, ()=>{this.domFocus(focusId)})
+    }
+    if (direction == 'down'){
+      focusId = null      
+      if (rightNode) focusId = rightNode.id
+      if(focusId) this.setState({focusId}, ()=>{this.domFocus(focusId)})
+    }
+
+    
+  }
+  domFocus = (id) => {
+    let input_id = `input_of_${id}`;    
+    let element = document.getElementById(input_id);
+    console.log('domFocus', id, input_id, element)
+    if (!id) return;
+    // if(!ele)
+    setTimeout(()=>{
+      if(element) element.focus();
+    }, 0)
+  }
   render() {
     return (
       <div>
-        <NodeView root={true} children={this.state.data.children} onTabChange={this.onTabChange} onTextChange={this.onTextChange} focusId={this.state.focusId} onFocusChanged={this.onFocusChanged} onPressEnter={this.onPressEnter}/>
+        <NodeView root={true} children={this.state.data.children} onTabChange={this.onTabChange} onTextChange={this.onTextChange} focusId={this.state.focusId} onFocusChanged={this.onFocusChanged} onPressEnter={this.onPressEnter} onDelete={this.onDelete} onDirectionChange={this.onDirectionChange}/>
       </div>
     )
   }
diff --git a/src/components/NodeView.js b/src/components/NodeView.js
@@ -1,13 +1,43 @@
 import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import {Affix, Button, Badge, Input} from 'antd';
-
+// import jquery from 'jquery';
+// window.$ = jquery
 class NodeView extends Component {
   constructor(props) {
     super(props);
+    
     // console.log('NodeView props', props)
 
   }
+  componentWillReceiveProps(props) {
+    if (props){
+      this.props = props;
+      const {focusId, id} = props
+      if (id && focusId &&id == focusId){
+        // console.log('will focus self:', id, focusId, this);
+        // let input_id = `input_of_${id}`;
+        // let element = document.getElementById(input_id);
+        // console.log('getElementById', input_id, element, jquery(`${input_id}`));
+        // jquery(`${input_id}`).focus();
+        // setTimeout(()=>{
+        //   element.focus();
+        // }, 200)
+        // jquery(input_id);
+        
+        // element.focus();
+        // ReactDOM.findDOMNode(input_id).focus();
+
+        // this.refs.input.auto
+        // this.refs.input.refs.input.focus(true);
+        // this.refs.input.focus(true);
+        
+        
+      }
+
+    }
+  }
   onChange = (e) => {
     const {root, children,onTextChange, id} = this.props
     const text = e.target.value
@@ -18,7 +48,7 @@ class NodeView extends Component {
     }
   }
   onKeyDown = (e)=> {
-    const {root, children,onTextChange,onTabChange, id} = this.props
+    const {root, children,onTextChange,onTabChange, id, onDelete, onDirectionChange} = this.props
     const text = e.target.text
     const target = e.target
     const {key, keyCode, shiftKey,ctrlKey, altKey} = e
@@ -36,7 +66,23 @@ class NodeView extends Component {
         onTabChange(id, false)
         e.preventDefault();
       }
-    }  
+    }
+    if (keyCode == 8 && _.isEmpty(this.props.text)){
+      // console.log("Backspace clicked");
+      if (onDelete) {
+        onDelete(id)
+        e.preventDefault();
+      }
+    }
+    if (keyCode >= 37 && keyCode <= 40 && onDirectionChange ) {
+      const temp ={
+        '37': 'left',
+        '38': 'up',
+        '39': 'right',
+        '40': 'down'
+      }
+      onDirectionChange(id, temp[keyCode.toString()])
+    }
   }
   onBlur = (e)=>{
     // console.log('onBlur',e)
@@ -91,6 +137,8 @@ class NodeView extends Component {
     borderRadius: 3,}}></div></div>
         {/* <Badge status="default"/> */}
         <Input
+          id={`input_of_${id}`}
+          ref='input' 
           style={{
             borderWidth: 0,
           }}
@@ -109,7 +157,7 @@ class NodeView extends Component {
     )
   }
   render() {
-    const {root, text, children, onTextChange, onTabChange,focusId,onFocusChanged,onPressEnter, id} = this.props
+    const {root, text, children, onTextChange, onTabChange,focusId,onFocusChanged, onDirectionChange,onPressEnter, id, onDelete} = this.props
     const borderLeft = root ? '0px solid #e5e5e5' : '1px solid #e5e5e5'
     const borderColor = focusId == id ? '#c8c8c8' : '#e5e5e5'
     
@@ -135,7 +183,7 @@ class NodeView extends Component {
           {_.map(children, (node) => {
             return (
               <div key={node.id}>
-                <NodeView id={node.id} text={node.text} children={node.children} onTextChange={onTextChange} onTabChange={onTabChange} focusId={focusId} onFocusChanged={onFocusChanged} onPressEnter={onPressEnter}/>
+                <NodeView id={node.id} text={node.text} children={node.children} onTextChange={onTextChange} onTabChange={onTabChange} focusId={focusId} onFocusChanged={onFocusChanged} onPressEnter={onPressEnter} onDelete={onDelete} onDirectionChange={onDirectionChange}/>
               </div>
             )
           })
diff --git a/yarn.lock b/yarn.lock
@@ -3098,6 +3098,10 @@ istanbul@^0.4.5:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "http://registry.npm.taobao.org/jquery/download/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
+
 js-base64@^2.1.9:
   version "2.3.2"
   resolved "http://registry.npm.taobao.org/js-base64/download/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
