<template>
    <div class="app-container" @keydown="handleKeyDown" tabindex="0">
        <div class="containerBlock">
            <!-- 地震数据显示画布 -->
            <div class="canvas-container">
                <canvas ref="plot" id="canvas" />
                <!-- 添加鼠标悬停专用覆盖层 -->
                <div ref="hoverLayer" class="hover-layer"></div>
                <div ref="textStylePreviewCanvas" class="text-style-preview-canvas" v-show="showTextStylePanel">
                    文本样式预览
                </div>
                <!-- 添加悬停信息显示面板 -->
                <div class="cursor-info-panel" v-if="showCursorInfo && cursorInfo.depth !== null && isHovering">
                    <div class="info-pill">
                        <span>Depth: {{ cursorInfo.depth !== null ? cursorInfo.depth.toFixed(2) : 'N/A' }}</span>
                    </div>
                    <div class="info-pill">
                        <span>Trace: {{ cursorInfo.trace !== null ? cursorInfo.trace.toFixed(0) : 'N/A' }}</span>
                    </div>
                    <div class="info-pill">
                        <span>Value: {{ cursorInfo.value !== null ?
                            (typeof cursorInfo.value === 'string' ? cursorInfo.value : cursorInfo.value.toFixed(2))
                            : 'N/A' }}</span>
                    </div>
                </div>
            </div>
            <!-- 控制按钮组 -->
            <div class="controls">
                <el-button-group>
                    <!-- 放大按钮 -->
                    <el-button icon="el-icon-zoom-in" plain @click="zoomIn"></el-button>
                    <!-- 缩小按钮 -->
                    <el-button icon="el-icon-zoom-out" plain @click="zoomOut"></el-button>
                </el-button-group>
                <!-- 颜色选择下拉框 -->
                <el-select v-model="selectedColorMap" @change="changeColorMap" placeholder="颜色方案" size="small"
                    class="color-select">
                    <el-option v-for="item in colorMaps" :key="item" :label="item" :value="item">
                        <span class="color-option">
                            <span class="color-preview" :class="'color-preview-' + item.toLowerCase()"></span>
                            {{ item }}
                        </span>
                    </el-option>
                </el-select>
                <!-- 导出图片按钮 -->
                <!-- <el-button icon="el-icon-printer" plain @click="exportToImage" :loading="exporting"></el-button> -->
                <!-- 导出PDF按钮 -->
                <int-button icon="el-icon-document" title="导出PDF" @click="showPrintDialog = true"
                    :loading="pdfExporting"></int-button>

                <!--Draw Text按钮 -->
                <el-tooltip content="文本样式" placement="bottom" effect="light">
                    <el-button icon="el-icon-edit-outline" plain @click="toggleTextStylePanel"
                        :class="{ 'is-active': showTextStylePanel }">
                    </el-button>
                </el-tooltip>
                <!-- Draw Pencil按钮 -->
                <el-tooltip content="画笔样式" placement="bottom" effect="light">
                    <el-button icon="el-icon-edit" plain @click="toggleLineStylePanel"
                        :class="{ 'is-active': showLineStylePanel }">
                    </el-button>
                </el-tooltip>
            </div>
        </div>

        <!-- 画笔样式 -->
        <div class="style-panel line-style-panel" :class="{ 'style-panel-visible': showLineStylePanel }">
            <div class="style-panel-header">
                <h3>线条样式</h3>
                <el-button icon="el-icon-close" size="mini" circle @click="showLineStylePanel = false"></el-button>
            </div>
            <div class="style-content">
                <div class="style-item">
                    <span class="style-label">颜色：</span>
                    <el-color-picker v-model="lineStyle.color" show-alpha @change="updateLineStyle">
                    </el-color-picker>
                </div>
                <div class="style-item">
                    <span class="style-label">样式：</span>
                    <el-select v-model="lineStyle.pattern" placeholder="选择线条样式" @change="updateLineStyle">
                        <el-option v-for="(pattern, key) in linePatterns" :key="key" :label="key" :value="key">
                            <div class="pattern-preview-line" :style="getLinePatternStyle(key)"></div>
                        </el-option>
                    </el-select>
                </div>
                <div class="style-item">
                    <span class="style-label">宽度：</span>
                    <el-slider v-model="lineStyle.width" :min="1" :max="12" show-input
                        @change="debounce(updateLineStyle)">
                    </el-slider>
                </div>
            </div>

        </div>
        <!-- 线条样式面板 -->
        <div class="style-panel text-style-panel" :class="{ 'style-panel-visible': showTextStylePanel }">
            <div class="style-panel-header">
                <h3>文本样式</h3>
                <el-button icon="el-icon-close" size="mini" circle @click="showTextStylePanel = false"></el-button>
            </div>
            <div class="style-content">
                <!-- 填充样式部分 -->
                <div class="style-section-title">填充样式</div>
                <div class="style-item">
                    <span class="style-label">颜色：</span>
                    <el-color-picker v-model="fillStyle.color" show-alpha @change="updateFillStyle">
                    </el-color-picker>
                </div>
                <div class="style-item">
                    <span class="style-label">样式：</span>
                    <el-select v-model="fillStyle.pattern" placeholder="选择填充样式" @change="updateFillStyle">
                        <el-option v-for="(pattern, key) in fillPatterns" :key="key" :label="key" :value="key">
                            <div class="pattern-preview-fill" :style="getFillPatternStyle(key)"></div>
                        </el-option>
                    </el-select>
                </div>
                <div class="style-divider"></div>
                <!-- 线条样式部分 -->
                <div class="style-section-title">线条样式</div>
                <div class="style-item">
                    <span class="style-label">颜色：</span>
                    <el-color-picker v-model="textStyle.color" show-alpha @change="updateTextStyle">
                    </el-color-picker>
                </div>
                <div class="style-item">
                    <span class="style-label">宽度：</span>
                    <el-slider v-model="textStyle.width" :min="1" :max="12" show-input
                        @change="debounce(updateTextStyle)">
                    </el-slider>
                </div>
                <div class="style-item">
                    <span class="style-label">样式：</span>
                    <el-select v-model="textStyle.pattern" placeholder="选择线条样式" @change="debounce(updateTextStyle)">
                        <el-option v-for="(pattern, key) in linePatterns" :key="key" :label="key" :value="key">
                            <div class="pattern-preview-line" :style="getLinePatternStyle(key)"></div>
                        </el-option>
                    </el-select>
                </div>
                <!-- 分隔线 -->
                <div class="style-divider"></div>
                <div class="style-section-title">文本样式</div>
                <div class="style-item">
                    <span class="style-label">颜色：</span>
                    <el-color-picker v-model="textStyle.color" show-alpha @change="updateTextStyle">
                    </el-color-picker>
                </div>
                <div class="style-item">
                    <span class="style-label">大小：</span>
                    <el-slider v-model="textStyle.size" :min="8" :max="60" show-input
                        @change="debounce(updateTextStyle)">
                    </el-slider>
                </div>
                <div class="style-item">
                    <span class="style-label">字体：</span>
                    <el-select v-model="textStyle.font" placeholder="选择字体" @change="debounce(updateTextStyle)">
                        <el-option v-for="(font, index) in Object.keys(TEXT_PATTERNS)" :key="index" :label="font"
                            :value="font" :style="{ fontFamily: font }">
                            {{ font }}
                        </el-option>
                    </el-select>
                </div>
                <div class="style-item">
                    <span class="style-label">对齐：</span>
                    <div class="text-style-buttons">
                        <el-button-group style="width: 100%">
                            <el-button style="min-width: 20%; max-width: 20%"
                                :type="textStyle.align === 'left' ? 'primary' : ''"
                                @click="textStyle.align = 'left'; updateTextStyle()" title="左对齐">
                                <i class="el-icon-s-fold"></i>
                            </el-button>
                            <el-button style="min-width: 20%; max-width: 20%"
                                :type="textStyle.align === 'center' ? 'primary' : ''"
                                @click="textStyle.align = 'center'; updateTextStyle()" title="居中对齐">
                                <i class="el-icon-menu"></i>
                            </el-button>
                            <el-button style="min-width: 20%; max-width: 20%"
                                :type="textStyle.align === 'right' ? 'primary' : ''"
                                @click="textStyle.align = 'right'; updateTextStyle()" title="右对齐">
                                <i class="el-icon-s-unfold"></i>
                            </el-button>
                            <!-- 粗体按钮 -->
                            <el-button style="min-width: 20%; max-width: 20%" :type="textStyle.bold ? 'primary' : ''"
                                @click="textStyle.bold = !textStyle.bold; updateTextStyle()" title="粗体">
                                <span style="font-weight: bold">B</span>
                            </el-button>
                            <!-- 斜体按钮 -->
                            <el-button style="min-width: 20%; max-width: 20%" :type="textStyle.italic ? 'primary' : ''"
                                @click="textStyle.italic = !textStyle.italic; updateTextStyle()" title="斜体">
                                <span style="font-style: italic">I</span>
                            </el-button>
                        </el-button-group>
                    </div>
                </div>
                <!-- 添加属性部分 -->
                <div class="style-divider"></div>
                <div class="style-section-title">属性</div>
                <div class="style-item">
                    <span class="style-label">边框圆角：</span>
                    <el-input-number v-model="textStyle.borderRadius" :min="0" :max="30" size="small"
                        @change="updateTextStyle">
                    </el-input-number>
                </div>
                <div class="style-item">
                    <el-checkbox v-model="textStyle.fixedFont" @change="updateTextStyle">
                        固定字体
                    </el-checkbox>
                </div>
            </div>

        </div>
        <!-- PDF打印对话框 -->
        <int-print-dialog :show-dialog="showPrintDialog" @save="exportToPDF" @close="showPrintDialog = false">
            <el-checkbox v-model="printAnnotations" label="Print Annotations" />
        </int-print-dialog>

        <!-- 自定义右键菜单 -->
        <div v-if="contextMenu.visible" class="context-menu" :style="{
            left: `${contextMenu.x}px`,
            top: `${contextMenu.y}px`
        }" @mouseleave="contextMenu.visible = false">
            <div v-for="(item, index) in contextMenuItems" :key="index">
                <div v-if="item.type === 'separator'" class="context-menu-separator">
                </div>
                <div v-else class="context-menu-item" :class="{ disabled: !isMenuItemEnabled(item.action) }"
                    @click="isMenuItemEnabled(item.action) && handleMenuAction(item.action)">
                    <span>{{ item.text }}</span>
                    <span class="shortcut">{{ item.shortcut }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ScalingOptions } from '@int/geotoolkit/scene/exports/ScalingOptions.js';
import { mergeObjects } from '@int/geotoolkit/base';
// 导入地震数据相关组件
import { SeismicViewWidget } from '@int/geotoolkit/seismic/widgets/SeismicViewWidget';
import { SeismicColors } from '@int/geotoolkit/seismic/util/SeismicColors';
import { SeismicPipeline } from '@int/geotoolkit/seismic/pipeline/SeismicPipeline';
import { SegyReader } from '@int/geotoolkit/seismic/data/SegyReader';
import { StandardSegyFormat } from '@int/geotoolkit/seismic/data/StandardSegyFormat';
import { LocalFile } from '@int/geotoolkit/seismic/data/LocalFile';
import { Plot } from '@int/geotoolkit/plot/Plot';
import { getToken } from '@/utils/auth';
import { NodeExport } from '@int/geotoolkit/scene/exports/NodeExport';
import { getPixelScale } from '@int/geotoolkit/base';
import { Rect } from '@int/geotoolkit/util/Rect';
import { ColorMap } from '@int/geotoolkit/seismic/util/ColorMap';
// 导入交互工具
import { Layer } from '@int/geotoolkit/scene/Layer';
import { Zoom, Events as ZoomEvents } from '@int/geotoolkit/controls/tools/Zoom';
import { Functions as EasingFunctions } from '@int/geotoolkit/animation/Easing';
// 删除已注释的导入
import { CompositeTool } from '@int/geotoolkit/controls/tools/CompositeTool';
import { Tools } from '@int/geotoolkit/controls/tools/Tools';
import { init } from '@int/geotoolkit/base';
// 导入PDF导出相关组件
import { UnitFactory } from '@int/geotoolkit/util/UnitFactory';
import { PaperFormatFactory } from '@int/geotoolkit/scene/exports/PaperFormatFactory';
import { PaperOrientation } from '@int/geotoolkit/scene/exports/PaperOrientation';
import { NodeAdapter } from '@int/geotoolkit/scene/exports/NodeAdapter';
import { PdfExport } from '@int/geotoolkit/pdf/PdfExport';
import { StringStream } from '@int/geotoolkit/util/stream/StringStream';
import { CompositeDocumentElement } from '@int/geotoolkit/scene/exports/CompositeDocumentElement';
import { FreeLayout } from '@int/geotoolkit/scene/exports/FreeLayout';
import { Document } from '@int/geotoolkit/scene/exports/Document';
import { Group } from '@int/geotoolkit/scene/Group';
import { Path } from '@int/geotoolkit/scene/shapes/Path';
// 导入自定义组件
import IntButton from '@/components/int-button/index.vue';
import IntPrintDialog from '@/components/int-print-dialog/index.vue';
// 导入样式相关组件
import { LineStyle } from '@int/geotoolkit/attributes/LineStyle';
import { TextStyle } from '@int/geotoolkit/attributes/TextStyle';
import { FillStyle } from '@int/geotoolkit/attributes/FillStyle';
import { ImagePattern } from '@int/geotoolkit/attributes/ImagePattern';
import { Paint } from '@int/geotoolkit/controls/tools/Paint';
import { PaintMode } from '@int/geotoolkit/controls/tools/PaintMode';
import { EditMode } from '@int/geotoolkit/controls/tools/EditMode';
import { ColorBar, ColorBarLocation } from '@int/geotoolkit/controls/shapes/ColorBar';
import { AnchorType } from '@int/geotoolkit/util/AnchorType';
import { RgbaColor } from '@int/geotoolkit/util/RgbaColor';
import { SizeMode } from '@int/geotoolkit/scene/shapes/Text';
// 导入填充样式模式 - 保留这个重要的导入∫
import { LINE_PATTERNS, FILL_PATTERNS, TEXT_PATTERNS, LINESTYLE_PATTERNS, IMAGE_PATTERNS, LS_KEYS, FS_KEYS, TS_KEYS } from '@/api/Patterns.js';

