144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
|
<div class="canvas">
|
|
<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
|
|
<div
|
|
class="canvas-content"
|
|
:style="{
|
|
top: `${data.y}px`,
|
|
left: `${data.x}px`,
|
|
transform: `scale(${data.scale})`
|
|
}"
|
|
>
|
|
<card type="to-real-style" />
|
|
<card type="scene-composition" />
|
|
<card type="color-palette" />
|
|
<card type="to-video" />
|
|
<card type="to-3d-model" />
|
|
<card type="to-cad" />
|
|
<card type="add-print" />
|
|
<card type="edit-material" />
|
|
</div>
|
|
</div> -->
|
|
|
|
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
|
|
<template #node-InputNode="nodeProps">
|
|
<inputNode v-bind="nodeProps" >
|
|
<template v-slot:content>{{ nodeProps.type }}
|
|
<card type="to-real-style" />
|
|
</template>
|
|
</inputNode>
|
|
</template>
|
|
<template #node-SecondaryNode="nodeProps">
|
|
<secondaryNode v-bind="nodeProps" >
|
|
<template v-slot:content>
|
|
<card type="scene-composition" />
|
|
</template>
|
|
</secondaryNode>
|
|
</template>
|
|
</VueFlow>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import card from './components/cards/index.vue'
|
|
import { useLayout } from '@/utils/treeDiagram'
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
|
|
import { useGlobalStore } from '@/stores'
|
|
import secondaryNode from './components/node/secondaryNode.vue'
|
|
import inputNode from './components/node/InputNode.vue'
|
|
const globalStore = useGlobalStore()
|
|
const data = reactive({
|
|
x: 100,
|
|
y: 200,
|
|
scale: 1
|
|
})
|
|
const canvasMain = ref<HTMLDivElement>()
|
|
const onMouseDown = (e: MouseEvent) => {
|
|
if (e.button !== 1) return
|
|
const ox = data.x
|
|
const oy = data.y
|
|
const X = e.clientX
|
|
const Y = e.clientY
|
|
const onMouseMove = (e: MouseEvent) => {
|
|
const dx = e.clientX - X
|
|
const dy = e.clientY - Y
|
|
data.x = ox + dx
|
|
data.y = oy + dy
|
|
}
|
|
const onMouseUp = (e: MouseEvent) => {
|
|
document.removeEventListener('mousemove', onMouseMove)
|
|
document.removeEventListener('mouseup', onMouseUp)
|
|
}
|
|
document.addEventListener('mousemove', onMouseMove)
|
|
document.addEventListener('mouseup', onMouseUp)
|
|
}
|
|
const onMouseWheel = (e: WheelEvent) => {
|
|
var delta = e.deltaY
|
|
var scale = data.scale - delta / 1000
|
|
if (scale < 0.2) scale = 0.2
|
|
if (scale > 10) scale = 10
|
|
data.scale = scale
|
|
}
|
|
const position = { x: 0, y: 0 }
|
|
|
|
const nodes = ref<Node[]>([
|
|
{ id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
|
|
{ id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
|
|
])
|
|
const edges = ref<Edge[]>([
|
|
{ id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
|
|
])
|
|
const { fitView } = useVueFlow()
|
|
const { layout } = useLayout()
|
|
async function layoutGraph(direction) {
|
|
setTimeout(() => {
|
|
nodes.value = layout(nodes.value, edges.value, direction)
|
|
console.log(nodes.value)
|
|
nextTick(() => {
|
|
fitView()
|
|
})
|
|
}, 0)
|
|
}
|
|
|
|
onMounted(() => {
|
|
globalStore.setHomeLeftNavCollapse(true)
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
@import "@vue-flow/core/dist/style.css";
|
|
@import "@vue-flow/core/dist/theme-default.css";
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.canvas {
|
|
// overflow-y: auto;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// align-content: flex-start;
|
|
// align-items: flex-start;
|
|
// padding: 2rem;
|
|
// gap: 2rem;
|
|
background-color: #fcf8f1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
> .canvas-main {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
> .canvas-content {
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 5rem;
|
|
transform-origin: top left;
|
|
}
|
|
}
|
|
> .vue-flow{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|