aida_front/src/component/home/tools/deReconstruction/canvas/argument.vue

<template>
   <div class="canvasArgument">
		<div class="label_item">
			<div >{{ $t('exportModel.Layer') }}:</div>
			<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
			<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
			<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
			<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
		</div>
		<div class="label_item" v-show="
			canvasGeneral.operation != 'movePosition' && 
			canvasGeneral.operation != 'move' && 
			canvasGeneral.brushwork.value != 'RibbonBrush' && 
			canvasGeneral.brushwork.value != 'LongfurBrush'&& 
			canvasGeneral.operation != 'zoomIn'  &&
			canvasGeneral.operation != 'zoomOut' && 
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div >{{ $t('exportModel.Size') }}:</div>
			<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
		</div>
		<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
			<div >{{ $t('exportModel.Brushwork') }}:</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
				style="width: 12rem "
				@change="canvasGeneral.brushworkChange"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
					<img style="width: 100%;" :src="item.url" alt="">
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
			<div >{{ $t('exportModel.Texture') }}:</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
				style="width: 12rem "
				@change="canvasGeneral.textureValueChange"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
					<img :src="item.url" alt="">
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item" v-show="
			canvasGeneral.operation != 'pencil' && 
			canvasGeneral.operation != 'eraser'&&
			canvasGeneral.operation != 'movePosition' && 
			canvasGeneral.operation != 'move'&&
			canvasGeneral.operation != 'text'&&
			canvasGeneral.operation != 'texture'&&
			canvasGeneral.operation != ''&& 
			canvasGeneral.operation != 'zoomIn'  && 
			canvasGeneral.operation != 'zoomOut' && 
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div >{{ $t('exportModel.FillBack') }}:</div>
			<div class="leftAlign">
				<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
				<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
			</div>
		</div>
		<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
			<div >{{ $t('exportModel.Layer') }}:</div>
			<div class="leftAlign">
				<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
				<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
				<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
				<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
			</div>
		</div> -->
		<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
			<div>Font Family</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
				style="flex: 1;width: 15rem;"
				@change="canvasGeneral.setFontFamily"
				:style="{'font-family':canvasGeneral.fontFamily}"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
					{{item.name}}
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item" style="margin-left: auto;">
			<span style="margin-right: 2rem;">Show Models</span>
			<a-switch v-model:checked="isShowBg" @change="showBg" />
		</div>
		
	</div>
</template>

<script lang="ts">
	import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
	export default defineComponent({
		components:{},
		setup(){
		    let testModal = ref(true)
			let canvasGeneral:any = inject('canvasObj')
			const data = reactive({
				colorHistoryList:[],
				operation:'',
				isShowBg:true,
			})
			const setOperation = (str:any)=>{
				data.operation = str
			}
			const setOper = ()=>{
				setOperation('')
			}
			document.addEventListener('click',setOper)
			const closeModal = ()=>{
				document.removeEventListener('click',setOper)
			}
			const showBg = ()=>{
				canvasGeneral.showBg(data.isShowBg)
			}
			return {
				canvasGeneral,
				...toRefs(data),
				testModal,
				setOperation,
				closeModal,
				showBg,
			}
		}
	});
</script>

<style lang='less' scoped>
.canvasArgument{
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	.label_item{
		margin-right: 2rem;
		position: relative;
		display: flex;
		align-items: center;
		.leftAlign{
			display: flex;
		}
		.labelHover_show{
			position: absolute;
			width: 100%;
			height: 10rem;
			top: 100%;
			z-index: 2;
			display: block;
			border-radius: 4px;
			border: 1px solid;
			padding: .5rem 1rem;
			background: #fff;
			div{
				width: 2rem;
				height: 2rem;
				margin-right: .5rem;
				margin-bottom: .5rem;
				display: inline-block;
				cursor: pointer;
			}
		}
		input{
			height: 100%;
			width: 12rem;
		}
		&.wH input{
			width: 5rem;
		}
		.title{
			margin-right: 1rem;
		}
		.icon-xiala{
			cursor: pointer;
			transform: rotate(0deg);
			height: 4rem;
			width: 4rem;
			transition: all .3s;
			line-height: 4rem;
			text-align: center;
			&.active{
				transform: rotate(180deg);
			}
		}
	}
	.label_item:hover{
		// .labelHover_show{
		// 	display: flex;
		// }
	}
}

</style>