import { Text } from '@int/geotoolkit/scene/shapes/Text'

init({ 'imports': [Tools] });

// 线条样式模式常量
const TEXT_PATTERN_KEYS = Object.keys(TEXT_PATTERNS);
const FILL_PATTERN_KEYS = Object.keys(FILL_PATTERNS);
const LINE_PATTERN_KEYS = Object.keys(LINE_PATTERNS);

export default {
    name: "seismic",
    components: {
        IntButton,
        IntPrintDialog
    },
    data() {
        return {
            plots: null,        // 绘图对象
            exporting: false,   // 导出图像状态
            pdfExporting: false, // 导出PDF状态
            dataLoaded: false,  // 数据加载状态
            zoom: null,         // 缩放工具
            zoomFactor: 1.08,     // 缩放系数（原为1.5，降低到1.08使缩放更加细微）
            zoomInProgress: false, // 标记缩放操作是否正在进行
            selectedColorMap: 'RedWhiteBlack', // 默认颜色方案
            // 添加鼠标悬停相关的数据
            cursorInfo: {
                depth: null,    // 深度值
                trace: null,    // 轨迹号
                value: null     // 样本值
            },
            isHovering: false,   // 鼠标是否悬停在画布上
            sampleData: null,   // 样本数据对象
            showCursorInfo: true, // 是否显示鼠标悬停信息
            _hasMouseMoveListener: false, // 是否已添加鼠标移动监听器
            _mouseMoveHandler: null, // 鼠标移动事件处理器引用
            // 添加模式常量到组件数据中，使其在模板中可访问
            TEXT_PATTERNS: TEXT_PATTERNS,
            FILL_PATTERNS: FILL_PATTERNS,
            LINE_PATTERNS: LINE_PATTERNS,
            LINESTYLE_PATTERNS: LINESTYLE_PATTERNS,
            IMAGE_PATTERNS: IMAGE_PATTERNS,
            LS_KEYS: LS_KEYS,
            FS_KEYS: FS_KEYS,
            TS_KEYS: TS_KEYS,
            TEXT_PATTERN_KEYS: TEXT_PATTERN_KEYS,
            FILL_PATTERN_KEYS: FILL_PATTERN_KEYS,
            LINE_PATTERN_KEYS: LINE_PATTERN_KEYS,
            colorMaps: [
                'RedWhiteBlack',   // 基本颜色映射
                'WhiteBlack',      // 基本颜色映射
                'Rainbow',         // 基本颜色映射
                'CustomGradient'
            ], // 颜色方案列表，简化测试
            showPrintDialog: false, // 是否显示打印对话框
            printAnnotations: false, // 是否打印注释
            // 样式面板相关状态
            showLineStylePanel: false, // 是否显示线条样式面板
            showTextStylePanel: false, // 是否显示文本样式面板
            // 线条样式
            lineStyle: {
                color: '#000000',
                width: 2,
                pattern: 'Solid'
            },
            // 线条样式模式
            linePatterns: LINE_PATTERNS,
            // 文本样式
            textStyle: {
                color: '#000000',
                size: 16,
                font: 'Arial',
                bold: false,
                italic: false,
                align: 'left',
                wrap: true,
                ellipsis: true,
                borderRadius: 0,
                fixedFont: false,
                bgColor: 'transparent',
                bgPattern: 'None'
            },
            // 删除手动定义的字体列表，使用TEXT_PATTERNS中的字体
            // 保存初始样式，用于重置
            initialLineStyle: null,
            initialTextStyle: null,
            initialFillStyle: null,
            annotationLayer: null,
            annotationTool: null,
            _hasLineListener: false,
            _hasTextListener: false,
            _currentEditingText: null, // 当前正在编辑的文本对象

            // 填充样式
            fillStyle: {
                color: '#000000',
                pattern: 'Solid',
                opacity: 100
            },
            // 填充样式模式 - 直接使用从API导入的模式
            fillPatterns: FILL_PATTERNS,

            // 文本样式模式
            textPatterns: {
                'None': [0, 10],
                'Solid': [],
                'Dash': [20, 4],
                'Dot': [2, 4],
                'DashDot': [20, 4, 2, 4],
                'DashDotDot': [20, 4, 2, 4, 2, 4]
            },

            // 环境背景样式模式
            bgPatterns: {
                'None': '透明背景',
                'Solid': '纯色背景',
                'Gradient': '渐变背景',
                'Pattern': '图案背景'
            },

            // 防抖相关
            updateDebounceTimeout: null,
            updateDebounceDelay: 200, // 200毫秒的防抖延迟
            updateRafId: null,        // 请求动画帧ID，用于高频更新

            // 画布交互控制
            _canvasEventHandler: [], // 保存画布事件处理器，用于清理

            // 错误恢复
            lastAppliedStyles: {     // 存储最后一次成功应用的样式，用于错误恢复
                line: null,
                text: null,
                fill: null
            },
            styleUpdateError: false,  // 标记是否有样式更新错误

            // 异步图案加载
            pendingPatternLoads: [], // 存储正在加载的图案任务
            resizeTimeout: null, // 用于存储resize事件的防抖定时器
            pixelValueDisplay: 'simple', // 仅显示简单数值，不再需要切换模式

            // 铅笔工具状态
            pencilState: {
                isDrawing: false,
                lastPoint: null,
                currentPath: null,
                paths: [], // 存储所有绘制的路径
                selectedPath: null
            },

            // 铅笔工具配置
            pencilConfig: {
                smoothing: true,
                minDistance: 1,
                maxDistance: 5,
                style: {
                    color: '#000000',
                    width: 2,
                    pattern: 'Solid'
                }
            },

            // 右键菜单状态
            contextMenu: {
                visible: false,
                x: 0,
                y: 0,
                items: []
            },
            currentTool: null,
            pencilTool: null,
            pencilHistory: {
                undoStack: [],
                redoStack: []
            },
            contextMenuItems: [
                { text: '撤销', shortcut: 'Ctrl+Z', action: 'undo' },
                { text: '重做', shortcut: 'Ctrl+Y', action: 'redo' },
                { type: 'separator' },
                { text: '剪切', shortcut: 'Ctrl+X', action: 'cut' },
                { text: '复制', shortcut: 'Ctrl+C', action: 'copy' },
                { text: '粘贴', shortcut: 'Ctrl+V', action: 'paste' },
                { type: 'separator' },
                { text: '删除', shortcut: 'Delete', action: 'delete' }
            ],
            undoStack: [],
            redoStack: [],
            clipboard: null,
            // 在 data 中添加文本注释相关的状态
            textAnnotation: {
                active: false,
                currentText: null,
                editingText: null,
                selectedText: null,
                defaultStyle: {
                    color: '#000000',
                    size: 16,
                    font: 'Arial',
                    bold: false,
                    italic: false,
                    align: 'left'
                }
            },
            textContextMenu: {
                visible: false,
                x: 0,
                y: 0,
                items: [
                    { text: '编辑', action: 'edit' },
                    { text: '复制', action: 'copy' },
                    { text: '删除', action: 'delete' },
                    { text: '样式', action: 'style' }
                ]
            },
            _annotations: null,
            selectedShape: null, // 当前选中的形状
        }
    },
    mounted() {
        // 组件挂载后创建场景
        this.createScene(this.$refs.plot);
        // 保存初始样式，用于重置
        this.initialLineStyle = { ...this.lineStyle };
        this.initialTextStyle = { ...this.textStyle };
        this.initialFillStyle = { ...this.fillStyle };
        // 添加键盘事件处理函数
        window.addEventListener('keydown', this.handleKeyDown);
        // 添加窗口大小变化监听
        window.addEventListener('resize', this.handleResize);

        // 初始化文本样式预览并调整canvas大小
        this.$nextTick(() => {
            this.updateTextStyle();
            this.adjustCanvasSize();

            // 确保canvas事件监听器已添加
            const canvas = this.$refs.plot;
            if (canvas && !this._hasMouseMoveListener) {
                canvas.addEventListener('mousemove', this.handleMouseMove, { passive: true });
                this._hasMouseMoveListener = true;
            }
        });

        // 添加键盘事件监听
        window.addEventListener('keydown', this.handleKeyDown);

        // 添加右键菜单监听
        this.$refs.plot.addEventListener('contextmenu', this.handleContextMenu);

        // 初始化文本注释功能
        this.initTextAnnotation();
    },
    methods: {
        /**
         * 创建地震数据显示场景
         */
        createScene(canvas) {
            // 创建地震视图组件，启用默认交互
            const widget = new SeismicViewWidget(null, {
                'colorbar': {
                    'axis': {
                        'tickgenerator': {
                            'mincount': 5,
                            'maxcount': 10
                        }
                    }
                },
                'tools': {
                    'scroll': {
                        'enabled': true,
                        'scrollbar': {
                            'horizontal': {
                                'visible': true,
                                'size': 15,
                                'alignment': 'bottom',
                                'autohide': false,
                                'interactive': true
                            },
                            'vertical': {
                                'visible': true,
                                'size': 15,
                                'alignment': 'right',
                                'autohide': false,
                                'interactive': true
                            }
                        }
                    },
                    'pan': true
                },
                'disableinteractions': false
            });

            // 创建操作层
            const manipulatorLayer = new Layer();
            widget.addChild(manipulatorLayer);

            // 创建缩放工具
            this.zoom = new Zoom({
                'speed': 1.1,
                'time': 700,
                'easing': EasingFunctions.EaseOutQuint,
                'wheelsenabled': false,
                'pinchsenabled': false
            }).setEnabled(false);

            // 创建复合工具
            const compositeTool = new CompositeTool(widget, 'compositeNode')
                .add(this.zoom);

            // 创建绘图对象
            this.plots = new Plot({
                'canvasElement': canvas,
                'root': widget,
                'interactive': true,
                'tools': {
                    'scroll': {
                        'enabled': true,
                        'scrollbar': {
                            'horizontal': {
                                'visible': true,
                                'interactive': true
                            },
                            'vertical': {
                                'visible': true,
                                'interactive': true
                            }
                        }
                    }
                }
            });

            // 添加工具到绘图对象
            this.plots.getTool().add(compositeTool);

            // 加载数据
            this.handleFileSelect(this.plots);

            // 创建注释层
            this.annotationLayer = new Group();
            widget.getOverlayLayer().addChild(this.annotationLayer);

            // 设置滚动条更新回调
            widget.on('scrolling', () => {
                widget.invalidate();
            });
        },

        /**
         * 禁用画布交互
         */
        disableCanvasInteraction(keepContent = false) {
            const canvas = this.$refs.plot;
            if (!canvas) return;

            // 设置画布样式，提示用户当前不可交互
            canvas.style.cursor = 'not-allowed';

            // 初始化事件处理数组（如果未定义）
            if (!Array.isArray(this._canvasEventHandler)) {
                this._canvasEventHandler = [];
            }

            // 移除现有的事件监听器（如果有）
            this._canvasEventHandler.forEach(({ event, handler }) => {
                try {
                    canvas.removeEventListener(event, handler, { capture: true });
                } catch (error) {
                    console.warn('移除事件监听器失败:', error);
                }
            });

            // 重置数组
            this._canvasEventHandler = [];

            // 需要拦截的事件
            const events = [
                'pointerdown', 'pointerup', 'pointercancel',
                'mousedown', 'mouseup', 'wheel', 'contextmenu',
                'dblclick', 'dragstart', 'drag', 'dragend'
            ];

            // 为每个事件添加阻止处理器
            events.forEach(event => {
                const handler = (e) => {
                    // 只处理目标是canvas本身的事件
                    if (e.target === canvas) {
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                    return true;
                };

                // 使用事件捕获以确保尽早拦截事件
                canvas.addEventListener(event, handler, { capture: true, passive: false });
                this._canvasEventHandler.push({ event, handler });
            });

            // 其他代码...
        },

        /**
         * 启用画布交互
         */
        enableCanvasInteraction() {
            const canvas = this.$refs.plot;
            if (!canvas) return;

            // 恢复画布样式
            canvas.style.cursor = 'crosshair';

            // 移除现有的事件监听器（如果有）
            if (this._canvasEventHandler) {
                this._canvasEventHandler.forEach(({ event, handler }) => {
                    canvas.removeEventListener(event, handler, { capture: true });
                });
                this._canvasEventHandler = [];
            }

            // 确保工具处于启用状态
            if (this.plots) {
                const widget = this.plots.getRoot();
                if (widget && widget.getManipulatorLayer) {
                    const manipulatorLayer = widget.getManipulatorLayer();
                    if (manipulatorLayer) {
                        manipulatorLayer.setVisible(true);
                    }
                }
            }

            console.log('已启用画布交互');
        },

        /**
         * 放大视图
         */
        zoomIn() {
            if (this.plots && this.dataLoaded && !this.zoomInProgress) {
                this.zoomInProgress = true;
                const widget = this.plots.getRoot();
                const currentLimits = widget.getModelLimits();

                if (currentLimits != null && !currentLimits.isEmpty()) {
                    const center = currentLimits.getCenter();
                    const newWidth = currentLimits.getWidth() / this.zoomFactor;
                    const newHeight = currentLimits.getHeight() / this.zoomFactor;

                    const left = center.x - newWidth / 2;
                    const top = center.y - newHeight / 2;
                    const right = center.x + newWidth / 2;
                    const bottom = center.y + newHeight / 2;

                    const scaledRect = new Rect(left, top, right, bottom);
                    widget.setModelLimits(scaledRect);

                    // 更新视图和滚动条
                    widget.invalidate();

                    // 确保滚动条更新
                    const tool = this.plots.getTool();
                    if (tool && tool.getScrollbarTool) {
                        const scrollbarTool = tool.getScrollbarTool();
                        if (scrollbarTool) {
                            scrollbarTool.update();
                        }
                    }

                    if (typeof widget.update === 'function') {
                        widget.update();
                    }
                }

                setTimeout(() => {
                    this.zoomInProgress = false;
                }, 800);
            }
        },

        /**
         * 缩小视图
         */
        zoomOut() {
            if (this.plots && this.dataLoaded && !this.zoomInProgress) {
                this.zoomInProgress = true; // 设置标志，防止重复触发

                const widget = this.plots.getRoot();
                const currentLimits = widget.getModelLimits();
                if (currentLimits != null && !currentLimits.isEmpty()) {
                    const center = currentLimits.getCenter();
                    const newWidth = currentLimits.getWidth() * this.zoomFactor;
                    const newHeight = currentLimits.getHeight() * this.zoomFactor;

                    const left = center.x - newWidth / 2;
                    const top = center.y - newHeight / 2;
                    const right = center.x + newWidth / 2;
                    const bottom = center.y + newHeight / 2;

                    const scaledRect = new Rect(left, top, right, bottom);
                    widget.setModelLimits(scaledRect);

                    // 仅调用invalidate方法进行重绘
                    widget.invalidate();

                    // 如果需要，可能还需要调用widget的其他更新方法
                    if (typeof widget.update === 'function') {
                        widget.update();
                    }
                }

                // 设置延时，确保缩放动画完成后重置标志
                setTimeout(() => {
                    this.zoomInProgress = false;
                }, 800); // 比动画时间稍长一些（动画时间已增加到700ms）
            }
        },

        /**
         * 切换线条样式面板
         */
        toggleLineStylePanel() {
            // 先清除所有工具状态
            this.clearAllTools();

            this.showLineStylePanel = !this.showLineStylePanel;

            if (this.showLineStylePanel) {
                // 启用画布交互
                this.enableCanvasInteraction();

                const widget = this.plots.getRoot();
                if (!widget) {
                    console.error('无法获取widget对象');
                    return;
                }

                const manipulatorLayer = widget.getManipulatorLayer();
                if (!manipulatorLayer) {
                    console.error('无法获取操作层');
                    return;
                }

                // 创建或更新铅笔工具
                if (!this.pencilTool) {
                    const lineStyle = new LineStyle({
                        color: this.lineStyle.color,
                        width: this.lineStyle.width,
                        pattern: this.getProcessedLinePattern(this.lineStyle.pattern)
                    });

                    this.pencilTool = new Paint({
                        'layer': manipulatorLayer,
                        'mode': PaintMode.Pencil,
                        'node': {
                            'linestyle': lineStyle,
                            'selectable': true,
                            'movable': true
                        }
                    });

                    // 添加事件监听
                    this.pencilTool.addListener('end', (tool, event) => {
                        const shape = event.getShape();
                        if (shape) {
                            // 确保线条被添加到注释层
                            if (!this.annotationLayer.indexOfChild(shape)) {
                                this.annotationLayer.addChild(shape);
                            }

                            // 设置线条为可选中状态
                            shape.setProperties({
                                'selectable': true,
                                'movable': true
                            });

                            // 强制重绘
                            this.requestRepaint();
                        }
                    });
                }

                // 设置工具为活动状态
                this.plots.getTool().add(this.pencilTool);
                this.pencilTool.setEnabled(true);

                // 显示提示消息
                this.$message.success('铅笔工具已激活，可以在画布上绘制');
            }
        },

        /**
         * 切换文本样式面板显示状态，并设置文本绘制模式
         */
        toggleTextStylePanel() {
            // 先清除所有工具状态
            this.clearAllTools();

            this.showTextStylePanel = !this.showTextStylePanel;

            if (this.showTextStylePanel) {
                // 确保文本工具已初始化
                if (!this.textTool) {
                    this.initTextAnnotation();
                }

                if (this.textTool) {
                    // 启用画布交互
                    this.enableCanvasInteraction();

                    // 设置工具为活动状态
                    this.textTool.setEnabled(true);

                    // 更新工具配置
                    this.textTool.setProperties({
                        'editmode': EditMode.Create,
                        'mode': PaintMode.Text,
                        'node': {
                            'textstyle': new TextStyle({
                                color: this.textStyle.color,
                                size: this.textStyle.size,
                                font: this.textStyle.font,
                                alignment: this.textStyle.align
                            }),
                            'selectable': true,
                            'movable': true,
                            'editable': true,
                            'preserveontextfinish': true,
                            'preserveonblur': true,
                            'autofocus': true
                        }
                    });

                    // 确保工具被添加到plots的工具链中
                    if (this.plots && this.plots.getTool()) {
                        const tools = this.plots.getTool();
                        tools.add(this.textTool);
                    }
                }
            }
        },

        /**
         * 切换填充样式面板显示状态，并设置填充绘制模式
         */
        toggleFillStylePanel() {
            // 切换面板显示状态
            this.showFillStylePanel = !this.showFillStylePanel;

            // 关闭另一个面板，避免两个面板同时打开
            if (this.showFillStylePanel) {
                this.showLineStylePanel = false;
                this.showTextStylePanel = false;

                // 当打开面板时，启用绘图功能
                if (this.annotationTool) {
                    // 启用注释工具
                    this.annotationTool.setEnabled(true);

                    // 设置填充绘制模式
                    this.annotationTool.setProperties({
                        'editmode': EditMode.Create,
                        'mode': PaintMode.Polygon
                    });

                    // 为新创建的填充区域设置样式
                    this.annotationTool.setProperties({
                        'node': {
                            'fillstyle': this.fillStyle.color
                        }
                    });

                    // 添加绘图完成监听，应用当前样式
                    if (!this._hasFillListener) {
                        this.annotationTool.addListener('end', this.onDrawComplete);
                        this._hasFillListener = true;
                    }

                    // 启用画布交互，允许在画布上绘制
                    this.enableCanvasInteraction();

                    // 显示提示消息
                    this.$message({
                        message: '已启用填充工具，请在画布上绘制填充区域',
                        type: 'success',
                        duration: 3000
                    });
                } else {
                    this.$message.error('初始化绘图工具失败，请刷新页面后重试');
                }
            } else {
                // 如果面板关闭，只禁用工具，但保留已绘制的内容
                if (this.annotationTool) {
                    // 设置为查看模式，不允许新增标注
                    this.annotationTool.setEnabled(false);

                    // 禁用画布交互但保留内容
                    this.disableCanvasInteraction(true);
                }
            }
        },

        /**
         * 绘图完成后回调，用于将形状添加到注释层并应用当前样式
         */
        onDrawComplete(tool, shape) {
            if (!shape) return;

            // 将工具设置为编辑模式
            tool.setEditMode(EditMode.EditNode);
            tool.editNode(shape);

            // 特殊处理文本形状
            if (this.showTextStylePanel && shape instanceof Text) {
                // 保存当前编辑的文本形状的引用
                this._currentEditingText = shape;

                // 立即应用当前文本样式
                this.applyTextStyleToShape(shape);

                // 确保形状添加到注释层并保持
                if (this.annotationLayer && !this.annotationLayer.indexOfChild(shape)) {
                    this.annotationLayer.addChild(shape);
                }

                // 添加到撤销栈
                this.pushToUndoStack({
                    type: 'create',
                    shape: shape
                });

                // 添加文本变更事件监听
                shape.on('textchanged', () => {
                    const text = shape.getText();
                    if (text && text.trim() !== '') {
                        // 确保文本保持在注释层中
                        if (!this.annotationLayer.indexOfChild(shape)) {
                            this.annotationLayer.addChild(shape);
                        }
                        this.requestRepaint();
                    }
                });

                // 添加失焦事件监听
                shape.on('blur', () => {
                    const text = shape.getText();
                    if (text && text.trim() !== '') {
                        // 确保文本保持在注释层中
                        if (!this.annotationLayer.indexOfChild(shape)) {
                            this.annotationLayer.addChild(shape);
                        }
                        this.requestRepaint();
                    }
                });

                // 确保画布保持可交互状态
                this.enableCanvasInteraction();
            } else if (this.showLineStylePanel) {
                this.applyLineStyleToShape(shape);
            } else if (this.showFillStylePanel) {
                this.applyFillStyleToShape(shape);
            }

            // 刷新显示
            this.requestRepaint();
        },

        /**
         * 将线条样式应用到指定形状
         * @param {Object} shape 要应用样式的形状
         */
        applyLineStyleToShape(shape) {
            if (!shape) return;

            try {
                // 创建线条样式对象
                const lineStyleObj = new LineStyle(
                    this.lineStyle.color,
                    this.lineStyle.width,
                    this.getProcessedLinePattern(this.lineStyle.pattern)
                );

                // 应用线条样式到形状
                shape.setProperties({
                    'linestyle': lineStyleObj
                });

                // 刷新图表
                shape.invalidate();

                // 使用widget的invalidate方法代替plots.redraw()
                if (this.plots && this.plots.getRoot()) {
                    this.plots.getRoot().invalidate();
                }

                this.$message.success('线条样式已应用到形状');
            } catch (error) {
                console.error('应用线条样式到形状失败:', error);
                this.$message.error('应用线条样式失败: ' + error.message);
            }
        },

        /**
         * 将文本样式应用到指定形状
         * @param {Object} shape 要应用样式的形状
         */
        applyTextStyleToShape(shape) {
            if (!shape) return;

            try {
                // 创建文本样式对象
                const textStyleObj = new TextStyle({
                    color: this.textStyle.color,
                    alignment: this.textStyle.align,
                    baseline: 'middle',
                    font: this.createFontString()
                });

                // 设置节点属性
                shape.setProperties({
                    'textstyle': textStyleObj,
                    'sizemode': this.textStyle.fixedFont ?
                        (SizeMode.FixedWidth | SizeMode.FixedHeight) :
                        SizeMode.WrappedWidth,
                    'selectable': true,
                    'movable': true,
                    'editable': true,
                    'preserveontextfinish': true,
                    'preserveonblur': true,
                    'autofocus': true
                });

                // 确保文本保持在注释层中
                if (!this.annotationLayer.indexOfChild(shape)) {
                    this.annotationLayer.addChild(shape);
                }

                // 刷新显示
                this.requestRepaint();
            } catch (error) {
                console.error('应用文本样式失败:', error);
                this.$message.error('应用文本样式失败: ' + error.message);
            }
        },

        /**
         * 将填充样式应用到指定形状
         * @param {Object} shape 要应用样式的形状
         */
        applyFillStyleToShape(shape) {
            if (!shape) return;

            try {
                // 处理透明度（如果有）
                let color = this.fillStyle.color;
                if (typeof this.fillStyle.opacity === 'number') {
                    // 如果是rgba颜色，则调整透明度
                    if (color.startsWith('rgba')) {
                        // 解析rgba颜色
                        const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([.\d]+)\)/);
                        if (rgbaMatch) {
                            const r = rgbaMatch[1];
                            const g = rgbaMatch[2];
                            const b = rgbaMatch[3];
                            const newAlpha = this.fillStyle.opacity / 100;
                            color = `rgba(${r}, ${g}, ${b}, ${newAlpha})`;
                        }
                    }
                    // 如果是普通颜色，转换为rgba
                    else if (color.startsWith('#')) {
                        // 将HEX转换为RGB
                        const hex = color.substring(1);
                        const r = parseInt(hex.substring(0, 2), 16);
                        const g = parseInt(hex.substring(2, 4), 16);
                        const b = parseInt(hex.substring(4, 6), 16);
                        const a = this.fillStyle.opacity / 100;
                        color = `rgba(${r}, ${g}, ${b}, ${a})`;
                    }
                }

                // 创建填充样式对象
                let fillStyleObj;

                if (this.fillStyle.pattern === 'None') {
                    // 如果是None，设置为透明填充 - 使用对象配置格式
                    fillStyleObj = new FillStyle({
                        color: 'rgba(0,0,0,0)'
                    });
                } else if (this.fillStyle.pattern === 'Solid') {
                    // 纯色填充 - 使用对象配置格式
                    fillStyleObj = new FillStyle({
                        color: color
                    });
                } else {
                    // 对于其他填充模式，尝试使用模式图案
                    const pattern = this.FILL_PATTERNS[this.fillStyle.pattern];
                    if (pattern) {
                        // 创建纯色填充作为临时样式
                        fillStyleObj = new FillStyle({
                            color: color
                        });

                        // 异步加载图案填充
                        this.loadPatternFillAsync(shape, pattern, color);

                        // 由于图案填充是异步的，这里直接返回
                        return;
                    } else {
                        // 如果没有找到模式，使用纯色填充
                        fillStyleObj = new FillStyle({
                            color: color
                        });
                    }
                }

                // 应用填充样式到形状
                if (fillStyleObj) {
                    shape.setProperties({
                        'fillstyle': fillStyleObj
                    });
                }

                // 重绘图形
                this.$nextTick(() => {
                    this.handleShapeUpdated(shape);
                });

                this.$message.success('填充样式已应用到形状');
            } catch (error) {
                console.error('应用填充样式到形状失败:', error);
                this.$message.error('应用填充样式失败: ' + error.message);
            }
        },

        /**
         * 根据线条样式键获取预览样式
         * @param {String} key 线条样式键名
         * @returns {Object} CSS样式对象
         */
        getLinePatternStyle(key) {
            let dashStyle = '';

            // 使用处理后的线条模式
            const patternArray = this.getProcessedLinePattern(key);
            if (patternArray && patternArray.length > 0) {
                dashStyle = patternArray.join('px ') + 'px';
            }

            return {
                background: 'transparent',
                backgroundImage: `url(${this.LINE_PATTERNS[key]})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                backgroundPosition: 'center',
                height: '20px',
                width: '100%',
                margin: '5px 0'
            };
        },

        /**
         * 获取填充样式预览的样式对象
         * @param {string} key 填充样式的键名
         * @returns {Object} CSS样式对象
         */
        getFillPatternStyle(key) {
            // 基本样式对象
            const baseStyle = {
                height: '24px',
                width: '100%',
                marginTop: '5px',
                marginBottom: '5px',
                border: '1px solid #ddd',
                background: 'white' // 设置白色背景以便更好显示样式
            };

            // 如果是Solid模式，直接使用设置的颜色
            if (key === 'Solid') {
                return {
                    ...baseStyle,
                    background: this.fillStyle.color
                };
            }

            // 如果是None，显示透明背景
            if (key === 'None') {
                return {
                    ...baseStyle,
                    background: 'transparent'
                };
            }

            // 使用FILL_PATTERNS中的URL作为背景
            if (this.FILL_PATTERNS && this.FILL_PATTERNS[key]) {
                return {
                    ...baseStyle,
                    backgroundImage: `url(${this.FILL_PATTERNS[key]})`,
                    backgroundRepeat: 'repeat',
                    backgroundSize: 'auto'
                };
            }

            // 默认返回基本样式
            return baseStyle;
        },

        /**
         * 更新线条样式
         */
        updateLineStyle() {
            try {
                // 更新线条样式
                if (this.pencilTool) {
                    const lineStyle = new LineStyle({
                        color: this.lineStyle.color,
                        width: this.lineStyle.width,
                        pattern: this.getProcessedLinePattern(this.lineStyle.pattern)
                    });

                    this.pencilTool.setProperties({
                        'node': {
                            'linestyle': lineStyle
                        }
                    });
                }

                // 原有的更新逻辑
                this.lastAppliedStyles.line = { ...this.lineStyle };
                this.styleUpdateError = false;

                // 使用防御性检查和后备重绘逻辑
                if (this.plots) {
                    // 尝试使用requestRepaint
                    if (typeof this.plots.requestRepaint === 'function') {
                        this.plots.requestRepaint();
                    }
                    // 后备方案1：使用redraw
                    else if (typeof this.plots.redraw === 'function') {
                        this.plots.redraw();
                    }
                    // 后备方案2：使用root的invalidate
                    else if (this.plots.getRoot && typeof this.plots.getRoot === 'function') {
                        const root = this.plots.getRoot();
                        if (root && typeof root.invalidate === 'function') {
                            root.invalidate();
                        }
                    }
                }
            } catch (error) {
                console.error('更新线条样式失败:', error);
                this.styleUpdateError = true;
                this.$message.error('更新线条样式失败: ' + error.message);
            }
        },

        /**
         * 更新文本样式（立即应用到图表）
         */
        updateTextStyle() {
            try {
                // 获取文本样式预览元素
                const textPreview = this.$refs.textStylePreviewCanvas;
                if (!textPreview) {
                    console.error('找不到文本预览元素');
                    return;
                }

                // 更新文本样式预览
                textPreview.style.color = this.textStyle.color;
                textPreview.style.fontFamily = this.textStyle.font;
                textPreview.style.fontSize = `${this.textStyle.size}px`;
                textPreview.style.fontWeight = this.textStyle.bold ? 'bold' : 'normal';
                textPreview.style.fontStyle = this.textStyle.italic ? 'italic' : 'normal';
                textPreview.style.textAlign = this.textStyle.align;
                textPreview.style.borderRadius = `${this.textStyle.borderRadius}px`;

                // 立即应用样式到当前选中的形状
                if (this.annotationTool && this.annotationTool.getShape()) {
                    const shape = this.annotationTool.getShape();

                    // 创建文本样式对象
                    const fontString = this.createFontString();
                    const textStyleObj = new TextStyle(
                        this.textStyle.color,
                        'middle',
                        this.textStyle.align,
                        fontString
                    );

                    // 准备属性对象
                    const nodeProps = {
                        'textstyle': textStyleObj,
                        'wrap': this.textStyle.wrap,
                        'ellipsis': this.textStyle.ellipsis
                    };

                    // 设置文本换行模式
                    if (this.textStyle.wrap) {
                        nodeProps['sizemode'] = SizeMode.WrappedWidth;
                    }

                    // 应用样式到形状
                    shape.setProperties(nodeProps);

                    // 保存到撤销栈
                    this.pushToUndoStack({
                        type: 'style',
                        shape: shape,
                        properties: { ...nodeProps }
                    });

                    // 触发重绘
                    this.requestRepaint();
                }
            } catch (error) {
                console.error('应用文本样式失败:', error);
                this.$message.error('应用文本样式失败: ' + error.message);
            }
        },

        // 创建字体字符串
        createFontString() {
            return (this.textStyle.italic ? 'italic ' : '') +
                (this.textStyle.bold ? 'bold ' : '') +
                this.textStyle.size + 'px ' +
                this.textStyle.font;
        },

        /**
         * 更新填充样式（立即应用到图表）
         */
        updateFillStyle() {
            console.log('填充样式已更新:', this.fillStyle);

            // 立即应用样式到当前选中的形状
            if (this.annotationTool && this.annotationTool.getShape()) {
                const shape = this.annotationTool.getShape();

                try {
                    // 处理透明度（如果有）
                    let color = this.fillStyle.color;
                    const opacity = this.fillStyle.opacity || 100;

                    // 将透明度转换为0-1范围
                    const normalizedOpacity = opacity / 100;

                    // 创建带透明度的颜色
                    if (color.startsWith('rgba')) {
                        // 已经是rgba格式，修改透明度
                        const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([.\d]+)\)/);
                        if (rgbaMatch) {
                            const r = rgbaMatch[1];
                            const g = rgbaMatch[2];
                            const b = rgbaMatch[3];
                            color = `rgba(${r}, ${g}, ${b}, ${normalizedOpacity})`;
                        }
                    } else if (color.startsWith('#')) {
                        // 将HEX转换为RGBA
                        const hex = color.substring(1);
                        const r = parseInt(hex.substring(0, 2), 16);
                        const g = parseInt(hex.substring(2, 4), 16);
                        const b = parseInt(hex.substring(4, 6), 16);
                        color = `rgba(${r}, ${g}, ${b}, ${normalizedOpacity})`;
                    }

                    // 创建填充样式对象
                    let fillStyleObj;

                    // 根据模式创建填充样式
                    switch (this.fillStyle.pattern) {
                        case 'None':
                            // 透明填充 - 使用对象配置格式
                            fillStyleObj = new FillStyle({
                                color: 'rgba(0,0,0,0)'
                            });
                            break;

                        case 'Solid':
                            // 纯色填充 - 使用对象配置格式
                            fillStyleObj = new FillStyle({
                                color: color
                            });
                            break;

                        default:
                            // 尝试使用模式图案
                            const pattern = this.FILL_PATTERNS[this.fillStyle.pattern];
                            if (pattern) {
                                // 先创建简单的颜色填充作为临时样式 - 使用对象配置格式
                                fillStyleObj = new FillStyle({
                                    color: color
                                });

                                // 异步加载图案
                                this.loadPatternFillAsync(shape, pattern, color);

                                // 由于图案加载是异步的，我们在这里不需要继续处理
                                return;
                            } else {
                                // 默认纯色填充 - 使用对象配置格式
                                fillStyleObj = new FillStyle({
                                    color: color
                                });
                            }
                            break;
                    }

                    // 应用填充样式到形状
                    if (fillStyleObj) {
                        shape.setProperties({
                            'fillstyle': fillStyleObj
                        });
                    }

                    // 重绘图形
                    this.$nextTick(() => {
                        // 直接对形状调用invalidate
                        if (shape && typeof shape.invalidate === 'function') {
                            shape.invalidate();
                        }

                        // 对画布根组件调用invalidate方法
                        if (this.plots && this.plots.getRoot()) {
                            const root = this.plots.getRoot();
                            root.invalidate();

                            // 如果有update方法，调用它
                            if (typeof root.update === 'function') {
                                root.update();
                            }

                            // 使用requestAnimationFrame确保UI更新
                            requestAnimationFrame(() => {
                                if (this.plots && this.plots.getRoot()) {
                                    this.plots.getRoot().invalidate();

                                    // 强制重绘画布
                                    if (this.plots.redraw && typeof this.plots.redraw === 'function') {
                                        this.plots.redraw();
                                    }
                                }
                            });
                        }
                    });
                } catch (error) {
                    console.error('实时应用填充样式失败:', error);
                    this.$message.error('应用填充样式失败: ' + error.message);
                }
            }

            // 如果设置了新打开的注释工具，也更新其节点样式
            if (this.annotationTool && this.annotationTool.isEnabled()) {
                try {
                    // 处理透明度
                    let color = this.fillStyle.color;
                    const opacity = this.fillStyle.opacity || 100;
                    const normalizedOpacity = opacity / 100;

                    // 创建带透明度的颜色
                    if (color.startsWith('#')) {
                        const hex = color.substring(1);
                        const r = parseInt(hex.substring(0, 2), 16);
                        const g = parseInt(hex.substring(2, 4), 16);
                        const b = parseInt(hex.substring(4, 6), 16);
                        color = `rgba(${r}, ${g}, ${b}, ${normalizedOpacity})`;
                    }

                    // 创建填充样式对象
                    let fillStyle;
                    if (this.fillStyle.pattern === 'None') {
                        fillStyle = new FillStyle({
                            color: 'rgba(0,0,0,0)'
                        });
                    } else {
                        fillStyle = new FillStyle({
                            color: color
                        });
                    }

                    // 设置节点属性
                    this.annotationTool.setProperties({
                        'node': {
                            'fillstyle': fillStyle
                        }
                    });
                } catch (error) {
                    console.error('更新注释工具填充样式失败:', error);
                }
            }
        },

        /**
         * 异步加载图案填充
         * @param {Object} shape 要应用填充的形状
         * @param {String} patternUrl 图案URL
         * @param {String} color 基础颜色
         */
        loadPatternFillAsync(shape, patternUrl, color) {
            if (!shape || !patternUrl) return;

            // 使用纯色填充作为默认样式
            try {
                if (shape && !shape.isDisposed()) {
                    // 使用对象配置格式创建FillStyle
                    const solidFillStyle = new FillStyle({
                        color: color
                    });

                    shape.setProperties({
                        'fillstyle': solidFillStyle
                    });

                    // 应用纯色后立即重绘
                    this.forceRedraw();
                }
            } catch (e) {
                console.error('应用纯色填充样式失败:', e);
            }

            // 由于直接使用图像创建FillStyle有问题，这里使用可替代的方法
            // 1. 先检查浏览器是否支持pattern填充
            const testCanvas = document.createElement('canvas');
            const testCtx = testCanvas.getContext('2d');
            if (!testCtx) {
                console.warn('浏览器不支持Canvas，无法创建图案填充');
                return;
            }

            const img = new Image();

            // 添加错误处理
            img.onerror = (error) => {
                console.error('图案加载失败:', error);
            };

            // 图案加载成功处理
            img.onload = () => {
                try {
                    if (shape && !shape.isDisposed()) {
                        try {
                            // 修正方法1：使用ImagePattern创建图案，然后再创建FillStyle
                            const imagePattern = new ImagePattern({
                                'url': patternUrl
                            });

                            const patternFillStyle = new FillStyle({
                                color: color,
                                pattern: imagePattern
                            });

                            shape.setProperties({
                                'fillstyle': patternFillStyle
                            });
                            this.forceRedraw();
                        } catch (e) {
                            console.warn('使用ImagePattern创建图案填充失败，尝试替代方法:', e);

                            try {
                                // 尝试方法2：直接使用URL作为图案
                                const patternFillStyle = new FillStyle(color, patternUrl);

                                shape.setProperties({
                                    'fillstyle': patternFillStyle
                                });
                                this.forceRedraw();
                            } catch (e2) {
                                console.warn('使用URL作为图案参数失败，图案填充不可用:', e2);
                                // 回退到纯色填充，已在方法开始处应用
                            }
                        }
                    }
                } catch (e) {
                    console.error('应用图案填充失败:', e);
                }
            };

            // 设置图像源
            img.src = patternUrl;
        },

        /**
         * 强制重绘画布
         */
        forceRedraw() {
            this.$nextTick(() => {
                if (this.plots && this.plots.getRoot()) {
                    const root = this.plots.getRoot();
                    root.invalidate();

                    if (typeof root.update === 'function') {
                        root.update();
                    }

                    // 使用requestAnimationFrame确保UI更新完成后再重绘
                    requestAnimationFrame(() => {
                        if (this.plots && this.plots.getRoot()) {
                            this.plots.getRoot().invalidate();

                            if (this.plots.redraw && typeof this.plots.redraw === 'function') {
                                this.plots.redraw();
                            }
                        }
                    });
                }
            });
        },

        /**
         * 应用线条样式到图表
         */
        applyLineStyle() {
            // 如果有选中的形状，则应用样式到形状
            if (this.annotationTool && this.annotationTool.getShape()) {
                this.applyLineStyleToShape(this.annotationTool.getShape());
                return;
            }

            // 否则应用样式到整个图表（原有功能）
            if (!this.plots || !this.dataLoaded) {
                this.$message.warning('请等待数据加载完成');
                return;
            }

            const widget = this.plots.getRoot();
            if (!widget) {
                this.$message.warning('获取图表组件失败');
                return;
            }

            try {
                // 创建线条样式对象
                const lineStyleObj = new LineStyle(
                    this.lineStyle.color,
                    this.lineStyle.width,
                    this.getProcessedLinePattern(this.lineStyle.pattern)
                );

                // 应用线条样式到图表
                const pipeline = widget.getPipeline();
                if (pipeline) {
                    // 设置线条样式
                    pipeline.setOptions({
                        'plot': {
                            'line': {
                                'style': lineStyleObj
                            }
                        }
                    });

                    // 刷新图表
                    widget.invalidate();
                    if (typeof widget.update === 'function') {
                        widget.update();
                    }

                    this.$message.success('线条样式已应用');
                } else {
                    throw new Error('获取管道失败');
                }
            } catch (error) {
                console.error('应用线条样式失败:', error);
                this.$message.error('应用线条样式失败: ' + error.message);
            }
        },

        /**
         * 应用文本样式到图表
         */
        applyTextStyle() {
            // 如果有选中的形状，则应用样式到形状
            if (this.annotationTool && this.annotationTool.getShape()) {
                this.applyTextStyleToShape(this.annotationTool.getShape());
            }

            // 关闭文本样式面板
            this.showTextStylePanel = false;

            this.$message.success('文本样式已确认应用并关闭面板');
        },

        /**
         * 应用填充样式到图表或形状
         */
        applyFillStyle() {
            // 如果有选中的形状，则应用样式到形状
            if (this.annotationTool && this.annotationTool.getShape()) {
                this.applyFillStyleToShape(this.annotationTool.getShape());
                return;
            }

            // 否则应用样式到整个图表
            if (!this.plots || !this.dataLoaded) {
                this.$message.warning('请等待数据加载完成');
                return;
            }

            const widget = this.plots.getRoot();
            if (!widget) {
                this.$message.warning('获取图表组件失败');
                return;
            }

            try {
                // 创建填充样式对象
                let fillStyleObj;

                if (this.fillStyle.pattern === 'None') {
                    // 透明填充
                    fillStyleObj = new FillStyle({
                        color: 'rgba(0,0,0,0)'
                    });
                } else {
                    // 使用对象创建方式
                    const fillOptions = {
                        color: this.fillStyle.color
                    };

                    // 如果有透明度，设置透明度
                    if (typeof this.fillStyle.opacity === 'number') {
                        fillOptions.opacity = this.fillStyle.opacity / 100;
                    }

                    fillStyleObj = new FillStyle(fillOptions);
                }

                // 应用填充样式到图表
                const pipeline = widget.getPipeline();
                if (pipeline) {
                    // 设置填充样式
                    pipeline.setOptions({
                        'plot': {
                            'fill': {
                                'style': fillStyleObj
                            }
                        }
                    });

                    // 刷新图表
                    widget.invalidate();
                    // 使用正确的方法重绘
                    if (this.plots && this.plots.getRoot()) {
                        this.plots.getRoot().invalidate();
                    }

                    // 如果有redraw方法，调用它
                    if (this.plots && typeof this.plots.redraw === 'function') {
                        this.plots.redraw();
                    }

                    this.$message.success('填充样式已应用');
                } else {
                    throw new Error('获取管道失败');
                }
            } catch (error) {
                console.error('应用填充样式失败:', error);
                this.$message.error('应用填充样式失败: ' + error.message);
            }
        },

        /**
         * 重置线条样式
         */
        resetLineStyle() {
            this.lineStyle = { ...this.initialLineStyle };
            this.$message.success('线条样式已重置');
        },

        /**
         * 重置文本样式
         * 注意：重置后会立即应用到当前选中的形状上
         */
        resetTextStyle() {
            // 确保初始化样式中包含所有新属性
            if (!this.initialTextStyle.width) this.initialTextStyle.width = 2;
            if (!this.initialTextStyle.pattern) this.initialTextStyle.pattern = 'Solid';
            if (!this.initialTextStyle.bgColor) this.initialTextStyle.bgColor = '#000000';
            if (!this.initialTextStyle.bgPattern) this.initialTextStyle.bgPattern = 'None';
            if (!this.initialTextStyle.borderRadius) this.initialTextStyle.borderRadius = 0;
            if (this.initialTextStyle.fixedFont === undefined) this.initialTextStyle.fixedFont = false;

            // 重置为初始样式
            this.textStyle = { ...this.initialTextStyle };

            // 更新预览并立即应用到形状上
            this.updateTextStyle();

            this.$message.success('文本样式已重置并应用');
        },

        /**
         * 重置填充样式
         */
        resetFillStyle() {
            this.fillStyle = { ...this.initialFillStyle };
            this.$message.success('填充样式已重置');
        },

        /**
         * 导出当前视图为图片
         */
        async exportToImage() {
            if (!this.plots || !this.dataLoaded) {
                this.$message.warning('请等待数据加载完成');
                return;
            }

            this.exporting = true;
            try {
                const canvas = this.$refs.plot;
                const widget = this.plots.getRoot();
                console.log('canvas:', canvas);
                console.log('widget:', widget);

                // 确保widget和pipeline都已初始化
                if (!widget || !widget.getPipeline()) {
                    throw new Error('数据未正确初始化');
                }
                // 获取画布尺寸
                const width = canvas.clientWidth || 800;
                const height = canvas.clientHeight || 600;
                console.log('width:', width);
                console.log('height:', height);

                // 创建真实DOM中的img元素
                let imgElement = document.createElement('img');
                imgElement.width = width;
                imgElement.height = height;
                imgElement.style.position = 'absolute';
                imgElement.style.left = '-9999px';  // 隐藏图像
                document.body.appendChild(imgElement);

                // 使用Promise处理图像加载和错误
                const downloadImage = () => {
                    return new Promise((resolve, reject) => {
                        // 添加安全检查，避免错误
                        try {
                            imgElement.onload = () => {
                                try {
                                    // 创建下载链接
                                    const link = document.createElement('a');
                                    link.href = imgElement.src;
                                    link.download = 'seismic_image.png';
                                    document.body.appendChild(link);
                                    link.click();

                                    // 清理DOM
                                    setTimeout(() => {
                                        try {
                                            if (document.body.contains(link)) {
                                                document.body.removeChild(link);
                                            }
                                            if (document.body.contains(imgElement)) {
                                                document.body.removeChild(imgElement);
                                            }
                                        } catch (e) {
                                            console.error('清理DOM元素失败:', e);
                                        }
                                        resolve();
                                    }, 100);
                                } catch (e) {
                                    console.error('处理图像下载失败:', e);
                                    reject(e);
                                }
                            };

                            imgElement.onerror = (error) => {
                                console.error('图像加载失败:', error);
                                try {
                                    if (document.body.contains(imgElement)) {
                                        document.body.removeChild(imgElement);
                                    }
                                } catch (e) {
                                    console.error('清理图像元素失败:', e);
                                }
                                reject(new Error('图像加载失败'));
                            };
                        } catch (e) {
                            console.error('设置图像事件处理失败:', e);
                            reject(e);
                        }
                    });
                };

                try {
                    const imageUrl = await NodeExport.exportToImageUrlAsync(
                        widget,
                        width * getPixelScale(),
                        height * getPixelScale(),
                        false,
                        false,
                        widget.getModelLimits()
                    );
                    console.log('imageUrl:', imageUrl);
                    imgElement.src = imageUrl;
                    await downloadImage();
                    this.$message.success('图片导出成功');
                } catch (error) {
                    console.error('导出图像URL失败:', error);
                    if (document.body.contains(imgElement)) {
                        document.body.removeChild(imgElement);
                    }
                    throw error;
                }
            } catch (error) {
                console.error('导出图片失败:', error);
                this.$message.error('导出图片失败: ' + (error.message || '未知错误'));
            } finally {
                this.exporting = false;
            }
        },

        /**
         * 处理文件选择和数据加载
         */
        handleFileSelect(plot) {
            // 设置SEGY文件URL和文件名
            let url = process.env.VUE_APP_BASE_API + "/ndy/dz/getSegyDataFile?fileName=density.segy"
            let fileName = 'density.segy'

            // 获取SEGY文件数据
            fetch(url, { headers: { Authorization: "Bearer " + getToken() } })
                .then((response) => response.blob())
                .then((blob) => {
                    // 将blob转换为File对象
                    let filesObj = new File([blob], fileName, { type: blob.type, lastModified: Date.now() })
                    let files = []
                    files.push(filesObj)

                    const widget = plot.getRoot();
                    if (files.length > 0) {
                        const file = new LocalFile(files[0]);
                        // 读取SEGY文件元数据
                        new SegyReader(file, new StandardSegyFormat(), -6)
                            .loadMetaData((reader) => {
                                if (reader instanceof Error) {
                                    window.alert(reader.message);
                                    return;
                                }
                                // 读取数据集统计信息
                                reader.readDataSetStatistics((reader, statistics) => {
                                    // 创建地震数据管道
                                    const pipeline = new SeismicPipeline(file.name, reader, statistics);
                                    const colorProvider = SeismicColors.getDefault();

                                    // 设置颜色映射
                                    let colorMap;
                                    if (this.selectedColorMap === 'CustomGradient') {
                                        colorMap = this.createCustomColorMap('CustomGradient');
                                    } else {
                                        colorMap = colorProvider.createNamedColorMap(this.selectedColorMap);
                                    }

                                    if (colorMap) {
                                        pipeline.setColorMap(colorMap);
                                    } else {
                                        // 如果自定义颜色映射创建失败，使用默认的RedWhiteBlack
                                        pipeline.setColorMap(colorProvider.createNamedColorMap('RedWhiteBlack'));
                                    }

                                    // 设置绘图类型
                                    pipeline.setPlotType({ 'Wiggle': false, 'InterpolatedDensity': true });
                                    // 设置管道并调整视图
                                    widget.setPipeline(pipeline);
                                    widget.fitToBounds();

                                    // 等待一帧确保渲染完成
                                    requestAnimationFrame(() => {
                                        this.dataLoaded = true;
                                    });
                                });
                            });
                    }
                })
        },

        /**
         * 创建自定义颜色映射
         * @param {String} type 颜色映射类型
         * @returns {Object} 颜色映射对象
         */
        createCustomColorMap(type) {
            // 减少不必要的日志输出
            // console.log('创建自定义颜色映射:', type);
            try {
                let colorMap = null;

                switch (type) {
                    case 'CustomGradient':
                        // console.log('创建自定义渐变');

                        // 使用SeismicColors获取默认颜色提供者
                        const colorProvider = SeismicColors.getDefault();

                        // 使用RedWhiteBlue作为基础，这与Rainbow不同
                        colorMap = colorProvider.createNamedColorMap('RedWhiteBlue');

                        if (colorMap) {
                            // 不再反转颜色映射，保持红色-白色-蓝色的顺序
                            // 移除了 colorMap.reverse(); 行

                            // 设置透明度
                            colorMap.setAlpha(0.9);

                            // 尝试设置最小值和最大值范围
                            colorMap.setRange(-1, 1);

                            // 设置正向填充颜色
                            colorMap.setPositiveFillColor('#f03222');

                            // 设置负向填充颜色
                            colorMap.setNegativeFillColor('#4c4c59');

                            // 自定义颜色映射名称
                            colorMap.setName('CustomGradient');

                            // console.log('自定义渐变创建成功');
                        } else {
                            console.warn('无法创建颜色映射');
                            return null;
                        }
                        break;

                    default:
                        console.warn('未知的自定义颜色映射类型:', type);
                        return null;
                }

                // console.log('自定义颜色映射创建成功:', type);
                return colorMap;

            } catch (error) {
                console.error('创建自定义颜色映射失败:', error);
                return null;
            }
        },

        /**
         * 更改颜色方案
         */
        changeColorMap() {
            if (this.plots && this.dataLoaded) {
                const widget = this.plots.getRoot();
                const pipeline = widget.getPipeline();

                if (pipeline) {
                    try {
                        // 使用自定义渐变
                        if (this.selectedColorMap === 'CustomGradient') {
                            // console.log('正在应用自定义颜色映射...');
                            const colorMap = this.createCustomColorMap('CustomGradient');
                            if (colorMap) {
                                // console.log('应用自定义颜色映射:', colorMap.getName(), '颜色范围:', colorMap.getMinValue(), '到', colorMap.getMaxValue());

                                // 设置颜色映射
                                pipeline.setColorMap(colorMap);

                                // 尝试重新设置一些pipeline参数来强制刷新
                                pipeline.setOptions({
                                    'colors': {
                                        'colorMap': colorMap
                                    },
                                    'plot': {
                                        'type': {
                                            'Wiggle': false,
                                            'InterpolatedDensity': true
                                        }
                                    }
                                });

                                // 更彻底地刷新视图
                                // console.log('刷新视图...');
                                widget.invalidate();

                                // 使用多次延迟刷新，确保渲染完全
                                setTimeout(() => {
                                    widget.fitToBounds();
                                    // 使用正确的方法重绘
                                    if (this.plots && this.plots.getRoot()) {
                                        this.plots.getRoot().invalidate();
                                    }

                                    // console.log('再次刷新视图...');
                                    // 再次延迟刷新
                                    setTimeout(() => {
                                        widget.invalidate();
                                        // 使用正确的方法重绘
                                        if (this.plots && this.plots.getRoot()) {
                                            this.plots.getRoot().invalidate();
                                        }
                                        // console.log('视图刷新完成');
                                    }, 300);
                                }, 300);
                            } else {
                                throw new Error('无法创建自定义颜色映射');
                            }
                        } else {
                            // 处理其他颜色方案...
                            // console.log('应用标准颜色映射:', this.selectedColorMap);
                            const colorProvider = SeismicColors.getDefault();
                            const colorMap = colorProvider.createNamedColorMap(this.selectedColorMap);
                            pipeline.setColorMap(colorMap);

                            // 更新视图
                            widget.invalidate();
                            widget.fitToBounds();
                            // 使用正确的方法重绘
                            if (this.plots && this.plots.getRoot()) {
                                this.plots.getRoot().invalidate();
                            }
                        }

                        this.$message.success(`颜色映射已更改为: ${this.selectedColorMap}`);
                    } catch (error) {
                        console.error('更改颜色映射出错:', error);
                        this.$message.error(`更改颜色映射失败: ${error.message}`);
                    }
                }
            }
        },

        /**
         * 打印到PDF的辅助函数 - 将地震数据可视化内容导出为PDF文档
         * 该函数处理PDF生成的核心逻辑，包括设置纸张格式、配置页面布局和生成PDF文档
         * 
         * @param {Object} plotRoot 绘图的根节点（地震数据可视化的根元素）
         * @param {Object} exportBounds 导出的边界范围，决定内容在PDF中的显示区域
         * @param {Object} printSettings 打印设置，包含纸张格式、页边距等
         * @param {Boolean} includeAnnotations 是否包含注释
         * @returns {Object|null} 成功时返回包含stream和filename的对象，失败时返回null
         */
        printToPdf(plotRoot, exportBounds, printSettings, includeAnnotations = false) {
            try {
                // 使用传入的打印设置，而不是硬编码值
                const mergedSettings = {
                    ...printSettings,
                    'includeAnnotations': includeAnnotations
                };

                // PDF选项 - 配置PDF文档的基本属性
                const pdfOptions = {
                    'footer': null,               // 不使用页脚
                    'header': null,               // 不使用页眉
                    'output': '导出.pdf',          // 输出文件名
                    'printSettings': mergedSettings, // 使用传入的打印设置
                    'limits': null,               // 不限制范围，使用完整内容
                    'scale': 1                    // 不进行额外缩放
                };

                // 创建布局元素并设置其边界 - 将地震数据可视化节点适配为可打印的元素
                const plotElement = new NodeAdapter(plotRoot, exportBounds)
                    .setBounds(exportBounds); // 设置元素在PDF中的显示边界

                // 创建组件数组，包含要导出的所有元素
                const components = [plotElement];

                // 创建要导出的文档 - 设置PDF导出器、数据流和文档布局
                const pdfExport = new PdfExport(); // 创建PDF导出器
                const pdfStream = new StringStream(); // 创建字符串流存储PDF数据
                // 设置保存选项，明确指定不直接保存而是显示弹窗
                pdfStream.setSaveOptions({
                    filename: pdfOptions['output'],
                    save: false, // 关键参数：设置为false表示显示弹窗而非直接保存
                    type: 'application/pdf'
                });

                // 创建复合文档元素，设置自由布局（使用导出边界的宽度和高度）
                const root = new CompositeDocumentElement(components,
                    new FreeLayout(exportBounds.getWidth(), exportBounds.getHeight()));

                // 创建文档对象，设置根元素、页眉、页脚和是否使用像素单位
                const document = new Document(root, pdfOptions['header'], pdfOptions['footer'], true);

                // 导出PDF - 将文档渲染为PDF流
                const stream = pdfExport.documentExportToPdfStream(document, pdfOptions['printSettings'], pdfStream);
                if (stream) {
                    // 如果成功生成PDF流，返回流对象和文件名
                    return {
                        stream: stream,      // PDF数据流，用于保存或显示
                        filename: pdfOptions['output'] // PDF文件名
                    };
                }
                // 如果未能生成PDF流，返回null
                return null;
            } catch (error) {
                // 捕获并记录PDF生成过程中的任何错误
                console.error('PDF生成过程中发生错误:', error);
                // 将错误抛出给调用者处理
                throw error;
            }
        },

        /**
         * 导出当前视图为PDF
         */
        async exportToPDF(data) {
            if (!this.plots || !this.dataLoaded) {
                this.$message.warning('请等待数据加载完成');
                return;
            }

            this.pdfExporting = true;
            try {
                const widget = this.plots.getRoot();
                // 确保widget已初始化
                if (!widget) {
                    throw new Error('数据未正确初始化');
                }

                // 获取导出边界
                const exportBounds = widget.getBounds();

                // 获取从对话框传来的打印设置
                const printSettings = data.printSettings;

                // 添加日志，用于调试选择的纸张格式和实际使用的设置
                console.log('PDF导出设置:', {
                    paperFormat: printSettings.paperFormat ? {
                        name: printSettings.paperFormat.getName ? printSettings.paperFormat.getName() : '未知',
                        width: printSettings.paperFormat.getWidth ? printSettings.paperFormat.getWidth() : '未知',
                        height: printSettings.paperFormat.getHeight ? printSettings.paperFormat.getHeight() : '未知',
                        unit: printSettings.units || '未知'
                    } : '未设置',
                    orientation: printSettings.orientation || '未设置',
                    scaling: printSettings.scaling || '未设置',
                    keepAspectRatio: printSettings.keepAspectRatio || false,
                    continuous: printSettings.continuous || false,
                    margins: {
                        top: printSettings.top || 0,
                        bottom: printSettings.bottom || 0,
                        left: printSettings.left || 0,
                        right: printSettings.right || 0
                    }
                });

                // 确保缩放选项设置为 FitToPage
                // 如果用户希望一张图全展示在纸张上，应该使用 FitToPage 缩放选项
                if (printSettings.scaling !== ScalingOptions.FitToPage) {
                    console.log('注意: 为确保图像完整显示，建议使用 "FitToPage" 缩放选项');
                }

                // 使用辅助函数生成PDF，传入打印设置和是否包含注释参数
                const result = this.printToPdf(widget, exportBounds, printSettings, this.printAnnotations);

                if (result && result.stream) {
                    // 保存PDF文件
                    result.stream.save(result.filename, false); // 添加false参数，表示显示保存对话框
                    this.$message.success('PDF导出成功');
                } else {
                    throw new Error('PDF导出失败');
                }
            } catch (error) {
                console.error('导出PDF时发生错误:', error);
                this.$message.error('导出PDF失败: ' + error.message);
            } finally {
                this.pdfExporting = false;
                this.showPrintDialog = false; // 关闭打印对话框
            }
        },

        // 在methods中添加handleKeyDown方法
        handleKeyDown(event) {
            // 如果正在输入文本，不处理快捷键
            if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') return;

            // 处理删除键
            if (event.key === 'Delete' || event.key === 'Backspace') {
                event.preventDefault(); // 阻止默认行为
                this.deleteAnnotation();
            }

            // 添加其他快捷键处理...
            if (event.ctrlKey || event.metaKey) { // metaKey 用于 Mac
                switch (event.key.toLowerCase()) {
                    case 'z':
                        event.preventDefault();
                        if (event.shiftKey) {
                            this.redo();
                        } else {
                            this.undo();
                        }
                        break;
                    case 'y':
                        event.preventDefault();
                        this.redo();
                        break;
                }
            }
        },

        /**
         * 根据文本样式键获取预览样式
         * @param {String} key 文本样式键名
         * @returns {Object} CSS样式对象
         */
        getTextPatternStyle(key) {
            const pattern = this.textPatterns[key];
            let dashStyle = '';

            if (pattern && pattern.length > 0) {
                dashStyle = pattern.join('px ') + 'px';
            }

            return {
                background: 'transparent',
                border: 'none',
                borderTop: `2px ${dashStyle ? 'dashed' : 'solid'} #000`,
                height: '1px',
                width: '100%',
                marginTop: '10px',
                backgroundSize: dashStyle || 'auto'
            };
        },

        /**
         * 根据环境背景样式键获取预览样式
         * @param {String} key 环境背景样式键名
         * @returns {Object} CSS样式对象
         */
        getBgPatternStyle(key) {
            // 基本样式对象
            const baseStyle = {
                height: '24px',
                width: '100%',
                marginTop: '5px',
                marginBottom: '5px',
                border: '1px solid #ddd',
                background: this.textStyle.bgColor
            };

            // 不同样式的预览效果
            switch (key) {
                case 'None':
                    return {
                        ...baseStyle,
                        background: 'transparent'
                    };
                case 'Solid':
                    return {
                        ...baseStyle,
                        background: this.textStyle.bgColor
                    };
                case 'Gradient':
                    return {
                        ...baseStyle,
                        background: `linear-gradient(45deg, ${this.textStyle.bgColor}, transparent)`
                    };
                case 'Pattern':
                    return {
                        ...baseStyle,
                        backgroundImage: `repeating-linear-gradient(45deg, ${this.textStyle.bgColor}, ${this.textStyle.bgColor} 2px, transparent 2px, transparent 8px)`
                    };
                default:
                    return baseStyle;
            }
        },

        /**
         * 处理铅笔工具右键点击
         * @param {MouseEvent} event 鼠标事件
         */
        handlePencilRightClick(event) {
            event.preventDefault();

            // 更新右键菜单位置
            this.contextMenu.x = event.clientX;
            this.contextMenu.y = event.clientY;

            // 显示右键菜单
            this.contextMenu.visible = true;
        },

        /**
         * 更新铅笔工具配置
         * @param {Object} config 新的配置
         */
        updatePencilConfig(config) {
            Object.assign(this.pencilConfig, config);

            // 更新标注工具属性
            if (this.annotationTool) {
                this.annotationTool.setProperties({
                    lineWidth: this.pencilConfig.lineWidth,
                    lineColor: this.pencilConfig.lineColor,
                    linePattern: this.pencilConfig.linePattern
                });
            }

            // 隐藏右键菜单
            this.contextMenu.visible = false;
        },

        /**
         * 激活铅笔工具
         */
        activatePencilTool() {
            if (this.currentTool === 'pencil') {
                this.deactivatePencilTool();
                return;
            }

            this.currentTool = 'pencil';

            if (!this.pencilTool) {
                const widget = this.plots.getRoot();
                if (!widget) {
                    console.error('无法获取widget对象');
                    return;
                }

                const manipulatorLayer = widget.getManipulatorLayer();
                if (!manipulatorLayer) {
                    console.error('无法获取操作层');
                    return;
                }

                this.pencilTool = new Paint({
                    'layer': manipulatorLayer,
                    'mode': PaintMode.Pencil,
                    'style': {
                        'color': this.pencilConfig.lineColor,
                        'width': this.pencilConfig.lineWidth,
                        'pattern': this.pencilConfig.linePattern
                    }
                });

                // 添加事件监听
                this.pencilTool.addListener('end', this.handlePencilDrawEnd);
                this.pencilTool.addListener('start', this.handlePencilDrawStart);
            }

            this.plots.getTool().add(this.pencilTool);
            this.pencilTool.setEnabled(true);

            // 添加右键菜单监听
            this.$refs.plot.addEventListener('contextmenu', this.showPencilContextMenu);
        },

        /**
         * 停用铅笔工具
         */
        deactivatePencilTool() {
            this.currentTool = null;
            if (this.pencilTool) {
                this.pencilTool.setEnabled(false);
                this.plots.getTool().remove(this.pencilTool);
            }
            this.$refs.plot.removeEventListener('contextmenu', this.showPencilContextMenu);
        },

        /**
         * 处理铅笔绘制开始
         */
        handlePencilDrawStart(tool, event) {
            if (!this.showLineStylePanel) return;

            this.pencilState.isDrawing = true;
            this.pencilState.currentPath = new Group(); // 使用Group来包装路径
            this.pencilState.lastPoint = { x: event.x, y: event.y };

            // 创建新的路径对象
            const path = new Path();

            // 设置路径样式
            path.setProperties({
                'linestyle': new LineStyle({
                    color: this.lineStyle.color,
                    width: this.lineStyle.width,
                    pattern: this.getProcessedLinePattern(this.lineStyle.pattern)
                }),
                'selectable': true,
                'movable': true
            });

            // 开始路径
            path.moveTo(event.x, event.y);

            // 将路径添加到当前Group中
            this.pencilState.currentPath.addChild(path);

            // 将Group添加到注释层
            this.annotationLayer.addChild(this.pencilState.currentPath);
        },

        /**
         * 处理铅笔绘制结束
         */
        handlePencilDrawEnd(tool, event) {
            if (!this.showLineStylePanel || !this.pencilState.isDrawing) return;

            if (this.pencilState.currentPath) {
                // 将当前路径添加到路径集合中
                this.pencilState.paths.push(this.pencilState.currentPath);

                // 添加到撤销栈
                this.pushToUndoStack({
                    type: 'add',
                    path: this.pencilState.currentPath
                });

                // 确保路径在注释层中
                if (!this.annotationLayer.hasChild(this.pencilState.currentPath)) {
                    this.annotationLayer.addChild(this.pencilState.currentPath);
                }
            }

            // 重置状态
            this.pencilState.isDrawing = false;
            this.pencilState.currentPath = null;
            this.pencilState.lastPoint = null;

            // 请求重绘
            this.requestRepaint();
        },

        /**
         * 处理铅笔绘制移动
         */
        handlePencilMove(event) {
            if (!this.showLineStylePanel || !this.pencilState.isDrawing) return;

            const currentPoint = { x: event.x, y: event.y };
            const lastPoint = this.pencilState.lastPoint;

            // 计算点之间的距离
            const distance = Math.sqrt(
                Math.pow(currentPoint.x - lastPoint.x, 2) +
                Math.pow(currentPoint.y - lastPoint.y, 2)
            );

            // 如果距离超过最小阈值，添加新点
            if (distance >= this.pencilConfig.minDistance) {
                this.pencilState.currentPath.lineTo(currentPoint.x, currentPoint.y);
                this.pencilState.lastPoint = currentPoint;

                // 请求重绘
                this.plots.requestRepaint();
            }
        },

        /**
         * 显示铅笔工具右键菜单
         */
        showPencilContextMenu(event) {
            event.preventDefault();

            // 获取鼠标位置
            const rect = this.$refs.plot.getBoundingClientRect();
            this.contextMenu.x = event.clientX - rect.left;
            this.contextMenu.y = event.clientY - rect.top;

            // 显示右键菜单
            this.contextMenu.visible = true;
        },

        /**
         * 撤销操作
         */
        undo() {
            if (this.pencilHistory.undoStack.length === 0) return;

            const action = this.pencilHistory.undoStack.pop();
            this.pencilHistory.redoStack.push(action);

            if (action.type === 'add') {
                this.annotationLayer.removeChild(action.path);
            } else if (action.type === 'delete') {
                this.annotationLayer.addChild(action.path);
            }

            this.plots.requestRepaint();
        },

        /**
         * 重做操作
         */
        redo() {
            if (this.pencilHistory.redoStack.length === 0) return;

            const action = this.pencilHistory.redoStack.pop();
            this.pencilHistory.undoStack.push(action);

            if (action.type === 'add') {
                this.annotationLayer.addChild(action.path);
            } else if (action.type === 'delete') {
                this.annotationLayer.removeChild(action.path);
            }

            this.plots.requestRepaint();
        },

        /**
         * 复制选中的路径
         */
        copySelectedPath() {
            if (!this.pencilState.selectedPath) return;
            this.pencilState.copiedPath = this.pencilState.selectedPath.clone();
        },

        /**
         * 粘贴路径
         */
        pastePath() {
            if (!this.pencilState.copiedPath) return;

            const newPath = this.pencilState.copiedPath.clone();
            // 添加一个小的偏移，以便区分
            newPath.translate(10, 10);

            this.pencilHistory.undoStack.push({
                type: 'add',
                path: newPath
            });
            this.pencilHistory.redoStack = [];

            this.annotationLayer.addChild(newPath);
            this.plots.requestRepaint();
        },

        /**
         * 删除选中的路径
         */
        deleteSelectedPath() {
            if (!this.pencilState.selectedPath) return;

            this.pencilHistory.undoStack.push({
                type: 'delete',
                path: this.pencilState.selectedPath
            });
            this.pencilHistory.redoStack = [];

            this.annotationLayer.removeChild(this.pencilState.selectedPath);
            this.pencilState.selectedPath = null;
            this.plots.requestRepaint();
        },

        /**
         * 翻转路径
         */
        flipPath(direction) {
            if (!this.pencilState.selectedPath) return;

            const bounds = this.pencilState.selectedPath.getBounds();
            const matrix = new geotoolkit.util.Matrix3x3();

            if (direction === 'vertical') {
                matrix.scale(1, -1);
                matrix.translate(0, bounds.height);
            } else {
                matrix.scale(-1, 1);
                matrix.translate(bounds.width, 0);
            }

            this.pencilState.selectedPath.transform(matrix);
            this.plots.requestRepaint();
        },

        /**
         * 移动路径层级
         */
        movePath(direction) {
            if (!this.pencilState.selectedPath) return;

            const index = this.annotationLayer.getChildren().indexOf(this.pencilState.selectedPath);
            if (direction === 'front' && index < this.annotationLayer.getChildren().length - 1) {
                this.annotationLayer.moveToFront(this.pencilState.selectedPath);
            } else if (direction === 'back' && index > 0) {
                this.annotationLayer.moveToBack(this.pencilState.selectedPath);
            }

            this.plots.requestRepaint();
        },

        getProcessedLinePattern(pattern) {
            // 如果pattern是数组，直接返回
            if (Array.isArray(pattern)) {
                return pattern;
            }

            // 如果pattern是LINESTYLE_PATTERNS的键，使用该值
            if (this.LINESTYLE_PATTERNS && this.LINESTYLE_PATTERNS[pattern]) {
                return this.LINESTYLE_PATTERNS[pattern];
            }

            // 如果pattern是LINE_PATTERNS中定义的键
            if (this.linePatterns && this.linePatterns[pattern]) {
                // 如果值看起来像是一个数组描述，解析并返回
                const patternValue = this.linePatterns[pattern];
                if (Array.isArray(patternValue)) {
                    return patternValue;
                }
            }

            // 如果pattern是textPatterns中定义的键
            if (this.textPatterns && this.textPatterns[pattern]) {
                return this.textPatterns[pattern];
            }

            // 根据常见的模式名称提供默认数组
            if (typeof pattern === 'string') {
                switch (pattern) {
                    case 'Dash':
                        return [20, 4];
                    case 'Dot':
                        return [2, 4];
                    case 'DashDot':
                        return [20, 4, 2, 4];
                    case 'DashDotDot':
                        return [20, 4, 2, 4, 2, 4];
                    case 'ShortDash':
                        return [10, 4];
                    case 'LongDash':
                        return [40, 4];
                    case 'DashLongDash':
                        return [20, 4, 40, 4];
                    case 'Solid':
                    case 'None':
                    default:
                        return []; // 默认为实线
                }
            }

            // 默认返回空数组（实线）
            console.log('使用默认实线模式，无法识别模式:', pattern);
            return [];
        },

        /**
         * 处理形状更新事件
         * @param {Object} shape 可选，指定要更新的形状
         */
        handleShapeUpdated(shape) {
            // 如果提供了形状对象，先尝试更新它
            if (shape && typeof shape.invalidate === 'function') {
                try {
                    shape.invalidate();
                } catch (error) {
                    console.error('更新形状失败:', error);
                }
            }

            // 强制重绘整个画布
            this.forceRedraw();
        },

        /**
         * 防抖函数，用于处理频繁触发的更新事件
         * @param {Function} callback 要执行的回调函数
         * @param {Number} delay 可选，指定延迟时间（毫秒）
         * @returns {Function} 防抖处理后的函数
         */
        debounce(callback, delay) {
            // 使用提供的延迟或默认值
            const debounceDelay = delay || this.updateDebounceDelay || 200;

            // 清除之前的定时器
            if (this.updateDebounceTimeout) {
                clearTimeout(this.updateDebounceTimeout);
            }

            // 优化：对于某些属性的变更，使用RAF提供更流畅的实时更新
            if (debounceDelay <= 50) {
                if (this.updateRafId) {
                    cancelAnimationFrame(this.updateRafId);
                }

                this.updateRafId = requestAnimationFrame(() => {
                    callback();
                    this.updateRafId = null;
                });
                return;
            }

            // 设置新的定时器
            this.updateDebounceTimeout = setTimeout(() => {
                callback();
                this.updateDebounceTimeout = null;
            }, debounceDelay);
        },

        /**
         * 处理窗口大小变化，调整canvas大小
         */
        handleResize() {
            // 使用防抖处理以优化性能
            if (this.resizeTimeout) {
                clearTimeout(this.resizeTimeout);
            }
            this.resizeTimeout = setTimeout(() => {
                this.adjustCanvasSize();
            }, 200); // 200ms的防抖延迟
        },

        /**
         * 调整canvas大小并重新适配内容
         */
        adjustCanvasSize() {
            if (!this.plots || !this.dataLoaded) return;

            const widget = this.plots.getRoot();
            if (!widget) return;

            // 获取当前视口尺寸
            const viewportHeight = window.innerHeight;
            const viewportWidth = window.innerWidth;

            // 重新设置canvas大小（如果需要）
            const canvas = this.$refs.plot;
            if (canvas) {
                // 要求plots重新计算大小
                this.plots.updateSize();

                // 调整视图以适应内容
                widget.fitToBounds();

                // 刷新显示
                widget.invalidate();
            }
        },

        /**
         * 处理鼠标移动事件，获取鼠标悬停位置的样本数据
         * @param {MouseEvent} event 鼠标事件对象
         */
        handleMouseMove(event) {
            if (!this.plots || !this.dataLoaded) return;

            try {
                const widget = this.plots.getRoot();
                if (!widget) return;

                // 获取鼠标在画布上的位置
                const canvas = this.$refs.plot;
                if (!canvas) return;

                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;

                // 检查鼠标是否在画布范围内
                if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
                    this.isHovering = false;
                    return;
                }

                this.isHovering = true;

                // 获取坐标变换
                let modelPos;
                try {
                    // 尝试使用getSceneTransform或类似方法
                    const transform = widget.getSceneTransform ?
                        widget.getSceneTransform() :
                        (widget.getWorldTransform ? widget.getWorldTransform() : null);

                    if (transform && typeof transform.transform === 'function') {
                        modelPos = transform.transform(x, y);
                    } else {
                        // 使用直接坐标或其他可用方法
                        modelPos = { x: x, y: y };
                    }
                } catch (error) {
                    console.warn('坐标转换失败:', error);
                    modelPos = { x: x, y: y };
                }

                // 更新cursorInfo的depth和trace值
                this.cursorInfo = {
                    depth: modelPos.y,
                    trace: modelPos.x,
                    value: null
                };

                // 方法1: 尝试从pipeline获取数据值
                let valueFound = false;
                try {
                    const pipeline = widget.getPipeline ?
                        widget.getPipeline() :
                        (this.plots.getPipeline ? this.plots.getPipeline() : null);

                    if (pipeline) {
                        // 尝试各种数据访问方法
                        let dataSource = null;
                        if (typeof pipeline.getDataSource === 'function') {
                            dataSource = pipeline.getDataSource();
                        } else if (typeof pipeline.getSeismicData === 'function') {
                            dataSource = pipeline.getSeismicData();
                        } else if (typeof pipeline.getData === 'function') {
                            dataSource = pipeline.getData();
                        }

                        if (dataSource) {
                            let value = null;
                            // 尝试各种数据值获取方法
                            if (typeof dataSource.getValue === 'function') {
                                value = dataSource.getValue(modelPos.x, modelPos.y);
                                if (value !== null && value !== undefined) {
                                    this.cursorInfo.value = value;
                                    valueFound = true;
                                }
                            } else if (typeof dataSource.getSampleValue === 'function') {
                                value = dataSource.getSampleValue(modelPos.x, modelPos.y);
                                if (value !== null && value !== undefined) {
                                    this.cursorInfo.value = value;
                                    valueFound = true;
                                }
                            } else if (typeof pipeline.getValue === 'function') {
                                value = pipeline.getValue(modelPos.x, modelPos.y);
                                if (value !== null && value !== undefined) {
                                    this.cursorInfo.value = value;
                                    valueFound = true;
                                }
                            }
                        }
                    }
                } catch (error) {
                    console.warn('获取数据值失败:', error);
                }

                // 方法2: 如果方法1未获取到值，直接从Canvas获取像素RGBA值
                if (!valueFound) {
                    try {
                        const ctx = canvas.getContext('2d');
                        if (ctx) {
                            // 确保坐标在canvas范围内
                            const pixelX = Math.max(0, Math.min(Math.round(x), canvas.width - 1));
                            const pixelY = Math.max(0, Math.min(Math.round(y), canvas.height - 1));

                            // 获取像素RGBA数据
                            const pixelData = ctx.getImageData(pixelX, pixelY, 1, 1).data;

                            // 将RGBA转换为单一值 (可以使用亮度或其他转换)
                            // 计算亮度: 0.299R + 0.587G + 0.114B
                            const r = pixelData[0];
                            const g = pixelData[1];
                            const b = pixelData[2];
                            const a = pixelData[3] / 255; // 归一化透明度到 0-1

                            // 始终只显示亮度值，不再根据pixelValueDisplay切换格式
                            const luminance = Math.round((0.299 * r + 0.587 * g + 0.114 * b) * a);
                            this.cursorInfo.value = luminance;
                            // ... existing code ...
                        }
                    } catch (error) {
                        console.warn('直接获取像素值失败:', error);
                    }
                }
            } catch (error) {
                console.error('处理鼠标移动事件时出错:', error);
            }
        },

        /**
         * 切换像素值显示模式 - 不再需要此方法，保留空实现以防其他地方调用
         */
        togglePixelValueDisplay() {
            // 已不再切换显示模式，此方法保留为空实现
        },

        /**
         * 获取模型坐标点
         * @param {MouseEvent|Touch} event 鼠标或触摸事件
         * @returns {Object} 模型坐标点
         */
        getModelPoint(event) {
            const canvas = this.$refs.plot;
            const rect = canvas.getBoundingClientRect();

            // 获取相对于画布的坐标
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 获取根组件
            const widget = this.plots.getRoot();

            // 获取坐标变换
            const transform = widget.getSceneTransform();

            // 转换为模型坐标
            return transform.transform(x, y);
        },

        // 处理右键菜单
        handleContextMenu(event) {
            event.preventDefault();
            if (!this.annotationTool || !this.annotationTool.getShape()) return;

            // 获取鼠标位置
            const rect = this.$refs.plot.getBoundingClientRect();
            this.contextMenu.x = event.clientX - rect.left;
            this.contextMenu.y = event.clientY - rect.top;
            this.contextMenu.visible = true;
        },

        // 检查菜单项是否启用
        isMenuItemEnabled(action) {
            switch (action) {
                case 'undo':
                    return this.undoStack.length > 0;
                case 'redo':
                    return this.redoStack.length > 0;
                case 'cut':
                case 'copy':
                case 'delete':
                    return this.annotationTool && this.annotationTool.getShape();
                case 'paste':
                    return this.clipboard !== null;
                default:
                    return true;
            }
        },

        // 处理菜单动作
        handleMenuAction(action) {
            switch (action) {
                case 'undo':
                    this.undo();
                    break;
                case 'redo':
                    this.redo();
                    break;
                case 'cut':
                    this.cut();
                    break;
                case 'copy':
                    this.copy();
                    break;
                case 'paste':
                    this.paste();
                    break;
                case 'delete':
                    this.deleteShape();
                    break;
            }
            this.contextMenu.visible = false;
        },

        // 剪切操作
        cut() {
            this.copy();
            this.deleteShape();
        },

        // 复制操作
        copy() {
            const shape = this.annotationTool.getShape();
            if (!shape) return;
            this.clipboard = {
                properties: { ...shape.getProperties() },
                type: shape.getClassName()
            };
        },

        // 删除形状
        deleteShape() {
            const shape = this.annotationTool.getShape();
            if (!shape) return;
            this.pushToUndoStack({
                type: 'delete',
                shape: shape
            });
            shape.dispose();
            this.annotationTool.editNode(null);
            this.requestRepaint();
        },

        // 添加到撤销栈
        pushToUndoStack(action) {
            this.undoStack.push(action);
            this.redoStack = []; // 清空重做栈
        },

        // 请求重绘
        requestRepaint() {
            if (this.plots) {
                const widget = this.plots.getRoot();
                if (widget) {
                    widget.invalidate();

                    // 使用requestAnimationFrame确保UI更新
                    requestAnimationFrame(() => {
                        if (this.plots && this.plots.getRoot()) {
                            this.plots.getRoot().invalidate();
                        }
                    });
                }
            }
        },

        // 添加新方法：处理文本编辑完成
        handleTextEditComplete(shape) {
            if (!shape || !shape.getText) return;

            const text = shape.getText().trim();
            if (text !== '') {
                // 确保文本被添加到注释层
                if (!this.annotationLayer.indexOfChild(shape)) {
                    this.annotationLayer.addChild(shape);
                }

                // 添加到撤销栈
                this.pushToUndoStack({
                    type: 'create',
                    shape: shape
                });

                // 更新当前编辑的文本引用
                this._currentEditingText = shape;

                // 刷新显示
                this.requestRepaint();
            }
        },

        // 初始化文本注释功能
        initTextAnnotation() {
            try {
                if (!this.plots || !this.plots.getRoot()) {
                    console.warn('plots 或 root 未初始化');
                    return;
                }

                const widget = this.plots.getRoot();

                // 确保注释层存在且正确添加到widget
                if (!this.annotationLayer) {
                    this.annotationLayer = new Group();
                    // 将注释层添加到widget的overlay层
                    if (widget.getOverlayLayer) {
                        widget.getOverlayLayer().addChild(this.annotationLayer);
                    }
                }

                // 创建文本工具
                if (!this.textTool) {
                    this.textTool = new Paint({
                        'layer': widget.getManipulatorLayer(),
                        'editmode': EditMode.Create,
                        'mode': PaintMode.Text,
                        'node': {
                            'textstyle': new TextStyle({
                                color: this.textStyle.color,
                                size: this.textStyle.size,
                                font: this.textStyle.font,
                                alignment: this.textStyle.align
                            }),
                            'selectable': true,
                            'movable': true,
                            'editable': true,
                            'preserveontextfinish': true,
                            'preserveonblur': true,
                            'autofocus': true
                        }
                    });

                    // 添加开始事件监听
                    this.textTool.addListener('start', (tool, event) => {
                        const shape = event.getShape();
                        if (shape) {
                            // 设置文本样式
                            const textStyle = new TextStyle({
                                color: this.textStyle.color,
                                size: this.textStyle.size,
                                font: this.textStyle.font,
                                alignment: this.textStyle.align
                            });

                            shape.setProperties({
                                'textstyle': textStyle,
                                'selectable': true,
                                'movable': true,
                                'editable': true,
                                'preserveontextfinish': true,
                                'preserveonblur': true,
                                'autofocus': true
                            });

                            // 立即将形状添加到注释层
                            if (!this.annotationLayer.hasChild(shape)) {
                                this.annotationLayer.addChild(shape);
                            }
                        }
                    });

                    // 添加结束事件监听
                    this.textTool.addListener('end', (tool, event) => {
                        const shape = event.getShape();
                        if (shape && shape.getText && shape.getText().trim() !== '') {
                            // 再次确保文本在注释层中
                            if (!this.annotationLayer.hasChild(shape)) {
                                this.annotationLayer.addChild(shape);
                            }

                            // 添加文本变更事件监听
                            shape.on('textchanged', () => {
                                const text = shape.getText();
                                if (text && text.trim() !== '') {
                                    // 确保文本保持在注释层中
                                    if (!this.annotationLayer.hasChild(shape)) {
                                        this.annotationLayer.addChild(shape);
                                    }
                                    // 强制重绘
                                    this.requestRepaint();
                                }
                            });

                            // 添加失焦事件监听
                            shape.on('blur', () => {
                                const text = shape.getText();
                                if (text && text.trim() !== '') {
                                    // 确保文本保持在注释层中
                                    if (!this.annotationLayer.hasChild(shape)) {
                                        this.annotationLayer.addChild(shape);
                                    }
                                    // 强制重绘
                                    this.requestRepaint();
                                }
                            });

                            // 强制重绘以确保显示
                            this.requestRepaint();
                        }
                    });
                }

                // 确保工具被添加到plots的工具链中
                if (this.plots.getTool()) {
                    const tools = this.plots.getTool();
                    // 直接添加工具，GeoToolkit会自动处理重复添加
                    tools.add(this.textTool);
                }

            } catch (error) {
                console.error('初始化文本注释失败:', error);
            }
        },

        // 添加清除所有工具状态的方法
        clearAllTools() {
            // 关闭所有面板
            this.showTextStylePanel = false;
            this.showLineStylePanel = false;

            // 禁用所有工具
            if (this.textTool) {
                this.textTool.setEnabled(false);
                if (this.plots && this.plots.getTool()) {
                    this.plots.getTool().remove(this.textTool);
                }
            }

            if (this.pencilTool) {
                this.pencilTool.setEnabled(false);
                if (this.plots && this.plots.getTool()) {
                    this.plots.getTool().remove(this.pencilTool);
                }
            }

            // 清除注释层中的所有对象
            if (this.annotationLayer) {
                try {
                    // 使用 removeAll 方法替代 removeChildren
                    this.annotationLayer.removeAll();
                } catch (error) {
                    console.warn('清除注释层失败:', error);
                    // 尝试备用方法：逐个移除子元素
                    try {
                        const children = this.annotationLayer.getChildren();
                        if (children && children.length) {
                            for (let i = children.length - 1; i >= 0; i--) {
                                this.annotationLayer.removeChild(children[i]);
                            }
                        }
                    } catch (e) {
                        console.error('清除注释层子元素失败:', e);
                    }
                }
            }

            // 禁用画布交互
            this.disableCanvasInteraction();

            // 强制重绘
            this.requestRepaint();
        },

        // 添加平移方法
        pan(node, dx, dy) {
            node.translateModel(dx, dy);
        },

        /**
         * 删除选中的形状
         */
        deleteSelectedShape() {
            if (this.selectedShape && this.annotationLayer) {
                // 从注释层中移除
                this.annotationLayer.removeChild(this.selectedShape);

                // 如果存在于 _annotations 中也移除
                if (this._annotations) {
                    const index = this._annotations.indexOf(this.selectedShape);
                    if (index > -1) {
                        this._annotations.splice(index, 1);
                    }
                }

                // 清除选中状态
                this.selectedShape = null;

                // 重绘
                this.requestRepaint();
            }
        },

        /**
         * 选中形状
         */
        selectShape(shape) {
            // 取消之前选中的形状的高亮
            if (this.selectedShape) {
                this.selectedShape.setProperties({
                    'selected': false
                });
            }

            // 设置新的选中形状
            this.selectedShape = shape;

            if (shape) {
                // 高亮显示选中的形状
                shape.setProperties({
                    'selected': true
                });
            }

            // 重绘
            this.requestRepaint();
        },

        /**
         * 处理形状点击事件
         */
        handleShapeClick(event, shape) {
            this.selectShape(shape);
        },

        // 修改原有的创建形状方法，添加点击事件监听
        createShape(/* existing parameters */) {
            // ... existing code ...

            // 添加点击事件监听
            shape.on('click', (event) => {
                this.handleShapeClick(event, shape);
            });

            // ... rest of existing code ...
        },

        // 统一的删除处理方法
        deleteAnnotation() {
            // 1. 获取注释工具和当前形状
            if (!this.annotationTool || !this.annotationTool.isEnabled()) return;

            const shape = this.annotationTool.getShape();
            if (!shape || this.annotationTool.isActive()) return;

            // 2. 从注释层移除对象
            if (this.annotationLayer && this.annotationLayer.indexOfChild(shape) >= 0) {
                this.annotationLayer.removeChild(shape);
            }

            // 3. 销毁形状对象
            shape.dispose();

            // 4. 清理历史记录
            this.annotationTool.getHistory().clear();

            // 5. 重置编辑状态
            this.annotationTool.editNode(null);

            // 6. 如果删除的是当前正在编辑的文本，清除引用
            if (shape === this._currentEditingText) {
                this._currentEditingText = null;
            }

            // 7. 刷新图表
            this.requestRepaint();

            // 8. 显示成功提示
            this.$message.success('已删除所选对象');
        },

        // 右键菜单删除处理
        onDelete() {
            this.deleteAnnotation();
        },
    },
    beforeDestroy() {
        // 移除事件监听器
        const canvas = this.$refs.plot;
        if (canvas) {
            // 移除鼠标移动事件处理器
            if (this._mouseMoveHandler) {
                canvas.removeEventListener('mousemove', this._mouseMoveHandler, { capture: true });
                this._mouseMoveHandler = null;
            } else {
                // 直接移除对handleMouseMove的引用
                canvas.removeEventListener('mousemove', this.handleMouseMove, { passive: true });
            }

            // 移除鼠标离开事件处理器
            if (this._mouseLeaveHandler) {
                canvas.removeEventListener('mouseleave', this._mouseLeaveHandler, { capture: true });
                this._mouseLeaveHandler = null;
            }
        }

        // 移除键盘事件处理函数
        window.removeEventListener('keydown', this.handleKeyDown);

        // 移除窗口大小变化监听
        window.removeEventListener('resize', this.handleResize);

        // 移除所有画布事件处理器
        if (canvas && this._canvasEventHandler) {
            this._canvasEventHandler.forEach(({ event, handler }) => {
                canvas.removeEventListener(event, handler, { capture: true });
            });
            this._canvasEventHandler = [];
        }

        // 清理定时器和RAF
        if (this.updateDebounceTimeout) {
            clearTimeout(this.updateDebounceTimeout);
            this.updateDebounceTimeout = null;
        }

        if (this.updateRafId) {
            cancelAnimationFrame(this.updateRafId);
            this.updateRafId = null;
        }

        // 清理正在加载的图案任务
        this.pendingPatternLoads = [];

        // 如果有注释工具，禁用它
        if (this.annotationTool) {
            try {
                this.annotationTool.setEnabled(false);
            } catch (error) {
                console.error('禁用注释工具时出错:', error);
            }
        }

        // 销毁图表对象
        if (this.plots) {
            try {
                // 执行必要的清理
                if (typeof this.plots.dispose === 'function') {
                    this.plots.dispose();
                }
                this.plots = null;
            } catch (error) {
                console.error('销毁绘图对象时出错:', error);
            }
        }

        // 移除事件监听
        window.removeEventListener('keydown', this.handleKeyDown);
        this.$refs.plot.removeEventListener('contextmenu', this.handleContextMenu);
    }
}
</script>

