import React, { useState, useEffect, useRef } from 'react'; import mapstyles from '@/assets/css/map.less'; import { useModel } from 'umi'; import cx from 'classnames'; import Icon from '@/tenants-ui/SgIcon'; type MapProps = { type: string; // searchText: any; selFloorId?: string; render: (item: API.MapInfo, index: number) => React.ReactNode; mapList: API.MapInfo[]; mapSize: any; }; const Map: React.FC = ({ type, selFloorId, render, mapList, mapSize }) => { //useModel 注释掉 不用啦 晚会删 // useEffect(() => { // getMapListData(selFloorId); // }, [selFloorId]); const { searchText, changeSearchSpace, changeSearchText, changeSearchFloorId, changeSearchBuildId, } = useModel('searchInfo'); const [startPageX, setStartPageX] = useState(0); const [startPageY, setStartPageY] = useState(0); const [translateX, setTranslateX] = useState(0); const [translateY, setTranslateY] = useState(0); const [originX, setOriginX] = useState(0); const [originY, setOriginY] = useState(0); const [mscale, setMscale] = useState(1); //最大的缩放比例 const [maxscale, setMaxscale] = useState(1.6); const [minscale, setMinscale] = useState(0.3); const [canMove, setCanMove] = useState(false); const [mapHeight, setMapHeight] = useState(500); const currentFloorId = useRef(null); const mapRef = useRef(); // let mapWidth: number = 3000, // mapHeight: number = 1200; const mouseDownEvent = (event: React.MouseEvent) => { setStartPageX(event.pageX); setStartPageY(event.pageY); //console.log('mouseDownEvent', startPageX, event.pageY); setCanMove(true); }; const mouseUpEvent = (event: React.MouseEvent) => { //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); } }; useEffect(() => { console.log('mapRef', mapRef); // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0; // var mapWrapHeight = (mapRef.current || {}).clientHeight || 0; // var originX = mapWrapWidth / 2 - translateX < 0 ? 0 : mapWrapWidth / 2 - translateX; // var originY = mapWrapHeight / 2 - translateY < 0 ? 0 : mapWrapHeight / 2 - translateY; // setOriginX(originX); // setOriginY(originY); console.log('originX', originX, 'originY', originY); }, [translateX, translateY]); const mapZoom = (event: React.MouseEvent) => { event.stopPropagation(); if (mscale < maxscale) { var mscaleTemp = Number((mscale + 0.1).toFixed(4)); setMscale(mscaleTemp); var changeWidth = mapSize.width * 0.1; var changeHeight = mapSize.height * 0.1; setTranslateX(translateX - changeWidth / 2); setTranslateY(translateY - changeHeight / 2); } console.log('mscale', mscale); }; const mapReduce = (event: React.MouseEvent) => { event.stopPropagation(); //console.log('mapReduce', mscale); if (mscale > minscale) { var mscaleTemp = Number((mscale - 0.1).toFixed(4)); setMscale(mscaleTemp); var changeWidth = mapSize.width * 0.1; var changeHeight = mapSize.height * 0.1; setTranslateX(translateX + changeWidth / 2); setTranslateY(translateY + changeHeight / 2); } console.log('mscale', mscale); }; //const fixWidth = 1300; useEffect(() => { var mapWrapWidth = (mapRef.current || {}).clientWidth || 0; var scale = Number((mapWrapWidth / mapSize.width).toFixed(4)); setMscale(scale); if (scale < 0.3) { console.log('mscale', mscale); setMinscale(scale); } }, [mapSize]); //当地图发生改变时 的搜索 useEffect(() => { //searchText使用对象 防止修改了 不再重新定位 //根据searchText进行搜索 如果mapList 更改了 if (searchText && searchText.text && mapList.length > 0) { let left: any = 0, top: any = 0; var filterItem = mapList.filter((item) => { return item.localName == (searchText && searchText.text); }); if (filterItem.length == 0) return; //找到搜索的空间 changeSearchSpace(filterItem[0]); //console.log('selectSpace2', filterItem[0]); left = -((filterItem[0] || {}).left || 0); 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); //搜索完成 changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应 changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置 changeSearchText({}); //清空搜索记录 好进行一些操作 } else if (currentFloorId.current != selFloorId) { //如果两次的selFloorId 不一样 才会更改地图的位置为0 0 setTranslateX(0); setTranslateY(0); } currentFloorId.current = selFloorId; //console.log('selectSpace2'); }, [mapList]); //搜索信息改变时的搜索 useEffect(() => { if (searchText && searchText.text && mapList.length > 0) { let left: any = 0, top: any = 0; var filterItem = mapList.filter((item) => { return item.localName == (searchText && searchText.text); }); if (filterItem.length == 0) return; //找到搜索的空间 changeSearchSpace(filterItem[0]); //console.log('selectSpace2', filterItem[0]); left = -((filterItem[0] || {}).left || 0); top = -((filterItem[0] || {}).top || 0); var mapWrapWidth = (mapRef.current || {}).clientWidth || 0; var mapWrapHeight = (mapRef.current || {}).clientHeight || 0; // left = left * mscale + mapWrapWidth / 2; // top = top * mscale + mapWrapHeight / 2; setTranslateX(left * mscale + mapWrapWidth / 2); setTranslateY(top * mscale + mapWrapHeight / 2); changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应 changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置 changeSearchText({}); } }, [searchText]); useEffect(() => { // todo 要不要用呢 document.querySelector('#root').addEventListener( 'mouseup', function () { //console.log('mouseUpEvent'); setCanMove(false); }, true, ); }, []); useEffect(() => { console.log('document', document.body.offsetHeight); var bodyHeight = document.body.offsetHeight; setMapHeight(bodyHeight - 293); }, []); return (
{ mouseDownEvent(event); }} onMouseUp={(event) => { mouseUpEvent(event); }} onMouseMove={(event) => { mouseMoveEvent(event); }} style={{ height: mapHeight + 'px' }} >
{mapList.map(function (item, index) { return render(item, index); })}
= maxscale })} onClick={(event) => { mapZoom(event); }} >
{ mapReduce(event); }} >
); }; export default Map;