@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/tracks/point-tracks/plugin.js

@@ -1,394 +1,487 @@
-import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/index";
-import { PickerDisplayer } from "../../util/picking/picker-displayer";
-import { PointOnGlobeProgramCache } from "../../programs/point-on-globe/square-pixel-point";
-import { defaultblendfunction } from "../../util/webglobe/gldefaultstates";
-import { wgs84ToCartesian3d, wgs84ToMercator } from "../../Math/methods";
-const _0vec3 = /* @__PURE__ */ [0, 0, 0];
-/**
- * @typedef {number} long
- * @typedef {number} lat
- * @typedef {number} height
- * @typedef {string} ID
- * @typedef {string} trackID
- * @typedef {[number, number, number, number]} rgba 0-1
- * @typedef { long ,lat, height, ID } Point
- * @typedef {Array<Point>, rgba, trackID} Track
- */
-class PointTracksPlugin {
-    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
-        this.id = id;
-        this._isFreed = false;
-        this._pointProgram = null;
-        this._vao = null;
-        this._bufferManagersMap = null;
-        this._bufferOrchestrator = null;
-        this._pickerDisplayer = null;
-        this._selectedID = -1;
-        this._selectedObj = null;
-        this._tracksToPointsMap = new Map(); // one to many
-        this._opacity = opacity ? opacity : 1.0;
-        this.program = null;
-        this._lastWH = { w: 0, h: 0 };
-        this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
-        this.pointSizes = {
-            pointSize: pointSize ? pointSize : 2,
-            selectionPointFilling: selectionPointFilling ? selectionPointFilling : 4,
-            hoveredPointSize: hoveredPointSize ? hoveredPointSize : 4
-        };
-        this._objectStoreExtraParameters = objectStoreExtraParameters ? objectStoreExtraParameters : [];
-        this._objectStoreExtraParametersFiltered = objectStoreExtraParameters.filter(param => {
-            return !["long", "lat", "height", "ID", "trackID"].includes(param);
-        });
-        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ? initialCapacity : 1000 });
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this._pickerDisplayer = new PickerDisplayer(globe);
-        this._pointProgram = PointOnGlobeProgramCache.get(globe);
-        this._focusParams.elementBuffer = gl.createBuffer();
-        this._initBufferManagers();
-    }
-    _initBufferManagers() {
-        const { gl } = this;
-        const initialCapacity = this._bufferOrchestrator.capacity;
-        const bufferType = "DYNAMIC_DRAW";
-        this._bufferManagersMap = new Map([
-            ["pos3D", {
-                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        wgs84ToCartesian3d(_0vec3, item.long, item.lat, item.height / 1000); // height is in meters
-                        return new Float32Array(_0vec3); // height is in meters
-                    }
-                }],
-            ["pos2D", {
-                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
-                }],
-            ["rgba", {
-                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    adaptor: (item) => item.rgba
-                }],
-            ["objectStore", {
-                    bufferManager: new ObjectStore({ initialCapacity }),
-                    adaptor: (item) => {
-                        const result = {
-                            trackID: item.trackID,
-                            pointID: item.pointID,
-                        };
-                        // Add extra parameters specified in _objectStoreExtraParameters
-                        this._objectStoreExtraParameters.forEach(param => {
-                            if (item.hasOwnProperty(param)) {
-                                result[param] = item[param];
-                            }
-                        });
-                        return result;
-                    }
-                }]
-        ]);
-        this._vao = this._pointProgram.createVAO(this._bufferManagersMap.get("pos3D").bufferManager.buffer, this._bufferManagersMap.get("pos2D").bufferManager.buffer, this._bufferManagersMap.get("rgba").bufferManager.buffer);
-    }
-    setPointSize(size) {
-        this.pointSizes.pointSize = size;
-        this.globe?.DrawRender();
-    }
-    setSelectionPointFilling(size) {
-        this.pointSizes.selectionPointFilling = size;
-        this.globe?.DrawRender();
-    }
-    setHoveredPointSize(size) {
-        this.pointSizes.hoveredPointSize = size;
-        this.globe?.DrawRender();
-    }
-    setOpacity(opacity) {
-        if (opacity < 0 || opacity > 1)
-            return;
-        this._opacity = opacity;
-        this.globe?.DrawRender();
-    }
-    getCurrentSelection() {
-        return this._selectedObj;
-    }
-    /**
-     *
-     * @param {*} x screen x
-     * @param {*} y screen y
-     * @param {*} callback callback on selection
-     */
-    screenSelection(x, y, callback) {
-        const { pointSizes, _pickerDisplayer } = this;
-        const objectStore = this._bufferManagersMap.get("objectStore").bufferManager;
-        const wrapper = (selectedIDsSet) => {
-            const selectedIDs = Array.from(selectedIDsSet);
-            if (selectedIDs.length === 0) {
-                this._selectedObj = null;
-                this._selectedID = -1;
-                callback([]);
-                return;
-            }
-            const selectedPoints = [];
-            for (let i = 0; i < selectedIDs.length; i++) {
-                const id = selectedIDs[i];
-                if (i === 0) {
-                    this._selectedID = id;
-                    this._selectedObj = objectStore.get(id);
-                }
-                const obj = objectStore.get(id);
-                selectedPoints.push(obj);
-            }
-            callback(selectedPoints);
-        };
-        _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
-    }
-    /**
-     * @param {Array<Track>} tracks
-     * @returns
-     */
-    insertBulk(tracks) {
-        this._fillTracksToPointsMap(tracks);
-        const flattenedPoints = tracks.map(track => trackToFlatPoints(track, this._objectStoreExtraParametersFiltered)).flat();
-        const currentLoad = this._bufferOrchestrator.length;
-        if (currentLoad + flattenedPoints.length >= 2147483647) {
-            throw new Error("Too many points, Point count cannot exceed 2147483647");
-        }
-        const { _bufferManagersMap, _bufferOrchestrator } = this;
-        _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
-        this._refillFocus();
-        this.globe?.DrawRender();
-    }
-    flush() {
-        const capacity = 100;
-        this._bufferOrchestrator?.flush({ capacity });
-        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
-        this._turnOffFocus();
-        this._tracksToPointsMap.clear();
-        this.globe?.DrawRender();
-    }
-    /**
-     * @param {string} trackID
-     */
-    deleteTrack(trackID) {
-        const pointList = this._tracksToPointsMap.get(trackID);
-        if (!pointList) {
-            console.warn(`Track with ID ${trackID} does not exist.`);
-            return;
-        }
-        ;
-        const points = Array.from(pointList);
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(points.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
-        this._tracksToPointsMap.delete(trackID);
-        this._redraw = true;
-        this._refillFocus();
-        this.globe?.DrawRender();
-    }
-    /**
-     * @param {string} trackID
-     * @param {Array<string>} pointIDs
-     */
-    deletePoints(trackID, pointIDs) {
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(pointIDs.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
-        this._deletePointsFromTracksMap(trackID, pointIDs);
-        this._refillFocus();
-        this.globe?.DrawRender();
-    }
-    focusTracks(trackIDs = null) {
-        if (!this.globe)
-            return;
-        if (!trackIDs) {
-            this._focusParams.on = false;
-            this.globe?.DrawRender();
-            return;
-        }
-        this._focusParams.on = this._fillElementBuffer(trackIDs);
-        if (!this._focusParams.on) {
-            this._turnOffFocus();
-        }
-        this.globe.DrawRender();
-    }
-    updateTrackColor(trackID, rgba) {
-        if (!this._tracksToPointsMap.has(trackID)) {
-            console.warn(`Track with ID ${trackID} does not exist.`);
-            return;
-        }
-        const pointList = this._tracksToPointsMap.get(trackID);
-        const points = Array.from(pointList);
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.updateBulk(points.map((pointID) => {
-            return {
-                key: keyMethod(trackID, pointID),
-                rgba: new Float32Array(rgba)
-            };
-        }), _bufferManagersMap, ["rgba"]);
-        this._refillFocus();
-        this.globe?.DrawRender();
-    }
-    // GLOBE API METHODS
-    free() {
-        if (this._isFreed)
-            return;
-        this._isFreed = true;
-        this._pickerDisplayer.free();
-        PointOnGlobeProgramCache.release(this.globe);
-        this.gl.deleteBuffer(this._focusParams.elementBuffer);
-        this._bufferManagersMap.forEach(({ bufferManager, adaptor }) => bufferManager.free());
-    }
-    draw3D() {
-        const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
-        if (!gl) {
-            throw new Error("GL is not loaded, PointTracks Plugin");
-        }
-        if (this._isFreed) {
-            throw new Error("Plugin is unregistered, PointTracks Plugin");
-        }
-        this.resize();
-        _pickerDisplayer.bindFBO();
-        _pickerDisplayer.clearTextures();
-        if (this._focusParams.on) {
-            _pointProgram.draw(_vao, this._focusParams.length, {
-                hoveredID: this._selectedID,
-                opacity: this._opacity,
-                pointSize: this.pointSizes.pointSize,
-                hoveredPointSize: this.pointSizes.hoveredPointSize,
-                elementBuffer: this._focusParams.elementBuffer
-            });
-        }
-        else {
-            _pointProgram.draw(_vao, _bufferOrchestrator.length, {
-                hoveredID: this._selectedID,
-                opacity: this._opacity,
-                pointSize: this.pointSizes.pointSize,
-                hoveredPointSize: this.pointSizes.hoveredPointSize
-            });
-        }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        _pickerDisplayer.drawColorTexture();
-        this._selfSelect();
-    }
-    resize() {
-        const w = this.globe.api_ScrW();
-        const h = this.globe.api_ScrH();
-        if (w === this._lastWH.w && h === this._lastWH.h)
-            return;
-        this._lastWH.w = w;
-        this._lastWH.h = h;
-        this._pickerDisplayer.resize();
-        this.globe?.DrawRender();
-    }
-    // IMPLICIT METHODS
-    _fillTracksToPointsMap(tracks) {
-        for (const track of tracks) {
-            const trackID = track.trackID;
-            const points = track.points;
-            if (!this._tracksToPointsMap.has(trackID)) {
-                this._tracksToPointsMap.set(trackID, new Set());
-            }
-            const pointSet = this._tracksToPointsMap.get(trackID);
-            for (let p = 0; p < points.length; p++) {
-                const pointID = points[p].ID;
-                if (!pointSet.has(pointID)) {
-                    pointSet.add(pointID);
-                }
-                else {
-                    console.warn(`Point with ID ${pointID} already exists in track ${trackID}. Skipping duplicate.`);
-                }
-            }
-        }
-    }
-    _refillFocus() {
-        if (this._focusParams.on) {
-            this.focusTracks(this._focusParams.trackIDs);
-        }
-    }
-    _deletePointsFromTracksMap(trackID, pointIDs) {
-        const trackIDs = this._tracksToPointsMap.get(trackID);
-        if (trackIDs === undefined) {
-            console.warn(`Track with ID ${trackID} not found.`);
-            return;
-        }
-        for (const pointID of pointIDs) {
-            if (!trackIDs.has(pointID)) {
-                console.warn(`Point with ID ${pointID} not found in track ${trackID}.`);
-            }
-            else {
-                trackIDs.delete(pointID);
-            }
-        }
-        if (trackIDs.size === 0) {
-            this._tracksToPointsMap.delete(trackID);
-        }
-    }
-    _selfSelect() {
-        const { globe } = this;
-        const pos = globe.api_GetMousePos();
-        const x = pos.canvasX;
-        const y = globe.api_ScrH() - pos.canvasY;
-        this.screenSelection(x, y, (selectedPoints) => {
-        });
-    }
-    _turnOffFocus() {
-        const { gl } = this;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array([]), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        this._focusParams.length = 0;
-        this._focusParams.on = false;
-    }
-    _fillElementBuffer(trackIDs) {
-        let length = 0;
-        const indexes = [];
-        const foundTracks = [];
-        for (const trackID of trackIDs) {
-            const pointList = this._tracksToPointsMap.get(trackID);
-            if (!pointList)
-                continue;
-            foundTracks.push(trackID);
-            for (const pointID of pointList) {
-                const key = keyMethod(trackID, pointID);
-                const index = this._bufferOrchestrator.offsetMap.get(key);
-                if (index === undefined) {
-                    throw new Error(`Point with key ${key} not found in buffer orchestrator.`);
-                }
-                indexes.push(index);
-                length++;
-            }
-        }
-        this._focusParams.trackIDs = foundTracks;
-        this._focusParams.length = length;
-        if (length === 0) {
-            return false;
-        }
-        const { gl } = this;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indexes), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        return true;
-    }
-}
-const trackToFlatPoints = (track, extraParameters) => {
-    const trackID = track.trackID;
-    const points = track.points;
-    const rgba = new Float32Array(track.rgba);
-    const flatPoints = [];
-    for (const point of points) {
-        flatPoints.push({
-            key: keyMethod(trackID, point.ID),
-            long: point.long,
-            lat: point.lat,
-            height: point.height,
-            pointID: point.ID,
-            rgba,
-            trackID
-        });
-        for (let i = 0; i < extraParameters.length; i++) {
-            const param = extraParameters[i];
-            if (point.hasOwnProperty(param)) {
-                flatPoints[flatPoints.length - 1][param] = point[param];
-            }
-        }
-    }
-    return flatPoints;
-};
-const keyMethod = (trackID, pointID) => `${trackID}_${pointID}`;
-export { PointTracksPlugin, keyMethod };
+import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/index";
+
+import { PickerDisplayer } from "../../util/picking/picker-displayer";
+import { PointOnGlobeProgramCache } from "../../programs/point-on-globe/square-pixel-point";
+import { defaultblendfunction } from "../../util/globe-default-gl-states";
+import { wgs84ToCartesian3d, wgs84ToMercator } from "../../Math/methods";
+
+
+const _0vec3 = /* @__PURE__ */[0, 0, 0];
+
+
+
+/**
+ * @typedef {number} long
+ * @typedef {number} lat
+ * @typedef {number} height
+ * @typedef {string} ID
+ * @typedef {string} trackID
+ * @typedef {[number, number, number, number]} rgba 0-1
+ * @typedef { long ,lat, height, ID } Point
+ * @typedef {Array<Point>, rgba, trackID} Track
+ */
+class PointTracksPlugin {
+
+    constructor(id, {
+        pointSize = 2,
+        hoveredPointSize = 4,
+        selectionPointFilling = 4,
+        opacity = 1.0,
+        objectStoreExtraParameters = ["long", "lat", "height"],
+        initialCapacity = 1000
+    } = {}) {
+        this.id = id;
+        this._isFreed = false;
+        this._pointProgram = null
+        this._vao = null;
+        this._bufferManagersMap = null;
+        this._bufferOrchestrator = null;
+        this._pickerDisplayer = null
+        this._selectedID = -1;
+        this._selectedObj = null;
+        this._tracksToPointsMap = new Map(); // one to many
+        this._opacity = opacity ? opacity : 1.0;
+        this.program = null
+        this._lastWH = { w: 0, h: 0 };
+        this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
+        this.pointSizes = {
+            pointSize: pointSize ? pointSize : 2,
+            selectionPointFilling: selectionPointFilling ? selectionPointFilling : 4,
+            hoveredPointSize: hoveredPointSize ? hoveredPointSize : 4
+        }
+        this._objectStoreExtraParameters = objectStoreExtraParameters ? objectStoreExtraParameters : [];
+        this._objectStoreExtraParametersFiltered = objectStoreExtraParameters.filter(param => {
+            return !["long", "lat", "height", "ID", "trackID"].includes(param);
+        });
+        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ? initialCapacity : 1000 });
+
+    }
+
+
+    init(globe, gl) {
+
+        this.globe = globe;
+        this.gl = gl;
+        this._pickerDisplayer = new PickerDisplayer(globe);
+        this._pointProgram = PointOnGlobeProgramCache.get(globe);
+        this._focusParams.elementBuffer = gl.createBuffer();
+        this._initBufferManagers();
+    }
+
+
+    _initBufferManagers() {
+        const { gl } = this;
+        const initialCapacity = this._bufferOrchestrator.capacity;
+        const bufferType = "DYNAMIC_DRAW";
+        this._bufferManagersMap = new Map(
+            [
+                ["pos3D", {
+                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        wgs84ToCartesian3d(_0vec3, item.long, item.lat, item.height / 1000); // height is in meters
+                        return new Float32Array(_0vec3) // height is in meters
+                    }
+                }],
+                ["pos2D", {
+                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
+                }],
+                ["rgba", {
+                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity, typedArrayConstructor: Float32Array }),
+                    // adaptor: (item) => new Uint8Array([
+                    //     item.rgba[0] * 255,
+                    //     item.rgba[1] * 255,
+                    //     item.rgba[2] * 255,
+                    //     item.rgba[3] * 255
+                    // ])
+                    adaptor: (item) => new Float32Array(item.rgba)
+                }],
+                ["objectStore", {
+                    bufferManager: new ObjectStore({ initialCapacity }),
+                    adaptor: (item) => {
+                        const result = {
+                            trackID: item.trackID,
+                            pointID: item.pointID,
+                        };
+
+                        // Add extra parameters specified in _objectStoreExtraParameters
+                        this._objectStoreExtraParameters.forEach(param => {
+                            if (item.hasOwnProperty(param)) {
+                                result[param] = item[param];
+                            }
+                        });
+
+                        return result;
+                    }
+                }]
+            ]
+        );
+
+        this._vao = this._pointProgram.createVAO(
+            this._bufferManagersMap.get("pos3D").bufferManager.buffer,
+            this._bufferManagersMap.get("pos2D").bufferManager.buffer,
+            this._bufferManagersMap.get("rgba").bufferManager.buffer,
+        );
+    }
+
+
+    setPointSize(size) {
+        this.pointSizes.pointSize = size;
+        this.globe?.DrawRender();
+    }
+
+    setSelectionPointFilling(size) {
+        this.pointSizes.selectionPointFilling = size;
+        this.globe?.DrawRender();
+    }
+
+    setHoveredPointSize(size) {
+        this.pointSizes.hoveredPointSize = size;
+        this.globe?.DrawRender();
+    }
+
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1) return;
+        this._opacity = opacity;
+        this.globe?.DrawRender();
+    }
+
+    getCurrentSelection() {
+        return this._selectedObj;
+    }
+
+
+    /**
+     * 
+     * @param {*} x screen x
+     * @param {*} y screen y
+     * @param {*} callback callback on selection
+     */
+    screenSelection(x, y, callback) {
+        const { pointSizes, _pickerDisplayer } = this;
+        const objectStore = this._bufferManagersMap.get("objectStore").bufferManager;
+        const wrapper = (selectedIDsSet) => {
+            const selectedIDs = Array.from(selectedIDsSet);
+            if (selectedIDs.length === 0) {
+                this._selectedObj = null;
+                this._selectedID = -1;
+                callback([]);
+                return;
+            }
+            const selectedPoints = [];
+            for (let i = 0; i < selectedIDs.length; i++) {
+                const id = selectedIDs[i];
+                if (i === 0) {
+                    this._selectedID = id;
+                    this._selectedObj = objectStore.get(id);
+                }
+                const obj = objectStore.get(id);
+                selectedPoints.push(obj);
+            }
+
+            callback(selectedPoints);
+        }
+        _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
+    }
+
+
+    /**
+     * @param {Array<Track>} tracks 
+     * @returns 
+     */
+    insertBulk(tracks) {
+        this._fillTracksToPointsMap(tracks);
+        const flattenedPoints = tracks.map(track => trackToFlatPoints(track, this._objectStoreExtraParametersFiltered)).flat();
+        const currentLoad = this._bufferOrchestrator.length;
+        if (currentLoad + flattenedPoints.length >= 2147483647) {
+            throw new Error("Too many points, Point count cannot exceed 2147483647");
+        }
+        const { _bufferManagersMap, _bufferOrchestrator } = this;
+        _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
+        this._refillFocus();
+
+        this.globe?.DrawRender();
+
+    }
+
+
+    flush() {
+        const capacity = 100
+        this._bufferOrchestrator?.flush({ capacity });
+        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
+        this._turnOffFocus();
+        this._tracksToPointsMap.clear();
+        this.globe?.DrawRender();
+    }
+
+    /**
+     * @param {string} trackID
+     */
+    deleteTrack(trackID) {
+        const pointList = this._tracksToPointsMap.get(trackID);
+        if (!pointList) {
+            console.warn(`Track with ID ${trackID} does not exist.`);
+            return;
+        };
+        const points = Array.from(pointList);
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(
+            points.map((pointID) => keyMethod(trackID, pointID)),
+            _bufferManagersMap
+        );
+        this._tracksToPointsMap.delete(trackID);
+        this._redraw = true;
+        this._refillFocus();
+
+        this.globe?.DrawRender();
+    }
+
+
+    /**
+     * @param {string} trackID
+     * @param {Array<string>} pointIDs
+     */
+    deletePoints(trackID, pointIDs) {
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(
+            pointIDs.map((pointID) => keyMethod(trackID, pointID)),
+            _bufferManagersMap
+        );
+        this._deletePointsFromTracksMap(trackID, pointIDs);
+        this._refillFocus();
+        this.globe?.DrawRender();
+    }
+
+    focusTracks(trackIDs = null) {
+        if (!this.globe) return;
+        if (trackIDs === null) {
+            this._focusParams.on = false;
+            this.globe?.DrawRender();
+            return;
+        }
+        this._focusParams.on = true;
+        this._fillElementBuffer(trackIDs);
+        if (!this._focusParams.on) {
+            this._turnOffFocus();
+        }
+        this.globe.DrawRender();
+    }
+
+
+    updateTrackColor(trackID, rgba) {
+        if (!this._tracksToPointsMap.has(trackID)) {
+            console.warn(`Track with ID ${trackID} does not exist.`);
+            return;
+        }
+        const pointList = this._tracksToPointsMap.get(trackID);
+        const points = Array.from(pointList);
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.updateBulk(
+            points.map((pointID) => {
+                return {
+                    key: keyMethod(trackID, pointID),
+                    rgba: rgba
+
+                };
+            }),
+            _bufferManagersMap,
+            ["rgba"]
+        );
+        this._refillFocus();
+        this.globe?.DrawRender();
+    }
+
+    // GLOBE API METHODS
+
+    free() {
+        if (this._isFreed) return;
+        this._isFreed = true;
+        this._pickerDisplayer.free();
+        PointOnGlobeProgramCache.release(this.globe);
+        this.gl.deleteBuffer(this._focusParams.elementBuffer);
+        this._bufferManagersMap.forEach(
+            ({ bufferManager, adaptor }) => bufferManager.free()
+        );
+    }
+
+
+    draw3D() {
+        const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
+        if (!gl) {
+            throw new Error("GL is not loaded, PointTracks Plugin")
+        }
+        if (this._isFreed) {
+            throw new Error("Plugin is unregistered, PointTracks Plugin");
+        }
+        this.resize();
+
+        _pickerDisplayer.bindFBO();
+        _pickerDisplayer.clearTextures();
+
+        if (this._focusParams.on) {
+            _pointProgram.draw(_vao, this._focusParams.length,
+                {
+                    hoveredID: this._selectedID,
+                    opacity: this._opacity,
+                    pointSize: this.pointSizes.pointSize,
+                    hoveredPointSize: this.pointSizes.hoveredPointSize,
+                    elementBuffer: this._focusParams.elementBuffer
+                });
+        } else {
+            _pointProgram.draw(_vao, _bufferOrchestrator.length,
+                {
+                    hoveredID: this._selectedID,
+                    opacity: this._opacity,
+                    pointSize: this.pointSizes.pointSize,
+                    hoveredPointSize: this.pointSizes.hoveredPointSize
+                });
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        _pickerDisplayer.drawColorTexture();
+
+        this._selfSelect();
+    }
+
+
+    resize() {
+        const w = this.globe.api_ScrW();
+        const h = this.globe.api_ScrH();
+        if (w === this._lastWH.w && h === this._lastWH.h) return;
+
+        this._lastWH.w = w;
+        this._lastWH.h = h;
+        this._pickerDisplayer.resize();
+        this.globe?.DrawRender();
+    }
+
+    // IMPLICIT METHODS
+
+    _fillTracksToPointsMap(tracks) {
+        for (const track of tracks) {
+            const trackID = track.trackID;
+            const points = track.points;
+            if (!this._tracksToPointsMap.has(trackID)) {
+                this._tracksToPointsMap.set(trackID, new Set());
+            }
+            const pointSet = this._tracksToPointsMap.get(trackID);
+            for (let p = 0; p < points.length; p++) {
+                const pointID = points[p].ID;
+                if (!pointSet.has(pointID)) {
+                    pointSet.add(pointID);
+                } else {
+                    console.warn(`Point with ID ${pointID} already exists in track ${trackID}. Skipping duplicate.`);
+                }
+            }
+        }
+    }
+
+    _refillFocus() {
+        if (this._focusParams.on) {
+            this.focusTracks(this._focusParams.trackIDs);
+        }
+    }
+
+    _deletePointsFromTracksMap(trackID, pointIDs) {
+        const trackIDs = this._tracksToPointsMap.get(trackID);
+        if (trackIDs === undefined) {
+            console.warn(`Track with ID ${trackID} not found.`);
+            return;
+        }
+        for (const pointID of pointIDs) {
+            if (!trackIDs.has(pointID)) {
+                console.warn(`Point with ID ${pointID} not found in track ${trackID}.`);
+            } else {
+                trackIDs.delete(pointID);
+            }
+        }
+        if (trackIDs.size === 0) {
+            this._tracksToPointsMap.delete(trackID);
+        }
+    }
+
+
+    _selfSelect() {
+        const { globe } = this;
+        const pos = globe.api_GetMousePos();
+        const x = pos.canvasX;
+        const y = globe.api_ScrH() - pos.canvasY;
+        this.screenSelection(x, y, (selectedPoints) => {
+        });
+
+    }
+
+    _turnOffFocus() {
+        const { gl } = this;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array([]), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        this._focusParams.length = 0;
+        this._focusParams.on = false;
+    }
+
+    _fillElementBuffer(trackIDs) {
+
+        let length = 0;
+        const indexes = [];
+        const foundTracks = []
+        for (const trackID of trackIDs) {
+            const pointList = this._tracksToPointsMap.get(trackID);
+            if (!pointList) continue;
+            foundTracks.push(trackID);
+            for (const pointID of pointList) {
+                const key = keyMethod(trackID, pointID);
+                const index = this._bufferOrchestrator.offsetMap.get(key);
+                if (index === undefined) {
+                    throw new Error(`Point with key ${key} not found in buffer orchestrator.`);
+                }
+                indexes.push(index);
+                length++;
+            }
+        }
+        this._focusParams.trackIDs = foundTracks;
+        this._focusParams.length = length;
+        if (length === 0) {
+            return false;
+        }
+        const { gl } = this;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indexes), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        return true;
+    }
+
+}
+
+
+const trackToFlatPoints = (track, extraParameters) => {
+
+    const trackID = track.trackID;
+    const points = track.points;
+    const rgba = new Float32Array(track.rgba);
+    const flatPoints = [];
+    for (const point of points) {
+        flatPoints.push({
+            key: keyMethod(trackID, point.ID),
+            long: point.long,
+            lat: point.lat,
+            height: point.height,
+            pointID: point.ID,
+            rgba,
+            trackID
+        });
+
+        for (let i = 0; i < extraParameters.length; i++) {
+            const param = extraParameters[i];
+            if (point.hasOwnProperty(param)) {
+                flatPoints[flatPoints.length - 1][param] = point[param];
+            }
+        }
+
+    }
+    return flatPoints;
+}
+
+const keyMethod = (trackID, pointID) => `${trackID}_${pointID}`;
+
+
+export { PointTracksPlugin, keyMethod };