<style>
/* 画布样式 */
#canvas {
    width: 100% !important;
    height: calc(85vh - 100px) !important;
    /* 使用视口高度单位，减去其他元素的高度 */
    margin-top: 20px;
}

/* 容器样式 */
.containerBlock {
    position: relative;
    height: calc(100vh -200px);
    /* 设置容器高度以适应一屏 */
    display: flex;
    flex-direction: column;
}

.canvas-container {
    position: relative;
    flex: 1;
    border: 1px solid #dcdfe6;
    background-color: #fff;
    margin-bottom: 20px;
}

.canvas-container canvas {
    display: block;
    min-width: 100%;
    min-height: 100%;
}

/* 控制按钮组样式 */
.controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    /* 明显高于hover-layer的z-index:5 */
    display: flex;
    gap: 10px;
}

/* 按钮组样式 */
.el-button-group {
    margin-right: 10px;
}

/* 颜色选择器样式 */
.color-select {
    min-width: 150px;
    margin-right: 10px;
}

/* 颜色选项预览 */
.color-option {
    display: flex;
    align-items: center;
}

.color-preview {
    display: inline-block;
    width: 20px;
    height: 12px;
    margin-right: 8px;
    border: 1px solid #ddd;
}

/* 为每种颜色方案定义预览样式 */
.color-preview-redwhiteblack {
    background: linear-gradient(to right, red, white, black);
}

