@tak-ps/cloudtak 12.54.0

package/src/stores/modules/draw.ts

@@ -0,0 +1,413 @@
+import * as terraDraw from 'terra-draw';
+import { v4 as randomUUID } from 'uuid';
+import mapgl from 'maplibre-gl'
+import pointOnFeature from '@turf/point-on-feature';
+import { coordEach } from '@turf/meta';
+import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter';
+import { distance } from '@turf/distance';
+import type { GeoJSONFeatureId } from 'maplibre-gl'
+import type COT from '../../base/cot.ts';
+import Filter from '../../base/filter.ts';
+import { OriginMode } from '../../base/cot.ts';
+import { std, stdurl } from '../../std.ts';
+import type { Feature, FeatureCollection } from '../../types.ts';
+import type { Polygon, Position } from 'geojson';
+import type { useMapStore } from '../map.ts';
+
+export enum DrawToolMode {
+    STATIC = 'static',
+    FREEHAND = 'freehand',
+    SELECT = 'select',
+
+    POINT = 'point',
+    LINESTRING = 'linestring',
+    POLYGON = 'polygon',
+    RECTANGLE = 'angled-rectangle',
+    CIRCLE = 'circle',
+    SECTOR = 'sector',
+}
+
+export default class DrawTool {
+    private draw: terraDraw.TerraDraw;
+    public editing: COT | null;
+
+    public mode: DrawToolMode;
+
+    private mapStore: ReturnType<typeof useMapStore>;
+
+    // Contains coordinates to allow snapping to
+    public snapping: Set<[number, number]>;
+
+    public point: {
+        type: string,
+    };
+
+    public lasso: {
+        loading: boolean;
+        overlay: string;
+    }
+
+    constructor(mapStore: ReturnType<typeof useMapStore>) {
+        this.mapStore = mapStore;
+
+        const toCustom = (event: terraDraw.TerraDrawMouseEvent): Position | undefined => {
+            let closest: {
+                dist: number
+                coord: Position
+            } | undefined = undefined;
+
+            for (const coord of this.snapping.values()) {
+                const dist = distance([event.lng, event.lat], coord);
+
+                if (!closest || (dist < closest.dist)) {
+                    closest = { dist, coord }
+                }
+            }
+
+            if (closest) {
+                // Base Threshold / Math.pow(decayFactor, zoomLevel)
+                const threshold = 1000 / Math.pow(2, this.mapStore.map.getZoom());
+
+                if (closest.dist < threshold) {
+                    return closest.coord;
+                }
+
+                return;
+            } else {
+                return;
+            }
+        }
+
+        this.draw = new terraDraw.TerraDraw({
+            adapter: new TerraDrawMapLibreGLAdapter({
+                map: this.mapStore.map,
+                // @ts-expect-error TS is complaining
+                lib: mapgl
+            }),
+            idStrategy: {
+                isValidId: (id: string | number): boolean => {
+                    return typeof id === "string"
+                },
+                getId: (function () {
+                    return function () {
+                        return randomUUID()
+                    };
+                })()
+            },
+            modes: [
+                new terraDraw.TerraDrawPointMode({
+                    editable: true
+                }),
+                new terraDraw.TerraDrawLineStringMode({
+                    editable: true,
+                    snapping: { toCustom }
+                }),
+                new terraDraw.TerraDrawPolygonMode({
+                    editable: true,
+                    showCoordinatePoints: true,
+                    snapping: { toCustom }
+                }),
+                new terraDraw.TerraDrawAngledRectangleMode(),
+                new terraDraw.TerraDrawFreehandMode(),
+                new terraDraw.TerraDrawSectorMode(),
+                new terraDraw.TerraDrawCircleMode(),
+                new terraDraw.TerraDrawSelectMode({
+                    flags: {
+                        polygon: {
+                            feature: {
+                                draggable: true,
+                                coordinates: {
+                                    snappable: true,
+                                    deletable: true,
+                                    midpoints: {
+                                        draggable: true
+                                    },
+                                    draggable: true,
+                                }
+                            }
+                        },
+                        linestring: {
+                            feature: {
+                                draggable: true,
+                                coordinates: {
+                                    snappable: true,
+                                    deletable: true,
+                                    midpoints: {
+                                        draggable: true
+                                    },
+                                    draggable: true,
+                                }
+                            }
+                        },
+                        point: {
+                            feature: {
+                                draggable: true,
+                            }
+                        }
+                    }
+                })
+            ]
+        });
+
+        this.draw.on('finish', async (id, context) => {
+            if (context.action === "draw") {
+                if (this.draw.getMode() === DrawToolMode.STATIC || this.editing) {
+                    return;
+                } else if (this.mode === DrawToolMode.FREEHAND) {
+                    const feat = this.draw.getSnapshotFeature(id);
+                    if (!feat) throw new Error('Could not find underlying marker');
+                    this.removeFeature(id);
+                    this.stop();
+
+                    if (!this.lasso.overlay || this.lasso.overlay === "CoT Icons") {
+                        const touching = await this.mapStore.worker.db.touching(feat.geometry as Polygon);
+
+                        for (const cot of touching.values()) {
+                            this.mapStore.selected.set(cot.id, cot);
+                        }
+                    } else {
+                        const ov = this.mapStore.getOverlayByName(this.lasso.overlay);
+                        if (!ov) throw new Error('Could not find overlay');
+
+                        this.lasso.loading = true;
+
+                        try {
+                            const url = stdurl(`/api/basemap/${ov.mode_id}/feature`);
+
+                            const fc = await std(url, {
+                                method: 'POST',
+                                body: {
+                                    polygon: feat.geometry
+                                }
+                            }) as FeatureCollection;
+
+                            mapStore.toImport = fc.features.map((f) => {
+                                const id = randomUUID();
+
+                                return {
+                                    id,
+                                    type: 'Feature',
+                                    path: '/',
+                                    properties: {
+                                       id,
+                                       type: 'u-d-p',
+                                       how: 'h-g-i-g-o',
+                                       color: '#00FF00',
+                                       archived: true,
+                                       time: new Date().toISOString(),
+                                       start: new Date().toISOString(),
+                                       stale: new Date().toISOString(),
+                                       center: pointOnFeature(f).geometry.coordinates,
+                                       callsign: 'New Feature'
+                                    },
+                                    geometry: f.geometry
+                                }
+                            });
+
+                            this.lasso.loading = false;
+                        } catch (err) {
+                            this.lasso.loading = false;
+                            console.error(err);
+                            throw new Error('Error fetching lasso features');
+                        }
+                    }
+                } else {
+                    const storeFeat = this.draw.getSnapshotFeature(id);
+                    if (!storeFeat) throw new Error('Could not find underlying marker');
+
+                    const now = new Date();
+                    const feat: Feature = {
+                        id: String(id),
+                        type: 'Feature',
+                        path: '/',
+                        properties: {
+                            id: String(id),
+                            type: 'u-d-p',
+                            how: 'h-g-i-g-o',
+                            archived: true,
+                            callsign: 'New Feature',
+                            time: now.toISOString(),
+                            start: now.toISOString(),
+                            stale: new Date(now.getTime() + 3600).toISOString(),
+                            center: [0,0]
+                        },
+                        geometry: JSON.parse(JSON.stringify(storeFeat.geometry))
+                    };
+
+                    if (
+                        this.mode === DrawToolMode.POLYGON
+                        || this.mode === DrawToolMode.RECTANGLE
+                        || this.mode === DrawToolMode.SECTOR
+                    ) {
+                        feat.properties.type = 'u-d-f';
+                    } else if (this.mode === DrawToolMode.LINESTRING) {
+                        feat.properties.type = 'u-d-f';
+                    } else if (this.mode === DrawToolMode.CIRCLE) {
+                        feat.properties.type = 'u-d-c-c';
+                    } else if (this.mode === DrawToolMode.POINT) {
+                        feat.properties.type = this.point.type
+                        feat.properties["marker-opacity"] = 1;
+
+                        if (this.point.type === 'u-d-p') {
+                            feat.properties["marker-color"] = '#00FF00';
+                        } else {
+                            feat.properties["marker-color"] = '#FFFFFF';
+                        }
+                    }
+
+                    this.removeFeature(id);
+
+                    await this.stop();
+
+                    await this.mapStore.worker.db.add(feat, {
+                        authored: true
+                    });
+
+                    await this.mapStore.refresh();
+                }
+            }
+        })
+
+        // Deselect event is for editing existing features
+        this.draw.on('deselect', async () => {
+            if (!this.editing) return;
+
+            const feat = this.draw.getSnapshotFeature(this.editing.id);
+
+            if (!feat) throw new Error('Could not find underlying marker');
+
+            delete feat.properties.center;
+
+            const editing = this.editing;
+
+            await this.stop();
+
+            await this.mapStore.worker.db.add(feat as Feature, {
+                authored: true
+            });
+
+            await this.mapStore.refresh();
+
+            if (editing && editing.origin.mode === OriginMode.MISSION && editing.origin.mode_id) {
+                await this.mapStore.loadMission(editing.origin.mode_id);
+            } else {
+                await this.mapStore.worker.db.unhide(editing.id);
+                await this.mapStore.refresh();
+            }
+        });
+
+        this.mode = DrawToolMode.STATIC;
+        this.snapping = new Set();
+        this.editing = null;
+
+        this.point = {
+            type: 'u-d-p'
+        }
+
+        this.lasso = {
+            loading: false,
+            overlay: 'CoT Icons'
+        }
+    }
+
+    async start(mode: DrawToolMode): Promise<void> {
+        this.mode = mode;
+        this.draw.start();
+        this.draw.setMode(mode)
+
+        this.snapping = await this.mapStore.worker.db.snapping(
+            this.mapStore.map.getBounds().toArray()
+        );
+    }
+
+    async stop(refresh = true): Promise<void> {
+        this.mode = DrawToolMode.STATIC;
+
+        // Reset cursor to default BEFORE stopping draw operations
+        this.mapStore.map.getCanvas().style.cursor = '';
+
+        this.draw.stop();
+        this.snapping.clear()
+
+        if (!this.editing) return;
+
+        await Filter.delete({ external: `hidden-${this.editing.id}` });
+
+        if (refresh) {
+            if (this.editing && this.editing.origin.mode === OriginMode.MISSION && this.editing.origin.mode_id) {
+                await this.mapStore.loadMission(this.editing.origin.mode_id);
+                this.editing = null;
+            } else {
+                await this.mapStore.worker.db.unhide(this.editing.id);
+                this.editing = null;
+
+                await this.mapStore.refresh();
+            }
+        }
+    }
+
+    async edit(cot: COT) {
+        this.editing = cot;
+
+        this.start(DrawToolMode.SELECT);
+
+        try {
+            const feat = cot.as_feature({ clone: true });
+            if (feat.geometry.type === 'Polygon') {
+                feat.properties.mode = 'polygon';
+            } else if (feat.geometry.type === 'LineString') {
+                feat.properties.mode = 'linestring';
+            } else if (feat.geometry.type === 'Point') {
+                feat.properties.mode = 'point';
+            }
+
+            coordEach(feat, (coord) => {
+                if (coord.length > 2) {
+                    coord.splice(2, coord.length - 2);
+                }
+
+                // Ensure precision is within bounds
+                for (let i = 0; i < coord.length; i++) {
+                    coord[i] = Math.round(coord[i] * Math.pow(10, 9)) / Math.pow(10, 9);
+                }
+            });
+
+            await Filter.create(
+                cot.properties.callsign + ' Hidden',
+                `hidden-${cot.id}`,
+                'AtlasDatabase',
+                true,
+                `id = "${cot.id}"`
+           )
+
+            if (cot.origin.mode === OriginMode.MISSION && cot.origin.mode_id) {
+                await this.mapStore.loadMission(cot.origin.mode_id);
+            } else {
+                await this.mapStore.worker.db.hide(cot.id);
+                await this.mapStore.refresh();
+            }
+
+            const errorStatus = this.draw.addFeatures([feat as terraDraw.GeoJSONStoreFeatures]).filter((status) => {
+                return !status.valid;
+            });
+
+            if (errorStatus.length) {
+                throw new Error('Error editing this feature: ' + errorStatus[0].reason)
+            }
+
+            this.draw.selectFeature(cot.id);
+        } catch (err) {
+            await this.stop();
+
+            throw err;
+        }
+    }
+
+    getFeature(id: GeoJSONFeatureId) {
+        return this.draw.getSnapshotFeature(id);
+    }
+
+    removeFeature(id: GeoJSONFeatureId): void {
+        return this.draw.removeFeatures([id]);
+    }
+}

