English | [简体中文](./README.zh-CN.md)

# wafer-map
SVG Map for react

<!--[![npm](https://img.shields.io/npm/v/react-fmap.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-fmap)
[![NPM downloads](http://img.shields.io/npm/dm/react-fmap.svg?style=flat-plastic)](https://npmjs.org/package/react-fmap)-->

## Using

  * install

  `npm i wafer-map`
  `yarn add wafer-map`

   * using in react

   ```js
   import React, { Component } from 'react';
   import WaferMap from 'wafer-map';

   class App extends Component {
        render() {
            const mapProps = {
                mapId: '1',
                componentWidth: 1920,
                componentHeight: 1080
            };
    
            return (
                <div className="App">
                    <WaferMap {...mapProps}/>
                </div>
            );
        }
   }
   ```

   > notice: mapId is the only mark on the map.

## Props

|  Prop  | default value |  is required  |  description  |
|--------|---------------|---------------|---------------|
| mapId |               | true | map id |
| componentWidth | `1920`        | false | Map the width of containers |
| componentHeight | `1080`        | false | Map the height of containers |
| background | `#ddd`        | false | Map container background color |
| visibleElement | `[]`          | false | Displayable collection of element ids |
| visibleType | `[]`          | false | Displayable collection of element types |
| visibleState | `[]`          | false | Displayable collection of element states |
| clickableElement | `[]`          |false| Clickable collection of element ids |
| clickableType | `[]`          | false | Clickable collection of element types |
| clickableState | `[]`          | false | Clickable collection of element states |
| onClick |               | false | Radio callback method |
| onSelect |               | false | Multi-select callback method |
| onClickError |               | false | Select the callback method for the exception |
| mapZoom | `true`        | false | Scale the map |
| mapMove | `true`        | false | Move the map |
| multiple | `false`       | false | Multiple switch |
| noName | `false`       | false | Element names are not displayed on the map. |
| showPath | `false`       | false | Display roadmap |
| markId |               | false | The element id that needs to be tagged, such as '1'; If multiple, use string array format, such as ['1', '2'] |
| showStateIds | []            | false | Display different states of different elements, data structure：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}] |
| reloadMap |               | false | Reload the map |
| reloadFinish |               | false | Reload the map to complete the callback |
| touchable |               | false | Touch control |
| deleteId |               | false | Delete selected element id |
| deleteFinish |               | false | Callback after deleting selected element |
| tooltipContent |               | false | Display tooltip  |
| elementsColor | []            | false | Set color according to element id, data structure：[{id: 1, color: '#fff'}, {}] |
| pathStartSvg |               | false | Guide start icon, this icon contains only elements inside svg, without svg tags |
| pathEndSvg |               | false | Guide end icon, this icon contains only elements inside svg, without svg tags |
| pathStyle  |               | false | Guide leader style, style setting reference svg element attributes |
| markSvg |               | false | Search anchor or mark icon, this icon contains only elements inside svg, without svg tags |
| selectedSvg |               | false | Check icon, this icon contains only elements inside svg, without svg tags |
| defaultTooltipKey |               | '' | You can customize the default key in the bubble, such as orgName |
| getSvgDom |               | '' | Get viewerdom of SVG  callback method |
| signatureKey | null          | false | Signature key |
| restfulSignature | false         | false | Controls whether to sign or not, when set to true, the signature key must be set to a valid value |
| textColor | #fff          | false | elements text color |
|scaleFactorMax| 5             |false	|maximum amount of scale a user can zoom in to
|scaleFactorMin	| 0.5           |false |	minimum amount of scale a user can zoom out of
| isGenders | `false`       | false | Display male and female outsourcing type avatars before the name of the material |
|centerEleRate| 1             |false	| Set the center material magnification 
|centerElement	| {}            |false | Set the central material 
|clickToCenter| {}            |false | If set true when you click element will set it to center and zoom bigger.
|windowsTouchSupport| false         |false | Whether Windows touch screen is supported.





### onClickError Error Code

|  code  |  description   |
|--------|----------------|
| `100`  | Selected elements that cannot be displayed |
| `101`  | Selected elements that the ID cannot be selected |
| `102`  | Selected elements that the types cannot be selected |
| `103`  | Selected elements that the states cannot be selected |
| `104`  | Multi-select mode cannot select different types at the same time |

### function

|  name  |  props  |  return  |  description  |
|--------|---------|----------|---------------|
| reloadElements |   |   | Reload the elements on the map |
| clearSelectElement |   |   | Clears the selected set of elements |


### tooltipContent example of use

tipObj is the object returned by this method

```
 tooltipContent = (tooltipObj)=>{
    const radius = 5;
    const width = 150;
    const height = 45;
    return (
        <g>
          <path
              fill="black"
              fillOpacity="0.7"
              d={`M0 0 l10 10 h ${width / 2 - 10 - radius}
          a ${radius} ${radius} 90 0 1 ${radius} ${radius} v ${height}
          a ${radius} ${radius} 90 0 1 ${-radius} ${radius} h ${2 * radius - width}
          a ${radius} ${radius} 90 0 1 ${-radius} ${-radius} v ${-height}
          a ${radius} ${radius} 90 0 1 ${radius} ${-radius} h ${width / 2 - 10 - radius} Z`}
          />
          <text
              dy="23"
              dominantBaseline="text-before-edge"
              fill="white"
              textAnchor="middle"
          >
            {tooltipObj.orgName}
          </text>
        </g>
    )
  }
  ```
tooltipObj对象需要从 getMapStationList这个方法里获取数据存入contentObj对象，获取完整的对象
  
```
 *getMapStationList({ payload }, { call, put, select }) {
      const { locationId } = yield select(state => state.swsCommon);
      const param = payload || { locationId };
      const { info } = yield select(state => state.login);
      if (info && info.tenant_id) {
        param.domainId = info.tenant_id;
      }
      const result = yield call(service.getMapStationList, { payload: param });
      if (result && result.code === 0) {
        const onMapList = [];
        const visibleList = [];
        result.data.forEach(item => {
          if (item && item.elementId) {
            visibleList.push(item.elementId);
            onMapList.push({
              id: item.elementId,
              state: item.statusCode,
              color: item.statusColor,
              text: item.userNames || item.stationNum,
              contentObj: item
            });
          }
        });

        yield put({
          type: 'saveOrUpdateData',
          payload: {
            mapStationList: result.data,
            stationsOnMap: onMapList,
            visibleList,
          },
        });
      }
    }   
```