import React, { useEffect } from 'react';
import { Table, Tabs,Modal,message,Tooltip } from 'antd';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ alarm, status }, { width, highlight }) {
return `
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function TuRangMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 8;
const placeholder = document.getElementById(`marker_turangshangqing_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.turangshangqing + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'turangshangqing',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.turangshangqing + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
>
{
(zoom > 10 || distSq < dist2 || highlight) && (
{data.stnm}
)
}
)
}
export default React.memo(TuRangMarker);