.color-preview-rainbow {
    background: linear-gradient(to right, violet, blue, cyan, green, yellow, orange, red);
}

.color-preview-whiteblack {
    background: linear-gradient(to right, white, black);
}

.color-preview-customgradient {
    background: linear-gradient(to right, red, white, blue);
}

/* 样式面板 */
.style-panel {
    position: fixed;
    top: 0;
    right: -350px;
    width: 320px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    padding: 20px;
    transition: right 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.style-panel-visible {
    right: 0;
}

.style-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.style-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.style-panel-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid #eee;
    margin-top: auto;
}

.style-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.style-label {
    width: 60px;
    color: #606266;
}

.pattern-preview-line {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
}

/* 填充样式预览 */
.pattern-preview-fill {
    width: 100%;
    height: 24px;
    border: 1px solid #ddd;
    margin: 5px 0;
}

/* 样式面板位置调整 */
.line-style-panel {
    z-index: 2001;
}

.fill-style-panel {
    z-index: 2002;
}

.text-style-panel {
    z-index: 2003;
}

/* 激活的工具按钮 */
.el-button.is-active {
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

/* 确保折叠面板内容有足够的空间 */
.el-collapse-item__content {
    padding: 10px;
}

/* 为不同宽度的屏幕做响应式调整 */
@media screen and (max-width: 768px) {
    .style-panel {
        width: 280px;
    }

    .style-label {
        width: 50px;
        font-size: 12px;
    }
}

/* 新增的填充样式相关样式 */
.style-divider {
    height: 1px;
    background-color: #EBEEF5;
    margin: 15px 0;
}

.style-section-title {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    margin-bottom: 12px;
}

/* 新增的文本样式预览样式 */
.text-style-preview-container {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #f5f7fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.text-style-preview {
    min-height: 60px;
    padding: 15px;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-family: Arial;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    word-break: break-word;
}

/* 样式选择器 */
.pattern-select {
    width: 100%;
}

/* 线条样式预览 */
.pattern-preview-text {
    height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* 环境背景样式预览 */
.pattern-preview-bg {
    height: 24px;
    width: 100%;
    border-radius: 4px;
    margin: 5px 0;
}

.text-style-preview-canvas {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
    min-height: 100px;
}

.text-style-buttons {
    display: flex;
    width: 100%;
    position: relative;
    z-index: 200;
    /* 确保按钮显示在canvas上方 */
}

.text-style-buttons .el-button-group {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    z-index: 200;
    /* 确保按钮组显示在canvas上方 */
}

.text-style-buttons .el-button {
    flex: 1;
    padding: 8px 12px;
}

/* 新增的悬停信息显示面板样式 */
.cursor-info-panel {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: transparent;
    z-index: 100;
    display: flex;
    font-size: 13px;
    gap: 5px;
    pointer-events: none;
    /* 添加此属性使鼠标事件可以穿透面板 */
}

.info-pill {
    background-color: rgba(75, 75, 75, 0.8);
    color: white;
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    /* 添加此属性使鼠标事件可以穿透信息块 */
}

.info-label {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}

.info-value {
    color: #1890ff;
    font-family: monospace;
}

/* 鼠标悬停覆盖层样式 */
.hover-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    cursor: crosshair;
    background-color: transparent;
    pointer-events: none;
    /* 关键:允许事件穿透 */
}

.pencil-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 8px 0;
    min-width: 180px;
    z-index: 2000;
}

