|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useState, useEffect, useRef, useMemo } from 'react';
|
|
|
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
|
|
import mapstyles from './index.less';
|
|
|
import { useModel } from 'umi';
|
|
|
|
|
@@ -45,6 +45,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
const [minscale, setMinscale] = useState<number>(0.7);
|
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
|
|
|
+ const [moveTop, setMoveTop] = useState<number>(0); //地图的块的top的改变
|
|
|
+ const [moveLeft, setMoveLeft] = useState<number>(0);
|
|
|
const [mapHeight, setMapHeight] = useState(500);
|
|
|
|
|
|
const currentFloorId = useRef<any>(null);
|
|
@@ -62,19 +64,74 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
//console.log('mouseUpEvent', event);
|
|
|
setCanMove(false);
|
|
|
};
|
|
|
- const mouseMoveEvent = (event: React.MouseEvent) => {
|
|
|
- if (canMove) {
|
|
|
- let nowPageX = event.pageX;
|
|
|
- let nowPageY = event.pageY;
|
|
|
- setTranslateX(translateX + nowPageX - startPageX);
|
|
|
- setTranslateY(translateY + nowPageY - startPageY);
|
|
|
- //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
|
|
|
- // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
|
|
|
-
|
|
|
- setStartPageX(event.pageX);
|
|
|
- setStartPageY(event.pageY);
|
|
|
- }
|
|
|
- };
|
|
|
+ const mouseMoveEvent = useCallback(
|
|
|
+ (event: React.MouseEvent) => {
|
|
|
+ //debugger;
|
|
|
+ if (canMove) {
|
|
|
+ let nowPageX = event.pageX;
|
|
|
+ let nowPageY = event.pageY;
|
|
|
+
|
|
|
+ // moveTop
|
|
|
+ //moveLeft
|
|
|
+ var mapwidth = mapSize.width * mscale.current;
|
|
|
+ var mapheight = mapSize.height * mscale.current;
|
|
|
+ var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
+ var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
+ console.log(
|
|
|
+ '-translateX + moveLeft',
|
|
|
+ moveLeft,
|
|
|
+ translateX,
|
|
|
+ -translateX + moveLeft,
|
|
|
+ mapwidth,
|
|
|
+ );
|
|
|
+ console.log('-translateY + moveTop', moveTop, translateY, -translateY + moveTop, mapheight);
|
|
|
+ if (-translateX + moveLeft > mapwidth - 220) {
|
|
|
+ //不能再往左 translateX < -mapwidth + 220+moveLeft
|
|
|
+ console.log('zuozuozuo');
|
|
|
+ }
|
|
|
+ if (-translateY + moveTop > mapheight - 220) {
|
|
|
+ //不能再往上 translateY < -mapheight + 220+moveTop
|
|
|
+ console.log('shangshang');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (translateX - moveLeft > mapWrapWidth - 220) {
|
|
|
+ //不能再往右 translateX > mapWrapWidth - 220+moveLeft
|
|
|
+ console.log('youyou');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (translateY - moveTop > mapWrapHeight - 220) {
|
|
|
+ //不能再往下 translateY > mapWrapHeight - 220+moveTop
|
|
|
+ console.log('xiaxia');
|
|
|
+ }
|
|
|
+ var nowTranslateX = translateX + nowPageX - startPageX;
|
|
|
+ var nowTranslateY = translateY + nowPageY - startPageY;
|
|
|
+
|
|
|
+ nowTranslateX =
|
|
|
+ nowTranslateX < -mapwidth + 220 + moveLeft ? -mapwidth + 220 + moveLeft : nowTranslateX;
|
|
|
+ nowTranslateX =
|
|
|
+ nowTranslateX > mapWrapWidth - 220 + moveLeft
|
|
|
+ ? mapWrapWidth - 220 + moveLeft
|
|
|
+ : nowTranslateX;
|
|
|
+ nowTranslateY =
|
|
|
+ nowTranslateY < -mapheight + 220 + moveTop ? -mapheight + 220 + moveTop : nowTranslateY;
|
|
|
+
|
|
|
+ nowTranslateY =
|
|
|
+ nowTranslateY > mapWrapHeight - 180 + moveTop
|
|
|
+ ? mapWrapHeight - 180 + moveTop
|
|
|
+ : nowTranslateY;
|
|
|
+
|
|
|
+ setTranslateX(nowTranslateX);
|
|
|
+ setTranslateY(nowTranslateY);
|
|
|
+
|
|
|
+ //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
|
|
|
+ // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
|
|
|
+
|
|
|
+ setStartPageX(event.pageX);
|
|
|
+ setStartPageY(event.pageY);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [mapSize, translateX, translateY, moveLeft, moveTop, canMove, startPageX, startPageY],
|
|
|
+ );
|
|
|
|
|
|
const mapZoom = (event: React.MouseEvent) => {
|
|
|
event.stopPropagation();
|
|
@@ -86,6 +143,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
|
+ setMoveTop(moveHeight);
|
|
|
+ setMoveLeft(moveWidth);
|
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
|
//console.log('mscale', mscaleTemp);
|
|
|
};
|
|
@@ -101,7 +160,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
|
-
|
|
|
+ setMoveTop(moveHeight);
|
|
|
+ setMoveLeft(moveWidth);
|
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
|
// }
|
|
|
};
|
|
@@ -232,6 +292,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
//为了让地图在 屏幕中间缩放
|
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
|
+ setMoveTop(moveHeight);
|
|
|
+ setMoveLeft(moveWidth);
|
|
|
|
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
|
});
|
|
@@ -260,9 +322,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
onMouseUp={(event) => {
|
|
|
mouseUpEvent(event);
|
|
|
}}
|
|
|
- onMouseMove={(event) => {
|
|
|
- mouseMoveEvent(event);
|
|
|
- }}
|
|
|
+ onMouseMove={mouseMoveEvent}
|
|
|
style={{
|
|
|
height: mapHeight + 'px',
|
|
|
width: mapWidth + 'px',
|
|
@@ -297,9 +357,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
</div>
|
|
|
<div
|
|
|
className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale.current <= minscale })}
|
|
|
- onClick={(event) => {
|
|
|
- mapReduce(event);
|
|
|
- }}
|
|
|
+ onClick={mapReduce}
|
|
|
>
|
|
|
<Icon className="" type="reduce" style={{ fontSize: 22 }}></Icon>
|
|
|
</div>
|