102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<div class="canvas-test">
|
|
<!-- <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})`
|
|
}"
|
|
>
|
|
|
|
<result-image />
|
|
|
|
<card type="cards-select" />
|
|
|
|
<card type="to-real-style" />
|
|
<card type="surface-edit" />
|
|
|
|
<card type="scene-composition" />
|
|
<card type="color-palette" />
|
|
<card type="to-3d-model" />
|
|
|
|
<card type="to-3view" />
|
|
</div>
|
|
</div> -->
|
|
<flow-canvas />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import flowCanvas from './FlowCanvas/flow-canvas.vue'
|
|
import card from './FlowCanvas/components/cards/index.vue'
|
|
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
|
|
const data = reactive({
|
|
x: 100,
|
|
y: 200,
|
|
scale: 1
|
|
})
|
|
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
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.canvas-test {
|
|
// overflow-y: auto;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// align-content: flex-start;
|
|
// align-items: flex-start;
|
|
// padding: 2rem;
|
|
// gap: 2rem;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
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>
|