mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
feat: convert designBoard component to composition API
This commit is contained in:
IchliebedichZhu
parent
8995910cb2
commit
77aba80b8b
@ -1,304 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="page-design" ref="page-design" :style="{ paddingTop: dPaddingTop + 'px' }">
|
|
||||||
<div
|
|
||||||
id="out-page"
|
|
||||||
class="out-page"
|
|
||||||
:style="{
|
|
||||||
width: (dPage.width * dZoom) / 100 + 120 + 'px',
|
|
||||||
height: (dPage.height * dZoom) / 100 + 120 + 'px',
|
|
||||||
opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
<div
|
|
||||||
:id="pageDesignCanvasId"
|
|
||||||
class="design-canvas"
|
|
||||||
:data-type="dPage.type"
|
|
||||||
:data-uuid="dPage.uuid"
|
|
||||||
:style="{
|
|
||||||
width: dPage.width + 'px',
|
|
||||||
height: dPage.height + 'px',
|
|
||||||
transform: 'scale(' + dZoom / 100 + ')',
|
|
||||||
transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
|
|
||||||
backgroundColor: dPage.backgroundColor,
|
|
||||||
backgroundImage: `url(${dPage?.backgroundImage})`,
|
|
||||||
backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
|
|
||||||
backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
|
|
||||||
backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
|
|
||||||
opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
|
|
||||||
}"
|
|
||||||
@mousemove="dropOver($event)"
|
|
||||||
@drop="drop($event)"
|
|
||||||
@mouseup="drop($event)"
|
|
||||||
>
|
|
||||||
<!-- <grid-size /> -->
|
|
||||||
|
|
||||||
<!-- :class="{
|
|
||||||
layer: true,
|
|
||||||
'layer-active': getIsActive(layer.uuid),
|
|
||||||
'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
|
|
||||||
}" -->
|
|
||||||
<component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
|
|
||||||
<template v-if="layer.isContainer">
|
|
||||||
<!-- :class="{
|
|
||||||
layer: true,
|
|
||||||
'layer-active': getIsActive(widget.uuid),
|
|
||||||
'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
|
|
||||||
'layer-hover': widget.uuid === dHoverUuid,
|
|
||||||
}" -->
|
|
||||||
<component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
|
|
||||||
</template>
|
|
||||||
</component>
|
|
||||||
|
|
||||||
<!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
|
|
||||||
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent, nextTick } from 'vue'
|
|
||||||
import { mapGetters, mapActions } from 'vuex'
|
|
||||||
import { getTarget } from '@/common/methods/target'
|
|
||||||
|
|
||||||
import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
|
|
||||||
import PointImg from '@/utils/plugins/pointImg'
|
|
||||||
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
|
|
||||||
import { debounce } from 'throttle-debounce'
|
|
||||||
|
|
||||||
// 页面设计组件
|
|
||||||
const NAME = 'page-design'
|
|
||||||
|
|
||||||
import { move, moveInit } from '@/mixins/move'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: NAME,
|
|
||||||
// components: {lineGuides},
|
|
||||||
mixins: [moveInit],
|
|
||||||
props: ['pageDesignCanvasId'],
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable']),
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getScreen()
|
|
||||||
document.getElementById('page-design').addEventListener('mousedown', this.handleSelection, false)
|
|
||||||
document.getElementById('page-design').addEventListener('mousemove', debounce(100, false, this.handleMouseMove), false)
|
|
||||||
},
|
|
||||||
beforeUnmount() {},
|
|
||||||
methods: {
|
|
||||||
...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']),
|
|
||||||
// getBackground(data) {
|
|
||||||
// if (data.startsWith('http')) return `url(${data})`
|
|
||||||
// if (data.startsWith('linear-gradient')) return data
|
|
||||||
// },
|
|
||||||
async dropOver(e) {
|
|
||||||
if (this.dActiveElement.editable || this.dActiveElement.lock) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
e.preventDefault()
|
|
||||||
let { data, type } = this.$store.getters.selectItem
|
|
||||||
if (type !== 'image') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const target = await getTarget(e.target)
|
|
||||||
const uuid = target.getAttribute('data-uuid')
|
|
||||||
this.$store.dispatch('setDropOver', uuid)
|
|
||||||
if (e.target.getAttribute('putIn')) {
|
|
||||||
this._dropIn = uuid
|
|
||||||
const imgUrl = data.value.thumb || data.value.url
|
|
||||||
!this._srcCache && (this._srcCache = target.firstElementChild.firstElementChild.src)
|
|
||||||
target.firstElementChild.firstElementChild.src = imgUrl
|
|
||||||
} else {
|
|
||||||
this._srcCache && (target.firstElementChild.firstElementChild.src = this._srcCache)
|
|
||||||
this._srcCache = ''
|
|
||||||
this._dropIn = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async drop(e) {
|
|
||||||
if (!this.dDraging) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$store.commit('setDraging', false)
|
|
||||||
const dropIn = this._dropIn
|
|
||||||
this._dropIn = ''
|
|
||||||
this.$store.dispatch('setDropOver', '-1')
|
|
||||||
this.$store.commit('setShowMoveable', false) // 清理上一次的选择
|
|
||||||
let lost = e.target.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
|
|
||||||
// e.stopPropagation()
|
|
||||||
e.preventDefault()
|
|
||||||
let { data: item, type } = JSON.parse(JSON.stringify(this.$store.getters.selectItem))
|
|
||||||
// 清除临时数据
|
|
||||||
this.$store.commit('selectItem', {})
|
|
||||||
let setting = {}
|
|
||||||
if (!type) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 处理数据
|
|
||||||
setting = await setWidgetData(type, item, setting)
|
|
||||||
// 绝对坐标
|
|
||||||
const lostX = e.x - document.getElementById('page-design-canvas').getBoundingClientRect().left
|
|
||||||
const lostY = e.y - document.getElementById('page-design-canvas').getBoundingClientRect().top
|
|
||||||
// 放置组合
|
|
||||||
if (type === 'group') {
|
|
||||||
let parent = {}
|
|
||||||
item = await getComponentsData(item)
|
|
||||||
item.forEach((element) => {
|
|
||||||
if (element.type === 'w-group') {
|
|
||||||
parent.width = element.width
|
|
||||||
parent.height = element.height
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const half = { x: parent.width ? (parent.width * this.$store.getters.dZoom) / 100 / 2 : 0, y: parent.height ? (parent.height * this.$store.getters.dZoom) / 100 / 2 : 0 }
|
|
||||||
item.forEach((element) => {
|
|
||||||
element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / this.$store.getters.dZoom)
|
|
||||||
element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / this.$store.getters.dZoom)
|
|
||||||
})
|
|
||||||
this.addGroup(item)
|
|
||||||
}
|
|
||||||
// 设置坐标
|
|
||||||
const half = { x: setting.width ? (setting.width * this.$store.getters.dZoom) / 100 / 2 : 0, y: setting.height ? (setting.height * this.$store.getters.dZoom) / 100 / 2 : 0 }
|
|
||||||
// const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
|
|
||||||
setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / this.$store.getters.dZoom)
|
|
||||||
setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / this.$store.getters.dZoom)
|
|
||||||
if (lost && type === 'image') {
|
|
||||||
// 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
|
|
||||||
const target = await getTarget(e.target)
|
|
||||||
const targetType = target.getAttribute('data-type')
|
|
||||||
const uuid = target.getAttribute('data-uuid')
|
|
||||||
if (targetType === 'w-mask') {
|
|
||||||
// 容器
|
|
||||||
this.$store.commit('setShowMoveable', true) // 恢复选择
|
|
||||||
const widget = this.dWidgets.find((item) => item.uuid === uuid)
|
|
||||||
widget.imgUrl = item.value.url
|
|
||||||
// if (e.target.className.baseVal) {
|
|
||||||
// !widget.imgs && (widget.imgs = {})
|
|
||||||
// widget.imgs[`${e.target.className.baseVal}`] = item.value.url
|
|
||||||
// }
|
|
||||||
} else {
|
|
||||||
if (dropIn) {
|
|
||||||
const widget = this.dWidgets.find((item) => item.uuid == dropIn)
|
|
||||||
widget.imgUrl = item.value.url
|
|
||||||
console.log('加入+', widget)
|
|
||||||
this.$store.commit('setShowMoveable', true) // 恢复选择
|
|
||||||
} else {
|
|
||||||
this.addWidget(setting) // 正常加入面板
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (type === 'bg') {
|
|
||||||
console.log('背景图片放置')
|
|
||||||
} else if (type !== 'group') {
|
|
||||||
console.log(setting)
|
|
||||||
this.addWidget(setting) // 正常加入面板
|
|
||||||
}
|
|
||||||
// 清除临时数据
|
|
||||||
// this.$store.commit('selectItem', {})
|
|
||||||
},
|
|
||||||
getScreen() {
|
|
||||||
let screen = this.$refs['page-design']
|
|
||||||
this.updateScreen({
|
|
||||||
width: screen.offsetWidth,
|
|
||||||
height: screen.offsetHeight,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async handleMouseMove(e) {
|
|
||||||
const pImg = new PointImg(e.target)
|
|
||||||
const { rgba } = pImg.getColorXY(e.offsetX, e.offsetY)
|
|
||||||
if (rgba && rgba === 'rgba(0,0,0,0)') {
|
|
||||||
console.log('解析点位颜色: ', rgba)
|
|
||||||
let target = await getTarget(e.target)
|
|
||||||
target.style.pointerEvents = 'none'
|
|
||||||
setTimeout(() => {
|
|
||||||
target.style.pointerEvents = 'auto'
|
|
||||||
}, 300)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async handleSelection(e) {
|
|
||||||
if (e.which === 3) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let target = await getTarget(e.target)
|
|
||||||
let type = target.getAttribute('data-type')
|
|
||||||
|
|
||||||
if (type) {
|
|
||||||
let uuid = target.getAttribute('data-uuid')
|
|
||||||
if (uuid !== '-1' && !this.dAltDown) {
|
|
||||||
let widget = this.dWidgets.find((item) => item.uuid === uuid)
|
|
||||||
if (widget.parent !== '-1' && widget.parent !== this.dActiveElement.uuid && widget.parent !== this.dActiveElement.parent) {
|
|
||||||
uuid = widget.parent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置选中元素
|
|
||||||
// this.$store.commit('setMoveable', false)
|
|
||||||
if (this.showRotatable !== false) {
|
|
||||||
this.selectWidget({
|
|
||||||
uuid: uuid,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (uuid !== '-1') {
|
|
||||||
this.initmovement && this.initmovement(e) // 参见 mixins
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 取消选中元素
|
|
||||||
this.selectWidget({
|
|
||||||
uuid: '-1',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getlayers() {
|
|
||||||
return this.dWidgets.filter((item) => item.parent === this.dPage.uuid)
|
|
||||||
},
|
|
||||||
getChilds(uuid) {
|
|
||||||
return this.dWidgets.filter((item) => item.parent === uuid)
|
|
||||||
},
|
|
||||||
// getIsActive(uuid) {
|
|
||||||
// if (this.dSelectWidgets.length > 0) {
|
|
||||||
// let widget = this.dSelectWidgets.find((item) => item.uuid === uuid)
|
|
||||||
// if (widget) {
|
|
||||||
// return true
|
|
||||||
// }
|
|
||||||
// return false
|
|
||||||
// } else {
|
|
||||||
// return uuid === this.dActiveElement.uuid
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
#page-design {
|
|
||||||
height: 100%;
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
overflow: auto;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.out-page {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 60px;
|
|
||||||
position: relative;
|
|
||||||
.design-canvas {
|
|
||||||
// transition: all 0.3s;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
// z-index: -9999;
|
|
||||||
// overflow: hidden;
|
|
||||||
// overflow: auto;
|
|
||||||
}
|
|
||||||
// .design-canvas ::-webkit-scrollbar {
|
|
||||||
// display: none; /* Chrome Safari */
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
363
src/components/modules/layout/designBoard/index.vue
Normal file
363
src/components/modules/layout/designBoard/index.vue
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
<template>
|
||||||
|
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
|
||||||
|
<div
|
||||||
|
id="out-page"
|
||||||
|
class="out-page"
|
||||||
|
:style="{
|
||||||
|
width: (dPage.width * dZoom) / 100 + 120 + 'px',
|
||||||
|
height: (dPage.height * dZoom) / 100 + 120 + 'px',
|
||||||
|
opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
<div
|
||||||
|
:id="pageDesignCanvasId"
|
||||||
|
class="design-canvas"
|
||||||
|
:data-type="dPage.type"
|
||||||
|
:data-uuid="dPage.uuid"
|
||||||
|
:style="{
|
||||||
|
width: dPage.width + 'px',
|
||||||
|
height: dPage.height + 'px',
|
||||||
|
transform: 'scale(' + dZoom / 100 + ')',
|
||||||
|
transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
|
||||||
|
backgroundColor: dPage.backgroundColor,
|
||||||
|
backgroundImage: `url(${dPage?.backgroundImage})`,
|
||||||
|
backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
|
||||||
|
backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
|
||||||
|
backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
|
||||||
|
opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
|
||||||
|
}"
|
||||||
|
@mousemove="dropOver($event)"
|
||||||
|
@drop="drop($event)"
|
||||||
|
@mouseup="drop($event)"
|
||||||
|
>
|
||||||
|
<!-- <grid-size /> -->
|
||||||
|
|
||||||
|
<!-- :class="{
|
||||||
|
layer: true,
|
||||||
|
'layer-active': getIsActive(layer.uuid),
|
||||||
|
'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
|
||||||
|
}" -->
|
||||||
|
<component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
|
||||||
|
<template v-if="layer.isContainer">
|
||||||
|
<!-- :class="{
|
||||||
|
layer: true,
|
||||||
|
'layer-active': getIsActive(widget.uuid),
|
||||||
|
'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
|
||||||
|
'layer-hover': widget.uuid === dHoverUuid,
|
||||||
|
}" -->
|
||||||
|
<component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
|
||||||
|
</template>
|
||||||
|
</component>
|
||||||
|
|
||||||
|
<!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
|
||||||
|
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { nextTick, defineProps, onMounted, ref } from 'vue'
|
||||||
|
import { mapGetters, mapActions, useStore } from 'vuex'
|
||||||
|
import { getTarget } from '@/common/methods/target'
|
||||||
|
|
||||||
|
import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
|
||||||
|
import PointImg from '@/utils/plugins/pointImg'
|
||||||
|
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
|
||||||
|
import { debounce } from 'throttle-debounce'
|
||||||
|
import { move, moveInit } from '@/mixins/move'
|
||||||
|
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||||
|
// 页面设计组件
|
||||||
|
type TProps = {
|
||||||
|
pageDesignCanvasId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type TParentData = {
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type TSetting = {
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
top?: number
|
||||||
|
left?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const store = useStore()
|
||||||
|
const { pageDesignCanvasId } = defineProps<TProps>()
|
||||||
|
const {
|
||||||
|
dPaddingTop, dPage, dZoom, dScreen, dWidgets,
|
||||||
|
dActiveElement, dSelectWidgets, dAltDown, dDraging,
|
||||||
|
dHoverUuid, showRotatable
|
||||||
|
} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
|
||||||
|
|
||||||
|
let _dropIn: string | null = ''
|
||||||
|
let _srcCache: string | null = ''
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getScreen()
|
||||||
|
const pageDesignEl = document.getElementById('page-design')
|
||||||
|
if (!pageDesignEl) return
|
||||||
|
pageDesignEl.addEventListener('mousedown', handleSelection, false)
|
||||||
|
pageDesignEl.addEventListener('mousemove', debounce(100, false, handleMouseMove), false)
|
||||||
|
})
|
||||||
|
|
||||||
|
// components: {lineGuides},
|
||||||
|
// mixins: [moveInit],
|
||||||
|
// ...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']),
|
||||||
|
|
||||||
|
// getBackground(data) {
|
||||||
|
// if (data.startsWith('http')) return `url(${data})`
|
||||||
|
// if (data.startsWith('linear-gradient')) return data
|
||||||
|
// },
|
||||||
|
|
||||||
|
async function dropOver(e: MouseEvent) {
|
||||||
|
if (dActiveElement.value.editable || dActiveElement.value.lock) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
e.preventDefault()
|
||||||
|
let { data, type } = store.getters.selectItem
|
||||||
|
if (type !== 'image') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!e || !e.target) return
|
||||||
|
const eventTarget = e.target as HTMLElement
|
||||||
|
const target = await getTarget(eventTarget)
|
||||||
|
if (!target) return
|
||||||
|
const uuid = target.getAttribute('data-uuid')
|
||||||
|
store.dispatch('setDropOver', uuid)
|
||||||
|
|
||||||
|
const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
|
||||||
|
if (eventTarget.getAttribute('putIn')) {
|
||||||
|
_dropIn = uuid
|
||||||
|
const imgUrl = data.value.thumb || data.value.url
|
||||||
|
!_srcCache && (_srcCache = imgEl.src)
|
||||||
|
imgEl.src = imgUrl
|
||||||
|
} else {
|
||||||
|
_srcCache && (imgEl.src = _srcCache)
|
||||||
|
_srcCache = ''
|
||||||
|
_dropIn = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drop(e: MouseEvent) {
|
||||||
|
if (!dDraging.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!e || !e.target) return
|
||||||
|
const eventTarget = e.target as HTMLElement
|
||||||
|
store.commit('setDraging', false)
|
||||||
|
const dropIn = _dropIn
|
||||||
|
_dropIn = ''
|
||||||
|
store.dispatch('setDropOver', '-1')
|
||||||
|
store.commit('setShowMoveable', false) // 清理上一次的选择
|
||||||
|
let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
|
||||||
|
// e.stopPropagation()
|
||||||
|
e.preventDefault()
|
||||||
|
let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
|
||||||
|
// 清除临时数据
|
||||||
|
store.commit('selectItem', {})
|
||||||
|
let setting: TSetting = {}
|
||||||
|
if (!type) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 处理数据
|
||||||
|
setting = await setWidgetData(type, item, setting)
|
||||||
|
console.log("setting", setting)
|
||||||
|
// 绝对坐标
|
||||||
|
const canvasEl = document.getElementById('page-design-canvas')
|
||||||
|
if (!canvasEl) return
|
||||||
|
const lostX = e.x - canvasEl.getBoundingClientRect().left
|
||||||
|
const lostY = e.y - canvasEl.getBoundingClientRect().top
|
||||||
|
// 放置组合
|
||||||
|
if (type === 'group') {
|
||||||
|
let parent: TParentData = {}
|
||||||
|
const componentItem = await getComponentsData(item)
|
||||||
|
// item = await getComponentsData(item)
|
||||||
|
componentItem.forEach((element) => {
|
||||||
|
if (element.type === 'w-group') {
|
||||||
|
parent.width = element.width
|
||||||
|
parent.height = element.height
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const half = {
|
||||||
|
x: parent.width ? (parent.width * store.getters.dZoom) / 100 / 2 : 0,
|
||||||
|
y: parent.height ? (parent.height * store.getters.dZoom) / 100 / 2 : 0
|
||||||
|
}
|
||||||
|
componentItem.forEach((element) => {
|
||||||
|
element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
|
||||||
|
element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
|
||||||
|
})
|
||||||
|
store.dispatch('addGroup', item)
|
||||||
|
// addGroup(item)
|
||||||
|
}
|
||||||
|
// 设置坐标
|
||||||
|
const half = {
|
||||||
|
x: setting.width ? (setting.width * store.getters.dZoom) / 100 / 2 : 0,
|
||||||
|
y: setting.height ? (setting.height * store.getters.dZoom) / 100 / 2 : 0
|
||||||
|
}
|
||||||
|
// const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
|
||||||
|
setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
|
||||||
|
setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
|
||||||
|
if (lost && type === 'image') {
|
||||||
|
// 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
|
||||||
|
const target = await getTarget(eventTarget)
|
||||||
|
if (!target) return
|
||||||
|
const targetType = target.getAttribute('data-type')
|
||||||
|
const uuid = target.getAttribute('data-uuid')
|
||||||
|
if (targetType === 'w-mask') {
|
||||||
|
// 容器
|
||||||
|
store.commit('setShowMoveable', true) // 恢复选择
|
||||||
|
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
|
||||||
|
widget.imgUrl = item.value.url
|
||||||
|
// if (e.target.className.baseVal) {
|
||||||
|
// !widget.imgs && (widget.imgs = {})
|
||||||
|
// widget.imgs[`${e.target.className.baseVal}`] = item.value.url
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
if (dropIn) {
|
||||||
|
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
|
||||||
|
widget.imgUrl = item.value.url
|
||||||
|
console.log('加入+', widget)
|
||||||
|
store.commit('setShowMoveable', true) // 恢复选择
|
||||||
|
} else {
|
||||||
|
store.dispatch('addWidget', setting) // 正常加入面板
|
||||||
|
// addWidget(setting) // 正常加入面板
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (type === 'bg') {
|
||||||
|
console.log('背景图片放置')
|
||||||
|
} else if (type !== 'group') {
|
||||||
|
console.log(setting)
|
||||||
|
store.dispatch('addWidget', setting) // 正常加入面板
|
||||||
|
// addWidget(setting) // 正常加入面板
|
||||||
|
}
|
||||||
|
// 清除临时数据
|
||||||
|
// this.$store.commit('selectItem', {})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getScreen() {
|
||||||
|
const pageDesignEl = document.getElementById('page-design')
|
||||||
|
if (!pageDesignEl) return
|
||||||
|
store.dispatch('updateScreen', {
|
||||||
|
width: pageDesignEl.offsetWidth,
|
||||||
|
height: pageDesignEl.offsetHeight,
|
||||||
|
})
|
||||||
|
// updateScreen({
|
||||||
|
// width: pageDesignEl.offsetWidth,
|
||||||
|
// height: pageDesignEl.offsetHeight,
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleMouseMove(e: MouseEvent) {
|
||||||
|
if (!e || !e.target) return
|
||||||
|
const imageTarget = e.target as HTMLImageElement
|
||||||
|
const pImg = new PointImg(imageTarget)
|
||||||
|
const { rgba } = pImg.getColorXY(e.offsetX, e.offsetY)
|
||||||
|
if (rgba && rgba === 'rgba(0,0,0,0)') {
|
||||||
|
console.log('解析点位颜色: ', rgba)
|
||||||
|
let target = await getTarget(imageTarget)
|
||||||
|
if (!target) return
|
||||||
|
target.style.pointerEvents = 'none'
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!target) return
|
||||||
|
target.style.pointerEvents = 'auto'
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSelection(e: MouseEvent) {
|
||||||
|
if (e.which === 3) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!e || !e.target) return
|
||||||
|
let target = await getTarget(e.target as HTMLElement)
|
||||||
|
if (!target) return
|
||||||
|
let type = target.getAttribute('data-type')
|
||||||
|
|
||||||
|
if (type) {
|
||||||
|
let uuid = target.getAttribute('data-uuid')
|
||||||
|
if (uuid !== '-1' && !dAltDown.value) {
|
||||||
|
let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
|
||||||
|
if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
|
||||||
|
uuid = widget.parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置选中元素
|
||||||
|
// this.$store.commit('setMoveable', false)
|
||||||
|
if (showRotatable.value !== false) {
|
||||||
|
store.dispatch('selectWidget', {
|
||||||
|
uuid: uuid,
|
||||||
|
})
|
||||||
|
// selectWidget({
|
||||||
|
// uuid: uuid,
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (uuid !== '-1') {
|
||||||
|
moveInit.methods.initmovement(e) // 参见 mixins
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 取消选中元素
|
||||||
|
store.dispatch('selectWidget', {
|
||||||
|
uuid: '-1',
|
||||||
|
})
|
||||||
|
// selectWidget({
|
||||||
|
// uuid: '-1',
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getlayers() {
|
||||||
|
return dWidgets.value.filter((item: { parent: string }) => item.parent === dPage.value.uuid)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChilds(uuid: string) {
|
||||||
|
return dWidgets.value.filter((item: { parent: string }) => item.parent === uuid)
|
||||||
|
}
|
||||||
|
// getIsActive(uuid) {
|
||||||
|
// if (this.dSelectWidgets.length > 0) {
|
||||||
|
// let widget = this.dSelectWidgets.find((item) => item.uuid === uuid)
|
||||||
|
// if (widget) {
|
||||||
|
// return true
|
||||||
|
// }
|
||||||
|
// return false
|
||||||
|
// } else {
|
||||||
|
// return uuid === this.dActiveElement.uuid
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
#page-design {
|
||||||
|
height: 100%;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
.out-page {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px;
|
||||||
|
position: relative;
|
||||||
|
.design-canvas {
|
||||||
|
// transition: all 0.3s;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
// z-index: -9999;
|
||||||
|
// overflow: hidden;
|
||||||
|
// overflow: auto;
|
||||||
|
}
|
||||||
|
// .design-canvas ::-webkit-scrollbar {
|
||||||
|
// display: none; /* Chrome Safari */
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: ShawnPhang
|
* @Author: ShawnPhang
|
||||||
* @Date: 2021-08-03 17:50:21
|
* @Date: 2021-08-03 17:50:21
|
||||||
* @Description: 旧大小控制组件，已交由moveable控制
|
* @Description: 旧大小控制组件，已交由moveable控制 (已不使用)
|
||||||
* @LastEditors: ShawnPhang
|
* @LastEditors: ShawnPhang
|
||||||
* @LastEditTime: 2021-08-09 11:13:09
|
* @LastEditTime: 2021-08-09 11:13:09
|
||||||
-->
|
-->
|
||||||
|
|||||||
@ -48,7 +48,7 @@ const move = {
|
|||||||
|
|
||||||
const moveInit = {
|
const moveInit = {
|
||||||
methods: {
|
methods: {
|
||||||
initmovement(e: any) {
|
initmovement(e: MouseEvent) {
|
||||||
if (!store.getters.dAltDown) {
|
if (!store.getters.dAltDown) {
|
||||||
// 设置mouseevent给moveable初始
|
// 设置mouseevent给moveable初始
|
||||||
// 在组合操作时排除
|
// 在组合操作时排除
|
||||||
|
|||||||
6
src/types/global.d.ts
vendored
6
src/types/global.d.ts
vendored
@ -56,3 +56,9 @@ interface Window {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
interface MouseEvent {
|
||||||
|
layerX: number
|
||||||
|
layerY: number
|
||||||
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
|||||||
import Preload from '@/utils/plugins/preload'
|
import Preload from '@/utils/plugins/preload'
|
||||||
import FontFaceObserver from 'fontfaceobserver'
|
import FontFaceObserver from 'fontfaceobserver'
|
||||||
import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
|
import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
|
||||||
import designBoard from '@/components/modules/layout/designBoard.vue'
|
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|||||||
@ -58,7 +58,7 @@ import { defineComponent, reactive, toRefs } from 'vue'
|
|||||||
import { mapActions, mapGetters } from 'vuex'
|
import { mapActions, mapGetters } from 'vuex'
|
||||||
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
|
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
|
||||||
import Moveable from '@/components/business/moveable/Moveable.vue'
|
import Moveable from '@/components/business/moveable/Moveable.vue'
|
||||||
import designBoard from '@/components/modules/layout/designBoard.vue'
|
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||||
import lineGuides from '@/components/modules/layout/lineGuides.vue'
|
import lineGuides from '@/components/modules/layout/lineGuides.vue'
|
||||||
|
|
||||||
|
|||||||
@ -52,7 +52,7 @@ import wText from '@/components/modules/widgets/wText/wText.vue'
|
|||||||
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||||
import useLoading from '@/common/methods/loading'
|
import useLoading from '@/common/methods/loading'
|
||||||
import uploader from '@/components/common/Uploader/index.vue'
|
import uploader from '@/components/common/Uploader/index.vue'
|
||||||
import designBoard from '@/components/modules/layout/designBoard.vue'
|
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||||
import HeaderOptions from './components/UploadTemplate.vue'
|
import HeaderOptions from './components/UploadTemplate.vue'
|
||||||
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
|
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user