new event view

coms/jenga/block/base/BlockDel.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import newEventActions from 'actions/newEvent'
+import { shallowEqualImmutable } from 'utils/utils'
+
+export default class BlockDel extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.onDelBlock = this.onDelBlock.bind(this)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      !shallowEqualImmutable(this.props, nextProps) ||
+      !shallowEqualImmutable(this.state, nextState)
+    )
+  }
+
+  onDelBlock(e) {
+    e.stopPropagation()
+    newEventActions.deleteBlock({ blockId: this.props.bid })
+  }
+
+  getStyle() {
+    return {
+      left: -(8 + this.props.layer * 20 + (this.props.layer + 1)) - 38 + 'px'
+    }
+  }
+
+  render() {
+    return this.props.isActive ? (
+      <button
+        className="btn-clear btn-block-del"
+        style={this.getStyle()}
+        onClick={this.onDelBlock}
+      />
+    ) : null
+  }
+}

coms/jenga/block/base/BlockOrder.jsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import cls from 'classnames'
+import { shallowEqualImmutable } from 'src/utils/utils'
+import { getEventNodeById } from 'stores/funcs/newEvent'
+import newEventStores from 'stores/newEvent'
+
+export default class BlockOrder extends React.Component {
+  constructor(props) {
+    super(props)
+    this.curEventNodeId = newEventStores.curEventNodeId
+    this.state = {
+      order: this.getOrder()
+    }
+
+    this.onEventChange = this.onEventChange.bind(this)
+    this.getStyle = this.getStyle.bind(this)
+    this.getOrder = this.getOrder.bind(this)
+    this.decoOrder = this.decoOrder.bind(this)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      !shallowEqualImmutable(this.props, nextProps) ||
+      !shallowEqualImmutable(this.state, nextState)
+    )
+  }
+
+  componentDidMount() {
+    this.unsubscribe = newEventStores.listen(this.onEventChange)
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe()
+  }
+
+  componentDidUpdate(preProps) {
+    // parentBid改变时需要更新
+    if (preProps.bid !== this.props.bid) {
+      let order = this.getOrder()
+      if (order !== this.state.order) {
+        this.setState({
+          order: order
+        })
+      }
+    }
+  }
+
+  onEventChange(status) {
+    let obj = {}
+    if (status) {
+      if (status.types.includes('curEventNodeId')) {
+        if (this.curEventNodeId !== status.data.curEventNodeId) {
+          this.curEventNodeId = status.data.curEventNodeId
+        }
+      }
+      if (status.types.includes('curEventBlockOrder')) {
+        let order = this.getOrder()
+        if (order !== this.state.order) {
+          this.setState({
+            order: order
+          })
+        }
+      }
+    }
+    if (Object.keys(obj).length > 0) {
+      this.setState(obj)
+    }
+  }
+
+  getOrder() {
+    let curNodeId = this.props.eventNodeId || this.curEventNodeId
+    let eventNode = getEventNodeById(curNodeId)
+    if (eventNode) {
+      return eventNode.events.order.indexOf(this.props.bid)
+    }
+    return 0
+  }
+
+  getStyle() {
+    const extraGapGroupLayer =
+      this.props.extraGapGroupLayer > 0
+        ? (this.props.extraGapGroupLayer - 1) * 2
+        : 0
+    return {
+      left:
+        -(
+          8 +
+          this.props.layer * 20 +
+          (this.props.layer + 1) +
+          extraGapGroupLayer
+        ) -
+        28 +
+        'px'
+    }
+  }
+
+  decoOrder() {
+    let result = this.state.order + 1
+    if (result < 10) {
+      result = '0' + result
+    }
+    return result
+  }
+
+  render() {
+    let { className } = this.props
+    return (
+      <div
+        className={cls('block-order f--h', className)}
+        style={this.getStyle()}
+      >
+        <div className="order-num f--hlc">
+          <div className="num">{this.decoOrder()}</div>
+        </div>
+        <div className="order-dot f--hlc">
+          <div className="dot" />
+        </div>
+      </div>
+    )
+  }
+}

coms/jenga/nav/JengaNavInfo.jsx

