\r\n
\r\n \r\n ![\"thumbnail\"]()
\r\n
\r\n\r\n {{ url }}
\r\n \r\n
\r\n {{ $t(`${translationPath}addAnotherImage`) }}
\r\n {{ $t(`${translationPath}help`) }}
\r\n \r\n{{ message }}
\r\n\r\n
- Not connected to any path
- Not connected to any transition
\");\r\n } else if (node.neighbors?.size === 0) {\r\n warningPopup?.setHTML(\"- Not connected to any path
\");\r\n } else if (!node?.portalGroupId) {\r\n warningPopup?.setHTML(\"- Not connected to any transition
\");\r\n }\r\n warningPopup?.addTo(this.map);\r\n });\r\n markerEl.addEventListener(\"mouseleave\", () => {\r\n this.clearPopups();\r\n });\r\n this.transitionWarningPopups[node?.id] = warningPopup;\r\n } else {\r\n markerEl = customMarker({ markerId: node.id, className: \"node-marker\" });\r\n markerEl.addEventListener(\"contextmenu\", (e) => this.markerRightClicked(e, markerEl, node.id));\r\n }\r\n markerEl.addEventListener(\"click\", (e) => this.markerClick(e));\r\n this.addMarker(markerEl, node.coordinate, node.id, isTransition);\r\n });\r\n }\r\n\r\n static mouseMoveHandler(e) {\r\n if (!this.isEnabled) {\r\n return;\r\n }\r\n // cursor position\r\n const { lng, lat } = e.lngLat;\r\n if (this.dashedLineData.features[0].geometry.coordinates?.[0]?.length == 2) {\r\n this.setDashedLine(undefined, [lng, lat]);\r\n }\r\n\r\n // Snapping implementation\r\n let nodeIds = Object.keys(this.nodes);\r\n\r\n if (this.prevNodeId) {\r\n // filter selected node and its neighbors\r\n nodeIds = nodeIds.filter((id) => id !== this.prevNodeId && !this.nodes[this.prevNodeId].neighbors.has(id));\r\n }\r\n\r\n if (nodeIds.length < 1) {\r\n this.setSnapData();\r\n return;\r\n }\r\n\r\n // Get closest node to cursor nodes\r\n this.snapNode = this.getSnapNode([lng, lat]);\r\n\r\n if (!this.snapNode?.coordinate) {\r\n return;\r\n }\r\n\r\n // Using projected coordinates to find screen distance (irrelevant from zoom level)\r\n let projectedPt1 = this.map.project([lng, lat]);\r\n let projectedPt2 = this.map.project(this.snapNode.coordinate);\r\n let cursorAndSnapNodeDistance = this.distance([projectedPt1.x, projectedPt1.y], [projectedPt2.x, projectedPt2.y]);\r\n\r\n this.setSnapData(cursorAndSnapNodeDistance < this.cursorSnapDistance ? this.snapNode.coordinate : []);\r\n }\r\n\r\n static handleRightClick() {\r\n if (this.popups.length > 0) {\r\n this.clearPopups();\r\n }\r\n\r\n this.prevNodeId = undefined;\r\n this.setSnapData();\r\n this.setDashedLine();\r\n }\r\n\r\n static createNode(coord) {\r\n const newNodeId = Helpers.generateUuid();\r\n\r\n this.nodes[newNodeId] = {\r\n id: newNodeId,\r\n neighbors: new Set([this.prevNodeId].filter((x) => x)),\r\n coordinate: coord,\r\n typeCode: \"graph-node\"\r\n };\r\n\r\n if (this.prevNodeId) {\r\n this.nodes[this.prevNodeId].neighbors.add(newNodeId);\r\n this.nodes[newNodeId].neighbors.add(this.prevNodeId);\r\n }\r\n\r\n this.prevNodeId = newNodeId;\r\n\r\n this.setSnapData();\r\n\r\n return newNodeId;\r\n }\r\n\r\n static markerClick(e) {\r\n // Prevent adding new node under clicked node\r\n e.stopPropagation();\r\n\r\n const clickedNodeId = e.target.markerId;\r\n if (!this.isEnabled) {\r\n return;\r\n }\r\n\r\n this.clearPopups();\r\n\r\n if (this.prevNodeId === clickedNodeId) {\r\n // Clicked self\r\n this.setDashedLine();\r\n this.prevNodeId = undefined;\r\n } else if (this.prevNodeId) {\r\n // end line\r\n this.nodes[clickedNodeId].neighbors.add(this.prevNodeId);\r\n this.nodes[this.prevNodeId].neighbors.add(clickedNodeId);\r\n this.prevNodeId = undefined;\r\n this.setDashedLine();\r\n this.generateGraph();\r\n this.toggleMiddlePoints(true);\r\n } else {\r\n // node created\r\n this.prevNodeId = clickedNodeId;\r\n this.setDashedLine(this.nodes[clickedNodeId].coordinate);\r\n }\r\n\r\n console.debug(\"Clicked on node\", this.nodes, this.graphData.features);\r\n }\r\n\r\n static markerRightClicked(e, markerEl, nodeId) {\r\n // Prevent getting clicked on map\r\n e.stopPropagation();\r\n // Prevent default right click of chrome\r\n e.preventDefault();\r\n\r\n this.clearPopups();\r\n const deleteButtonHandler = () => {\r\n this.setDashedLine();\r\n this.prevNodeId = undefined;\r\n // remove current node from neighbors\r\n this.nodes[nodeId]?.neighbors.forEach((neighborId) => {\r\n this.nodes[neighborId]?.neighbors?.delete(nodeId);\r\n });\r\n Object.values(this.nodes).forEach((node) => {\r\n if (node.portalNeighbors?.some((portal) => portal.fid === nodeId)) {\r\n this.nodes[node.id].portalNeighbors = node.portalNeighbors.filter((portal) => portal.fid !== nodeId);\r\n }\r\n });\r\n delete this.nodes[nodeId];\r\n\r\n this.clearPopups();\r\n this.setSnapData();\r\n markerEl.remove();\r\n this.callbacks[\"graph.delete\"].forEach((callback) => callback(this.nodes, \"deleted\", nodeId));\r\n this.callbacks[\"graph.nodeSelected\"].forEach((callback) => callback());\r\n\r\n this.generateGraph();\r\n this.toggleMiddlePoints(true);\r\n };\r\n\r\n const deleteButtonEl = createPopupButton({\r\n btnText: \"Delete\",\r\n clickFunc: deleteButtonHandler,\r\n btnColor: \"#CC3247\"\r\n });\r\n const btnsToAdd = [];\r\n\r\n if (this.isEnabled) {\r\n btnsToAdd.push(deleteButtonEl);\r\n }\r\n\r\n if (!btnsToAdd.length) {\r\n return;\r\n }\r\n const popupEl = createPopupElem(btnsToAdd);\r\n const popup = new maplibregl.Popup({ closeButton: false, className: \"options-popup\" })\r\n .setLngLat(this.nodes[nodeId].coordinate)\r\n .setDOMContent(popupEl)\r\n .addTo(this.map);\r\n\r\n this.popups.push(popup);\r\n }\r\n\r\n static addMarker(markerEl, coord, draggedNodeId, isTransition) {\r\n if (this.markers[draggedNodeId]) {\r\n console.debug(\"Duplicate marker\");\r\n return;\r\n }\r\n const isDraggable = !isTransition;\r\n let marker = new maplibregl.Marker({ element: markerEl, draggable: isDraggable }).setLngLat(coord).addTo(this.map);\r\n\r\n if (!isTransition) {\r\n marker.on(\"drag\", (e) => {\r\n const { lng, lat } = e.target._lngLat;\r\n\r\n this.nodes[draggedNodeId].coordinate = [lng, lat];\r\n\r\n this.graphData.features.forEach((line) => {\r\n line.properties.nodes.forEach((nodeId, i) => {\r\n if (nodeId == draggedNodeId) {\r\n line.geometry.coordinates[i] = [lng, lat];\r\n }\r\n });\r\n });\r\n this.toggleMiddlePoints(false);\r\n this.renderGraph();\r\n this.setSnapData();\r\n });\r\n\r\n marker.on(\"dragstart\", () => {\r\n this.prevNodeId = undefined;\r\n this.setDashedLine();\r\n });\r\n\r\n marker.on(\"dragend\", () => {\r\n // Update middlepoint marker positions\r\n this.updateMiddlepointPositions(draggedNodeId);\r\n\r\n this.toggleMiddlePoints(true);\r\n this.callbacks[\"graph.update\"].forEach((callback) => callback(this.nodes, \"updated\"));\r\n });\r\n }\r\n\r\n this.markers[draggedNodeId] = marker;\r\n this.callbacks[\"graph.create\"].forEach((callback) => callback(this.nodes, \"created\", draggedNodeId));\r\n }\r\n\r\n /**\r\n * Shows and hides middlePoints\r\n */\r\n static toggleMiddlePoints(shouldShow) {\r\n // Hide middlepoint markers\r\n let mdMarkers = document.getElementsByClassName(\"middlepoint-marker\");\r\n [...mdMarkers].forEach((mdPointMarker) => {\r\n if (shouldShow) {\r\n mdPointMarker.style.visibility = \"visible\";\r\n } else {\r\n mdPointMarker.style.visibility = \"hidden\";\r\n this.clearPopups();\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Middlepoint is orange dot between 2 nodes which opens popup on click\r\n */\r\n static addMiddlepointMarker(nodeId1, nodeId2) {\r\n if (!nodeId1 || !nodeId2) {\r\n console.warn(`Cannot add middle point - invalid node1: ${nodeId1}, node2: ${nodeId2}`);\r\n return;\r\n }\r\n let middlepointId = `${nodeId1}__${nodeId2}`;\r\n let markerEl = customMarker({ markerId: middlepointId, className: \"middlepoint-marker\" });\r\n let coord = this.getMiddleCoordinate(nodeId1, nodeId2);\r\n let marker = new maplibregl.Marker({ element: markerEl, draggable: false }).setLngLat(coord).addTo(this.map);\r\n\r\n // Save all middlepointMarkers\r\n this.middlepointMarkers[`${nodeId1}__${nodeId2}`] = marker;\r\n\r\n markerEl.addEventListener(\"click\", (e) => this.middlepointClickHandler(e, nodeId1, nodeId2));\r\n }\r\n\r\n static middlepointClickHandler(e, nodeId1, nodeId2) {\r\n // Prevent adding new node\r\n e.stopPropagation();\r\n\r\n if (!this.isEnabled || this.prevNodeId) {\r\n // prevNodeId is active during line creation\r\n return;\r\n }\r\n\r\n this.clearPopups();\r\n let { lng, lat } = this.middlepointMarkers[`${nodeId1}__${nodeId2}`]._lngLat;\r\n\r\n let addButtonEl = createPopupButton({\r\n btnText: \"Add Middle Point\",\r\n clickFunc: () => {\r\n // Add node between 2 nodes\r\n this.nodes[nodeId1].neighbors.delete(nodeId2);\r\n this.nodes[nodeId2].neighbors.delete(nodeId1);\r\n const createdNodeId = this.createNode([lng, lat]);\r\n this.nodes[createdNodeId].neighbors.add(nodeId1);\r\n this.nodes[createdNodeId].neighbors.add(nodeId2);\r\n this.nodes[nodeId1].neighbors.add(createdNodeId);\r\n this.nodes[nodeId2].neighbors.add(createdNodeId);\r\n\r\n this.prevNodeId = undefined;\r\n this.generateGraph();\r\n this.toggleMiddlePoints(true);\r\n }\r\n });\r\n let popupEl = createPopupElem([addButtonEl]);\r\n const popup = new maplibregl.Popup({ closeButton: false, className: \"options-popup\" })\r\n .setLngLat([lng, lat])\r\n .setDOMContent(popupEl)\r\n .addTo(this.map);\r\n\r\n this.popups.push(popup);\r\n }\r\n\r\n /**\r\n * When node is moved, middlepoints on left/right of it should also move\r\n */\r\n static updateMiddlepointPositions(nodeId) {\r\n let mdpointIds = [];\r\n this.nodes[nodeId].neighbors.forEach((neighborId) => {\r\n mdpointIds.push(`${neighborId}__${nodeId}`);\r\n mdpointIds.push(`${nodeId}__${neighborId}`);\r\n });\r\n mdpointIds.forEach((mdpointId) => {\r\n if (this.middlepointMarkers[mdpointId]) {\r\n let [nodeId1, nodeId2] = mdpointId.split(\"__\");\r\n this.middlepointMarkers[mdpointId].setLngLat(this.getMiddleCoordinate(nodeId1, nodeId2));\r\n }\r\n });\r\n }\r\n\r\n // enable/disable\r\n static toggle(options) {\r\n if (!this.map) {\r\n return; // setup not called yet. So we don't need toggle\r\n }\r\n this.isEnabled = options?.shouldEnable ?? !this.isEnabled;\r\n this.toggleMiddlePoints(this.isEnabled);\r\n\r\n if (this.isEnabled) {\r\n this.map.off(\"click\", this.mapClick);\r\n this.map.off(\"mousemove\", this.mouseMoveHandler);\r\n this.map.off(\"contextmenu\", this.handleRightClick);\r\n this.map.on(\"click\", this.mapClick);\r\n this.map.on(\"mousemove\", this.mouseMoveHandler);\r\n this.map.on(\"contextmenu\", this.handleRightClick);\r\n\r\n Object.values(this.markers).forEach((marker) => {\r\n if (!marker._element.classList.contains(\"transition-node\")) {\r\n marker.setDraggable(true);\r\n }\r\n });\r\n } else {\r\n this.prevNodeId = undefined;\r\n this.setSnapData();\r\n this.setDashedLine();\r\n this.map.off(\"click\", this.mapClick);\r\n this.map.off(\"mousemove\", this.mouseMoveHandler);\r\n this.map.off(\"contextmenu\", this.handleRightClick);\r\n\r\n document.getElementsByClassName(\"map-wrapper\")?.[0]?.classList?.remove(\"crosshair\");\r\n Object.values(this.markers).forEach((marker) => {\r\n marker.setDraggable(false);\r\n });\r\n }\r\n }\r\n\r\n // Updates lines\r\n static renderGraph() {\r\n const graphSource = this.map?.getSource(graphLayer.source);\r\n if (graphSource) {\r\n graphSource.setData(this.graphData);\r\n }\r\n }\r\n\r\n // Get closest node which is not prevNode or its neighbors\r\n static getSnapNode(cursorPos) {\r\n let turfCursorPos = point(cursorPos);\r\n\r\n // Remove self and neighbors from snapping node list\r\n const filteredNodes = Object.values(this.nodes).filter(\r\n (node) => this.prevNodeId !== node.id && !this.nodes[this.prevNodeId]?.neighbors?.has(node.id)\r\n );\r\n\r\n return filteredNodes.reduce(\r\n (closestNode, node) => {\r\n if (!node.coordinate) {\r\n // clicked another marker. won't add since marker already exists\r\n return closestNode;\r\n }\r\n const turfPoint = point(node.coordinate);\r\n const distanceToCursor = distance(turfCursorPos, turfPoint);\r\n return closestNode.dist < distanceToCursor ? closestNode : { node, dist: distanceToCursor };\r\n },\r\n {\r\n node: undefined,\r\n dist: Infinity\r\n }\r\n ).node;\r\n }\r\n\r\n // Dashed line is composed of 2 points. First one is starting point, second one is usually used for cursor position\r\n static setDashedLine(coord1, coord2) {\r\n if (!coord1 && !coord2) {\r\n // remove dashed line\r\n this.dashedLineData.features[0].geometry.coordinates = [];\r\n\r\n document.getElementsByClassName(\"map-wrapper\")?.[0]?.classList?.remove(\"crosshair\");\r\n Object.values(this.markers).forEach((marker) => {\r\n if (!marker._element.classList.contains(\"transition-node\")) {\r\n marker.setDraggable(true);\r\n }\r\n });\r\n } else if (!coord2) {\r\n // set start pos\r\n this.dashedLineData.features[0].geometry.coordinates[0] = coord1;\r\n\r\n document.getElementsByClassName(\"map-wrapper\")[0].classList.add(\"crosshair\");\r\n Object.values(this.markers).forEach((marker) => {\r\n marker.setDraggable(false);\r\n });\r\n } else if (!coord1) {\r\n // set cursor pos\r\n this.dashedLineData.features[0].geometry.coordinates[1] = coord2;\r\n }\r\n if (this.map.getSource(dashedLineLayer.source)) {\r\n this.map.getSource(dashedLineLayer.source).setData(this.dashedLineData);\r\n }\r\n }\r\n\r\n static distance(coord1, coord2) {\r\n return Math.sqrt((coord1[0] - coord2[0]) ** 2 + (coord1[1] - coord2[1]) ** 2);\r\n }\r\n\r\n static addNewLineFeature() {\r\n let emptyFeature = {\r\n type: \"Feature\",\r\n properties: {\r\n nodes: []\r\n },\r\n geometry: {\r\n type: \"LineString\",\r\n coordinates: []\r\n }\r\n };\r\n this.graphData.features.push(emptyFeature);\r\n }\r\n\r\n static getMiddleCoordinate(nodeId1, nodeId2) {\r\n let coord1 = this.nodes[nodeId1].coordinate;\r\n let coord2 = this.nodes[nodeId2].coordinate;\r\n return [(coord1[0] + coord2[0]) / 2, (coord1[1] + coord2[1]) / 2];\r\n }\r\n\r\n // Sets snap data and renders under marker. If no parameter provided, removes snap\r\n static setSnapData(coordinates) {\r\n if (!coordinates) {\r\n this.snapData.features[0].geometry.coordinates = [];\r\n } else {\r\n this.snapData.features[0].geometry.coordinates = coordinates;\r\n }\r\n if (this.map.getSource(snappedNodeLayer.source)) {\r\n this.map.getSource(snappedNodeLayer.source).setData(this.snapData);\r\n }\r\n }\r\n\r\n // Converts neighbours field from Set to Array\r\n static exportNode(node) {\r\n return {\r\n ...node,\r\n neighbors: [...node.neighbors]\r\n };\r\n }\r\n\r\n static createNodesFromFeatures(features) {\r\n features.forEach((feature) => {\r\n let neighbors = [];\r\n if (feature.properties.neighbors) {\r\n neighbors = [...feature.properties.neighbors].map((n) => n.fid);\r\n }\r\n\r\n const node = {\r\n id: feature.properties.fid,\r\n coordinate: feature.geometry.coordinates,\r\n neighbors: new Set(neighbors),\r\n isVisited: false,\r\n portalNeighbors: feature.properties.portalNeighbors || [],\r\n portalGroupId: feature.properties.portalGroupId,\r\n typeCode: feature.properties.typeCode\r\n };\r\n // Custom portal fields\r\n if (feature.properties.travelTime !== undefined) {\r\n node.travelTime = Number(feature.properties.travelTime) || 0;\r\n }\r\n if (feature.properties.isAccessible !== undefined) {\r\n node.isAccessible = feature.properties.isAccessible;\r\n }\r\n if (feature.properties.isComfortable !== undefined) {\r\n node.isComfortable = feature.properties.isComfortable;\r\n }\r\n if (feature.properties.name !== undefined) {\r\n node.name = feature.properties.name;\r\n }\r\n this.nodes[node.id] = node;\r\n });\r\n this.prevNodeId = undefined;\r\n }\r\n\r\n static exportAsGeoJson() {\r\n let geoJson = {\r\n type: \"FeatureCollection\",\r\n features: []\r\n };\r\n geoJson.features = Object.values(this.nodes).map((node) => {\r\n return this.nodeToFeature(node);\r\n });\r\n return geoJson;\r\n }\r\n\r\n static nodeToFeature(node) {\r\n if (!node) {\r\n console.debug(\"Cannot convert node to feature - selected node does not exist\", node);\r\n return;\r\n }\r\n node = this.exportNode(node);\r\n const neighbors = node.neighbors.map((neighbor) => {\r\n return { fid: neighbor, speed: 1 };\r\n });\r\n\r\n let copyNode = { ...node };\r\n delete copyNode.id;\r\n delete copyNode.coordinate;\r\n delete copyNode.isVisited;\r\n\r\n return {\r\n type: \"Feature\",\r\n properties: {\r\n ...copyNode,\r\n sid: this.sid,\r\n bid: this.bid,\r\n lvl: this.lvl,\r\n fid: node.id,\r\n name: node.name,\r\n typeCode: node.typeCode || \"graph-node\",\r\n neighbors: neighbors,\r\n portalNeighbors: node.portalNeighbors || [],\r\n portalGroupId: node.portalGroupId\r\n },\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [Number(node.coordinate[0].toFixed(8)), Number(node.coordinate[1].toFixed(8))]\r\n }\r\n };\r\n }\r\n\r\n static clearPopups() {\r\n const transitionPopups = document.getElementsByClassName(\"warning-popup\");\r\n if (transitionPopups.length) {\r\n transitionPopups[0].remove();\r\n }\r\n\r\n this.popups?.forEach((p) => p.remove());\r\n this.popups = [];\r\n }\r\n\r\n // Update properties of portal nodes\r\n static updateSelectedContent(updatedContent) {\r\n if (!updatedContent) {\r\n return;\r\n }\r\n // Since custom property names are same at node and content\r\n let node = this.nodes[updatedContent.properties.fid];\r\n if (typeof node !== \"object\") {\r\n console.debug(\"Not updating selected content - not type of object\");\r\n return;\r\n }\r\n Object.keys(node).forEach((property) => {\r\n if (updatedContent.properties[property] !== undefined && property !== \"neighbors\") {\r\n node[property] = updatedContent.properties[property];\r\n }\r\n });\r\n }\r\n\r\n static isTransition(typeCode) {\r\n return typeCode !== \"graph-node\";\r\n }\r\n}\r\n","import maplibregl from \"maplibre-gl\";\r\nimport { customMarker } from \"@/helpers/StyleHelpers\";\r\nimport Helpers from \"@/helpers/Helpers\";\r\n\r\nexport default class PointMode {\r\n static on(eventName, callback) {\r\n if (!this.callbacks[eventName]) {\r\n console.debug(\"Invalid event name\", eventName);\r\n return;\r\n }\r\n if (typeof callback !== \"function\") {\r\n console.debug(\"Invalid callback\", callback);\r\n return;\r\n }\r\n this.callbacks[eventName].push(callback);\r\n }\r\n\r\n static off(eventName, callback) {\r\n this.callbacks[eventName].splice(this.callbacks[eventName].indexOf(callback), 1);\r\n }\r\n\r\n static init() {\r\n this.isEnabled = false;\r\n this.markers = {};\r\n this.isSingleMarker = false;\r\n this.callbacks = {};\r\n this.events = [\"point.create\", \"point.update\", \"point.delete\"];\r\n\r\n this.events.forEach((eventName) => (this.callbacks[eventName] = []));\r\n }\r\n\r\n static create({ map, isSingleMarker }) {\r\n this.map = map;\r\n this.isSingleMarker = isSingleMarker;\r\n this.mapClick = this.mapClick.bind(this);\r\n }\r\n\r\n // Not used anywhere\r\n static destroy() {\r\n if (!this.map) {\r\n return;\r\n }\r\n this.callbacks[\"point.delete\"].forEach((callback) => callback());\r\n this.clearPoints();\r\n this.init();\r\n this.toggle({ shouldEnable: false });\r\n }\r\n\r\n static mapClick(e) {\r\n const { lng, lat } = e.lngLat;\r\n const markerEl = customMarker({ markerId: Helpers.generateUuid(), className: \"node-marker\" });\r\n this.addMarker(markerEl, [lng, lat], Helpers.generateUuid(), { draggable: true });\r\n }\r\n\r\n static addPoint(coordinate, options) {\r\n const markerId = options.fid ? options.fid : Helpers.generateUuid();\r\n // Checks if point/marker is already added before, if added skips\r\n if (this.markers[markerId]) {\r\n return;\r\n }\r\n const markerEl = customMarker({\r\n markerId: markerId,\r\n className: options?.isBeacon ? \"beacon-marker\" : \"node-marker\"\r\n });\r\n this.addMarker(markerEl, coordinate, markerId, options);\r\n return markerEl;\r\n }\r\n\r\n static movePoint(markerId, coordinate) {\r\n this.markers[markerId].setLngLat(coordinate);\r\n }\r\n\r\n // enable/disable\r\n static toggle(options) {\r\n if (!this.map) {\r\n return; // setup not called yet. So we don't need toggle\r\n }\r\n this.isEnabled = options?.shouldEnable ?? !this.isEnabled;\r\n\r\n if (this.isEnabled) {\r\n this.isSingleMarker = true;\r\n this.map.on(\"click\", this.mapClick);\r\n } else {\r\n this.isSingleMarker = false;\r\n this.map.off(\"click\", this.mapClick);\r\n document.getElementsByClassName(\"map-wrapper\")[0].classList.remove(\"crosshair\");\r\n }\r\n Object.values(this.markers).forEach((marker) => {\r\n marker.setDraggable(this.isEnabled);\r\n marker.on(\"drag\", () => {\r\n this.callbacks[\"point.update\"].forEach((callback) => callback());\r\n });\r\n });\r\n }\r\n\r\n static addMarker(markerEl, coord, markerId, options) {\r\n if (this.isSingleMarker && Object.keys(this.markers).length) {\r\n return;\r\n }\r\n if (!coord) {\r\n return;\r\n }\r\n let marker = new maplibregl.Marker({ element: markerEl, draggable: options.draggable });\r\n marker.setLngLat(coord).addTo(this.map);\r\n if (options.draggable) {\r\n marker.on(\"drag\", () => {\r\n this.callbacks[\"point.update\"].forEach((callback) => callback());\r\n });\r\n }\r\n if (this.isSingleMarker) {\r\n this.clearPoints();\r\n this.markers = { markerId: marker };\r\n } else {\r\n this.markers[markerId] = marker;\r\n }\r\n this.callbacks[\"point.create\"].forEach((callback) => callback());\r\n }\r\n\r\n static highlight(markerId) {\r\n if (this.markers[markerId]) {\r\n this.markers[markerId].getElement().classList.add(\"node-marker-selected\");\r\n }\r\n }\r\n\r\n static unhighlight(markerId) {\r\n if (this.markers[markerId]) {\r\n this.markers[markerId].getElement().classList.remove(\"node-marker-selected\");\r\n }\r\n }\r\n\r\n static removeMarker(markerIdToRemove) {\r\n Object.keys(this.markers).some((markerId) => {\r\n if (markerId == markerIdToRemove) {\r\n this.markers[markerIdToRemove].getElement().remove();\r\n delete this.markers[markerIdToRemove];\r\n return true;\r\n }\r\n });\r\n }\r\n\r\n static clearPoints() {\r\n Object.keys(this.markers).forEach((markerId) => {\r\n this.markers[markerId].getElement().remove();\r\n });\r\n this.markers = {};\r\n }\r\n\r\n static exportCoordinates() {\r\n const lngLatObjArr = Object.values(this.markers).map((obj) => obj.getLngLat());\r\n return lngLatObjArr.reduce((total, lngLat) => {\r\n const { lng, lat } = lngLat;\r\n total.push([lng, lat]);\r\n return total;\r\n }, []);\r\n }\r\n}\r\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('v-app',{attrs:{\"id\":\"app\"}},[(!_vm.isAppLoaded)?_c('div',[_c('PtrLoading')],1):_vm._e(),_c('router-view')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n