refactor: enhance implementation of resetControl

Author: leftstick

example/src/pages/api/fengmap-resetcontrol/index.js

@@ -15,7 +15,6 @@ class FengmapResetControlDoc extends Component {
   render() {
     const { screenWidth } = this.props
     const contentWidth = screenWidth > 1000 ? screenWidth - 280 - 24 * 4 - 40 : screenWidth
-    console.log(fengmapSDK.controlPositon.RIGHT_BOTTOM)
     return (
       <React.Fragment>
         <Highlight language="jsx">
@@ -50,11 +49,6 @@ class FengmapResetControlDoc extends Component {
                   </a>
                 </React.Fragment>
               )
-            },
-            {
-              prop: 'delayed',
-              type: 'number',
-              description: <React.Fragment>延时点击时间，属于ctrlOpts中的属性</React.Fragment>
             }
           ]}
         />
@@ -121,8 +115,7 @@ export default function Example(props) {
     <FengmapResetControl
     ctrlOptions={{
       position: fengmapSDK.controlPositon.LEFT_TOP,
-      imgURL: resolvePublicPath('/assets/reset.png'),
-      delayed:5000
+      imgURL: resolvePublicPath('/assets/reset.png')
     }}
   />
   )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fengmap",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "",
   "author": "Howard.Zuo",
   "typings": "typings/index.d.ts",

src/FengmapBase.js

@@ -68,38 +68,41 @@ class FengmapBase extends Component {
   }
 
   _loadMap = mapId => {
-    const { mapOptions, events, fengmapSDK } = this.props
-    if (!mapId || !fengmapSDK || isOrderIE()) {
-      return
-    }
-    if (this.mapInstance) {
-      this.mapContainer.current.innerHTML = ''
-    }
-    this.mapInstance = new fengmapSDK.FMMap(Object.assign({}, mapOptions, { container: this.mapContainer.current }))
-    EVENTS.forEach(e => {
-      this.mapInstance.on(e, event => {
-        if (e === 'loadComplete') {
-          this.loadingTxt.current.style['zIndex'] = -10
-          this._configGestureEnableController()
-          this._initAllChildren(this.mapInstance)
-          initFloorsToMapInstance(this.mapInstance)
-        }
-
-        if (events && events[e]) {
-          events[e](event, this.mapInstance)
-        }
-        if (!this.mapInstance) {
-          return
-        }
-        if (events && events.mapHoverNode) {
-          this.mapInstance.gestureEnableController.enableMapHover = true
-        } else {
-          this.mapInstance.gestureEnableController.enableMapHover = false
-        }
+    return new Promise((resolve, reject) => {
+      const { mapOptions, events, fengmapSDK } = this.props
+      if (!mapId || !fengmapSDK || isOrderIE()) {
+        return resolve()
+      }
+      if (this.mapInstance) {
+        this.mapContainer.current.innerHTML = ''
+      }
+      this.mapInstance = new fengmapSDK.FMMap(Object.assign({}, mapOptions, { container: this.mapContainer.current }))
+      EVENTS.forEach(e => {
+        this.mapInstance.on(e, event => {
+          if (e === 'loadComplete') {
+            this.loadingTxt.current.style['zIndex'] = -10
+            this._configGestureEnableController()
+            this._initAllChildren(this.mapInstance)
+            initFloorsToMapInstance(this.mapInstance)
+            resolve()
+          }
+
+          if (events && events[e]) {
+            events[e](event, this.mapInstance)
+          }
+          if (!this.mapInstance) {
+            return
+          }
+          if (events && events.mapHoverNode) {
+            this.mapInstance.gestureEnableController.enableMapHover = true
+          } else {
+            this.mapInstance.gestureEnableController.enableMapHover = false
+          }
+        })
       })
-    })
 
-    this.mapInstance.openMapById(mapId)
+      this.mapInstance.openMapById(mapId)
+    })
   }
 
   _configGestureEnableController = () => {

src/controls/FengmapResetControl.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import FengmapBaseControl from '../bases/FengmapBaseControl'
 import PropTypes from 'prop-types'
+
 const RESET_STYLE = {
   position: 'absolute',
   width: '42PX',
@@ -10,7 +11,7 @@ const RESET_STYLE = {
   cursor: 'pointer',
   backgroundColor: '#fff'
 }
-let clickMark = true
+
 class FengmapResetControl extends FengmapBaseControl {
   static propTypes = {
     ctrlOptions: PropTypes.shape({
@@ -21,53 +22,65 @@ class FengmapResetControl extends FengmapBaseControl {
       })
     }).isRequired
   }
+
   constructor(props) {
     super(props)
     this.state = {
       ctrlOptions: null,
-      parent: null
+      parent: null,
+      map: null
     }
+    this.btnRef = React.createRef()
   }
+
   load = (map, fengmapSDK, parent) => {
     const { ctrlOptions } = this.props
     this.setState({
+      map,
       ctrlOptions,
       parent
     })
   }
+
   resetMap = () => {
-    const {
-      parent,
-      ctrlOptions: { delayed }
-    } = this.state
-    if (parent && clickMark) {
-      clickMark = false
-      parent._loadMap(parent.props.mapId)
-      setTimeout(() => {
-        clickMark = true
-      }, delayed || 10000)
-    }
+    const original = this.btnRef.current.style['pointer-events'] || 'auto'
+    this.btnRef.current.style['pointer-events'] = 'none'
+
+    const { parent } = this.state
+
+    parent._destroy()
+    parent._loadMap(parent.props.mapId).then(() => {
+      this.btnRef.current.style['pointer-events'] = original
+    })
   }
+
   render() {
-    const { ctrlOptions } = this.state
-    let resetPosition = ''
-    if (ctrlOptions) {
-      resetPosition = setResetPosition(ctrlOptions)
+    const { ctrlOptions, map } = this.state
+    if (!map) {
+      return null
     }
-    return <div onClick={this.resetMap} style={Object.assign({}, RESET_STYLE, resetPosition)} />
+    return (
+      <div
+        ref={this.btnRef}
+        onClick={this.resetMap}
+        style={Object.assign({}, RESET_STYLE, getResetPosition(ctrlOptions))}
+      />
+    )
   }
 }
 
 export default FengmapResetControl
-function setResetPosition(ctrlOptions) {
+
+function getResetPosition(ctrlOptions) {
   let x = 0
   let y = 0
   const { position } = ctrlOptions
   if (ctrlOptions.hasOwnProperty('offset')) {
     x = ctrlOptions.offset.x
     y = ctrlOptions.offset.y
   }
-  let { imgURL } = ctrlOptions
+
+  const { imgURL } = ctrlOptions
 
   switch (position) {
     case 1: