@corva/ui 3.70.0-5 → 3.70.0-7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs-bundle/components/BICOffsetPickerDialog/components/Map/Map.js +1 -1
- package/cjs-bundle/components/BICOffsetPickerDialog/components/Map/Map.js.map +1 -1
- package/cjs-bundle/components/OffsetWellMap/OffsetWellMap.js +1 -1
- package/cjs-bundle/components/OffsetWellMap/OffsetWellMap.js.map +1 -1
- package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js +1 -1
- package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js.map +1 -1
- package/cjs-bundle/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js +1 -1
- package/cjs-bundle/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js.map +1 -1
- package/cjs-bundle/components/OffsetWellPickerV5/components/Map/OffsetWellMap/OffsetWellMap.js +1 -1
- package/cjs-bundle/components/OffsetWellPickerV5/components/MapPreloader/MapPreloader.js +1 -1
- package/cjs-bundle/components/PinnableFilters/effects/index.js +1 -1
- package/cjs-bundle/components/PinnableFilters/effects/index.js.map +1 -1
- package/cjs-bundle/componentsV2/SliderAdvanced/SliderAdvanced.scss.js +1 -1
- package/cjs-bundle/config/mapbox/index.js +1 -1
- package/cjs-bundle/config/mapbox/index.js.map +1 -1
- package/components/BICOffsetPickerDialog/components/Map/Map.d.ts.map +1 -1
- package/components/BICOffsetPickerDialog/components/Map/Map.js +1 -1
- package/components/BICOffsetPickerDialog/components/Map/Map.js.map +1 -1
- package/components/OffsetWellMap/OffsetWellMap.d.ts.map +1 -1
- package/components/OffsetWellMap/OffsetWellMap.js +1 -1
- package/components/OffsetWellMap/OffsetWellMap.js.map +1 -1
- package/components/OffsetWellPickerV2/components/Map/Map.d.ts.map +1 -1
- package/components/OffsetWellPickerV2/components/Map/Map.js +1 -1
- package/components/OffsetWellPickerV2/components/Map/Map.js.map +1 -1
- package/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.d.ts.map +1 -1
- package/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js +1 -1
- package/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js.map +1 -1
- package/components/OffsetWellPickerV5/components/Map/OffsetWellMap/OffsetWellMap.d.ts.map +1 -1
- package/components/OffsetWellPickerV5/components/Map/OffsetWellMap/OffsetWellMap.js +1 -1
- package/components/OffsetWellPickerV5/components/MapPreloader/MapPreloader.d.ts.map +1 -1
- package/components/OffsetWellPickerV5/components/MapPreloader/MapPreloader.js +1 -1
- package/components/PinnableFilters/effects/index.js +1 -1
- package/components/PinnableFilters/effects/index.js.map +1 -1
- package/componentsV2/SliderAdvanced/SliderAdvanced.scss.js +1 -1
- package/config/mapbox/index.d.ts +1 -0
- package/config/mapbox/index.d.ts.map +1 -1
- package/config/mapbox/index.js +1 -1
- package/config/mapbox/index.js.map +1 -1
- package/mcp-server/server.mjs +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Map.js","sources":["../../../../../../../../src/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n open,\n subjectWell,\n wells,\n offsetWells,\n radius,\n formationColors,\n popUpFormatter,\n coordsDataPath,\n onAddOffsetWell,\n onDeleteOffsetWell,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef();\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!open || mapRef.current) return;\n\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n layout: {\n 'circle-sort-key': ['get', 'sortKey'],\n },\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n }, [open]);\n\n useEffect(\n () => () => {\n if (mapRef.current) {\n mapRef.current.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n }\n },\n []\n );\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady || !open) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, open, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady || !open) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n const offsetWellIds = offsetWells.map(well => well.id);\n const sortedWells = sortBy(wells, well => offsetWellIds.includes(well.id));\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n sortedWells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? DEFAULT_SUBJECT_WELL_MARKER_SIZE : DEFAULT_WELL_MARKER_SIZE;\n const color =\n isWellSubject || isWellOffset\n ? OFFSET_WELL_COLOR\n : get(formationColors, well.formation, '#BDBDBD');\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n // NOTE: sortKey keeps offset wells rendered on top (was sortedWells insertion order)\n properties: { wellId: well.id, radius: r, color, opacity, sortKey: isWellOffset ? 1 : 0 },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: get(formationColors, well.formation, '#BDBDBD'),\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(<>{popUpContent}</>, popUpContainer);\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n popupRef.current?.remove();\n };\n\n const handleClick = e => {\n const { wellId } = e.features[0].properties;\n const isWellSubject = subjectWell && subjectWell.id === wellId;\n const isWellOffset = offsetWellIds.includes(wellId);\n\n if (isWellOffset && !isWellSubject) {\n onDeleteOffsetWell(wellId);\n } else {\n onAddOffsetWell(wellId);\n }\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n map.on('click', WELLS_ID, handleClick);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n map.off('click', WELLS_ID, handleClick);\n };\n }, [subjectWell, wells, offsetWells, open, isMapReady]);\n\n useEffect(() => {\n if (!open) return;\n\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, open, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n open: PropTypes.bool.isRequired,\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n formationColors: PropTypes.shape({}).isRequired,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n onAddOffsetWell: PropTypes.func.isRequired,\n onDeleteOffsetWell: PropTypes.func.isRequired,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","open","subjectWell","wells","offsetWells","radius","formationColors","popUpFormatter","coordsDataPath","onAddOffsetWell","onDeleteOffsetWell","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","layout","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","geometry","coordinates","reduce","bounds","coord","extend","LngLatBounds","prevWells","offsetWellIds","map","well","sortedWells","sortBy","includes","wellsById","forEach","coords","isWellSubject","isWellOffset","r","color","formation","opacity","properties","wellId","sortKey","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","_Fragment","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","_popupRef$current","handleClick","setTimeout","fitBounds","padding","off","className","styles","mapMain","ref","propTypes","PropTypes","bool","isRequired","shape","number","string","arrayOf","func","defaultProps","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Map.js","sources":["../../../../../../../../src/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n open,\n subjectWell,\n wells,\n offsetWells,\n radius,\n formationColors,\n popUpFormatter,\n coordsDataPath,\n onAddOffsetWell,\n onDeleteOffsetWell,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef();\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!IS_MAPBOX_ENABLED || !open || mapRef.current) return;\n\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n layout: {\n 'circle-sort-key': ['get', 'sortKey'],\n },\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n }, [open]);\n\n useEffect(\n () => () => {\n if (mapRef.current) {\n mapRef.current.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n }\n },\n []\n );\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady || !open) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, open, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady || !open) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n const offsetWellIds = offsetWells.map(well => well.id);\n const sortedWells = sortBy(wells, well => offsetWellIds.includes(well.id));\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n sortedWells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? DEFAULT_SUBJECT_WELL_MARKER_SIZE : DEFAULT_WELL_MARKER_SIZE;\n const color =\n isWellSubject || isWellOffset\n ? OFFSET_WELL_COLOR\n : get(formationColors, well.formation, '#BDBDBD');\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n // NOTE: sortKey keeps offset wells rendered on top (was sortedWells insertion order)\n properties: { wellId: well.id, radius: r, color, opacity, sortKey: isWellOffset ? 1 : 0 },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: get(formationColors, well.formation, '#BDBDBD'),\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(<>{popUpContent}</>, popUpContainer);\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n popupRef.current?.remove();\n };\n\n const handleClick = e => {\n const { wellId } = e.features[0].properties;\n const isWellSubject = subjectWell && subjectWell.id === wellId;\n const isWellOffset = offsetWellIds.includes(wellId);\n\n if (isWellOffset && !isWellSubject) {\n onDeleteOffsetWell(wellId);\n } else {\n onAddOffsetWell(wellId);\n }\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n map.on('click', WELLS_ID, handleClick);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n map.off('click', WELLS_ID, handleClick);\n };\n }, [subjectWell, wells, offsetWells, open, isMapReady]);\n\n useEffect(() => {\n if (!open) return;\n\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, open, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n open: PropTypes.bool.isRequired,\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n formationColors: PropTypes.shape({}).isRequired,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n onAddOffsetWell: PropTypes.func.isRequired,\n onDeleteOffsetWell: PropTypes.func.isRequired,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","open","subjectWell","wells","offsetWells","radius","formationColors","popUpFormatter","coordsDataPath","onAddOffsetWell","onDeleteOffsetWell","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","layout","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","geometry","coordinates","reduce","bounds","coord","extend","LngLatBounds","prevWells","offsetWellIds","map","well","sortedWells","sortBy","includes","wellsById","forEach","coords","isWellSubject","isWellOffset","r","color","formation","opacity","properties","wellId","sortKey","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","_Fragment","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","_popupRef$current","handleClick","setTimeout","fitBounds","padding","off","className","styles","mapMain","ref","propTypes","PropTypes","bool","isRequired","shape","number","string","arrayOf","func","defaultProps","memo"],"mappings":"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"}
|
package/cjs-bundle/components/OffsetWellPickerV5/components/Map/OffsetWellMap/OffsetWellMap.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),o=require("react/jsx-runtime"),s=require("react"),l=require("@vis.gl/react-mapbox"),a=require("classnames");require("mapbox-gl/dist/mapbox-gl.css");var i=require("./components/MapLayers/MapLayers.js"),t=require("./components/MapOverlayControls/MapOverlayControls.js"),n=require("./components/MapResizeVeil/MapResizeVeil.js"),r=require("./hooks/useFlyToWell.js"),d=require("./hooks/useIsMapCompact.js"),u=require("./hooks/useMapResizeOnContainer.js"),c=require("./hooks/useOffsetWellMapState.js"),h=require("./constants.js"),p=require("./OffsetWellMap.module.css.js"),g=require("../../../../../componentsV2/LoaderLinear/LoaderLinear.js"),f=require("../../../../../config/mapbox/index.js");require("../../../../../config/mapboxGl/index.js");var m=require("mapbox-gl");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var M=v(e),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),o=require("react/jsx-runtime"),s=require("react"),l=require("@vis.gl/react-mapbox"),a=require("classnames");require("mapbox-gl/dist/mapbox-gl.css");var i=require("./components/MapLayers/MapLayers.js"),t=require("./components/MapOverlayControls/MapOverlayControls.js"),n=require("./components/MapResizeVeil/MapResizeVeil.js"),r=require("./hooks/useFlyToWell.js"),d=require("./hooks/useIsMapCompact.js"),u=require("./hooks/useMapResizeOnContainer.js"),c=require("./hooks/useOffsetWellMapState.js"),h=require("./constants.js"),p=require("./OffsetWellMap.module.css.js"),g=require("../../../../../componentsV2/LoaderLinear/LoaderLinear.js"),f=require("../../../../../config/mapbox/index.js");require("../../../../../config/mapboxGl/index.js");var m=require("mapbox-gl");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var M=v(e),O=v(l),S=v(a),y=v(m);function C(e,o){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);o&&(l=l.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),s.push.apply(s,l)}return s}function w(e){for(var o=1;o<arguments.length;o++){var s=null!=arguments[o]?arguments[o]:{};o%2?C(Object(s),!0).forEach((function(o){M.default(e,o,s[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):C(Object(s)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(s,o))}))}return e}var b=s.forwardRef((function(e,l){var a=e.subjectWell,m=void 0===a?null:a,v=e.wells,M=e.offsetWellIds,C=e.handleChangeOffsetWell,b=e.onBatchSelectWells,R=e.activeWellId,j=e.isClickable,W=void 0===j||j,L=e.selectionZone,D=e.onSelectionZoneConfirm,Z=e.shouldRecenter,x=e.onRecenterComplete,A=e.isResizing,I=void 0!==A&&A,P=e.classes,E=void 0===P?{}:P,q=c.useOffsetWellMapState({subjectWell:m,wells:v,offsetWellIds:M,handleChangeOffsetWell:C,onBatchSelectWells:b,activeWellId:null!=R?R:null,isClickable:W,selectionZone:L,onSelectionZoneConfirm:D,shouldRecenter:Z,onRecenterComplete:x});r.useFlyToWell(l,q.mapRef,v,q.isMapReady);var T=q.showRadiusInput&&null!==q.drawingRadiusMiles,k=d.useIsMapCompact(),N=k.ref,V=k.isCompact&&T,G=u.useMapResizeOnContainer(q.mapRef,I),z=s.useCallback((function(e){N(e),G(e)}),[N,G]),J=S.default(p.mapView,E.root);return f.IS_MAPBOX_ENABLED?o.jsxs("div",{ref:z,className:J,children:[o.jsxs(O.default,w(w({ref:q.mapRef},q.viewState),{},{onMove:q.handleMove,onMoveStart:q.handleMoveStart,onMoveEnd:q.handleMoveEnd,onResize:q.tileSafeOnResize,onLoad:q.handleMapLoad,mapboxAccessToken:f.MAP_BOX_ACCESS_TOKEN,mapLib:y.default,mapStyle:h.MapConfig.Styles[q.mapStyle],style:{borderRadius:"8px"},scrollZoom:!0,doubleClickZoom:!0,boxZoom:!1,attributionControl:!1,interactiveLayerIds:[h.MapConfig.LayerIds.WellsClusters,h.MapConfig.LayerIds.WellsUnclustered],onClick:q.handleMapClick,onMouseMove:q.handleMouseMove,onMouseLeave:q.handleMouseLeave,onDblClick:q.handleZoomInWithSync,onDragStart:q.handleDragStart,onDragEnd:q.handleDragEnd,onMouseDown:q.handleMouseDown,cursor:q.cursor,children:[(q.isTileLoading&&!q.isTooZoomedOut||q.isAllWellsLoading)&&o.jsx(g.LoaderLinear,{type:"fancy",size:"medium",className:p.mapLoader}),o.jsx(i.MapLayers,{wellsGeoJSON:q.wellsGeoJSON,highlightGeoJSON:q.highlightGeoJSON,activeHighlightGeoJSON:q.activeHighlightGeoJSON,loadingTilesGeoJSON:q.loadingTilesGeoJSON,hoveredWell:q.hoveredWell,mapStyle:q.mapStyle,isSatellite:q.isSatellite,clusterColorExpression:q.clusterColorExpression,isRadiusToolActive:q.isRadiusToolActive,radiusState:q.radiusState,radiusDrawingPreviewCircle:q.radiusDrawingPreviewCircle,isRadiusHoveringEdge:q.isRadiusHoveringEdge,isRadiusDrawingDragging:q.isRadiusDrawingDragging,showGhostZone:q.showGhostZone,selectionZone:L,isTooZoomedOut:q.isTooZoomedOut,isLoadAllWells:q.isLoadAllWells,isActiveWellIsSubjectWell:q.isActiveWellIsSubjectWell,isLassoActive:q.isLassoActive,isMapReady:q.isMapReady,polygonCoords:q.polygonCoords,drawRef:q.drawRef,handleDrawCreate:q.handleDrawCreate,handleDrawUpdate:q.handleDrawUpdate,handleDrawDelete:q.handleDrawDelete,handleModeChange:q.handleModeChange,handleSelectionChange:q.handleSelectionChange,subjectWellCoords:q.subjectWellCoords,subjectWell:m,handleSubjectWellMouseEnter:q.handleSubjectWellMouseEnter,handleSubjectWellMouseLeave:q.handleSubjectWellMouseLeave,hoveredCluster:q.hoveredCluster,tooltipAnchor:q.tooltipAnchor,tooltipOffset:q.tooltipOffset,isViewOnly:q.isViewOnly,isClickable:W})]})),o.jsx(n.MapResizeVeil,{isResizing:I}),o.jsx(t.MapOverlayControls,{showRadiusInput:q.showRadiusInput,drawingRadiusMiles:q.drawingRadiusMiles,setDrawingRadiusMiles:q.setDrawingRadiusMiles,isSatellite:q.isSatellite,handleZoomInWithSync:q.handleZoomInWithSync,handleZoomOutWithSync:q.handleZoomOutWithSync,handleResetZoom:q.handleResetZoom,canZoomIn:q.canZoomIn,canZoomOut:q.canZoomOut,isZoomReset:q.isZoomReset,isRadiusToolActive:q.isRadiusToolActive,handleRadiusToggle:q.handleRadiusToggle,isLassoActive:q.isLassoActive,handleLassoToggle:q.handleLassoToggle,distance:q.distance,mapStyle:q.mapStyle,setMapStyle:q.setMapStyle,isViewOnly:q.isViewOnly,hintsRef:q.hintsRef,hintsMode:q.hintsMode,areHintsCompact:V,boxState:q.boxState,isDrawing:q.isDrawing,drawingPointCount:q.drawingPointCount,isEditingPolygon:q.isEditingPolygon,isEditingVertices:q.isEditingVertices,hasValidPolygon:!!q.hasValidPolygon,effectiveZoomedOut:q.effectiveZoomedOut,isLoadAllWells:q.isLoadAllWells,lassoPhase:q.lassoState.phase,radiusPhase:q.radiusState.phase,wellsInBoxCount:q.wellsInBoxCount,toast:q.toast})]}):o.jsx("div",{className:J})}));b.displayName="OffsetWellMap",exports.OffsetWellMap=b;
|
|
2
2
|
//# sourceMappingURL=OffsetWellMap.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@vis.gl/react-mapbox");require("mapbox-gl/dist/mapbox-gl.css");var s=require("../Map/OffsetWellMap/constants.js");require("../../stores/user-settings-store/UserSettingsStoreProvider.js");var o=require("../../stores/user-settings-store/useUserSettingsStore.js");require("../../stores/user-settings-store/UserSettingsStoreContext.js");var i=require("./MapPreloader.module.css.js"),a=require("../../../../config/mapbox/index.js");require("../../../../config/mapboxGl/index.js");var n=require("mapbox-gl");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(t),d=u(n),p=r.memo((function(){var r,t=null!==(r=o.useUserSettingsStore((function(e){return e.settings.mapStyle})))&&void 0!==r?r:"satellite";return e.jsx("div",{className:i.container,children:e.jsx(l.default,{mapboxAccessToken:a.MAP_BOX_ACCESS_TOKEN,mapLib:d.default,mapStyle:s.MapConfig.Styles[t],longitude:s.MapConfig.DefaultCoords.longitude,latitude:s.MapConfig.DefaultCoords.latitude,zoom:s.MapConfig.Zoom.Initial,interactive:!1,attributionControl:!1})})}));p.displayName="MapPreloader",exports.MapPreloader=p;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@vis.gl/react-mapbox");require("mapbox-gl/dist/mapbox-gl.css");var s=require("../Map/OffsetWellMap/constants.js");require("../../stores/user-settings-store/UserSettingsStoreProvider.js");var o=require("../../stores/user-settings-store/useUserSettingsStore.js");require("../../stores/user-settings-store/UserSettingsStoreContext.js");var i=require("./MapPreloader.module.css.js"),a=require("../../../../config/mapbox/index.js");require("../../../../config/mapboxGl/index.js");var n=require("mapbox-gl");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(t),d=u(n),p=r.memo((function(){var r,t=null!==(r=o.useUserSettingsStore((function(e){return e.settings.mapStyle})))&&void 0!==r?r:"satellite";return a.IS_MAPBOX_ENABLED?e.jsx("div",{className:i.container,children:e.jsx(l.default,{mapboxAccessToken:a.MAP_BOX_ACCESS_TOKEN,mapLib:d.default,mapStyle:s.MapConfig.Styles[t],longitude:s.MapConfig.DefaultCoords.longitude,latitude:s.MapConfig.DefaultCoords.latitude,zoom:s.MapConfig.Zoom.Initial,interactive:!1,attributionControl:!1})}):null}));p.displayName="MapPreloader",exports.MapPreloader=p;
|
|
2
2
|
//# sourceMappingURL=MapPreloader.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),i=require("react-dom"),u=require("lodash"),n=require("@material-ui/core/styles"),s=require("../components/FiltersToggler.js"),o=require("../utils.js"),l=require("../constants.js"),a=require("../../../config/theme/index.js");require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("highcharts"),require("highcharts/highcharts-more"),require("highcharts/modules/solid-gauge"),require("highcharts/modules/heatmap"),require("highcharts/modules/boost"),require("highcharts/modules/exporting"),require("highcharts/modules/xrange"),require("highcharts/modules/dumbbell"),require("highcharts/modules/pattern-fill"),require("highcharts/modules/annotations"),require("highcharts-multicolor-series"),require("dompurify"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/assertThisInitialized"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/toArray"),require("@babel/runtime/helpers/toConsumableArray"),require("../../../clients/subscriptions/constants.js"),require("../../../clients/subscriptions.v1.js"),require("../../../clients/subscriptions/subscriptions-client.factory.js"),require("../../../config/extendNative.js");var c=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=d(e),f=d(r),b=d(i);function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,i)}return t}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?p(Object(t),!0).forEach((function(r){h.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}exports.useAppFilterTogglerWidth=function(){var e=t.useState(null),r=f.default(e,2),i=r[0],u=r[1];return t.useEffect((function(){var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e),b.default.render(c.jsx(n.MuiThemeProvider,{theme:a.darkTheme,children:c.jsx(s,{})}),e,(function(){var r=e.getBoundingClientRect();e.remove(),u(r.width)}))}),[]),i},exports.useComonentsWidth=function(e){var r=t.useRef(),i=t.useState(null),n=f.default(i,2),s=n[0],o=n[1],l=t.useRef({}),a=e.filter((function(e){return!!e})),d=c.jsx("div",{ref:r,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:a.map((function(e,r){return c.jsx("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return t.useEffect((function(){var e;if(!u.isEqual(a,l.current)){var t=Array.from(null===(e=r.current)||void 0===e?void 0:e.childNodes).reduce((function(e,r){var t,i=null==r||null===(t=r.getAttribute)||void 0===t?void 0:t.call(r,"data-key"),u=null==r?void 0:r.getBoundingClientRect().width;return m(m({},e),{},h.default({},i,u))}),{});Object.values(t).length===a.length&&(u.isEqual(s,t)||o(t)),l.current=a}})),{componentsWidth:s,hiddenElements:d}},exports.useFilterLayout=function(e,r,i,u){var n=t.useState(null),s=f.default(n,2),a=s[0],c=s[1];return t.useEffect((function(){if(u&&r){var t=o.getStartComponent(e),n=o.getMiddleComponent(e),s=o.getEndComponents(e),a=t&&n&&!s,d=t&&!n&&s,h=t&&n&&s;if(t&&!n&&!s){var f=r[t.key];if(f<=u)return void c(l.LARGE_SIZE_LAYOUT);if(f<=u/2)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(a||d){var b=r[t.key],p=a?r[n.key]:r[s.key];if(b+p<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+p<=u)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(h){var m=r[t.key],
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),i=require("react-dom"),u=require("lodash"),n=require("@material-ui/core/styles"),s=require("../components/FiltersToggler.js"),o=require("../utils.js"),l=require("../constants.js"),a=require("../../../config/theme/index.js");require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("highcharts"),require("highcharts/highcharts-more"),require("highcharts/modules/solid-gauge"),require("highcharts/modules/heatmap"),require("highcharts/modules/boost"),require("highcharts/modules/exporting"),require("highcharts/modules/xrange"),require("highcharts/modules/dumbbell"),require("highcharts/modules/pattern-fill"),require("highcharts/modules/annotations"),require("highcharts-multicolor-series"),require("dompurify"),require("../../../config/mapbox/index.js"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/assertThisInitialized"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/toArray"),require("@babel/runtime/helpers/toConsumableArray"),require("../../../clients/subscriptions/constants.js"),require("../../../clients/subscriptions.v1.js"),require("../../../clients/subscriptions/subscriptions-client.factory.js"),require("../../../config/extendNative.js");var c=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=d(e),f=d(r),b=d(i);function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,i)}return t}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?p(Object(t),!0).forEach((function(r){h.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}exports.useAppFilterTogglerWidth=function(){var e=t.useState(null),r=f.default(e,2),i=r[0],u=r[1];return t.useEffect((function(){var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e),b.default.render(c.jsx(n.MuiThemeProvider,{theme:a.darkTheme,children:c.jsx(s,{})}),e,(function(){var r=e.getBoundingClientRect();e.remove(),u(r.width)}))}),[]),i},exports.useComonentsWidth=function(e){var r=t.useRef(),i=t.useState(null),n=f.default(i,2),s=n[0],o=n[1],l=t.useRef({}),a=e.filter((function(e){return!!e})),d=c.jsx("div",{ref:r,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:a.map((function(e,r){return c.jsx("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return t.useEffect((function(){var e;if(!u.isEqual(a,l.current)){var t=Array.from(null===(e=r.current)||void 0===e?void 0:e.childNodes).reduce((function(e,r){var t,i=null==r||null===(t=r.getAttribute)||void 0===t?void 0:t.call(r,"data-key"),u=null==r?void 0:r.getBoundingClientRect().width;return m(m({},e),{},h.default({},i,u))}),{});Object.values(t).length===a.length&&(u.isEqual(s,t)||o(t)),l.current=a}})),{componentsWidth:s,hiddenElements:d}},exports.useFilterLayout=function(e,r,i,u){var n=t.useState(null),s=f.default(n,2),a=s[0],c=s[1];return t.useEffect((function(){if(u&&r){var t=o.getStartComponent(e),n=o.getMiddleComponent(e),s=o.getEndComponents(e),a=t&&n&&!s,d=t&&!n&&s,h=t&&n&&s;if(t&&!n&&!s){var f=r[t.key];if(f<=u)return void c(l.LARGE_SIZE_LAYOUT);if(f<=u/2)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(a||d){var b=r[t.key],p=a?r[n.key]:r[s.key];if(b+p<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+p<=u)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(h){var m=r[t.key],g=r[n.key],v=r[s.key];if(m+g+v<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+g+v<=u)return void c(l.MEDIUM_SIZE_LAYOUT);if(i+v<=u)return void c(l.SMALL_SIZE_LAYOUT)}c(l.SMALL_SIZE_LAYOUT)}}),[r,u]),a};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/PinnableFilters/effects/index.js"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { isEqual } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport FiltersToggler from '../components/FiltersToggler';\nimport { getEndComponents, getMiddleComponent, getStartComponent } from '../utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants';\n\nimport { theme } from '~/config';\n\n// NOTE: Determine layout according to the width of elements\nexport function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {\n const [layout, setLayout] = useState(null);\n\n useEffect(() => {\n if (!appWidth || !componentsWidth) {\n return;\n }\n\n const filtersComponent = getStartComponent(components);\n const goalComponent = getMiddleComponent(components);\n const switchComponent = getEndComponents(components);\n\n const hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;\n const hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;\n const hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;\n const hasAll = filtersComponent && goalComponent && switchComponent;\n\n if (hasFiltersOnly) {\n const filtersWidth = componentsWidth[filtersComponent.key];\n\n if (filtersWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (filtersWidth <= appWidth / 2) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasFiltersAndGoals || hasFiltersAndSwitch) {\n const startWidth = componentsWidth[filtersComponent.key];\n const endWidth = hasFiltersAndGoals\n ? componentsWidth[goalComponent.key]\n : componentsWidth[switchComponent.key];\n\n if (startWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasAll) {\n const startWidth = componentsWidth[filtersComponent.key];\n const middleWidth = componentsWidth[goalComponent.key];\n const endWidth = componentsWidth[switchComponent.key];\n\n if (startWidth + middleWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + middleWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(SMALL_SIZE_LAYOUT);\n return;\n }\n }\n\n setLayout(SMALL_SIZE_LAYOUT);\n }, [componentsWidth, appWidth]);\n\n return layout;\n}\n\n// NOTE: Calculate the width of child components here\nexport function useComonentsWidth(components) {\n // const widthRef = useRef({});\n const hiddenElementsRef = useRef();\n const [widthDict, setWidthDict] = useState(null);\n const prevComponentsRef = useRef({});\n\n const validComponents = components.filter(component => !!component);\n const hiddenElements = (\n <div\n ref={hiddenElementsRef}\n style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}\n >\n {validComponents.map((component, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div key={index} data-key={component?.key} style={{ position: 'absolute' }}>\n {component}\n </div>\n );\n })}\n </div>\n );\n\n // NOTE: Calcualte width of each components\n useEffect(() => {\n // NOTE: Don't calcuate width again\n if (isEqual(validComponents, prevComponentsRef.current)) {\n return;\n }\n\n const nodesArray = Array.from(hiddenElementsRef.current?.childNodes);\n const sizeMap = nodesArray.reduce((acc, node) => {\n const key = node?.getAttribute?.('data-key');\n const value = node?.getBoundingClientRect().width;\n\n return {\n ...acc,\n [key]: value,\n };\n }, {});\n\n if (Object.values(sizeMap).length === validComponents.length) {\n if (!isEqual(widthDict, sizeMap)) {\n setWidthDict(sizeMap);\n }\n }\n\n prevComponentsRef.current = validComponents;\n });\n\n return { componentsWidth: widthDict, hiddenElements };\n}\n\n// NOTE: Calculate the width of Toggler Component\nexport function useAppFilterTogglerWidth() {\n const [width, setWidth] = useState(null);\n\n useEffect(() => {\n const element = document.createElement('div');\n element.style.position = 'absolute';\n element.style.visibility = 'hidden';\n document.body.appendChild(element);\n\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>\n <FiltersToggler />\n </MuiThemeProvider>,\n element,\n () => {\n const dims = element.getBoundingClientRect();\n element.remove();\n setWidth(dims.width);\n }\n );\n }, []);\n\n return width;\n}\n"],"names":["useState","_useState6","_slicedToArray","_useState5","width","setWidth","useEffect","element","document","createElement","style","position","visibility","body","appendChild","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","FiltersToggler","dims","getBoundingClientRect","remove","components","hiddenElementsRef","useRef","_useState4","_useState3","widthDict","setWidthDict","prevComponentsRef","validComponents","filter","component","hiddenElements","ref","height","overflow","map","index","key","_hiddenElementsRef$cu","isEqual","current","sizeMap","Array","from","childNodes","reduce","acc","node","_node$getAttribute","getAttribute","call","value","_objectSpread","_defineProperty","Object","values","length","componentsWidth","appFilterTogglerWidth","appWidth","_useState2","_useState","layout","setLayout","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","hasFiltersAndGoals","hasFiltersAndSwitch","hasAll","filtersWidth","LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","startWidth","endWidth","middleWidth","SMALL_SIZE_LAYOUT"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/PinnableFilters/effects/index.js"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { isEqual } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport FiltersToggler from '../components/FiltersToggler';\nimport { getEndComponents, getMiddleComponent, getStartComponent } from '../utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants';\n\nimport { theme } from '~/config';\n\n// NOTE: Determine layout according to the width of elements\nexport function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {\n const [layout, setLayout] = useState(null);\n\n useEffect(() => {\n if (!appWidth || !componentsWidth) {\n return;\n }\n\n const filtersComponent = getStartComponent(components);\n const goalComponent = getMiddleComponent(components);\n const switchComponent = getEndComponents(components);\n\n const hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;\n const hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;\n const hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;\n const hasAll = filtersComponent && goalComponent && switchComponent;\n\n if (hasFiltersOnly) {\n const filtersWidth = componentsWidth[filtersComponent.key];\n\n if (filtersWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (filtersWidth <= appWidth / 2) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasFiltersAndGoals || hasFiltersAndSwitch) {\n const startWidth = componentsWidth[filtersComponent.key];\n const endWidth = hasFiltersAndGoals\n ? componentsWidth[goalComponent.key]\n : componentsWidth[switchComponent.key];\n\n if (startWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasAll) {\n const startWidth = componentsWidth[filtersComponent.key];\n const middleWidth = componentsWidth[goalComponent.key];\n const endWidth = componentsWidth[switchComponent.key];\n\n if (startWidth + middleWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + middleWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(SMALL_SIZE_LAYOUT);\n return;\n }\n }\n\n setLayout(SMALL_SIZE_LAYOUT);\n }, [componentsWidth, appWidth]);\n\n return layout;\n}\n\n// NOTE: Calculate the width of child components here\nexport function useComonentsWidth(components) {\n // const widthRef = useRef({});\n const hiddenElementsRef = useRef();\n const [widthDict, setWidthDict] = useState(null);\n const prevComponentsRef = useRef({});\n\n const validComponents = components.filter(component => !!component);\n const hiddenElements = (\n <div\n ref={hiddenElementsRef}\n style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}\n >\n {validComponents.map((component, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div key={index} data-key={component?.key} style={{ position: 'absolute' }}>\n {component}\n </div>\n );\n })}\n </div>\n );\n\n // NOTE: Calcualte width of each components\n useEffect(() => {\n // NOTE: Don't calcuate width again\n if (isEqual(validComponents, prevComponentsRef.current)) {\n return;\n }\n\n const nodesArray = Array.from(hiddenElementsRef.current?.childNodes);\n const sizeMap = nodesArray.reduce((acc, node) => {\n const key = node?.getAttribute?.('data-key');\n const value = node?.getBoundingClientRect().width;\n\n return {\n ...acc,\n [key]: value,\n };\n }, {});\n\n if (Object.values(sizeMap).length === validComponents.length) {\n if (!isEqual(widthDict, sizeMap)) {\n setWidthDict(sizeMap);\n }\n }\n\n prevComponentsRef.current = validComponents;\n });\n\n return { componentsWidth: widthDict, hiddenElements };\n}\n\n// NOTE: Calculate the width of Toggler Component\nexport function useAppFilterTogglerWidth() {\n const [width, setWidth] = useState(null);\n\n useEffect(() => {\n const element = document.createElement('div');\n element.style.position = 'absolute';\n element.style.visibility = 'hidden';\n document.body.appendChild(element);\n\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>\n <FiltersToggler />\n </MuiThemeProvider>,\n element,\n () => {\n const dims = element.getBoundingClientRect();\n element.remove();\n setWidth(dims.width);\n }\n );\n }, []);\n\n return width;\n}\n"],"names":["useState","_useState6","_slicedToArray","_useState5","width","setWidth","useEffect","element","document","createElement","style","position","visibility","body","appendChild","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","FiltersToggler","dims","getBoundingClientRect","remove","components","hiddenElementsRef","useRef","_useState4","_useState3","widthDict","setWidthDict","prevComponentsRef","validComponents","filter","component","hiddenElements","ref","height","overflow","map","index","key","_hiddenElementsRef$cu","isEqual","current","sizeMap","Array","from","childNodes","reduce","acc","node","_node$getAttribute","getAttribute","call","value","_objectSpread","_defineProperty","Object","values","length","componentsWidth","appFilterTogglerWidth","appWidth","_useState2","_useState","layout","setLayout","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","hasFiltersAndGoals","hasFiltersAndSwitch","hasAll","filtersWidth","LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","startWidth","endWidth","middleWidth","SMALL_SIZE_LAYOUT"],"mappings":"w1EA0IO,WACL,IAA0BA,EAAAA,EAAQA,SAAC,MAAKC,EAAAC,EAAAA,QAAAC,EAAA,GAAjCC,EAAKH,EAAA,GAAEI,EAAQJ,EAAA,GAqBtB,OAnBAK,EAAAA,WAAU,WACR,IAAMC,EAAUC,SAASC,cAAc,OACvCF,EAAQG,MAAMC,SAAW,WACzBJ,EAAQG,MAAME,WAAa,SAC3BJ,SAASK,KAAKC,YAAYP,GAE1BQ,UAASC,OACPC,EAAAC,IAACC,mBAAgB,CAACC,MAAOA,EAAgBC,UAAAC,SACvCL,EAAAA,IAACM,EAAc,MAEjBhB,GACA,WACE,IAAMiB,EAAOjB,EAAQkB,wBACrBlB,EAAQmB,SACRrB,EAASmB,EAAKpB,MAChB,GAEH,GAAE,IAEIA,CACT,4BA7EO,SAA2BuB,GAEhC,IAAMC,EAAoBC,EAAAA,SACQ7B,EAAAA,EAAQA,SAAC,MAAK8B,EAAA5B,EAAAA,QAAA6B,EAAA,GAAzCC,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACxBI,EAAoBL,SAAO,CAAA,GAE3BM,EAAkBR,EAAWS,QAAO,SAAAC,GAAS,QAAMA,KACnDC,EACJrB,EAAAC,IAAA,MAAA,CACEqB,IAAKX,EACLlB,MAAO,CAAEC,SAAU,WAAYP,MAAO,EAAGoC,OAAQ,EAAGC,SAAU,UAAWnB,SAExEa,EAAgBO,KAAI,SAACL,EAAWM,GAC/B,OAEE1B,EAAAA,IAAA,MAAA,CAAiB,WAAUoB,aAAAA,EAAAA,EAAWO,IAAKlC,MAAO,CAAEC,SAAU,YAAaW,SACxEe,GADOM,QAmClB,OA1BArC,EAAAA,WAAU,WAAM,IAAAuC,EAEd,IAAIC,UAAQX,EAAiBD,EAAkBa,SAA/C,CAIA,IACMC,EADaC,MAAMC,KAA8B,QAA1BL,EAACjB,EAAkBmB,eAAO,IAAAF,OAAA,EAAzBA,EAA2BM,YAC9BC,QAAO,SAACC,EAAKC,GAAS,IAAAC,EACzCX,EAAMU,SAAA,QAAAA,EAAAA,EAAME,oBAAN,IAAAD,OAAAD,EAAAC,EAAAE,KAAAH,EAAqB,YAC3BI,EAAQJ,aAAAA,EAAAA,EAAM7B,wBAAwBrB,MAE5C,OAAAuD,EAAAA,EAAA,CAAA,EACKN,GAAG,GAAAO,EAAAA,QAAA,CAAA,EACLhB,EAAMc,GAEV,GAAE,CAAE,GAEDG,OAAOC,OAAOd,GAASe,SAAW5B,EAAgB4B,SAC/CjB,EAAOA,QAACd,EAAWgB,IACtBf,EAAae,IAIjBd,EAAkBa,QAAUZ,CAnB5B,CAoBF,IAEO,CAAE6B,gBAAiBhC,EAAWM,eAAAA,EACvC,0BA3HO,SAAyBX,EAAYqC,EAAiBC,EAAuBC,GAClF,IAA4BlE,EAAAA,EAAQA,SAAC,MAAKmE,EAAAjE,EAAAA,QAAAkE,EAAA,GAAnCC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAmExB,OAjEA7D,EAAAA,WAAU,WACR,GAAK4D,GAAaF,EAAlB,CAIA,IAAMO,EAAmBC,oBAAkB7C,GACrC8C,EAAgBC,qBAAmB/C,GACnCgD,EAAkBC,mBAAiBjD,GAGnCkD,EAAqBN,GAAoBE,IAAkBE,EAC3DG,EAAsBP,IAAqBE,GAAiBE,EAC5DI,EAASR,GAAoBE,GAAiBE,EAEpD,GALuBJ,IAAqBE,IAAkBE,EAK1C,CAClB,IAAMK,EAAehB,EAAgBO,EAAiB3B,KAEtD,GAAIoC,GAAgBd,EAElB,YADAI,EAAUW,EAAiBA,mBAI7B,GAAID,GAAgBd,EAAW,EAE7B,YADAI,EAAUY,EAAkBA,mBAGhC,MAAO,GAAIL,GAAsBC,EAAqB,CACpD,IAAMK,EAAanB,EAAgBO,EAAiB3B,KAC9CwC,EAAWP,EACbb,EAAgBS,EAAc7B,KAC9BoB,EAAgBW,EAAgB/B,KAEpC,GAAIuC,EAAaC,GAAYlB,EAE3B,YADAI,EAAUW,EAAiBA,mBAI7B,GAAIhB,EAAwBmB,GAAYlB,EAEtC,YADAI,EAAUY,EAAkBA,mBAG/B,MAAM,GAAIH,EAAQ,CACjB,IAAMI,EAAanB,EAAgBO,EAAiB3B,KAC9CyC,EAAcrB,EAAgBS,EAAc7B,KAC5CwC,EAAWpB,EAAgBW,EAAgB/B,KAEjD,GAAIuC,EAAaE,EAAcD,GAAYlB,EAEzC,YADAI,EAAUW,EAAiBA,mBAI7B,GAAIhB,EAAwBoB,EAAcD,GAAYlB,EAEpD,YADAI,EAAUY,EAAkBA,oBAI9B,GAAIjB,EAAwBmB,GAAYlB,EAEtC,YADAI,EAAUgB,EAAiBA,kBAG/B,CAEAhB,EAAUgB,EAAiBA,kBA3D3B,CA4DF,GAAG,CAACtB,EAAiBE,IAEdG,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require('./../../ext-esm/style-inject/dist/style-inject.es.js')('.SliderAdvanced_root__9sEhu{color:var(--palette-primary-text-1)}.SliderAdvanced_root__9sEhu:hover .SliderAdvanced_barHandle__9H3x-{opacity:1}.SliderAdvanced_small__2jCDz{--corvaui-slideradvanced-size:40px}.SliderAdvanced_medium__gTWOu{--corvaui-slideradvanced-size:64px}.SliderAdvanced_large__Pc-Qe{--corvaui-slideradvanced-size:120px}.SliderAdvanced_horizontal__4FI-A{--corvaui-slideradvanced-handleSize:45px;height:var(--corvaui-slideradvanced-size);padding:0 var(--corvaui-slideradvanced-handleSize);width:100%}.SliderAdvanced_horizontal__4FI-A.SliderAdvanced_minimalHandle__De4ma{--corvaui-slideradvanced-handleSize:8px}.SliderAdvanced_vertical__m2VZL{--corvaui-slideradvanced-handleSize:24px;height:100%;padding:var(--corvaui-slideradvanced-handleSize) 0;width:var(--corvaui-slideradvanced-size)}.SliderAdvanced_vertical__m2VZL.SliderAdvanced_minimalHandle__De4ma{--corvaui-slideradvanced-handleSize:8px}.SliderAdvanced_track__FjHMV{height:100%;position:relative;width:100%}.SliderAdvanced_handleContainer__62SjT{left:50%;position:absolute;top:50%;touch-action:none}.SliderAdvanced_handle__UXdB6{align-items:center;display:flex;justify-content:center;position:absolute}.SliderAdvanced_handle__UXdB6.SliderAdvanced_top__mRJYi{bottom:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_right__Qw0Ki{left:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_bottom__hRGDt{top:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_left__gy-xk{right:0}.SliderAdvanced_handle__UXdB6:hover{z-index:1}.SliderAdvanced_handle__UXdB6:hover .SliderAdvanced_chevronEnd__s9lGi,.SliderAdvanced_handle__UXdB6:hover .SliderAdvanced_chevronStart__mc7ib{opacity:1}.SliderAdvanced_handleInnerHorizontal__ooW1J{cursor:ew-resize;height:var(--corvaui-slideradvanced-size);top:50%;transform:translateY(-50%);width:var(--corvaui-slideradvanced-handleSize)}.SliderAdvanced_handleInnerHorizontal__ooW1J .SliderAdvanced_chevronStart__mc7ib{margin-top:-8px;right:100%;top:50%;transform:rotate(90deg)}.SliderAdvanced_handleInnerHorizontal__ooW1J .SliderAdvanced_chevronEnd__s9lGi{left:100%;margin-top:-8px;top:50%;transform:rotate(-90deg)}.SliderAdvanced_handleInnerVertical__6PF3p{cursor:ns-resize;height:var(--corvaui-slideradvanced-handleSize);left:50%;transform:translateX(-50%);width:var(--corvaui-slideradvanced-size)}.SliderAdvanced_handleInnerVertical__6PF3p .SliderAdvanced_chevronStart__mc7ib{bottom:100%;left:50%;margin-left:-8px;transform:rotate(180deg)}.SliderAdvanced_handleInnerVertical__6PF3p .SliderAdvanced_chevronEnd__s9lGi{left:50%;margin-left:-8px;top:100%}.SliderAdvanced_chevronEnd__s9lGi,.SliderAdvanced_chevronStart__mc7ib{opacity:0;position:absolute;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.SliderAdvanced_chevronEnd__s9lGi.SliderAdvanced_chevronVisible__5Xjk6,.SliderAdvanced_chevronStart__mc7ib.SliderAdvanced_chevronVisible__5Xjk6{opacity:1}.SliderAdvanced_chevronEnd__s9lGi.SliderAdvanced_chevronHidden__QcPf7,.SliderAdvanced_chevronStart__mc7ib.SliderAdvanced_chevronHidden__QcPf7{display:none}.SliderAdvanced_bar__S9azK{background:rgb(from var(--palette-primary-text-1) r g b/.08);border:1px solid var(--palette-primary-text-9);border-radius:4px;cursor:grab;inset:0;position:absolute;touch-action:none;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.SliderAdvanced_bar__S9azK:hover{border-color:var(--palette-primary-main)}.SliderAdvanced_bar__S9azK.SliderAdvanced_isDragging__4okDa{background:var(--palette-primary-main);border-color:var(--palette-primary-main);cursor:grabbing}.SliderAdvanced_bar__S9azK.SliderAdvanced_isDragging__4okDa .SliderAdvanced_floating__Ts-GD{opacity:1}.SliderAdvanced_bar__S9azK.SliderAdvanced_isVertical__St2CA{flex-direction:column}.SliderAdvanced_barHandle__9H3x-{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floating__Ts-GD{background-color:inherit;border:1px solid;border-color:inherit;border-radius:50%;bottom:auto;color:var(--palette-primary-text-1);left:50%;opacity:0;padding:5px;position:absolute;top:auto;transform:translate(-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floating__Ts-GD:before{content:"";position:absolute}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingDefault__cbat3{margin:3px 0 0;top:100%}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingDefault__cbat3:before{inset:-3px 0 50% 0}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingReverse__RHvGZ{bottom:100%;margin:0 0 3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingReverse__RHvGZ:before{inset:50% -3px 0}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingNone__Lr-iw{display:none}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floating__Ts-GD{bottom:auto;left:auto;top:50%;transform:translateY(-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingDefault__cbat3{left:100%;margin:0 0 0 3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingDefault__cbat3:before{inset:0 50% -3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingReverse__RHvGZ{margin:0 3px 0 0;right:100%}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingReverse__RHvGZ:before{inset
|
|
1
|
+
"use strict";require('./../../ext-esm/style-inject/dist/style-inject.es.js')('.SliderAdvanced_root__9sEhu{color:var(--palette-primary-text-1)}.SliderAdvanced_root__9sEhu:hover .SliderAdvanced_barHandle__9H3x-{opacity:1}.SliderAdvanced_small__2jCDz{--corvaui-slideradvanced-size:40px}.SliderAdvanced_medium__gTWOu{--corvaui-slideradvanced-size:64px}.SliderAdvanced_large__Pc-Qe{--corvaui-slideradvanced-size:120px}.SliderAdvanced_horizontal__4FI-A{--corvaui-slideradvanced-handleSize:45px;height:var(--corvaui-slideradvanced-size);padding:0 var(--corvaui-slideradvanced-handleSize);width:100%}.SliderAdvanced_horizontal__4FI-A.SliderAdvanced_minimalHandle__De4ma{--corvaui-slideradvanced-handleSize:8px}.SliderAdvanced_vertical__m2VZL{--corvaui-slideradvanced-handleSize:24px;height:100%;padding:var(--corvaui-slideradvanced-handleSize) 0;width:var(--corvaui-slideradvanced-size)}.SliderAdvanced_vertical__m2VZL.SliderAdvanced_minimalHandle__De4ma{--corvaui-slideradvanced-handleSize:8px}.SliderAdvanced_track__FjHMV{height:100%;position:relative;width:100%}.SliderAdvanced_handleContainer__62SjT{left:50%;position:absolute;top:50%;touch-action:none}.SliderAdvanced_handle__UXdB6{align-items:center;display:flex;justify-content:center;position:absolute}.SliderAdvanced_handle__UXdB6.SliderAdvanced_top__mRJYi{bottom:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_right__Qw0Ki{left:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_bottom__hRGDt{top:0}.SliderAdvanced_handle__UXdB6.SliderAdvanced_left__gy-xk{right:0}.SliderAdvanced_handle__UXdB6:hover{z-index:1}.SliderAdvanced_handle__UXdB6:hover .SliderAdvanced_chevronEnd__s9lGi,.SliderAdvanced_handle__UXdB6:hover .SliderAdvanced_chevronStart__mc7ib{opacity:1}.SliderAdvanced_handleInnerHorizontal__ooW1J{cursor:ew-resize;height:var(--corvaui-slideradvanced-size);top:50%;transform:translateY(-50%);width:var(--corvaui-slideradvanced-handleSize)}.SliderAdvanced_handleInnerHorizontal__ooW1J .SliderAdvanced_chevronStart__mc7ib{margin-top:-8px;right:100%;top:50%;transform:rotate(90deg)}.SliderAdvanced_handleInnerHorizontal__ooW1J .SliderAdvanced_chevronEnd__s9lGi{left:100%;margin-top:-8px;top:50%;transform:rotate(-90deg)}.SliderAdvanced_handleInnerVertical__6PF3p{cursor:ns-resize;height:var(--corvaui-slideradvanced-handleSize);left:50%;transform:translateX(-50%);width:var(--corvaui-slideradvanced-size)}.SliderAdvanced_handleInnerVertical__6PF3p .SliderAdvanced_chevronStart__mc7ib{bottom:100%;left:50%;margin-left:-8px;transform:rotate(180deg)}.SliderAdvanced_handleInnerVertical__6PF3p .SliderAdvanced_chevronEnd__s9lGi{left:50%;margin-left:-8px;top:100%}.SliderAdvanced_chevronEnd__s9lGi,.SliderAdvanced_chevronStart__mc7ib{opacity:0;position:absolute;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.SliderAdvanced_chevronEnd__s9lGi.SliderAdvanced_chevronVisible__5Xjk6,.SliderAdvanced_chevronStart__mc7ib.SliderAdvanced_chevronVisible__5Xjk6{opacity:1}.SliderAdvanced_chevronEnd__s9lGi.SliderAdvanced_chevronHidden__QcPf7,.SliderAdvanced_chevronStart__mc7ib.SliderAdvanced_chevronHidden__QcPf7{display:none}.SliderAdvanced_bar__S9azK{background:rgb(from var(--palette-primary-text-1) r g b/.08);border:1px solid var(--palette-primary-text-9);border-radius:4px;cursor:grab;inset:0;position:absolute;touch-action:none;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.SliderAdvanced_bar__S9azK:hover{border-color:var(--palette-primary-main)}.SliderAdvanced_bar__S9azK.SliderAdvanced_isDragging__4okDa{background:var(--palette-primary-main);border-color:var(--palette-primary-main);cursor:grabbing}.SliderAdvanced_bar__S9azK.SliderAdvanced_isDragging__4okDa .SliderAdvanced_floating__Ts-GD{opacity:1}.SliderAdvanced_bar__S9azK.SliderAdvanced_isVertical__St2CA{flex-direction:column}.SliderAdvanced_barHandle__9H3x-{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floating__Ts-GD{background-color:inherit;border:1px solid;border-color:inherit;border-radius:50%;bottom:auto;color:var(--palette-primary-text-1);left:50%;opacity:0;padding:5px;position:absolute;top:auto;transform:translate(-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floating__Ts-GD:before{content:"";position:absolute}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingDefault__cbat3{margin:3px 0 0;top:100%}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingDefault__cbat3:before{inset:-3px 0 50% 0}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingReverse__RHvGZ{bottom:100%;margin:0 0 3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingReverse__RHvGZ:before{inset:50% 0 -3px 0}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_floatingNone__Lr-iw{display:none}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floating__Ts-GD{bottom:auto;left:auto;top:50%;transform:translateY(-50%)}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingDefault__cbat3{left:100%;margin:0 0 0 3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingDefault__cbat3:before{inset:0 50% 0 -3px}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingReverse__RHvGZ{margin:0 3px 0 0;right:100%}.SliderAdvanced_barHandle__9H3x-.SliderAdvanced_isVertical__St2CA.SliderAdvanced_floatingReverse__RHvGZ:before{inset:0 -3px 0 50%}.SliderAdvanced_barIcon__qoKE7{display:block}.SliderAdvanced_barIconVertical__8eMHq{transform:rotate(90deg)}'),module.exports={spacing:"8",root:"SliderAdvanced_root__9sEhu",barHandle:"SliderAdvanced_barHandle__9H3x-",small:"SliderAdvanced_small__2jCDz",medium:"SliderAdvanced_medium__gTWOu",large:"SliderAdvanced_large__Pc-Qe",horizontal:"SliderAdvanced_horizontal__4FI-A",minimalHandle:"SliderAdvanced_minimalHandle__De4ma",vertical:"SliderAdvanced_vertical__m2VZL",track:"SliderAdvanced_track__FjHMV",handleContainer:"SliderAdvanced_handleContainer__62SjT",handle:"SliderAdvanced_handle__UXdB6",top:"SliderAdvanced_top__mRJYi",right:"SliderAdvanced_right__Qw0Ki",bottom:"SliderAdvanced_bottom__hRGDt",left:"SliderAdvanced_left__gy-xk",chevronStart:"SliderAdvanced_chevronStart__mc7ib",chevronEnd:"SliderAdvanced_chevronEnd__s9lGi",handleInnerHorizontal:"SliderAdvanced_handleInnerHorizontal__ooW1J",handleInnerVertical:"SliderAdvanced_handleInnerVertical__6PF3p",chevronVisible:"SliderAdvanced_chevronVisible__5Xjk6",chevronHidden:"SliderAdvanced_chevronHidden__QcPf7",bar:"SliderAdvanced_bar__S9azK",isDragging:"SliderAdvanced_isDragging__4okDa",floating:"SliderAdvanced_floating__Ts-GD",isVertical:"SliderAdvanced_isVertical__St2CA",floatingDefault:"SliderAdvanced_floatingDefault__cbat3",floatingReverse:"SliderAdvanced_floatingReverse__RHvGZ",floatingNone:"SliderAdvanced_floatingNone__Lr-iw",barIcon:"SliderAdvanced_barIcon__qoKE7",barIconVertical:"SliderAdvanced_barIconVertical__8eMHq"};
|
|
2
2
|
//# sourceMappingURL=SliderAdvanced.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.MAP_BOX_ACCESS_TOKEN="pk.eyJ1IjoiY29ydmEtYWkiLCJhIjoiY2tzeXg1Ym84Mm53NjJvbnZvZ3JxajVwayJ9.3B6ubssBj1UCqN5o25X6pw";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="true"===process.env.REACT_APP_MAPBOX_ENABLED;exports.IS_MAPBOX_ENABLED=e,exports.MAP_BOX_ACCESS_TOKEN="pk.eyJ1IjoiY29ydmEtYWkiLCJhIjoiY2tzeXg1Ym84Mm53NjJvbnZvZ3JxajVwayJ9.3B6ubssBj1UCqN5o25X6pw";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/config/mapbox/index.js"],"sourcesContent":["// NOTE: Access token from Jim Wang\nexport const MAP_BOX_ACCESS_TOKEN =\n 'pk.eyJ1IjoiY29ydmEtYWkiLCJhIjoiY2tzeXg1Ym84Mm53NjJvbnZvZ3JxajVwayJ9.3B6ubssBj1UCqN5o25X6pw';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/config/mapbox/index.js"],"sourcesContent":["// NOTE: Access token from Jim Wang\nexport const MAP_BOX_ACCESS_TOKEN =\n 'pk.eyJ1IjoiY29ydmEtYWkiLCJhIjoiY2tzeXg1Ym84Mm53NjJvbnZvZ3JxajVwayJ9.3B6ubssBj1UCqN5o25X6pw';\n\n// Airgapped deployments cannot reach api.mapbox.com, so their maps must never mount.\n// The host app inlines this at its own build (corva-web-frontend maps VITE_ to REACT_APP_).\nexport const IS_MAPBOX_ENABLED = process.env.REACT_APP_MAPBOX_ENABLED === 'true';\n"],"names":["IS_MAPBOX_ENABLED","process","env","REACT_APP_MAPBOX_ENABLED"],"mappings":"oEACO,IAKMA,EAA6D,SAAzCC,QAAQC,IAAIC,kFAJ3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"names":[],"mappings":";;AAqDA;;;;;;;;gBA+NC;;;;;;;;;;;;;;;;;;;;;;;;;sBAlRqB,YAAY;AAclC,gDAAyC,CAAC,CAAC;AAC3C,wCAAiC,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/slicedToArray";import{memo as r,useRef as t,useState as o,useMemo as n,useEffect as a,createElement as
|
|
1
|
+
import e from"@babel/runtime/helpers/slicedToArray";import{memo as r,useRef as t,useState as o,useMemo as n,useEffect as a,createElement as i}from"react";import l from"react-dom";import u from"prop-types";import{get as c}from"lodash";import s from"./Map.css.js";import{mapbox as d}from"../../../../utils/index.js";import"../../../../config/mapboxGl/index.js";import{IS_MAPBOX_ENABLED as p}from"../../../../config/mapbox/index.js";import"mapbox-gl/dist/mapbox-gl.css";import{jsx as f}from"react/jsx-runtime";import m from"mapbox-gl";var y=d.isValidCoordinates,v=[29.749907,-95.358421],g="wells-highlight",h={type:"FeatureCollection",features:[]},w=function(r){var t=e(r,2),o=t[0];return[t[1],o]};function b(r){var u=r.subjectWell,d=r.wells,b=r.offsetWells,x=r.radius,S=r.subjectWellMarkerSize,M=r.wellMarkerSize,j=r.coordsDataPath,C=t(null),D=t(null),F=t(null),P=t(null),W=t(),k=o(!1),z=e(k,2),L=z[0],B=z[1],I=n((function(){return u&&c(u,j)}),[u,j]);a((function(){if(p){D.current=new m.Map({container:C.current,style:"mapbox://styles/mapbox/dark-v9",center:w(v),zoom:1,attributionControl:!1,scrollZoom:!1}),D.current.addControl(new m.NavigationControl({showCompass:!1}),"bottom-right"),D.current.on("load",(function(){D.current.addSource("radius-circle",{type:"geojson",data:h}),D.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),D.current.addSource("wells",{type:"geojson",data:h}),D.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":["get","opacity"]}}),D.current.addSource(g,{type:"geojson",data:h}),D.current.addLayer({id:g,type:"circle",source:g,paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":.2}}),B(!0)}));var e=D.current;return function(){e.remove(),D.current=null,F.current=null}}}),[]),a((function(){if(D.current&&L)if(I){var r=function(r,t){for(var o=e(r,2),n=o[0],a=o[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,l=[],u=t/(111320*Math.cos(n*Math.PI/180)),c=t/110574,s=0;s<=i;s+=1){var d=s/i*(2*Math.PI);l.push([a+u*Math.cos(d),n+c*Math.sin(d)])}return l}(I,1609.34*x);D.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[r]}})}else D.current.getSource("radius-circle").setData(h)}),[x,I,L]);return a((function(){var e;if(D.current&&L){var r=W.current;W.current=d,null===(e=P.current)||void 0===e||e.remove(),D.current.getSource(g).setData(h);var t=b.map((function(e){return e.id})),o=[],n={},a=new m.LngLatBounds;d.forEach((function(e){var r=c(e,j);if(r&&y(r)){var i=u&&u.id===e.id,l=t.includes(e.id),s=i?S:M,d=i||l?1:.3;n[e.id]=e,a.extend(w(r)),o.push({type:"Feature",geometry:{type:"Point",coordinates:w(r)},properties:{wellId:e.id,radius:s,opacity:d}})}})),D.current.getSource("wells").setData({type:"FeatureCollection",features:o}),F.current=o.length?a:null;var s=D.current,p=null,v=function(e){s.getCanvas().style.cursor="pointer";var r=n[e.features[0].properties.wellId];if(r&&r.id!==p){p=r.id;var t=c(r,j),o=document.createElement("div"),a=i((function(e){var r=e.well;return f("div",{style:{color:"#fff",background:"##414141"},children:f("span",{style:{fontSize:"11px",lineHeight:"16px"},children:c(r,"name")})})}),{well:r});l.render(a,o),P.current||(P.current=new m.Popup({closeButton:!1,maxWidth:"none"})),P.current.setLngLat(w(t)).setDOMContent(o).addTo(s),function(e,r){D.current.getSource(g).setData({type:"Feature",geometry:{type:"Point",coordinates:w(e)},properties:{radius:3*r}})}(t,e.features[0].properties.radius)}},x=function(){var e;p=null,s.getCanvas().style.cursor="",s.getSource(g).setData(h),null===(e=P.current)||void 0===e||e.remove()},C=function(e){null!=e&&e.point&&s.queryRenderedFeatures(e.point,{layers:[g]}).length||x()};return s.on("mousemove","wells",v),s.on("mouseleave","wells",C),s.on("mouseleave",g,x),setTimeout((function(){D.current&&F.current&&d!==r&&D.current.fitBounds(F.current)}),500),function(){s.off("mousemove","wells",v),s.off("mouseleave","wells",C),s.off("mouseleave",g,x)}}}),[u,d,b,L]),f("div",{className:s.map,children:f("div",{className:s.mapMain,ref:C})})}b.propTypes={subjectWell:u.shape({id:u.number,formation:u.string}),wells:u.arrayOf(u.shape({})).isRequired,offsetWells:u.arrayOf(u.shape({})),radius:u.number.isRequired,subjectWellMarkerSize:u.number,wellMarkerSize:u.number,coordsDataPath:u.string},b.defaultProps={subjectWell:null,subjectWellMarkerSize:8,wellMarkerSize:5,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var x=r(b);export{x as default};
|
|
2
2
|
//# sourceMappingURL=Map.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Map.js","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\nconst toolTip =\n () =>\n // eslint-disable-next-line react/prop-types\n ({ well }) => {\n return (\n <div style={{ color: '#fff', background: '##414141' }}>\n <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n </div>\n );\n };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack),\n // and the hover highlight layer last so it renders on top of the markers\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: HIGHLIGHT_ID,\n type: 'circle',\n source: HIGHLIGHT_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': 0.2,\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n }, [radius, subjectWellCoords, isMapReady]);\n\n const handleMouseOver = (coords, r) => {\n // Highlight the hovered well with a bigger translucent circle\n mapRef.current.getSource(HIGHLIGHT_ID).setData({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { radius: r * 3 },\n });\n };\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n const coords = get(well, coordsDataPath);\n\n // Tooltip\n const tooltipContainer = document.createElement('div');\n const tootipContent = createElement(toolTip(), { well });\n ReactDOM.render(tootipContent, tooltipContainer);\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current.setLngLat(toLngLat(coords)).setDOMContent(tooltipContainer).addTo(map);\n\n // Highlight\n handleMouseOver(coords, e.features[0].properties.radius);\n };\n\n // NOTE: was the mouseout handler of the Leaflet highlight marker\n const handleHighlightMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n popupRef.current?.remove();\n };\n\n // NOTE: If the pointer exits before the highlight renders under it, the highlight\n // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n const handleWellsMouseLeave = e => {\n if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n return;\n }\n handleHighlightMouseLeave();\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","tooltipContainer","document","createElement","tootipContent","_ref5","_jsx","color","background","children","fontSize","lineHeight","ReactDOM","render","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","defaultProps","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Map.js","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\nconst toolTip =\n () =>\n // eslint-disable-next-line react/prop-types\n ({ well }) => {\n return (\n <div style={{ color: '#fff', background: '##414141' }}>\n <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n </div>\n );\n };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!IS_MAPBOX_ENABLED) return undefined;\n\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack),\n // and the hover highlight layer last so it renders on top of the markers\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: HIGHLIGHT_ID,\n type: 'circle',\n source: HIGHLIGHT_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': 0.2,\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n }, [radius, subjectWellCoords, isMapReady]);\n\n const handleMouseOver = (coords, r) => {\n // Highlight the hovered well with a bigger translucent circle\n mapRef.current.getSource(HIGHLIGHT_ID).setData({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { radius: r * 3 },\n });\n };\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n const coords = get(well, coordsDataPath);\n\n // Tooltip\n const tooltipContainer = document.createElement('div');\n const tootipContent = createElement(toolTip(), { well });\n ReactDOM.render(tootipContent, tooltipContainer);\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current.setLngLat(toLngLat(coords)).setDOMContent(tooltipContainer).addTo(map);\n\n // Highlight\n handleMouseOver(coords, e.features[0].properties.radius);\n };\n\n // NOTE: was the mouseout handler of the Leaflet highlight marker\n const handleHighlightMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n popupRef.current?.remove();\n };\n\n // NOTE: If the pointer exits before the highlight renders under it, the highlight\n // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n const handleWellsMouseLeave = e => {\n if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n return;\n }\n handleHighlightMouseLeave();\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","tooltipContainer","document","createElement","tootipContent","_ref5","_jsx","color","background","children","fontSize","lineHeight","ReactDOM","render","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","defaultProps","memo"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OffsetWellMap.d.ts","sourceRoot":"","sources":["../../../src/components/OffsetWellMap/OffsetWellMap.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"OffsetWellMap.d.ts","sourceRoot":"","sources":["../../../src/components/OffsetWellMap/OffsetWellMap.js"],"names":[],"mappings":";AAmEA,0EAA0E;AAC1E,6BADW,KAAK,CAAC,EAAE,CAAC,OAAO,sBAAsB,EAAE,kBAAkB,CAAC,CAicpE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useMemo as t,useRef as l,useState as o,useEffect as i,createElement as c}from"react";import n from"react-dom";import{get as u}from"lodash";import
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useMemo as t,useRef as l,useState as o,useEffect as i,createElement as c}from"react";import n from"react-dom";import{get as u}from"lodash";import a from"classnames";import{Tooltip as s}from"@material-ui/core";import{Add as d,Remove as f}from"@material-ui/icons";import"mapbox-gl/dist/mapbox-gl.css";import{usePreviousWells as m}from"./effects/usePreviousWells.js";import{WellTooltip as v}from"./WellTooltip.js";import{getAllFormations as h}from"./utils.js";import p from"./OffsetWellMap.module.css.js";import"../../config/mapboxGl/index.js";import{IS_MAPBOX_ENABLED as g}from"../../config/mapbox/index.js";import{mapbox as y}from"../../utils/index.js";import{jsx as w,jsxs as b,Fragment as W}from"react/jsx-runtime";import j from"mapbox-gl";var C=y.isValidCoordinates,F=[29.749907,-95.358421],B={type:"FeatureCollection",features:[]},L=["==",["id"],-1],x=function(e){var t=r(e,2),l=t[0];return[t[1],l]},D=function(e,t){for(var l=r(e,2),o=l[0],i=l[1],c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,n=t/(111320*Math.cos(o*Math.PI/180)),u=t/110574,a=[],s=0;s<=c;s+=1){var d=s/c*2*Math.PI;a.push([i+n*Math.cos(d),o+u*Math.sin(d)])}return{type:"Polygon",coordinates:[a]}},M=function(y){var M=y.isViewOnly,O=y.subjectWell,S=void 0===O?null:O,k=y.wells,P=y.offsetWellIds,z=y.radius,I=y.handleChanageOffsetWell,Z=y.handleChangeOffsetWell,E=void 0===Z?I:Z,N=y.activeWellId,T=y.isClickable,V=void 0===T||T,A=y.classes,G=void 0===A?{}:A,H=t((function(){return S&&u(S,"topHole.coordinates")}),[S]),q=t((function(){return h(k)}),[k]),R=l(),J=l(),K=l(),Q=l(null),U=l(null),X=l(),Y=l(new Map),$=l(null),_=l(null),ee=o(!1),re=r(ee,2),te=re[0],le=re[1],oe=(null==S?void 0:S.id)===N,ie=m(k),ce=o(!1),ne=r(ce,2),ue=ne[0],ae=ne[1],se=o(3),de=r(se,2),fe=de[0],me=de[1];i((function(){if(g){var e=new j.Map({container:R.current,style:"mapbox://styles/mapbox/dark-v9",center:x(F),zoom:3,maxZoom:18,attributionControl:!1,scrollZoom:!1,doubleClickZoom:!1});return J.current=e,e.on("zoomend",(function(){return me(Math.round(e.getZoom()))})),e.on("load",(function(){e.addSource("radius-circle",{type:"geojson",data:B}),e.addLayer({id:"radius-circle-fill",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),e.addSource("wells",{type:"geojson",data:B}),e.addLayer({id:"wells-halo",type:"circle",source:"wells",filter:["==",["get","isOffsetWell"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.08}}),e.addLayer({id:"wells-circle",type:"circle",source:"wells",layout:{"circle-sort-key":["get","order"]},paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),e.addLayer({id:"wells-active-highlight",type:"circle",source:"wells",filter:["==",["get","isActive"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.24}}),e.addLayer({id:"wells-hover-highlight",type:"circle",source:"wells",filter:L,paint:{"circle-radius":["case",["get","isSubjectWell"],5,12],"circle-color":["case",["get","isSubjectWell"],"#63EFFF",["get","color"]],"circle-opacity":.24}}),ae(!0)})),function(){e.remove(),J.current=null,K.current=null,X.current=null,Q.current=null,U.current=null}}}),[]),i((function(){var e,t,l,o,i,c;Q.current=H&&z?(e=1609.34*z,t=r(H,2),l=t[0],o=t[1],i=e/(111320*Math.cos(l*Math.PI/180)),[[o-i,l-(c=e/110574)],[o+i,l+c]]):null;var n=J.current;n&&ue&&n.getSource("radius-circle").setData(H&&z?{type:"Feature",properties:{},geometry:D(H,1609.34*z)}:B)}),[z,H,ue]);var ve=function(e,r,t,l){var o=document.createElement("div"),i=c(v(),{isViewOnly:M,well:e,color:u(q,e.formation,"#BDBDBD"),isOffsetWell:r,isSubjectWell:t,isClickable:V});n.render(w(W,{children:i}),o),K.current||(K.current=new j.Popup({closeButton:!1,offset:12})),K.current.setLngLat(x(l)).setDOMContent(o).addTo(J.current)};i((function(){var e=J.current;e&&ue&&e.setPaintProperty("wells-circle","circle-color",te?["case",["get","isSubjectWell"],"#63EFFF",["get","color"]]:["get","color"])}),[te,ue]),i((function(){var e;if(k&&P){null===(e=K.current)||void 0===e||e.remove();var r=[],t=[];k.forEach((function(e){e.id!==(null==S?void 0:S.id)&&(P.includes(e.id)?r.push(e):t.push(e))}));var l=[].concat(t,r,[S]),o=[],i=new j.LngLatBounds;Y.current.clear(),$.current=null,l.forEach((function(e,r){var t,l=null==e||null===(t=e.topHole)||void 0===t?void 0:t.coordinates;if(l&&C(l)){var c=(null==S?void 0:S.id)===e.id,n=P.includes(e.id)&&!c,a=c?"#03BCD4":u(q,e.formation,"#BDBDBD"),s=n?.7:.3;o.push({type:"Feature",id:r,geometry:{type:"Point",coordinates:x(l)},properties:{color:a,opacity:c?1:s,isSubjectWell:c,isOffsetWell:n,isActive:e.id===N&&!oe,order:r}}),Y.current.set(r,{well:e,coords:l,isOffsetWell:n,isSubjectWell:c}),c&&($.current=r),i.extend(x(l))}})),U.current=o.length?i:null;var c=J.current;if(c&&ue){c.getSource("wells").setData({type:"FeatureCollection",features:o}),c.setFilter("wells-hover-highlight",L),_.current=null;var n=function(e){var r,t=null===(r=e.features)||void 0===r?void 0:r[0];if(t&&_.current!==t.id){var l=Y.current.get(t.id);l&&(_.current=t.id,c.getCanvas().style.cursor="pointer",c.setFilter("wells-hover-highlight",["==",["id"],t.id]),ve(l.well,l.isOffsetWell,l.isSubjectWell,l.coords),l.isSubjectWell&&le(!0))}},a=function(e){var r;if(null==e||!e.point||!c.queryRenderedFeatures(e.point,{layers:["wells-circle","wells-hover-highlight"]}).length){var t=null!==_.current&&_.current===$.current;_.current=null,c.getCanvas().style.cursor="",c.setFilter("wells-hover-highlight",L),null===(r=K.current)||void 0===r||r.remove(),t&&le(!1)}},s=function(e){var r,t;if(!M){var l=Y.current.get(null===(r=e.features)||void 0===r||null===(t=r[0])||void 0===t?void 0:t.id);l&&E(l.well,!l.isOffsetWell)}};return c.on("mousemove","wells-circle",n),c.on("mouseleave","wells-circle",a),c.on("mouseleave","wells-hover-highlight",a),c.on("click","wells-circle",s),setTimeout((function(){z<3e3&&J.current&&Q.current&&k!==ie&&J.current.fitBounds(Q.current,{padding:5})}),500),function(){c.off("mousemove","wells-circle",n),c.off("mouseleave","wells-circle",a),c.off("mouseleave","wells-hover-highlight",a),c.off("click","wells-circle",s)}}}}),[S,k,P,N,ue]),i((function(){var e=J.current;if(X.current&&(X.current.remove(),X.current=null),e&&H){var t=te||oe,l=document.createElement("img");l.src=t?"/static/media/5e9c4959259cb12c11b2c5eaf27eb3ad.svg":"/static/media/9efe5882f31d2f22bd57af92069d0a3e.svg";var o=r(t?[70,20]:[62,12],2),i=o[0],c=o[1],n=r(t?[35,29]:[31,25],2),u=n[0],a=n[1];l.width=i,l.height=c,l.addEventListener("mouseover",(function(){le(!0),null!==$.current&&e.getLayer("wells-hover-highlight")&&(_.current=$.current,e.setFilter("wells-hover-highlight",["==",["id"],$.current])),ve(S,!1,!0,H)})),l.addEventListener("mouseout",(function(){var r;_.current=null,e.getLayer("wells-hover-highlight")&&e.setFilter("wells-hover-highlight",L),null===(r=K.current)||void 0===r||r.remove(),le(!1)})),X.current=new j.Marker({element:l,anchor:"center",offset:[i/2-u,c/2-a]}).setLngLat(x(H)).addTo(e)}}),[te,H,z,S,oe]),i((function(){var e;z>3e3?null===(e=J.current)||void 0===e||e.setZoom(1):setTimeout((function(){S?J.current&&Q.current&&z&&J.current.fitBounds(Q.current,{padding:5}):J.current&&U.current&&J.current.fitBounds(U.current),H&&J.current&&J.current.easeTo({center:x(H),duration:700})}),500)}),[z,S,H]);var he=function(){var e;null===(e=J.current)||void 0===e||e.setZoom(fe+1)};return w("div",{className:a(p.mapView,G.root),children:w("div",{className:a(p.mapMain,G.map),ref:R,onDoubleClick:he,children:b("div",{className:p.zoomGroup,children:[w(s,{title:fe<18?"Zoom in":"",placement:"left",children:w("div",{className:a(p.zoomButton,e({},p.zoomDisabled,18===fe)),onClick:he,children:w(d,{className:p.zoomInOutIcon})})}),w(s,{title:fe>1?"Zoom out":"",placement:"left",children:w("div",{className:a(p.zoomButton,e({},p.zoomDisabled,1===fe)),onClick:function(){var e;fe>1&&(null===(e=J.current)||void 0===e||e.setZoom(fe-1))},children:w(f,{className:p.zoomInOutIcon})})})]})})})};export{M as default};
|
|
2
2
|
//# sourceMappingURL=OffsetWellMap.js.map
|