327 lines
8.2 KiB
Vue
327 lines
8.2 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="header">
|
|
<svg-icon
|
|
v-if="attrs.node?.data?.secondaryMenu?.icon || !currentComponent?.hideIcon"
|
|
:name="attrs.node?.data?.secondaryMenu?.icon || currentComponent?.type"
|
|
color="#fff"
|
|
size="16"
|
|
size-unit="px"
|
|
/>
|
|
<span>{{ attrs.node?.data?.secondaryMenu?.title ||currentComponent?.title }}</span>
|
|
<div class="delete-icon" @click="onDeleteClick">
|
|
<SvgIcon name="flowDelete" size="16" size-unit="px" color="#fff" />
|
|
</div>
|
|
</div>
|
|
<div class="body" @mousedown.stop>
|
|
<component :is="currentComponent?.component" ref="componentRef" v-bind="attrs" />
|
|
</div>
|
|
<div class="footer" @mousedown.stop v-if="!currentComponent?.hideFooter">
|
|
<button @click="onGenerateClick">
|
|
<svg-icon name="xingxing" size="16" size-unit="px" />
|
|
<span>Generate</span>
|
|
</button>
|
|
</div>
|
|
<div class="footer canvasEdit" @mousedown.stop v-if="currentComponent?.showCanvasEdit">
|
|
<button @click="currentComponent?.on()">
|
|
<svg-icon name="xingxing" size="16" size-unit="px" />
|
|
<span>Edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NODE_DATATYPE, NODE_DATATIER } from '../../../tools/index.d'
|
|
import { computed, ref, useAttrs, onMounted, inject, watch } from 'vue'
|
|
import CardsSelect from './cards-select.vue'
|
|
import ToRealStyle from './to-real-style.vue'
|
|
import SurfaceEdit from './surface-edit.vue'
|
|
import FastMode from './fast-mode.vue'
|
|
import SceneComposition from './scene-composition.vue'
|
|
import ColorPalette from './color-palette.vue'
|
|
import To3View from './to-3view.vue'
|
|
import To3DModel from './to-3d-model.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi, sketchAddPrintApi, sketchToThreeApi, threeToThreeViewsApi } from '@/api/flow-canvas'
|
|
|
|
// import ToVideo from './to-video.vue'
|
|
// import AddPrint from './add-print.vue'
|
|
// import ToCAD from './to-cad.vue'
|
|
const { t } = useI18n()
|
|
const attrs = useAttrs()
|
|
const componentRef = ref(null)
|
|
const components = [
|
|
{
|
|
tier: NODE_DATATIER.CARDS_SELECT,
|
|
type: NODE_DATATYPE.CARDS_SELECT,
|
|
title: 'Advanced Tools',
|
|
component: CardsSelect,
|
|
hideFooter: true,
|
|
hideIcon: true,
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.TO_REAL_STYLE,
|
|
type: NODE_DATATYPE.TO_REAL_STYLE,
|
|
title: 'To Real Style',
|
|
component: ToRealStyle,
|
|
api: toRealStyleApi
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.Fast_MODE,
|
|
type: NODE_DATATYPE.Fast_MODE,
|
|
title: 'Surface Edit',
|
|
component: SurfaceEdit,
|
|
api: sketchAddPrintApi
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.CANVAS_MODE,
|
|
type: NODE_DATATYPE.CANVAS_MODE,
|
|
title: 'Surface Edit (Canvas)',
|
|
component: FastMode,
|
|
hideFooter: true,
|
|
showCanvasEdit: true,
|
|
on: ()=>{
|
|
componentRef.value?.opCanvas()
|
|
}
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.SCENE_COMPOSITION,
|
|
type: NODE_DATATYPE.SCENE_COMPOSITION,
|
|
title: 'Scene Composition',
|
|
component: SceneComposition,
|
|
api: toSceneCompositionApi
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.COLOR_PALETTE,
|
|
type: NODE_DATATYPE.COLOR_PALETTE,
|
|
title: 'Color Palette',
|
|
component: ColorPalette,
|
|
api: toColorPaletteApi
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.TO_3D_MODEL,
|
|
type: NODE_DATATYPE.TO_3D_MODEL,
|
|
title: 'To 3D Model',
|
|
component: To3DModel,
|
|
api:sketchToThreeApi
|
|
},
|
|
{
|
|
tier: NODE_DATATIER.TO_3VIEW,
|
|
type: NODE_DATATYPE.TO_3VIEW,
|
|
title: 'To 3-View',
|
|
component: To3View,
|
|
api:threeToThreeViewsApi
|
|
}
|
|
]
|
|
const nodeManager = inject('nodeManager') as any
|
|
const stateManager = inject('stateManager') as any
|
|
const emit = defineEmits(['update-data'])
|
|
const props = defineProps({
|
|
type: {
|
|
type: String as () =>
|
|
| 'cards-select'
|
|
| 'to-real-style'
|
|
| 'surface-edit'
|
|
| 'scene-composition'
|
|
| 'color-palette'
|
|
| 'to-3d-model'
|
|
| 'to-3view',
|
|
default: 'to-real-style'
|
|
},
|
|
sketchId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const currentComponent = computed(() => {
|
|
return components.find((item) => item.type === props.type)
|
|
})
|
|
|
|
const onGenerateClick = async () => {
|
|
const data = componentRef.value?.getApiData?.() || {}
|
|
const subordNodes = stateManager.getSubordNodes(attrs.node.id)
|
|
const superiorNodeUrl = stateManager.getSuperiorNodeImage(attrs.node.data.superiorID)
|
|
if(!superiorNodeUrl)return console.log('superiorNodeUrl 找不到原始图片')
|
|
emit('update-data', componentRef.value?.data)
|
|
const apiData = {
|
|
sketchId: props.sketchId,
|
|
imageUrl: superiorNodeUrl,
|
|
...data,
|
|
}
|
|
const taskList = await currentComponent.value.api(apiData).then((rv)=>{
|
|
return rv
|
|
}) || []
|
|
// const taskList = [{taskId:'123'}]
|
|
// if (!subordNode) {
|
|
|
|
//如果是添加印花的结果就作为一级节点可以再次选择添加印花或者生成真实图
|
|
let typeList = [
|
|
NODE_DATATYPE.Fast_MODE,
|
|
NODE_DATATYPE.CANVAS_MODE,
|
|
NODE_DATATYPE.SCENE_COMPOSITION,
|
|
NODE_DATATYPE.COLOR_PALETTE,
|
|
]
|
|
let tritList = [
|
|
NODE_DATATIER.Fast_MODE,
|
|
NODE_DATATIER.CANVAS_MODE,
|
|
NODE_DATATIER.SCENE_COMPOSITION,
|
|
NODE_DATATIER.COLOR_PALETTE,
|
|
]
|
|
let tier = (tritList.includes(currentComponent.value.tier) && typeList.includes(currentComponent.value.type))?currentComponent.value.tier - 1:currentComponent.value.tier
|
|
if(NODE_DATATYPE.TO_REAL_STYLE == currentComponent.value.type && false){
|
|
//一个结果节点里面多个子节点
|
|
let imageProcessTasks = taskList
|
|
nodeManager.createResultNode({
|
|
data: {
|
|
superiorID: attrs.node.id,
|
|
superiorNodeType: attrs.node?.data?.type,
|
|
createIndexPosition: subordNodes.length,
|
|
tier: tier,
|
|
isActive: subordNodes.length == 0,
|
|
data: {
|
|
imageProcessTasks,
|
|
selectTaskId:imageProcessTasks[0].taskId,
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
taskList.forEach((item,index) => {
|
|
nodeManager.createResultNode({
|
|
data: {
|
|
superiorID: attrs.node.id,
|
|
superiorNodeType: attrs.node?.data?.type,
|
|
createIndexPosition: index + subordNodes.length,
|
|
tier: tier,
|
|
isActive: index == 0 && subordNodes.length == 0,
|
|
data: {
|
|
imageProcessTasks:[item],
|
|
selectTaskId:item.taskId,
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
//删除功能卡片
|
|
const onDeleteClick = async ()=>{
|
|
console.log(stateManager.nodes)
|
|
stateManager.deleteSubordinateAllNodes(attrs.node.id,{ isElMessageBox: true })
|
|
}
|
|
const setDate = () => {
|
|
for (const key in props.data) {
|
|
if (componentRef.value?.data?.hasOwnProperty(key)) {
|
|
componentRef.value.data[key] = props.data[key]
|
|
}
|
|
}
|
|
}
|
|
watch(
|
|
() => props.data,
|
|
(newVal) => {
|
|
setDate()
|
|
}
|
|
)
|
|
onMounted(() => {
|
|
setDate()
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.card {
|
|
width: 244px;
|
|
height: auto;
|
|
--border-radius: 16px;
|
|
border-radius: var(--border-radius);
|
|
background-color: #fff;
|
|
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
&.active {
|
|
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px #fae5d8;
|
|
}
|
|
> .header {
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
height: 50px;
|
|
background: #ff7a51;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
position: relative;
|
|
user-select: none;
|
|
> .delete-icon {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
}
|
|
> .c-svg {
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 6px;
|
|
}
|
|
> span {
|
|
font-family: Semibold;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
> .body {
|
|
cursor: initial;
|
|
padding: 16px 13px;
|
|
&:deep(> *) {
|
|
width: 100%;
|
|
> * {
|
|
margin-bottom: var(--cards-item-margin-bottom, 10px);
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
> .label {
|
|
font-size: 12px;
|
|
font-family: Medium;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
> .footer {
|
|
cursor: initial;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding: 0 13px;
|
|
padding-bottom: 16px;
|
|
> button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 110px;
|
|
height: 28px;
|
|
border-radius: 5px;
|
|
background-color: #fffcf4;
|
|
border: 1px solid #ffcf90;
|
|
font-size: 12px;
|
|
font-family: SemiBold;
|
|
cursor: pointer;
|
|
|
|
&:active {
|
|
opacity: 0.5;
|
|
}
|
|
> .c-svg {
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
&.canvasEdit{
|
|
> button{
|
|
margin: 0 8px;
|
|
width: 201px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|