new event view

coms/jenga/block/BlockEvent.jsx

@@ -2,13 +2,12 @@ import React from 'react'
 import LazyLoad from 'react-lazyload'
 import cls from 'classnames'
 import Block from './base/Block'
-import BlockChildren from './base/BlockChildren'
+// 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 BlockEventTrigger from './base/event/BlockEventTrigger'
-import BlockEventCons from './base/event/BlockEventCons'
 
 export default class BlockEvent extends Block {
   constructor(props) {
@@ -72,9 +71,9 @@ export default class BlockEvent extends Block {
               className={cls('block-item block-event f--h', {
                 'block-active': this.state.isActive
               })}
-              onDragOver={this.onDragOver}
-              onDrop={this.onDrop}
-              onClick={this.onSelectBlock}
+              // onDragOver={this.onDragOver}
+              // onDrop={this.onDrop}
+              // onClick={this.onSelectBlock}
               onContextMenu={this.onContextMenu}
             >
               <BlockDel
@@ -98,11 +97,11 @@ export default class BlockEvent extends Block {
               {getRelChildComs()}
               <div
                 id={'block-main-' + this.props.bid}
-                className="block-main flex-1 f--h"
+                className="block-main block-main-event flex-1 f--h"
                 style={this.blockMainStyle()}
                 draggable={true}
-                onDragStart={this.onDragStart}
-                onDragEnd={this.onDragEnd}
+                // onDragStart={this.onDragStart}
+                // onDragEnd={this.onDragEnd}
               >
                 <div
                   id={'over-cover-' + this.props.bid}
@@ -115,7 +114,6 @@ export default class BlockEvent extends Block {
                     eventNodeId={this.props.eventNodeId}
                   />
                 </div>
-                <BlockEventCons bid={this.props.bid} />
               </div>
               <BlockCite
                 bid={this.props.bid}
@@ -128,7 +126,7 @@ export default class BlockEvent extends Block {
                 eventNodeId={this.props.eventNodeId}
               />
             </div>
-            {this.state.isExpand ? (
+            {/* {this.state.isExpand ? (
               <BlockChildren
                 loops={this.getLoops()}
                 layer={this.props.layer + 1}
@@ -140,7 +138,7 @@ export default class BlockEvent extends Block {
                 eventNodeId={this.props.eventNodeId}
                 visibleBlockIds={this.props.visibleBlockIds}
               />
-            ) : null}
+            ) : null} */}
           </div>
         </div>
       </LazyLoad>

coms/jenga/block/base/BlockCite.jsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import cls from 'classnames'
+import citeActions from 'actions/cite'
+import citeStores from 'stores/cite'
+import newEventStores from 'stores/newEvent'
+import { getEventNodeById } from 'stores/funcs/newEvent'
+import { shouldCite } from 'stores/funcs/cite'
+import { shallowEqualImmutable } from 'utils/utils'
+
+export default class BlockCite extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      curEventNodeId: newEventStores.curEventNodeId,
+      isActive: false, // 是否处于引用激活态
+      memoExpanded: newEventStores.showMemo // 备注是否展开
+    }
+
+    this.onEventChange = this.onEventChange.bind(this)
+    this.onCiteChange = this.onCiteChange.bind(this)
+    this.getIsActive = this.getIsActive.bind(this)
+    this.hasBlockCite = this.hasBlockCite.bind(this)
+    this.onToggleBlockCite = this.onToggleBlockCite.bind(this)
+  }
+
+  componentDidMount() {
+    this.unsubscribe = newEventStores.listen(this.onEventChange)
+    this.unsubscribeCite = citeStores.listen(this.onCiteChange)
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe()
+    this.unsubscribeCite()
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      !shallowEqualImmutable(this.props, nextProps) ||
+      !shallowEqualImmutable(this.state, nextState)
+    )
+  }
+
+  componentDidUpdate(preProps) {
+    let isActive = this.getIsActive()
+    if (this.state.isActive !== isActive) {
+      this.setState({
+        isActive: isActive
+      })
+    }
+  }
+
+  onEventChange(status) {
+    let obj = {}
+    if (status && status.types) {
+      if (status.types.includes('curEventNodeId')) {
+        obj.curEventNodeId = status.data.curEventNodeId
+      }
+      if (status.types.includes('showMemo')) {
+        if (this.state.memoExpanded !== status.data.showMemo) {
+          obj.memoExpanded = status.data.showMemo
+        }
+      }
+    }
+    if (Object.keys(obj).length > 0) {
+      this.setState(obj)
+    }
+  }
+
+  onCiteChange(status) {
+    let obj = {}
+    if (status.types.includes('activeBlockCite')) {
+      obj.isActive = status.data.blockId === this.props.bid
+    }
+    if (
+      status.types.includes('deactiveCite') ||
+      status.types.includes('activeEventsCited') ||
+      status.types.includes('activePropsCite') ||
+      status.types.includes('activeJengaCite')
+    ) {
+      obj.isActive = false
+    }
+    if (
+      status.types.includes('changeBlockCite') &&
+      status.data.affectBlockId === this.props.bid
+    ) {
+      this.forceUpdate()
+    }
+    if (Object.keys(obj).length > 0) {
+      this.setState(obj)
+    }
+  }
+
+  getIsActive() {
+    return (
+      citeStores.curCite &&
+      citeStores.curCite.blockId === this.props.bid &&
+      citeStores.curCite.type === 'blockCite'
+    )
+  }
+
+  hasBlockCite() {
+    let curNodeId = this.props.eventNodeId || this.state.curEventNodeId
+    let result = false
+    let eventNode = getEventNodeById(curNodeId)
+    if (
+      eventNode &&
+      eventNode._cite &&
+      eventNode._cite.events &&
+      eventNode._cite.events[this.props.bid]
+    ) {
+      result = true
+    }
+    return result
+  }
+
+  onToggleBlockCite() {
+    let curNodeId = this.props.eventNodeId || this.state.curEventNodeId
+    if (this.state.isActive) {
+      citeActions.deactiveAllCite({})
+    } else {
+      citeActions.activeBlockCite({
+        nodeId: curNodeId,
+        blockId: this.props.bid
+      })
+    }
+  }
+
+  render() {
+    return shouldCite && this.hasBlockCite() ? (
+      <button
+        className={cls('btn-clear btn-block-cite', {
+          active: this.state.isActive,
+          'memo-expanded': this.state.memoExpanded
+        })}
+        onClick={this.onToggleBlockCite}
+      />
+    ) : null
+  }
+}

coms/jenga/block/base/BlockMemo.jsx

@@ -0,0 +1,223 @@
+import React from 'react'
+import cls from 'classnames'
+import i18n from 'i18next'
+import newEventActions from 'actions/newEvent'
+import newEventStores from 'stores/newEvent'
+import { getEventBlockByBid, getEventNodeById } from 'stores/funcs/newEvent'
+import { shallowEqualImmutable } from 'utils/utils'
+import { autoTextarea } from 'utils/commons/autoTextarea'
+
+class EditMemo extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: props.value
+    }
+    this.textarea = React.createRef()
+    this.resetTextarea = this.resetTextarea.bind(this)
+    this.onChange = this.onChange.bind(this)
+    this.onBlur = this.onBlur.bind(this)
+    this.getZIndex = this.getZIndex.bind(this)
+  }
+
+  componentDidMount() {
+    if (this.textarea && this.textarea.current) {
+      this.resetTextarea()
+    }
+  }
+
+  componentDidUpdate(preProps) {
+    if (preProps.value !== this.props.value) {
+      this.setState(
+        {
+          value: this.props.value
+        },
+        () => {
+          if (this.textarea && this.textarea.current) {
+            this.resetTextarea()
+          }
+        }
+      )
+    }
+  }
+
+  resetTextarea() {
+    this.textarea.current.removeAttribute('style')
+    delete this.textarea.current._length
+    delete this.textarea.current.currHeight
+    autoTextarea(this.textarea.current, 0, undefined)
+  }
+
+  onChange(e) {
+    let val = e && e.target ? e.target.value : e
+    this.setState({
+      value: val
+    })
+  }
+
+  onBlur() {
+    this.props.onChange && this.props.onChange({ memo: this.state.value })
+  }
+
+  getZIndex() {
+    let max = 99999
+    if (this.props.active) {
+      return max
+    } else if (this.props.order !== undefined) {
+      return max - (this.props.order + 1)
+    } else {
+      return 0
+    }
+  }
+
+  render() {
+    return (
+      <div
+        style={{ zIndex: this.getZIndex() }}
+        className={cls('block-memo f--hlc', this.props.className, {
+          active: this.props.active
+        })}
+      >
+        <textarea
+          ref={this.textarea}
+          placeholder={i18n.t('EventView.jenga_nav.memo')}
+          value={this.state.value}
+          className="memo-textarea"
+          onChange={this.onChange}
+          onBlur={this.onBlur}
+        />
+      </div>
+    )
+  }
+}
+
+export default class BlockMemo extends React.Component {
+  constructor(props) {
+    super(props)
+    this.curEventNodeId = newEventStores.curEventNodeId
+    this.state = {
+      expanded: newEventStores.showMemo, // 是否显示memo
+      memo: this.getBlockMemo(),
+      order: this.getOrder()
+    }
+    this.onEventChange = this.onEventChange.bind(this)
+    this.getOrder = this.getOrder.bind(this)
+    this.getBlockMemo = this.getBlockMemo.bind(this)
+    this.onChangeMemo = this.onChangeMemo.bind(this)
+    this.editContent = this.editContent.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) {
+    if (preProps.bid !== this.props.bid) {
+      let memo = this.getBlockMemo()
+      if (memo !== this.state.memo) {
+        this.setState({
+          memo: memo
+        })
+      }
+    }
+  }
+
+  onEventChange(status) {
+    let obj = {}
+    if (status && status.types) {
+      if (status.types.includes('showMemo')) {
+        if (this.state.expanded !== status.data.showMemo) {
+          obj.expanded = status.data.showMemo
+        }
+      }
+      if (
+        status.types.includes('updateBlockProp') &&
+        this.props.bid === status.data.affectBlockId &&
+        status.data.prop === 'com'
+      ) {
+        obj.memo = this.getBlockMemo()
+      }
+      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) {
+          obj.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
+  }
+
+  getBlockMemo() {
+    let bid = this.props.bid
+    let curNodeId = this.props.eventNodeId || this.curEventNodeId
+    let block = getEventBlockByBid(bid, curNodeId)
+    if (block && block.com) {
+      return block.com
+    }
+    return ''
+  }
+
+  onChangeMemo(e) {
+    if (e && e.memo !== undefined && this.state.memo !== e.memo) {
+      this.setState(
+        {
+          memo: e.memo
+        },
+        () => {
+          let curNodeId = this.props.eventNodeId || this.curEventNodeId
+          newEventActions.updateBlockProp({
+            nodeId: curNodeId,
+            blockId: this.props.bid,
+            prop: 'com',
+            value: this.state.memo,
+            addRecord: true,
+            trigger: false
+          })
+        }
+      )
+    }
+  }
+
+  editContent() {
+    return (
+      <EditMemo
+        className={this.props.className}
+        active={this.props.active}
+        order={this.state.order}
+        value={this.state.memo}
+        onChange={this.onChangeMemo}
+      />
+    )
+  }
+
+  render() {
+    return this.state.expanded ? this.editContent() : null
+  }
+}