wafer-map 4.0.54 → 4.0.55

package/README.md

@@ -1,181 +1,181 @@
-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,
-          },
-        });
-      }
-    }   
+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,
+          },
+        });
+      }
+    }   
 ```