.menu-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.menu-item:hover {
    background-color: #f5f7fa;
}

.menu-item.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.menu-item i {
    margin-right: 8px;
    font-size: 16px;
}

.menu-item .shortcut {
    margin-left: auto;
    color: #909399;
    font-size: 12px;
}

.menu-divider {
    height: 1px;
    background-color: #dcdfe6;
    margin: 4px 0;
}

.tool-button {
    margin: 0 4px;
    padding: 8px;
    border-radius: 4px;
}

.tool-button.is-active {
    background-color: #409EFF;
    color: white;
}

.mdi {
    font-size: 18px;
}

/* 右键菜单样式 */
.context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1000;
    min-width: 180px;
}

.context-menu-item {
    padding: 6px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
}

.context-menu-item:hover {
    background-color: #f5f5f5;
}

.context-menu-item.disabled {
    color: #999;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.context-menu-separator {
    height: 1px;
    background-color: #ddd;
    margin: 4px 0;
}

.shortcut {
    color: #999;
    margin-left: 16px;
    font-size: 12px;
}

.horizontal-scroll,
.vertical-scroll {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.horizontal-scroll:hover,
.vertical-scroll:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.horizontal-scroll {
    height: 8px;
    bottom: 0;
}

.vertical-scroll {
    width: 8px;
    right: 0;
}

.app-container {
    height: calc(100vh -90px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.containerBlock {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 100px);
}

.canvas-container {
    position: relative;
    flex: 1;
    border: 1px solid #dcdfe6;
    background-color: #fff;
    margin-bottom: 20px;
}

#canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.horizontal-scroll,
.vertical-scroll {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.horizontal-scroll:hover,
.vertical-scroll:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.horizontal-scroll {
    height: 8px;
    bottom: 0;
}

.vertical-scroll {
    width: 8px;
    right: 0;
}

/* 滚动条样式 */
:deep(.gt-scrollbar) {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
}

:deep(.gt-scrollbar:hover) {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

:deep(.gt-scrollbar-horizontal) {
    height: 10px !important;
}

:deep(.gt-scrollbar-vertical) {
    width: 10px !important;
}
</style>
