Browse Source

地图不能随便移动

zhaojijng 2 years ago
parent
commit
e4644855b5

+ 6 - 5
src/pages/Environment/index.tsx

@@ -143,13 +143,14 @@ const Environment: React.FC = () => {
         .then((res) => {
           setLoading(false);
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
-          var mapSize = {
-            width: (res.data || {}).width,
-            height: (res.data || {}).height,
+
+          var bodyWidth = document.body.offsetWidth;
+          var mscale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+          var mapSize: any = {
+            width: (res.data || {}).width * mscale,
+            height: (res.data || {}).height * mscale,
           };
           setMapSize(mapSize);
-          var bodyWidth = document.body.offsetWidth;
-          var mscale = Number((bodyWidth / mapSize.width).toFixed(4));
           data.forEach((item, index) => {
             item.width = item.width * mscale;
             item.height = item.height * mscale;

+ 7 - 4
src/pages/Equipment/index.tsx

@@ -240,13 +240,16 @@ const Environment: React.FC = () => {
         .then((res) => {
           setLoading(false);
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
+
+          var bodyWidth = document.body.offsetWidth;
+          var mscale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+
           var mapSize = {
-            width: (res.data || {}).width,
-            height: (res.data || {}).height,
+            width: (res.data || {}).width * mscale,
+            height: (res.data || {}).height * mscale,
           };
           setMapSize(mapSize);
-          var bodyWidth = document.body.offsetWidth;
-          var mscale = Number((bodyWidth / mapSize.width).toFixed(4));
+
           //把地图变成 屏幕大小
           data.forEach((item, index) => {
             item.width = item.width * mscale;

+ 7 - 5
src/pages/Runtime/index.tsx

@@ -62,13 +62,15 @@ const Runtime: React.FC = () => {
         .then((res) => {
           setLoading(false);
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
-          var mapSize = {
-            width: (res.data || {}).width,
-            height: (res.data || {}).height,
+
+          var bodyWidth = document.body.offsetWidth;
+          var scale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+          var mapSize: any = {
+            width: (res.data || {}).width * scale,
+            height: (res.data || {}).height * scale,
           };
           setMapSize(mapSize);
-          var bodyWidth = document.body.offsetWidth;
-          var scale = Number((bodyWidth / mapSize.width).toFixed(4));
+
           data.forEach((item, index) => {
             item.width = item.width * scale;
             item.height = item.height * scale;

+ 79 - 21
src/sagacare_components/map/index.tsx

@@ -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>