init
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user