sheet-mapper/mapbox-gl-feature-state-manager.js at main · publicmap/sheet-mapper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/**
 * MapboxGLFeatureStateManager - A state management plugin for Mapbox GL JS
 *
 * This class provides efficient management of feature states in Mapbox GL JS,
 * reducing redundant state updates and providing a cleaner API for state management.
 */
class MapboxGLFeatureStateManager {
    constructor(map, sourceId) {
        this.map = map;
        this.sourceId = sourceId;
        this.states = new Map(); // Track current states
        this.hoveredId = null;
        this.selectedId = null;
    }

    /**
     * Sets the hover state for a feature
     * @param {number|string|null} id - Feature ID to hover, or null to clear hover
     * @returns {boolean} - Whether the state was changed
     */
    setHovered(id) {
        if (this.hoveredId === id) return false;

        // Clear previous hover
        if (this.hoveredId !== null) {
            this.setFeatureState(this.hoveredId, { hover: false });
        }

        // Set new hover
        if (id !== null) {
            this.setFeatureState(id, { hover: true });
        }

        this.hoveredId = id;
        return true;
    }

    /**
     * Sets the selected state for a feature
     * @param {number|string|null} id - Feature ID to select, or null to clear selection
     * @returns {boolean} - Whether the state was changed
     */
    setSelected(id) {
        if (this.selectedId === id) return false;

        // Clear previous selection
        if (this.selectedId !== null) {
            this.setFeatureState(this.selectedId, { selected: false });
        }

        // Set new selection
        if (id !== null) {
            this.setFeatureState(id, { selected: true });
        }

        this.selectedId = id;
        return true;
    }

    /**
     * Get the current state of a feature
     * @param {number|string} id - Feature ID
     * @returns {Object} Current state object
     */
    getState(id) {
        return this.states.get(id) || {};
    }

    /**
     * Set multiple state properties at once
     * @param {number|string} id - Feature ID
     * @param {Object} stateObject - Object containing state properties to set
     */
    setFeatureState(id, stateObject) {
        const currentState = this.getState(id);
        const newState = { ...currentState, ...stateObject };

        // Only update if state has changed
        if (JSON.stringify(currentState) !== JSON.stringify(newState)) {
            this.states.set(id, newState);
            this.map.setFeatureState(
                { source: this.sourceId, id },
                newState
            );
        }
    }

    /**
     * Clear all states for a feature
     * @param {number|string} id - Feature ID
     */
    clearState(id) {
        if (this.states.has(id)) {
            this.states.delete(id);
            this.map.removeFeatureState(
                { source: this.sourceId, id }
            );
        }
    }

    /**
     * Clear all states for all features
     */
    clearAllStates() {
        this.states.clear();
        this.hoveredId = null;
        this.selectedId = null;
        this.map.removeFeatureState({ source: this.sourceId });
    }

    /**
     * Update paint properties for hover and selection states
     * @param {string} layerId - Layer ID to update
     * @param {Object} options - Paint property options
     */
    updatePaintProperties(layerId, options = {}) {
        const {
            hoverColor = 'yellow',
            selectedColor = 'blue',
            defaultColor = '#000000',
            hoverWidth = 10,
            selectedWidth = 12,
            defaultWidth = 1
        } = options;

        this.map.setPaintProperty(layerId, 'circle-stroke-width', [
            'case',
            ['boolean', ['feature-state', 'selected'], false],
            selectedWidth,
            ['boolean', ['feature-state', 'hover'], false],
            hoverWidth,
            defaultWidth
        ]);

        this.map.setPaintProperty(layerId, 'circle-stroke-color', [
            'case',
            ['boolean', ['feature-state', 'selected'], false],
            selectedColor,
            ['boolean', ['feature-state', 'hover'], false],
            hoverColor,
            defaultColor
        ]);
    }
}

if (typeof window !== 'undefined') {
    window.MapboxGLFeatureStateManager = MapboxGLFeatureStateManager;
}

export default MapboxGLFeatureStateManager;