瀏覽代碼

缩放局中 选中局中

zhaojijng 2 年之前
父節點
當前提交
d77be8fd54
共有 4 個文件被更改,包括 49 次插入39 次删除
  1. 3 3
      src/pages/Environment/index.tsx
  2. 3 3
      src/pages/Equipment/index.tsx
  3. 3 3
      src/pages/Runtime/index.tsx
  4. 40 30
      src/sagacare_components/map/index.tsx

+ 3 - 3
src/pages/Environment/index.tsx

@@ -163,7 +163,7 @@ const Environment: React.FC = () => {
   }, [selFloorId]);
 
   const changeMapList = useCallback(
-    (scale) => {
+    (scale, moveWidth, moveHeight) => {
       var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
       var mapListTemp2 = mapListTemp.map((item, index) => {
         if (index == 0) {
@@ -171,8 +171,8 @@ const Environment: React.FC = () => {
         }
         item.width = item.width * scale;
         item.height = item.height * scale;
-        item.left = item.left * scale;
-        item.top = item.top * scale;
+        item.left = item.left * scale - moveWidth;
+        item.top = item.top * scale - moveHeight;
         return item;
       });
       setMapList(mapListTemp2);

+ 3 - 3
src/pages/Equipment/index.tsx

@@ -249,7 +249,7 @@ const Environment: React.FC = () => {
   }, [selFloorId]);
 
   const changeMapList = useCallback(
-    (scale) => {
+    (scale, moveWidth, moveHeight) => {
       setScale(scale < 1 ? scale : 1);
       var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
       var mapListTemp2 = mapListTemp.map((item, index) => {
@@ -258,8 +258,8 @@ const Environment: React.FC = () => {
         }
         item.width = item.width * scale;
         item.height = item.height * scale;
-        item.left = item.left * scale;
-        item.top = item.top * scale;
+        item.left = item.left * scale - moveWidth;
+        item.top = item.top * scale - moveHeight;
         return item;
       });
       setMapList(mapListTemp2);

+ 3 - 3
src/pages/Runtime/index.tsx

@@ -79,7 +79,7 @@ const Runtime: React.FC = () => {
   }, [selFloorId]);
 
   const changeMapList = useCallback(
-    (scale) => {
+    (scale, moveWidth, moveHeight) => {
       var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
       var mapListTemp2 = mapListTemp.map((item, index) => {
         if (index == 0) {
@@ -87,8 +87,8 @@ const Runtime: React.FC = () => {
         }
         item.width = item.width * scale;
         item.height = item.height * scale;
-        item.left = item.left * scale;
-        item.top = item.top * scale;
+        item.left = item.left * scale - moveWidth;
+        item.top = item.top * scale - moveHeight;
         return item;
       });
       setMapList(mapListTemp2);

+ 40 - 30
src/sagacare_components/map/index.tsx

@@ -77,13 +77,13 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     event.stopPropagation();
 
     var mscaleTemp: number = Number((mscale.current + 0.1).toFixed(4));
-    //setMscale(mscaleTemp);
     mscale.current = Math.min(mscaleTemp, maxscale);
-    changeMap(mscale.current);
-    var changeWidth = (mapSize.width * (mscaleTemp - 1)) / 2;
-    var changeHeight = (mapSize.height * (mscaleTemp - 1)) / 2;
-    //   setTranslateX(translateX - changeWidth);
-    //   setTranslateY(translateY - changeHeight);
+
+    var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+    var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+    var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
+    var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
+    changeMap(mscale.current, moveWidth, moveHeight);
 
     //console.log('mscale', mscaleTemp);
   };
@@ -94,15 +94,18 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     // if (mscale.current > minscale) {
     var mscaleTemp = Number((mscale.current - 0.1).toFixed(4));
     mscale.current = Math.max(mscaleTemp, minscale);
-    changeMap(mscale.current);
-    var changeWidth = (mapSize.width * (mscaleTemp - 1)) / 2;
-    var changeHeight = (mapSize.height * (mscaleTemp - 1)) / 2;
-    //   setTranslateX(translateX - changeWidth);
-    //   setTranslateY(translateY - changeHeight);
+
+    var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+    var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+    var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
+    var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
+
+    changeMap(mscale.current, moveWidth, moveHeight);
+
     // }
   };
-  function changeMap(scale) {
-    changeMapList(scale);
+  function changeMap(scale, moveWidth, moveHeight) {
+    changeMapList(scale, moveWidth, moveHeight);
   }
   //const fixWidth = 1300;
   //   useEffect(() => {
@@ -134,14 +137,15 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
       top = -((filterItem[0] || {}).top || 0);
       var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
-      //   setTranslateX(left * mscale + mapWrapWidth / 2);
-      //   setTranslateY(top * mscale + mapWrapHeight / 2);
+      setTranslateX(left + mapWrapWidth / 2);
+      setTranslateY(top + mapWrapHeight / 2);
       //搜索完成
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
       changeSearchText({}); //清空搜索记录 好进行一些操作
     } else if (currentFloorId.current != selFloorId) {
       //如果两次的selFloorId 不一样 才会更改地图的位置为0 0
+      debugger;
       setTranslateX(0);
       setTranslateY(0);
     }
@@ -167,8 +171,9 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
       var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
 
-      //   setTranslateX(left * mscale + mapWrapWidth / 2);
-      //   setTranslateY(top * mscale + mapWrapHeight / 2);
+      setTranslateX(left + mapWrapWidth / 2);
+      setTranslateY(top + mapWrapHeight / 2);
+
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
       changeSearchText({});
@@ -201,25 +206,30 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
         if (event.deltaY > 0) console.log('向内');
         if (event.deltaY < 0) console.log('向外');
         var base = -0.009;
+        // if (event.deltaY > 100 || event.deltaY < -100) {
+        //   base = -0.0006;
+        // }
+        var mscaleTemp = mscale.current + event.deltaY * base; //缩放倍率缓存
+        //console.log('mscaleTemp', mscale.current, mscaleTemp);
+        mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale); //缩放倍率赋值
+      } else {
+        if (event.deltaY > 0) console.log('向上');
+        if (event.deltaY < 0) console.log('向下');
+        var base = -0.009;
         if (event.deltaY > 100 || event.deltaY < -100) {
           base = -0.0006;
         }
         var mscaleTemp = mscale.current + event.deltaY * base;
-        console.log('mscaleTemp', mscale.current, mscaleTemp);
+        //console.log('mscaleTemp', mscale.current, mscaleTemp);
         mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale);
-        changeMap(mscale.current);
-      } else {
-        if (event.deltaY > 0) console.log('向上');
-        if (event.deltaY < 0) console.log('向下');
-        // var base = -0.009;
-        // if (event.deltaY > 100 || event.deltaY < -100) {
-        //   base = -0.0006;
-        // }
-        // var mscaleTemp = mscale.current + event.deltaY * base;
-        // console.log('mscaleTemp', mscale.current, mscaleTemp);
-        // mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale);
-        // changeMap(mscale.current);
       }
+
+      var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+      var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+      var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
+      var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
+
+      changeMap(mscale.current, moveWidth, moveHeight);
     });
   }, []);