wafer-map 4.0.54 → 6.0.2

package/README.zh-CN.md

@@ -1,215 +1,215 @@
-[English](./README.md) | 简体中文 
-
-# wafer-map
-基于React的SVG地图组件
-
-<!--[![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)-->
-
-## 安装和使用
-
-  * 安装
-
-  `npm i wafer-map`
-  `yarn add wafer-map`
-
-   * 使用
-
-   ```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>
-            );
-        }
-   }
-   ```
-
-   > 提示: mapId是这张地图的唯一标识.
-
-## 参数
-
-|  参数  | 默认值     |  是否必须  |  说明  |
-|--------|---------|---------------|---------------|
-| mapId |         | true | 地图id |
-| componentWidth | `1920`  | false | 地图容器的宽度 |
-| componentHeight | `1080`  | false | 地图容器的高度 |
-| background | `#ddd`  | false | 地图容器的背景色 |
-| visibleElement | `[]`    | false | 可显示的元素id集合 |
-| visibleType | `[]`    | false | 可显示的元素类型集合 |
-| visibleState | `[]`    | false | 可显示的元素状态集合 |
-| clickableElement | `[]`    |false| 可点击的元素id集合 |
-| clickableType | `[]`    | false | 可点击的元素类型集合 |
-| clickableState | `[]`    | false | 可点击的元素状态集合 |
-| onClick |         | false | 单选回调方法 |
-| onSelect |         | false | 多选回调方法 |
-| onClickError |         | false | 不可点击事件回调方法 |
-| mapZoom | `true`  | false | 地图是否可以缩放 |
-| mapMove | `true`  | false | 地图是否可以移动 |
-| multiple | `false` | false | 是否可以多选 |
-| noName | `false` | false | 不显示元素上名称 |
-| showPath | `false` | false | 是否显示导引线 |
-| markId |         | false | 被查询或标记的元素id,如： '1'; 如果是多个，可使用字符串数组格式,如 ['1', '2'] |
-| showStateIds | []      | false | 显示不同元素的不同状态，数据结构：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}] |
-| reloadMap |         | false | 重新加载地图 |
-| reloadFinish |         | false | 地图加载完成回调 |
-| touchable |         | false | 可触摸控制 |
-| deleteId |         | false | 删除已选的元素id |
-| deleteFinish |         | false | 删除已选元素后的回调 |
-| tooltipContent |         | false | 鼠标悬浮在素材上的小气泡内容和样式 |
-| elementsColor | []      | false | 按照元素id设置颜色,数据结构：[{id: 1, color: '#fff'}, {}] |
-| pathStartSvg |         | false | 导引线开始图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
-| pathEndSvg |         | false | 导引线结束图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
-| pathStyle  |         | false | 导引线引线样式, 样式设置参考 svg 元素属性 |
-| markSvg |         | false | 搜索定位或标记图标， 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
-| selectedSvg |         | false | 选中图标，此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
-| defaultTooltipKey |         | '' |  气泡里面 可以自定义默认显示取的key，如orgName |
-| getSvgDom |         | false |  获取svg的ViewerDOM回调方法 |
-| signatureKey | null    | false | 签名的key |
-| restfulSignature | false   | false | 控制是否签名，当设置为true时，签名key必须设置有效值 |
-| textColor | #fff    | false | 元素显示文字颜色 |
-|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
-|centerEleRate| 1       |false	| 设置中心素材放大倍数
-|centerElement	| {}      |false | 设置中心素材
-|clickToCenter| {}      |false | 点击素材剧中放大
-|clickToCenter| false   |false | 是否支持 windows 触摸屏
-
-
-
-### onClickError返回的错误编码
-
-|  编码  |  说明  |
-|--------|----------------|
-| `100`  | 不显示的元素不能被选中 |
-| `101`  | 元素的id不能被选中 |
-| `102`  | 元素的类型不能被选中 |
-| `103`  | 元素的状态不能被选中 |
-| `104`  | 多选时选中不同类型的元素 |
-
-### 方法
-
-|  方法名  |  参数  |  返回  |  说明  |
-|--------|---------|----------|---------------|
-| reloadElements |   |   | 更新地图上的元素 |
-| clearSelectElement |   |   | 清空已选的元素集合 |
-
-
-### tooltipContent 的使用样例 tooltipObj 为此方法返回的对象   tooltipContent为null 气泡里的内容为默认defaultTooltipKey属性值，如果defaultTooltipKey属性值为空或者属性不存在，则气泡不显示
- 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>
-    )
-  } 
-  
-  
-### 发布
-
-```shell script
-yarn build
-yarn publish
-```
-
-### tooltipContent 的使用样例 
-
-tipObj为此方法返回的对象
-
-```
- 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"
-          >
-            {tipObj.orgName}
-          </text>
-        </g>
-    )
-  }
-  ```
-  
-  tipObj对象需要从 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.md) | 简体中文 
+
+# wafer-map
+基于React的SVG地图组件
+
+<!--[![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)-->
+
+## 安装和使用
+
+  * 安装
+
+  `npm i wafer-map`
+  `yarn add wafer-map`
+
+   * 使用
+
+   ```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>
+            );
+        }
+   }
+   ```
+
+   > 提示: mapId是这张地图的唯一标识.
+
+## 参数
+
+|  参数  | 默认值     |  是否必须  |  说明  |
+|--------|---------|---------------|---------------|
+| mapId |         | true | 地图id |
+| componentWidth | `1920`  | false | 地图容器的宽度 |
+| componentHeight | `1080`  | false | 地图容器的高度 |
+| background | `#ddd`  | false | 地图容器的背景色 |
+| visibleElement | `[]`    | false | 可显示的元素id集合 |
+| visibleType | `[]`    | false | 可显示的元素类型集合 |
+| visibleState | `[]`    | false | 可显示的元素状态集合 |
+| clickableElement | `[]`    |false| 可点击的元素id集合 |
+| clickableType | `[]`    | false | 可点击的元素类型集合 |
+| clickableState | `[]`    | false | 可点击的元素状态集合 |
+| onClick |         | false | 单选回调方法 |
+| onSelect |         | false | 多选回调方法 |
+| onClickError |         | false | 不可点击事件回调方法 |
+| mapZoom | `true`  | false | 地图是否可以缩放 |
+| mapMove | `true`  | false | 地图是否可以移动 |
+| multiple | `false` | false | 是否可以多选 |
+| noName | `false` | false | 不显示元素上名称 |
+| showPath | `false` | false | 是否显示导引线 |
+| markId |         | false | 被查询或标记的元素id,如： '1'; 如果是多个，可使用字符串数组格式,如 ['1', '2'] |
+| showStateIds | []      | false | 显示不同元素的不同状态，数据结构：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}] |
+| reloadMap |         | false | 重新加载地图 |
+| reloadFinish |         | false | 地图加载完成回调 |
+| touchable |         | false | 可触摸控制 |
+| deleteId |         | false | 删除已选的元素id |
+| deleteFinish |         | false | 删除已选元素后的回调 |
+| tooltipContent |         | false | 鼠标悬浮在素材上的小气泡内容和样式 |
+| elementsColor | []      | false | 按照元素id设置颜色,数据结构：[{id: 1, color: '#fff'}, {}] |
+| pathStartSvg |         | false | 导引线开始图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
+| pathEndSvg |         | false | 导引线结束图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
+| pathStyle  |         | false | 导引线引线样式, 样式设置参考 svg 元素属性 |
+| markSvg |         | false | 搜索定位或标记图标， 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
+| selectedSvg |         | false | 选中图标，此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
+| defaultTooltipKey |         | '' |  气泡里面 可以自定义默认显示取的key，如orgName |
+| getSvgDom |         | false |  获取svg的ViewerDOM回调方法 |
+| signatureKey | null    | false | 签名的key |
+| restfulSignature | false   | false | 控制是否签名，当设置为true时，签名key必须设置有效值 |
+| textColor | #fff    | false | 元素显示文字颜色 |
+|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
+|centerEleRate| 1       |false	| 设置中心素材放大倍数
+|centerElement	| {}      |false | 设置中心素材
+|clickToCenter| {}      |false | 点击素材剧中放大
+|clickToCenter| false   |false | 是否支持 windows 触摸屏
+
+
+
+### onClickError返回的错误编码
+
+|  编码  |  说明  |
+|--------|----------------|
+| `100`  | 不显示的元素不能被选中 |
+| `101`  | 元素的id不能被选中 |
+| `102`  | 元素的类型不能被选中 |
+| `103`  | 元素的状态不能被选中 |
+| `104`  | 多选时选中不同类型的元素 |
+
+### 方法
+
+|  方法名  |  参数  |  返回  |  说明  |
+|--------|---------|----------|---------------|
+| reloadElements |   |   | 更新地图上的元素 |
+| clearSelectElement |   |   | 清空已选的元素集合 |
+
+
+### tooltipContent 的使用样例 tooltipObj 为此方法返回的对象   tooltipContent为null 气泡里的内容为默认defaultTooltipKey属性值，如果defaultTooltipKey属性值为空或者属性不存在，则气泡不显示
+ 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>
+    )
+  } 
+  
+  
+### 发布
+
+```shell script
+yarn build
+yarn publish
+```
+
+### tooltipContent 的使用样例 
+
+tipObj为此方法返回的对象
+
+```
+ 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"
+          >
+            {tipObj.orgName}
+          </text>
+        </g>
+    )
+  }
+  ```
+  
+  tipObj对象需要从 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,
+          },
+        });
+      }
+    }   
 ```