new event view

coms/jenga/block/BlockAction.jsx

@@ -0,0 +1,187 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import LazyLoad from 'react-lazyload'
+import cls from 'classnames'
+import newEventActions from 'actions/newEvent'
+import Block from './base/Block'
+import BlockChildren from './base/BlockChildren'
+import BlockOrder from './base/BlockOrder'
+import BlockDel from './base/BlockDel'
+import BlockCite from './base/BlockCite'
+import BlockMemo from './base/BlockMemo'
+import BlockActionObject from './base/action/BlockActionObject'
+import BlockActionMethod from './base/action/BlockActionMethod'
+
+export default class BlockAction extends Block {
+  constructor(props) {
+    super(props)
+
+    this.actionObject = React.createRef()
+    this.actionMethod = React.createRef()
+    this.onToggleParamsVisible = this.onToggleParamsVisible.bind(this)
+  }
+
+  onToggleParamsVisible(e) {
+    let objDom = ReactDOM.findDOMNode(this.actionObject)
+    let mthDom = ReactDOM.findDOMNode(this.actionMethod)
+    if (
+      !(
+        (objDom && objDom.contains(e.target)) ||
+        (mthDom && mthDom.contains(e.target))
+      ) &&
+      !(
+        e.target &&
+        e.target.classList &&
+        e.target.classList.contains('objectPickerTooltip__item')
+      )
+    ) {
+      newEventActions.toggleActionParamsVisible({
+        blockId: this.props.bid,
+        visible: 'part'
+      })
+      newEventActions.changeActionParamSubChildrenItemVisible({
+        blockId: this.props.bid,
+        visible: 'part'
+      })
+    }
+  }
+
+  render() {
+    let jengaContent = document.getElementsByClassName('jenga-content')[0]
+
+    let getRelChildComs = () => {
+      return this.state.hasChildren ? (
+        <React.Fragment>
+          {this.state.isExpand ? (
+            <span
+              className={cls(
+                'index-line',
+                'index-main-line',
+                'index-line-' + this.getNextLineColor()
+              )}
+              style={this.indexLeftStyle()}
+            />
+          ) : null}
+          <button
+            className={cls(
+              'btn-clear btn-toggle-sub btn-expand',
+              'btn-toggle-sub-' +
+                (this.state.isExpand ? 'expand-' : 'collapse-') +
+                this.getLineColor()
+            )}
+            onClick={this.onToggleBlockExpand}
+          />
+        </React.Fragment>
+      ) : (
+        <div
+          className={cls(
+            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
+            'btn-toggle-sub-empty-' + this.getLineColor()
+          )}
+        />
+      )
+    }
+
+    return (
+      <LazyLoad height={45} overflow={true} scrollContainer={jengaContent}>
+        <div className="block-wrap block-wrap-action f--h">
+          <span
+            className={cls('index-line', 'index-line-' + this.getLineColor(), {
+              'index-last-line': this.props.isLast,
+              'index-virtual-layer': this.props.virtualLayer
+            })}
+            style={this.indexLeftStyle()}
+          />
+          <div
+            className={cls('flex-1', {
+              'flex-wrap-disabled': !this.state.isEnable
+            })}
+          >
+            <div
+              className={cls('block-item block-action f--h', {
+                'block-active': this.state.isActive
+              })}
+              // onDragOver={this.onDragOver}
+              // onDrop={this.onDrop}
+              onClick={this.onSelectBlock}
+              onContextMenu={this.onContextMenu}
+            >
+              <BlockDel
+                isActive={this.state.isActive}
+                layer={this.props.layer}
+                bid={this.props.bid}
+              />
+              <BlockOrder
+                layer={this.props.layer}
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+                extraGapGroupLayer={this.extraGapGroupLayer()}
+              />
+              <div
+                className="block-gap"
+                style={{
+                  left: -this.getGapLeft() + 'px',
+                  padding: '0 ' + this.getGapLeft() / 2 + 'px'
+                }}
+              />
+              {getRelChildComs()}
+              <div
+                id={'block-main-' + this.props.bid}
+                className="block-main flex-1 f--h"
+                style={this.blockMainStyle()}
+                draggable={true}
+                // onDragStart={this.onDragStart}
+                // onDragEnd={this.onDragEnd}
+                onClick={this.onToggleParamsVisible}
+              >
+                <div
+                  id={'over-cover-' + this.props.bid}
+                  className="over-cover"
+                />
+                <BlockActionObject
+                  ref={node => (this.actionObject = node)}
+                  bid={this.props.bid}
+                  isEnable={this.state.isEnable}
+                  loops={this.getLoops()}
+                  eventNodeId={this.props.eventNodeId}
+                />
+                <BlockActionMethod
+                  ref={node => (this.actionMethod = node)}
+                  bid={this.props.bid}
+                  groupLayer={this.props.groupLayer}
+                  nestGroupLayer={this.props.nestGroupLayer}
+                  extraGapGroupLayer={this.extraGapGroupLayer()}
+                  layer={this.props.layer}
+                  eventNodeId={this.props.eventNodeId}
+                />
+              </div>
+              <BlockCite
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+              />
+              <BlockMemo
+                className="block-action-memo"
+                active={this.state.isActive}
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+              />
+            </div>
+            {this.state.isExpand ? (
+              <BlockChildren
+                loops={this.getLoops()}
+                layer={this.props.layer + 1}
+                groupLayer={this.props.groupLayer}
+                nestGroupLayer={0}
+                offspringInNestGroupLayer={this.props.nestGroupLayer}
+                extraGapGroupLayer={this.extraGapGroupLayer()}
+                parentBid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+                visibleBlockIds={this.props.visibleBlockIds}
+              />
+            ) : null}
+          </div>
+        </div>
+      </LazyLoad>
+    )
+  }
+}

