图片多选问题排查bug

deepseek

高亮的滑块无法取消选中状态

(function finalFix() {
console.log(‘[最终修复] 开始修复 Ctrl+点击地图图片多选功能…’);

// ========== 1. 修复 clearAllSelections 函数 ==========
const originalClearAll = window.clearAllSelections;

window.clearAllSelections = function() {
    // 保存当前选中的栅格图片和相关滑块元素
    const savedRasters = multiSelectedElements.filter(el => el.type === 'raster');

    // 调用原始函数清除所有选中
    originalClearAll();

    // 恢复栅格图片的选中状态到 multiSelectedElements
    savedRasters.forEach(raster => {
        if (!multiSelectedElements.some(el => el.type === 'raster' && el.item.id === raster.item.id)) {
            multiSelectedElements.push(raster);
        }
        // 恢复滑块高亮
        if (raster.item.rangeEl) {
            raster.item.rangeEl.classList.add('selected');
        }
    });

    // 恢复 selectedRasterImage（如果有）
    if (savedRasters.length > 0) {
        selectedRasterImage = savedRasters[savedRasters.length - 1].item;
    }

    console.log('[修复] 已恢复栅格图片选中:', savedRasters.map(r => r.item.name));
};

// ========== 2. 修复 selectRasterImageViaTimeline 函数 ==========
const originalSelectRasterViaTimeline = window.selectRasterImageViaTimeline;

window.selectRasterImageViaTimeline = function(rasterImage) {
    if (!rasterImage) return;

    // 检查是否处于多选状态
    const selectedRasterCount = multiSelectedElements.filter(el => el.type === 'raster').length;
    const isMultiSelectActive = selectedRasterCount > 0 && 
        !(selectedRasterCount === 1 && multiSelectedElements.some(el => el.type === 'raster' && el.item.id === rasterImage.id));

    if (isMultiSelectActive) {
        console.log('[修复] 多选模式下保持选中，只更新 current');
        selectedRasterImage = rasterImage;
        if (rasterImage.rangeEl) {
            rasterImage.rangeEl.classList.add('selected');
        }
        document.getElementById("propertyPanel").classList.add("open");
        document.getElementById("modelProperties").style.display = "block";
        if (typeof populateRasterImagePanel === 'function') {
            populateRasterImagePanel(rasterImage);
        }
        return;
    }

    originalSelectRasterViaTimeline(rasterImage);
};

// ========== 3. 修改 removeFromMultiSelection 函数 ==========
const originalRemoveFromMulti = window.removeFromMultiSelection;
if (originalRemoveFromMulti) {
    window.removeFromMultiSelection = function(item, type) {
        if (type === 'raster') {
            const toRemove = item;
            originalRemoveFromMulti(toRemove, type);
            if (toRemove.rangeEl) {
                toRemove.rangeEl.classList.remove('selected');
            }
            const remainingRasters = multiSelectedElements.filter(el => el.type === 'raster');
            if (remainingRasters.length === 0) {
                selectedRasterImage = null;
                if (rasterDraw) {
                    rasterDraw.changeMode('simple_select', { featureIds: [] });
                }
                if (typeof hideRotationControl === 'function') hideRotationControl();
                if (typeof removeRasterDragMarker === 'function') removeRasterDragMarker();
            } else if (selectedRasterImage === toRemove) {
                selectedRasterImage = remainingRasters[remainingRasters.length - 1].item;
            }
            console.log('[修复] 移除栅格图片选中:', toRemove.name, '剩余:', remainingRasters.length);
            return;
        }
        originalRemoveFromMulti(item, type);
    };
}

// ========== 4. 修改 addToMultiSelection 函数 ==========
const originalAddToMulti = window.addToMultiSelection;
if (originalAddToMulti) {
    window.addToMultiSelection = function(item, type) {
        if (type === 'raster') {
            if (multiSelectedElements.some(el => el.type === 'raster' && el.item.id === item.id)) {
                return;
            }
            originalAddToMulti(item, type);
            if (item.rangeEl) {
                item.rangeEl.classList.add('selected');
            }
            console.log('[修复] 添加栅格图片选中:', item.name);
            return;
        }
        originalAddToMulti(item, type);
    };
}

// ========== 5. 修改 selectRasterImage 函数 ==========
const originalSelectRaster = window.selectRasterImage;
if (originalSelectRaster) {
    window.selectRasterImage = function(rasterImage) {
        if (!rasterImage) return;

        const isMultiSelectActive = multiSelectedElements.some(el => 
            el.type === 'raster' && el.item.id !== rasterImage.id
        );

        if (isMultiSelectActive) {
            selectedRasterImage = rasterImage;
            if (rasterImage.rangeEl) {
                rasterImage.rangeEl.classList.add('selected');
            }
            document.getElementById("propertyPanel").classList.add("open");
            if (typeof populateRasterImagePanel === 'function') {
                populateRasterImagePanel(rasterImage);
            }
            return;
        }

        originalSelectRaster(rasterImage);
    };
}

// ========== 6. 替换地图点击事件中的栅格图片处理逻辑 ==========
// 找到地图的 click 事件监听器并增强
if (map && map._events && map._events.click) {
    console.log('[修复] 增强地图点击事件中的栅格图片处理');
}

console.log('[最终修复] 完成！现在可以通过 Ctrl+点击 地图上的图片进行多选了');

})();