package/src/stores/modules/icons.ts

@@ -0,0 +1,185 @@
+/**
+ * Icon Color Manager for runtime icon recoloring
+ */
+import ms from 'milsymbol'
+import Icon from '../../base/icon.ts'
+import type { Map as MapLibreMap } from 'maplibre-gl';
+import type { IconsetList, Iconset } from '../../types.ts';
+import { std, stdurl } from '../../std.ts';
+import { db, type DBIconset } from '../../base/database.ts';
+
+export default class IconManager {
+    private cache = new Map<string, HTMLCanvasElement>();
+    private map: MapLibreMap;
+
+    constructor(map: MapLibreMap) {
+        this.map = map;
+    }
+
+    static async from(uid: string): Promise<DBIconset | undefined> {
+        return await db.iconset.get(uid);
+    }
+
+    async addIconset(uid: string): Promise<void> {
+        const iconset = await std(`/api/iconset/${uid}`) as Iconset;
+
+        await db.iconset.put(iconset);
+
+        this.map.addSprite(
+            iconset.uid,
+            String(stdurl(`/api/iconset/${iconset.uid}/sprite?token=${localStorage.token}`))
+        );
+    }
+
+    async removeIconset(uid: string): Promise<void> {
+        this.map.removeSprite(uid);
+        await db.iconset.delete(uid);
+    }
+
+    static async sprites(): Promise<Array<{
+        id: string,
+        url: string
+    }>> {
+        const sprites = [{
+            id: 'default',
+            url: String(stdurl(`/api/iconset/default/sprite?token=${localStorage.token}`))
+        }]
+
+        // Eventually make a sprite URL part of the overlay so KMLs can load a sprite package & add paging support
+        const iconsets = await std('/api/iconset?limit=100') as IconsetList;
+
+        await db.iconset.bulkPut(iconsets.items);
+
+        for (const iconset of iconsets.items) {
+            sprites.push({
+                id: iconset.uid,
+                url: String(stdurl(`/api/iconset/${iconset.uid}/sprites?token=${localStorage.token}`))
+            });
+        }
+
+        return sprites;
+    }
+
+    public async updateImages(): Promise<void> {
+        const images = this.map.listImages();
+
+        await Icon.populate(images);
+    }
+
+    public async onStyleImageMissing(e: { id: string }): Promise<void> {
+        if (e.id.startsWith('2525D:')) {
+            const sidc = e.id.replace('2525D:', '');
+            const size = 24;
+            const data = new ms.Symbol(sidc, { size }).asCanvas();
+
+            this.map.addImage(e.id, await createImageBitmap(data));
+        } else if (e.id.includes('-colored-')) {
+            // This is a colored icon, we need to load it from the icon manager
+            const parts = e.id.split('-colored-');
+            const originalIconId = parts[0];
+            const color = '#' + parts[1];
+
+            this.getColoredIcon(originalIconId, color);
+        }
+    }
+
+    /**
+     * Get or create a colored version of an icon
+     */
+    public getColoredIcon(iconId: string, color: string): string {
+        const coloredIconId = `${iconId}-colored-${color.slice(1)}`;
+
+        if (!this.cache.has(coloredIconId)) {
+            this.createColoredIcon(iconId, color, coloredIconId);
+        }
+
+        return coloredIconId;
+    }
+
+    /**
+     * Create a colored version of an icon and add it to the map
+     */
+    private createColoredIcon(iconId: string, color: string, coloredIconId: string): void {
+        // Get the original icon from the map
+        const originalImage = this.map.getImage(iconId);
+        if (!originalImage) {
+            console.warn(`Icon ${iconId} not found in map`);
+            return;
+        }
+
+        // Create canvas for recoloring
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        canvas.width = originalImage.data.width;
+        canvas.height = originalImage.data.height;
+
+        // Create ImageData from the original image
+        const imageData = new ImageData(
+            new Uint8ClampedArray(originalImage.data.data),
+            originalImage.data.width,
+            originalImage.data.height
+        );
+
+        // Recolor white pixels
+        this.recolorWhitePixels(imageData, color);
+
+        // Draw to canvas
+        ctx.putImageData(imageData, 0, 0);
+
+        // Cache and add to map
+        this.cache.set(coloredIconId, canvas);
+
+        // Convert canvas to ImageData for map
+        const canvasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        this.map.addImage(coloredIconId, {
+            width: canvas.width,
+            height: canvas.height,
+            data: canvasImageData.data
+        });
+    }
+
+    /**
+     * Replace white/light pixels with the target color
+     */
+    private recolorWhitePixels(imageData: ImageData, color: string): void {
+        const data = imageData.data;
+        const [r, g, b] = this.hexToRgb(color);
+
+        for (let i = 0; i < data.length; i += 4) {
+            const alpha = data[i + 3];
+
+            // Skip transparent pixels
+            if (alpha === 0) continue;
+
+            // Check if pixel is white or light colored
+            if (this.isWhitePixel(data[i], data[i + 1], data[i + 2])) {
+                data[i] = r;     // Red
+                data[i + 1] = g; // Green
+                data[i + 2] = b; // Blue
+                // Keep original alpha
+            }
+        }
+    }
+
+    /**
+     * Check if a pixel is considered "white" (should be recolored)
+     */
+    private isWhitePixel(r: number, g: number, b: number): boolean {
+        // Consider pixels white if they are very light (above 200 in all channels)
+        return r > 200 && g > 200 && b > 200;
+    }
+
+    /**
+     * Convert hex color to RGB values
+     */
+    private hexToRgb(hex: string): [number, number, number] {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16)
+        ] : [0, 255, 0]; // Default to green if parsing fails
+    }
+}