coms/jenga/block/BlockCon.jsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import LazyLoad from 'react-lazyload'
+import cls from 'classnames'
+import Block from './base/Block'
+import BlockChildren from './base/BlockChildren'
+import BlockOrder from './base/BlockOrder'
+import BlockDel from './base/BlockDel'
+import BlockCite from './base/BlockCite'
+import BlockMemo from './base/BlockMemo'
+import BlockEnable from './base/BlockEnable'
+import BlockConCons from './base/con/BlockConCons'
+
+export default class BlockCon extends Block {
+  constructor(props) {
+    super(props)
+  }
+
+  getConBtnStyle() {
+    if (this.props.nestGroupLayer > 1) {
+      return { left: `${(this.props.nestGroupLayer - 1) * 2}px` }
+    }
+    return null
+  }
+
+  render() {
+    let jengaContent = document.getElementsByClassName('jenga-content')[0]
+
+    let getRelChildComs = () => {
+      return this.state.hasChildren ? (
+        <button
+          className={cls(
+            'btn-clear btn-toggle-sub btn-expand',
+            'btn-toggle-sub-' +
+              (this.state.isExpand ? 'expand-' : 'collapse-') +
+              this.getLineColor()
+          )}
+          onClick={this.onToggleBlockExpand}
+        />
+      ) : (
+        <div
+          className={cls(
+            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
+            'btn-toggle-sub-empty-' + this.getLineColor()
+          )}
+        />
+      )
+    }
+
+    return (
+      <LazyLoad height={26} overflow={true} scrollContainer={jengaContent}>
+        <div className="block-wrap block-wrap-con f--h">
+          <span
+            className={cls('index-line', 'index-line-' + this.getLineColor(), {
+              'index-last-line': this.props.isLast,
+              'index-virtual-layer': this.props.virtualLayer
+            })}
+            style={this.indexLeftStyle()}
+          />
+          <div
+            className={cls('flex-1', {
+              'flex-wrap-disabled': !this.state.isEnable
+            })}
+          >
+            <div
+              className={cls('block-item block-con f--h', {
+                'block-active': this.state.isActive
+              })}
+              // onDragOver={this.onDragOver}
+              // onDrop={this.onDrop}
+              onClick={this.onSelectBlock}
+              onContextMenu={this.onContextMenu}
+            >
+              <BlockDel
+                isActive={this.state.isActive}
+                layer={this.props.layer}
+                bid={this.props.bid}
+              />
+              <BlockOrder
+                layer={this.props.layer}
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+                extraGapGroupLayer={this.extraGapGroupLayer()}
+              />
+              <div
+                className="block-gap"
+                style={{
+                  left: -this.getGapLeft() + 'px',
+                  padding: '0 ' + this.getGapLeft() / 2 + 'px'
+                }}
+              />
+              {getRelChildComs()}
+              <div
+                id={'block-main-' + this.props.bid}
+                className="block-main flex-1 f--h"
+                style={this.blockMainStyle()}
+                draggable={true}
+                // onDragStart={this.onDragStart}
+                // onDragEnd={this.onDragEnd}
+              >
+                <div
+                  id={'over-cover-' + this.props.bid}
+                  className="over-cover"
+                />
+                <BlockConCons
+                  groupLayer={this.props.groupLayer}
+                  nestGroupLayer={this.props.nestGroupLayer}
+                  extraGapGroupLayer={this.extraGapGroupLayer()}
+                  layer={this.props.layer}
+                  bid={this.props.bid}
+                  eventNodeId={this.props.eventNodeId}
+                />
+                <BlockEnable
+                  className="btn-toggle-con-enable"
+                  style={this.getConBtnStyle()}
+                  bid={this.props.bid}
+                  isEnable={this.state.isEnable}
+                  eventNodeId={this.props.eventNodeId}
+                />
+              </div>
+              <BlockCite
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+              />
+              <BlockMemo
+                className="block-con-memo"
+                active={this.state.isActive}
+                bid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+              />
+            </div>
+            {this.state.isExpand ? (
+              <BlockChildren
+                loops={this.getLoops()}
+                layer={this.props.layer + 1}
+                groupLayer={this.props.groupLayer}
+                nestGroupLayer={0}
+                offspringInNestGroupLayer={this.props.nestGroupLayer}
+                extraGapGroupLayer={this.extraGapGroupLayer()}
+                parentBid={this.props.bid}
+                eventNodeId={this.props.eventNodeId}
+                visibleBlockIds={this.props.visibleBlockIds}
+              />
+            ) : null}
+          </div>
+        </div>
+      </LazyLoad>
+    )
+  }
+}

