Hi.Sample.Webapi/wwwroot/disp/rendering-canvas-view-dropdown.js

export default {
    name: 'RenderingCanvasViewDropdown',
    template: `
        <div class="view-dropdown">
            <button 
                type="button"
                class="btn btn-info dropdown-toggle"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                v-if="useBootstrap"
            >
                <span class="oi oi-magnifying-glass">🔍</span>
            </button>
            <ul class="dropdown-menu" v-if="useBootstrap">
                <li><h6 class="dropdown-header">{{ viewLabel }}</h6></li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="frontLabel + ' (F1)'"
                        @click="setView('front')"
                        :disabled="!canvasReady"
                    >{{ frontLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="backLabel"
                        @click="setView('back')"
                        :disabled="!canvasReady"
                    >{{ backLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="rightLabel + ' (F2)'"
                        @click="setView('right')"
                        :disabled="!canvasReady"
                    >{{ rightLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="leftLabel"
                        @click="setView('left')"
                        :disabled="!canvasReady"
                    >{{ leftLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="topLabel + ' (F3)'"
                        @click="setView('top')"
                        :disabled="!canvasReady"
                    >{{ topLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="bottomLabel"
                        @click="setView('bottom')"
                        :disabled="!canvasReady"
                    >{{ bottomLabel }}</button>
                </li>
                <li>
                    <button 
                        type="button" 
                        class="dropdown-item text-nowrap"
                        :title="isometricLabel + ' (F4)'"
                        @click="setView('isometric')"
                        :disabled="!canvasReady"
                    >{{ isometricLabel }}</button>
                </li>
            </ul>
            
            <!-- Non-Bootstrap version -->
            <div class="view-controls" v-if="!useBootstrap">
                <button @click="setView('front')" :disabled="!canvasReady">{{ frontLabel }}</button>
                <button @click="setView('back')" :disabled="!canvasReady">{{ backLabel }}</button>
                <button @click="setView('left')" :disabled="!canvasReady">{{ leftLabel }}</button>
                <button @click="setView('right')" :disabled="!canvasReady">{{ rightLabel }}</button>
                <button @click="setView('top')" :disabled="!canvasReady">{{ topLabel }}</button>
                <button @click="setView('bottom')" :disabled="!canvasReady">{{ bottomLabel }}</button>
                <button @click="setView('isometric')" :disabled="!canvasReady">{{ isometricLabel }}</button>
                <button @click="setView('home')" :disabled="!canvasReady">{{ homeLabel }}</button>
            </div>
        </div>
    `,
    props: {
        renderingCanvas: {
            type: Object,
            default: null
        },
        useBootstrap: {
            type: Boolean,
            default: false
        },
        locale: {
            type: String,
            default: 'zh-TW'
        }
    },
    computed: {
        canvasReady() {
            return this.renderingCanvas && this.renderingCanvas.isInitialized && this.renderingCanvas.isConnected;
        },
        // Localization
        viewLabel() {
            return this.getLocalizedText('view', '視圖');
        },
        frontLabel() {
            return this.getLocalizedText('front', '前視圖');
        },
        backLabel() {
            return this.getLocalizedText('back', '後視圖');
        },
        leftLabel() {
            return this.getLocalizedText('left', '左視圖');
        },
        rightLabel() {
            return this.getLocalizedText('right', '右視圖');
        },
        topLabel() {
            return this.getLocalizedText('top', '頂視圖');
        },
        bottomLabel() {
            return this.getLocalizedText('bottom', '底視圖');
        },
        isometricLabel() {
            return this.getLocalizedText('isometric', '等角視圖');
        },
        homeLabel() {
            return this.getLocalizedText('home', '主視圖');
        }
    },
    methods: {
        async setView(viewType) {
            if (this.renderingCanvas && this.renderingCanvas.setView) {
                try {
                    await this.renderingCanvas.setView(viewType);
                } catch (err) {
                    console.error(`Failed to set view: ${err}`);
                }
            } else {
                console.warn('No rendering canvas component provided or setView method not available');
            }
        },
        
        getLocalizedText(key, defaultText) {
            // Simple localization - can be extended with actual i18n library
            const translations = {
                'en-US': {
                    view: 'View',
                    front: 'Front',
                    back: 'Back',
                    left: 'Left',
                    right: 'Right',
                    top: 'Top',
                    bottom: 'Bottom',
                    isometric: 'Isometric',
                    home: 'Home'
                },
                'zh-TW': {
                    view: '視圖',
                    front: '前視圖',
                    back: '後視圖',
                    left: '左視圖',
                    right: '右視圖',
                    top: '頂視圖',
                    bottom: '底視圖',
                    isometric: '等角視圖',
                    home: '主視圖'
                }
            };
            
            const localeTranslations = translations[this.locale] || translations['zh-TW'];
            return localeTranslations[key] || defaultText;
        }
    }
}