@@ -12,7 +12,7 @@ import {
   nodeIsTransaction
 } from 'stores/funcs/nodeType'
 import { getEventNodeById } from 'stores/funcs/newEvent'
-import JengaDebugBtn from './debug/JengaDebugBtn'
+import JengaDebugBtn from 'src/components/common/serviceDebug/JengaDebugBtn'
 import LogBtn from 'src/components/common/serviceLogView/LogBtn'
 import JengaNavNavigateNodes from './JengaNavNavigateNodes'
 

coms/jenga/nav/JengaNavNavigateNodes.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import treeActions from 'actions/tree'
 import newEventActions from 'actions/newEvent'
 import newEventStores from 'stores/newEvent'
+import iconStrObj from 'src/assets/icons/iconsStr'
 
 export default class JengaNavNavigateNodes extends React.Component {
   constructor(props) {
@@ -100,11 +101,13 @@ export default class JengaNavNavigateNodes extends React.Component {
           className="btn-clear btn-navigate-backward"
           disabled={!this.allowBackward()}
           onClick={this.onClick.bind(this, 'backward')}
+          dangerouslySetInnerHTML={{ __html: iconStrObj.navigateBackward }}
         />
         <button
           className="btn-clear btn-navigate-forward"
           disabled={!this.allowForward()}
           onClick={this.onClick.bind(this, 'forward')}
+          dangerouslySetInnerHTML={{ __html: iconStrObj.navigateForward }}
         />
       </div>
     )

coms/jenga/nav/JengaTypeBlockOperator.jsx

@@ -4,33 +4,26 @@ import i18n from 'i18next'
 import cls from 'classnames'
 import newEventActions from 'actions/newEvent'
 import newEventStores from 'stores/newEvent'
-// import {
-//   getActionBlockObjNode,
-//   getEventBlockByBid,
-//   getEventNodeById
-// } from 'stores/funcs/newEvent'
-// import {
-//   nodeIsDbPayment,
-//   nodeIsFunctionGroup,
-//   nodeIsService,
-//   nodeIsIotMessage,
-//   nodeIsFuncGroupCb,
-//   nodeIsMq
-// } from 'stores/funcs/nodeType'
-import { EVENT_BLOCK_TYPE } from 'const/const'
+import { getEventBlockByBid, getEventNodeById } from 'stores/funcs/newEvent'
+import {
+  nodeIsDbPayment,
+  nodeIsFunctionGroup,
+  nodeIsService,
+  nodeIsIotMessage
+} from 'stores/funcs/nodeType'
+import { EVENT_BLOCK_TYPE, BLOCK_OP_TYPE } from 'const/const'
 
 export default class JengaTypeBlockOperator extends React.Component {
   constructor(props) {
     super(props)
+    this.curEventNodeId = newEventStores.curEventNodeId
+    this.curBlockId = newEventStores.curBlockId
     this.state = {
       showComment: newEventStores.showComment, // 显示备注条
-      type: 'child' // 子层，同层
-      // enables: this.genEnableMap('child') // 分别对应循环，动作，条件
+      type: 'child', // 子层，同层
+      enables: this.genEnableMap('child') // 分别对应循环，动作，条件，备注，分组
     }
 
-    this.curEventNodeId = newEventStores.curEventNodeId
-    this.curBlockId = newEventStores.curBlockId
-
     this.buttons = [
       {
         type: EVENT_BLOCK_TYPE.LOOP,
@@ -51,6 +44,11 @@ export default class JengaTypeBlockOperator extends React.Component {
         type: EVENT_BLOCK_TYPE.COMMENT,
         class: 'btn-comment',
         name: i18n.t('EventView.jenga_nav.memo')
+      },
+      {
+        type: EVENT_BLOCK_TYPE.GROUP,
+        class: 'btn-group',
+        name: i18n.t('EventView.jenga_nav.group')
       }
     ]
 
@@ -59,9 +57,7 @@ export default class JengaTypeBlockOperator extends React.Component {
     this.onChangeType = this.onChangeType.bind(this)
     this.isSelectedType = this.isSelectedType.bind(this)
     this.onChangeShowComment = this.onChangeShowComment.bind(this)
-    // this.genEnableMap = this.genEnableMap.bind(this)
-    // this.dealEnableMap = this.dealEnableMap.bind(this)
-    // this.dealStatusEnable = this.dealStatusEnable.bind(this)
+    this.genEnableMap = this.genEnableMap.bind(this)
 
     this.onAddBlock = this.onAddBlock.bind(this)
   }
@@ -88,13 +84,6 @@ export default class JengaTypeBlockOperator extends React.Component {
         obj.enables = this.genEnableMap(this.state.type)
       }
     }
-    if (
-      status.types.includes('updateBlockProp') &&
-      ['object', 'action'].indexOf(status.data.prop) >= 0 &&
-      this.curBlockId === status.data.affectBlockId
-    ) {
-      obj.enables = this.genEnableMap(this.state.type)
-    }
     if (status.types.includes('changeShowComment')) {
       let { showComment } = this.state
       if (showComment !== status.data.showComment) {
@@ -117,7 +106,7 @@ export default class JengaTypeBlockOperator extends React.Component {
         break
     }
     this.setState(obj, () => {
-      // this.setState({ enables: this.genEnableMap(this.state.type) })
+      this.setState({ enables: this.genEnableMap(this.state.type) })
     })
   }
 
@@ -138,119 +127,57 @@ export default class JengaTypeBlockOperator extends React.Component {
     )
   }
 
-  // genEnableMap(type) {
-  //   let result = {}
-  //   let curBlock = getEventBlockByBid(this.curBlockId)
-  //   if (!curBlock) {
-  //     return this.dealEnableMap()
-  //   } else {
-  //     switch (type) {
-  //       case 'bro':
-  //         let parentBid = curBlock.parentBid
-  //         let parentBlock = getEventBlockByBid(parentBid)
-  //         return this.dealEnableMap(parentBlock)
-  //       case 'child':
-  //         return this.dealEnableMap(curBlock)
-  //     }
-  //   }
-  //   return result
-  // }
-
-  // dealEnableMap(block) {
-  //   let curEventNode = getEventNodeById(this.curEventNodeId)
-  //   let result = {}
-  //   result[EVENT_BLOCK_TYPE.ACTION] = false
-  //   result[EVENT_BLOCK_TYPE.LOOP] = false
-  //   result[EVENT_BLOCK_TYPE.CON] = false
-  //   result[EVENT_BLOCK_TYPE.STATUS] = false
-  //   result[EVENT_BLOCK_TYPE.ROOT] =
-  //     curEventNode &&
-  //     (!nodeIsService(curEventNode.type) ||
-  //       (nodeIsService(curEventNode.type) &&
-  //         nodeIsIotMessage(curEventNode.type))) &&
-  //     !nodeIsFunctionGroup(curEventNode.type) &&
-  //     !nodeIsDbPayment(curEventNode.type) &&
-  //     !nodeIsMq(curEventNode.type)
-  //   result[EVENT_BLOCK_TYPE.COMMENT] = false
-  //   result[EVENT_BLOCK_TYPE.GROUP] = false
-  //   if (block) {
-  //     switch (block.type) {
-  //       case EVENT_BLOCK_TYPE.ACTION:
-  //         result[EVENT_BLOCK_TYPE.ACTION] = false
-  //         result[EVENT_BLOCK_TYPE.LOOP] = false
-  //         result[EVENT_BLOCK_TYPE.CON] = false
-  //         result[EVENT_BLOCK_TYPE.STATUS] = this.dealStatusEnable(block)
-  //         result[EVENT_BLOCK_TYPE.COMMENT] = false
-  //         result[EVENT_BLOCK_TYPE.GROUP] = false
-  //         break
-  //       case EVENT_BLOCK_TYPE.ROOT:
-  //       case EVENT_BLOCK_TYPE.LOOP:
-  //       case EVENT_BLOCK_TYPE.CON:
-  //       case EVENT_BLOCK_TYPE.STATUS:
-  //       case EVENT_BLOCK_TYPE.GROUP:
-  //         result[EVENT_BLOCK_TYPE.ACTION] = true
-  //         result[EVENT_BLOCK_TYPE.LOOP] = true
-  //         result[EVENT_BLOCK_TYPE.CON] = true
-  //         result[EVENT_BLOCK_TYPE.STATUS] = false
-  //         result[EVENT_BLOCK_TYPE.COMMENT] = true
-  //         result[EVENT_BLOCK_TYPE.GROUP] = true
-  //         break
-  //     }
-  //   }
-  //   return result
-  // }
-
-  // dealStatusEnable(block) {
-  //   let result = false
-  //   if (block.action && block.action.callback) {
-  //     // 当前的动作
-  //     let obj = getActionBlockObjNode({
-  //       obj: block.object,
-  //       blockId: block.bid
-  //     })
-  //     if (obj && nodeIsFunctionGroup(obj.type)) {
-  //       // 是否action是调用动作且此对象的事件有回调函数
-  //       if (
-  //         block.action.name === 'fireFuncGroup' &&
-  //         obj &&
-  //         obj.events &&
-  //         obj.events.list &&
-  //         obj.events.list.length > 0 &&
-  //         obj.events.order &&
-  //         obj.events.order.length > 0
-  //       ) {
-  //         let found = false
-  //         for (let i = 0; i < obj.events.order.length && !found; i++) {
-  //           let _block = getEventBlockByBid(obj.events.order[i])
-  //           if (
-  //             _block &&
-  //             _block.type === EVENT_BLOCK_TYPE.ACTION &&
-  //             _block.enable !== false &&
-  //             _block.action &&
-  //             _block.action.name === 'funcResult'
-  //           ) {
-  //             found = true
-  //           }
-  //         }
-  //         if (found) {
-  //           result = true
-  //         }
-  //       }
-  //       // 有自定义回调也算
-  //       if (!result && obj.children) {
-  //         obj.children.forEach(v => {
-  //           let childNode = getEventNodeById(v)
-  //           if (childNode && nodeIsFuncGroupCb(childNode.type)) {
-  //             result = true
-  //           }
-  //         })
-  //       }
-  //     } else {
-  //       result = true
-  //     }
-  //   }
-  //   return result
-  // }
+  genEnableMap(type) {
+    let curEventNode = getEventNodeById(this.curEventNodeId)
+    let result = {}
+    result[EVENT_BLOCK_TYPE.ACTION] = false
+    result[EVENT_BLOCK_TYPE.LOOP] = false
+    result[EVENT_BLOCK_TYPE.CON] = false
+    result[EVENT_BLOCK_TYPE.ROOT] =
+      curEventNode &&
+      (!nodeIsService(curEventNode.type) ||
+        (nodeIsService(curEventNode.type) &&
+          nodeIsIotMessage(curEventNode.type))) &&
+      !nodeIsFunctionGroup(curEventNode.type) &&
+      !nodeIsDbPayment(curEventNode.type)
+    result[EVENT_BLOCK_TYPE.COMMENT] = false
+    result[EVENT_BLOCK_TYPE.GROUP] = false
+    if (this.curBlockId) {
+      let curBlock = getEventBlockByBid(this.curBlockId, this.curEventNodeId)
+      if (curBlock) {
+        switch (type) {
+          case 'bro':
+            if (!curBlock.eventId) {
+              result[EVENT_BLOCK_TYPE.ACTION] = true
+              result[EVENT_BLOCK_TYPE.LOOP] = true
+              result[EVENT_BLOCK_TYPE.CON] = true
+              result[EVENT_BLOCK_TYPE.COMMENT] = true
+              result[EVENT_BLOCK_TYPE.GROUP] = true
+            }
+            break
+          case 'child':
+            if (
+              curBlock.eventId ||
+              [
+                BLOCK_OP_TYPE.FOR,
+                BLOCK_OP_TYPE.WHILE,
+                BLOCK_OP_TYPE.IF,
+                BLOCK_OP_TYPE.ELSE,
+                BLOCK_OP_TYPE.BLOCK
+              ].indexOf(curBlock.op) >= 0
+            ) {
+              result[EVENT_BLOCK_TYPE.ACTION] = true
+              result[EVENT_BLOCK_TYPE.LOOP] = true
+              result[EVENT_BLOCK_TYPE.CON] = true
+              result[EVENT_BLOCK_TYPE.COMMENT] = true
+              result[EVENT_BLOCK_TYPE.GROUP] = true
+            }
+            break
+        }
+      }
+    }
+    return result
+  }
 
   onAddBlock(type) {
     // if (type !== EVENT_BLOCK_TYPE.ROOT) {
@@ -322,7 +249,7 @@ export default class JengaTypeBlockOperator extends React.Component {
             return (
               <button
                 key={i}
-                // disabled={!this.state.enables[btn.type]}
+                disabled={!this.state.enables[btn.type]}
                 onClick={this.onAddBlock.bind(this, btn.type)}
                 className={cls('btn-clear btn-block', btn.class)}
               >
@@ -332,7 +259,7 @@ export default class JengaTypeBlockOperator extends React.Component {
           })}
           <button
             className="btn-clear btn-block btn-event f--hlc"
-            // disabled={!this.state.enables[EVENT_BLOCK_TYPE.ROOT]}
+            disabled={!this.state.enables[EVENT_BLOCK_TYPE.ROOT]}
             onClick={this.onAddBlock.bind(this, EVENT_BLOCK_TYPE.ROOT)}
           >
             <div>{i18n.t('EventView.jenga_nav.event')}</div>

coms/jenga/nav/debug/JengaDebugBtn.jsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import i18n from 'i18next'
-import uiActions from 'actions/ui'
-import cooperateActions from 'actions/cooperate'
-import treeStores from 'stores/tree'
-import serviceStores from 'src/stores/service'
-import { getEventNodeById } from 'stores/funcs/newEvent'
-import { saveCaseBeforeActions } from 'stores/funcs/service'
-
-export default class JengaDebugBtn extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.saveCase = this.saveCase.bind(this)
-    this.debugService = this.debugService.bind(this)
-    this.onClick = this.onClick.bind(this)
-  }
-
-  saveCase(done) {
-    uiActions.toggleLoadingBar({
-      show: true,
-      title: i18n.t('LoadingBar.debugServiceTitle'),
-      content: i18n.t('LoadingBar.debugServiceContent'),
-      progress: 100,
-      type: 'dbLoading'
-    })
-    saveCaseBeforeActions({
-      success: () => {
-        done && done()
-      },
-      fail: () => {
-        uiActions.toggleLoadingBar({ show: false })
-      }
-    })
-  }
-
-  debugService(cb) {
-    let node = getEventNodeById(this.props.nodeId)
-    if (node) {
-      let { nid, eid, gid, uid, client } = treeStores.curCaseInfo
-      let data = {
-        _nid: nid,
-        _eid: eid,
-        _gid: gid,
-        _uid: uid,
-        _sid: node.id,
-        _locOffset: new Date().getTimezoneOffset() * -60
-      }
-      // 多人开发添加client
-      cooperateActions.getIsGroupWork(isGroupWork => {
-        if (isGroupWork) {
-          data._client = client
-        }
-      })
-      if (
-        node &&
-        node.props &&
-        node.props.inParams &&
-        node.props.inParams.length > 0
-      ) {
-        node.props.inParams.forEach(param => {
-          if (param.name && (param.default || param.default === 0)) {
-            data[param.name] = serviceStores.dealDefaultParam(
-              param.default,
-              param.type,
-              true
-            )
-          }
-        })
-      }
-      serviceStores.debugService(
-        data,
-        code => {
-          uiActions.toggleLoadingBar({ show: false })
-          cb && cb(code)
-        },
-        true
-      )
-    }
-  }
-
-  onClick() {
-    this.saveCase(() => {
-      this.debugService(code => {
-        uiActions.toggleServiceDebug({ show: true, code })
-      })
-    })
-  }
-
-  render() {
-    return (
-      <button className="btn-clear btn-debug" onClick={this.onClick}>
-        {i18n.t('EventView.jenga_nav.debug')}
-      </button>
-    )
-  }
-}

coms/jenga/panel/JengaItemEvent.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import LazyLoad from 'react-lazyload'
 import newEventStores from 'stores/newEvent'
-import BlockEvent from '../block/BlockEvent'
 import { getEventNodeById } from 'stores/funcs/newEvent'
 import { shallowEqualImmutable } from 'utils/utils'
+import BlockEvent from '../block/BlockEvent'
 
 export default class JengaItemEvent extends React.Component {
   constructor(props) {