coms/jenga/block/BlockEvent.jsx

@@ -73,7 +73,7 @@ export default class BlockEvent extends Block {
               })}
               // onDragOver={this.onDragOver}
               // onDrop={this.onDrop}
-              // onClick={this.onSelectBlock}
+              onClick={this.onSelectBlock}
               onContextMenu={this.onContextMenu}
             >
               <BlockDel

coms/jenga/block/base/BlockEnable.jsx

@@ -41,7 +41,7 @@ export default class BlockEnable extends React.Component {
       let block = getParentBlock(this.props.bid, eventNode.id)
       while (!hasDisabled && block) {
         hasDisabled = hasDisabled || block.skip
-        block = getParentBlock(block.ln, eventNode.id)
+        block = getParentBlock(block.eventId || block.ln, eventNode.id)
       }
     }
     return hasDisabled

coms/jenga/block/base/event/BlockEventTrigger.jsx

@@ -73,10 +73,8 @@ export default class BlockEventTrigger extends React.Component {
         this.props.bid === status.data.affectBlockId &&
         status.data.prop === 'trigger'
       ) {
-        this.setState({
-          trigger: this.getTrigger().name,
-          mini: this.getTrigger().mini
-        })
+        obj.trigger = this.getTrigger().name
+        obj.mini = this.getTrigger().mini
       }
     }
     if (Object.keys(obj).length > 0) {

coms/jenga/nav/JengaTypeBlockOperator.jsx

@@ -4,7 +4,12 @@ import i18n from 'i18next'
 import cls from 'classnames'
 import newEventActions from 'actions/newEvent'
 import newEventStores from 'stores/newEvent'
-import { getEventBlockByBid, getEventNodeById } from 'stores/funcs/newEvent'
+import {
+  getEventBlockByBid,
+  getEventNodeById,
+  getParentBlock,
+  getChildIndex
+} from 'stores/funcs/newEvent'
 import {
   nodeIsDbPayment,
   nodeIsFunctionGroup,
@@ -182,28 +187,30 @@ export default class JengaTypeBlockOperator extends React.Component {
   }
 
   onAddBlock(type) {
-    // if (type !== EVENT_BLOCK_TYPE.ROOT) {
-    //   switch (this.state.type) {
-    //     case 'bro':
-    //       let curBlock = getEventBlockByBid(this.curBlockId)
-    //       if (curBlock) {
-    //         let parentBid = curBlock.parentBid
-    //         let parentBlock = getEventBlockByBid(parentBid)
-    //         if (parentBlock) {
-    //           let index = parentBlock.children.indexOf(this.curBlockId)
-    //           if (index !== -1) {
-    //             newEventActions.addBlock({ type, parentBid, index: index + 1 })
-    //           }
-    //         }
-    //       }
-    //       break
-    //     case 'child':
-    //       newEventActions.addBlock({ type, parentBid: this.curBlockId })
-    //       break
-    //   }
-    // } else {
-    //   newEventActions.addBlock({ type })
-    // }
+    if (type !== EVENT_BLOCK_TYPE.ROOT) {
+      switch (this.state.type) {
+        case 'bro':
+          let parentBlock = getParentBlock(this.curBlockId, this.curEventNodeId)
+          if (parentBlock) {
+            let index = getChildIndex(parentBlock, this.curBlockId)
+            if (index !== -1) {
+              newEventActions.addBlock({
+                type,
+                parentBid: parentBlock.eventId
+                  ? parentBlock.eventId
+                  : parentBlock.ln,
+                index: index + 1
+              })
+            }
+          }
+          break
+        case 'child':
+          newEventActions.addBlock({ type, parentBid: this.curBlockId })
+          break
+      }
+    } else {
+      newEventActions.addBlock({ type })
+    }
   }
 
   render() {