github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert moveable to composition API

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-20 19:09:19 +00:00
parent 54b9338e52
commit 048351e698
1 changed files with 558 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

377
src/components/business/moveable/Moveable.vue
View File

@ -8,113 +8,163 @@
<template> <template>
<div id="empty" class="moveable__remove-item zk-moveable-style"></div> <div id="empty" class="moveable__remove-item zk-moveable-style"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, nextTick } from 'vue' import { Events, defineComponent, nextTick, onMounted, watch } from 'vue'
import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS, import Moveable, { EVENTS, OnRotate, WithEventStop } from 'moveable' // PROPERTIES, METHODS,
import MoveableHelper from 'moveable-helper' import MoveableHelper from 'moveable-helper'
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions, useStore } from 'vuex'
// import { setTransformAttribute } from '@/common/methods/handleTransform' // import { setTransformAttribute } from '@/common/methods/handleTransform'
import useSelecto from './Selecto' import useSelecto from './Selecto'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia'
import { useCanvasStore } from '@/pinia'
export default defineComponent({ const {
setup() {}, dSelectWidgets, dActiveElement, activeMouseEvent,
computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']), showMoveable, showRotatable, dWidgets,
watch: { updateRect, updateSelect,
async dActiveElement(val) { } = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
const store = useStore()
const { guidelines } = storeToRefs(useCanvasStore())
// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
let _target: string = ""
let moveable: Moveable | null = null
let holdPosition: { left: number, top: number } | null = null
let startHL: number = 0
let startLS: number = 0
let resetRatio: number = 0
let resizeTempData: { width: number, height: number } | null = null
watch(
() => dActiveElement.value,
async (val) => {
if (!val.record) { if (!val.record) {
return return
} }
if (!moveable) return
// 选中非面板 并且不是组合内的元素 // 选中非面板 并且不是组合内的元素
if (val.uuid != -1) { if (val.uuid != -1) {
await nextTick() await nextTick()
const target = `[id="${val.uuid}"]` const target = `[id="${val.uuid}"]`
this._target = `[id="${val.uuid}"]` _target = `[id="${val.uuid}"]`
this.moveable.rotatable = true // 选择时会取消旋转 moveable.rotatable = true // 选择时会取消旋转
// 方向点位设置 // 方向点位设置
// this.moveable.renderDirections = val.type === 'w-text' ? ['e', 'se'] : 'w-image' ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : ['nw', 'ne', 'sw', 'se'] // this.moveable.renderDirections = val.type === 'w-text' ? ['e', 'se'] : 'w-image' ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : ['nw', 'ne', 'sw', 'se']
switch (val.type) { switch (val.type) {
case 'w-text': case 'w-text':
this.moveable.renderDirections = ['e', 'se'] moveable.renderDirections = ['e', 'se']
break break
case 'w-image': case 'w-image':
this.moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
break break
case 'w-svg': case 'w-svg':
this.moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
break break
default: default:
this.moveable.renderDirections = ['nw', 'ne', 'sw', 'se'] moveable.renderDirections = ['nw', 'ne', 'sw', 'se']
break break
} }
// // Set Move Auto // // Set Move Auto
this.moveable.setState({ target: this._target }, () => { moveable.setState({ target: _target }, () => {
// 当出现mouseevent时进行即刻选中 // 当出现mouseevent时进行即刻选中
if (this.activeMouseEvent) { if (activeMouseEvent.value) {
this.moveable.dragStart(this.activeMouseEvent) moveable?.dragStart(activeMouseEvent.value)
// TODO 使用后销毁mouseevent // TODO 使用后销毁mouseevent
this.$store.commit('setMouseEvent', null) store.commit('setMouseEvent', null)
} }
}) })
// // End // // End
this.$store.commit('setShowMoveable', true) store.commit('setShowMoveable', true)
// 参考线设置 // 参考线设置
if (!this.moveable.elementGuidelines.includes(target)) { if (!moveable.elementGuidelines?.includes(target)) {
this.moveable.elementGuidelines.push(target) moveable.elementGuidelines?.push(target)
} }
} else { } else {
this.moveable.target = `[id="empty"]` moveable.target = `[id="empty"]`
if (this.moveable.target !== `[id="empty"]`) { if (moveable.target !== `[id="empty"]`) {
setTimeout(() => { setTimeout(() => {
this.moveable.target = `[id="empty"]` if (!moveable) return
moveable.target = `[id="empty"]`
}, 210) }, 210)
} }
// feature: 可以遍历来设置参考线，目前先粗暴清空 // feature: 可以遍历来设置参考线，目前先粗暴清空
this.moveable.elementGuidelines.length = 0 if (moveable.elementGuidelines) {
moveable.elementGuidelines.length = 0
} }
}, }
showMoveable(val) { }
)
watch(
() => showMoveable.value,
val => {
if (!moveable) return
if (val) { if (val) {
this.moveable.target = this._target moveable.target = _target
} else { } else {
this.moveable.target = `[id="empty"]` moveable.target = `[id="empty"]`
} }
}, }
showRotatable(val) { )
watch(
() => showRotatable.value,
val => {
// TODO: 这里是通过旋转来判断是否可以操作 // TODO: 这里是通过旋转来判断是否可以操作
this.moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : [] if (!moveable) return
this.moveable.resizable = val
this.moveable.scalable = val moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
document.getElementsByClassName('moveable-rotation')[0].style.display = val ? 'block' : 'none' moveable.resizable = val
}, moveable.scalable = val
updateRect(val) { const el = document.getElementsByClassName('moveable-rotation')[0] as HTMLElement
this.moveable.updateRect() el.style.display = val ? 'block' : 'none'
}, }
updateSelect() { )
const items = this.$store.getters.dSelectWidgets
watch(
() => updateRect.value,
() => {
moveable?.updateRect()
}
)
watch(
() => updateSelect.value,
() => {
const items = store.getters.dSelectWidgets
setTimeout(async () => { setTimeout(async () => {
this.moveable.updateRect() if (!moveable) return
await this.$nextTick() moveable.updateRect()
await nextTick()
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
console.log(items[i].uuid) console.log(items[i].uuid)
document.getElementById(items[i].uuid)?.classList.add('widget-selected') document.getElementById(items[i].uuid)?.classList.add('widget-selected')
} }
this.moveable.renderDirections = [] moveable.renderDirections = []
this.moveable.rotatable = false moveable.rotatable = false
const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected')) const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
console.log(targetCollector) console.log(targetCollector)
this.moveable.target = targetCollector moveable.target = targetCollector
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
document.getElementById(items[i].uuid)?.classList.remove('widget-selected') document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
} }
}, 400) }, 400)
}, }
// 选择的元素 )
dSelectWidgets: {
handler(items) { /** 选择的元素 */
const alt = this.$store.getters.dAltDown watch(
() => dSelectWidgets.value,
(items) => {
if (!moveable) return
const alt = store.getters.dAltDown
// if (items.length > 1) { // if (items.length > 1) {
// console.log('打开组合面板') // console.log('打开组合面板')
// } // }
@ -122,28 +172,32 @@ export default defineComponent({
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
document.getElementById(items[i].uuid)?.classList.add('widget-selected') document.getElementById(items[i].uuid)?.classList.add('widget-selected')
} }
this.moveable.renderDirections = [] moveable.renderDirections = []
this.moveable.rotatable = false moveable.rotatable = false
const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected')) const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
// this.moveable.target = `[id="empty"]` // this.moveable.target = `[id="empty"]`
this.moveable.target = targetCollector moveable.target = targetCollector
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
document.getElementById(items[i].uuid)?.classList.remove('widget-selected') document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
} }
} }
}, },
deep: true, { deep: true }
}, )
// 标尺线
guidelines(lines) {
console.log(lines)
this.moveable.verticalGuidelines = lines.verticalGuidelines /** 标尺线 */
this.moveable.horizontalGuidelines = lines.horizontalGuidelines watch(
}, () => guidelines.value,
}, (lines) => {
mounted() { if (!moveable) return
let holdGroupPosition: any = null console.log(lines)
moveable.verticalGuidelines = lines.verticalGuidelines
moveable.horizontalGuidelines = lines.horizontalGuidelines
}
)
onMounted(() => {
let holdGroupPosition: Record<string, any> | null = null
const moveableOptions: any = { const moveableOptions: any = {
target: document.querySelector(`[id="empty"]`), target: document.querySelector(`[id="empty"]`),
// container: document.querySelector('#page-design'), // container: document.querySelector('#page-design'),
@ -184,8 +238,8 @@ export default defineComponent({
// -- END -- // -- END --
triggerAblesSimultaneously: true, triggerAblesSimultaneously: true,
} }
const moveable = new Moveable(document.body, moveableOptions) const moveableInstance = new Moveable(document.body, moveableOptions)
this.moveable = moveable moveable = moveableInstance
const helper: any = new MoveableHelper() const helper: any = new MoveableHelper()
@ -194,7 +248,7 @@ export default defineComponent({
// console.log(event) // console.log(event)
// 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart // 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart
if (['resizeStart', 'rotate', 'resize'].includes(event)) { if (['resizeStart', 'rotate', 'resize'].includes(event)) {
moveable.on(event, (...args) => { moveable?.on(event as any, (...args) => {
// this.$emit(event, ...args) // this.$emit(event, ...args)
helper[helperEvent] && helper[helperEvent](...args) helper[helperEvent] && helper[helperEvent](...args)
}) })
@ -206,49 +260,62 @@ export default defineComponent({
moveable moveable
.on('dragStart', ({ inputEvent, target, stop }) => { .on('dragStart', ({ inputEvent, target, stop }) => {
if (inputEvent.target.nodeName === 'PRE') { if (inputEvent.target.nodeName === 'PRE') {
this.dActiveElement.editable && stop() dActiveElement.value.editable && stop()
} }
this.dActiveElement.lock && stop() dActiveElement.value.lock && stop()
}) })
.on('drag', ({ target, transform, left, top, inputEvent }) => { .on('drag', ({ target, transform, left, top, inputEvent }) => {
// target!.style.transform = transform] // target!.style.transform = transform]
target!.style.left = `${left}px` target!.style.left = `${left}px`
target!.style.top = `${top}px` target!.style.top = `${top}px`
this.holdPosition = { left, top } holdPosition = { left, top }
}) })
.on('dragEnd', ({ target, isDrag, inputEvent }) => { .on('dragEnd', ({ target, isDrag, inputEvent }) => {
// console.log('onDragEnd', inputEvent) // console.log('onDragEnd', inputEvent)
// TODO 清理mouseevent // TODO 清理mouseevent
this.$store.commit('setMouseEvent', null) store.commit('setMouseEvent', null)
inputEvent.stopPropagation() inputEvent.stopPropagation()
inputEvent.preventDefault() inputEvent.preventDefault()
// console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY) // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
if (this.holdPosition) { if (holdPosition) {
this.updateWidgetData({ store.dispatch('updateWidgetData', {
uuid: this.dActiveElement.uuid, uuid: dActiveElement.value.uuid,
key: 'left', key: 'left',
value: Number(this.holdPosition?.left), value: Number(holdPosition?.left),
}) })
this.updateWidgetData({ // this.updateWidgetData({
uuid: this.dActiveElement.uuid, // uuid: this.dActiveElement.uuid,
// key: 'left',
// value: Number(this.holdPosition?.left),
// })
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key: 'top', key: 'top',
value: Number(this.holdPosition?.top), value: Number(holdPosition?.top),
}) })
this.holdPosition = null // important // this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// key: 'top',
// value: Number(this.holdPosition?.top),
// })
holdPosition = null // important
setTimeout(() => { setTimeout(() => {
this.pushHistory() store.dispatch('pushHistory')
// this.pushHistory()
}, 100) }, 100)
} }
}) })
// .on('keyUp', (e) => { // .on('keyUp', (e) => {
// moveable.updateRect() // moveable.updateRect()
// }) // })
.on('rotate', ({ target, beforeDist, dist, transform }: any) => { // { target, beforeDist, dist, transform }
.on('rotate', ({ target, beforeDist, dist, transform }) => {
// console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist)) // console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist))
// target.style.transform = transform // target.style.transform = transform
console.log(target.style.transform) console.log(target.style.transform)
}) })
.on('rotateEnd', (e: any) => { .on('rotateEnd', (e) => {
const tf = e.target.style.transform const tf = e.target.style.transform
const iof = tf.indexOf('rotate') const iof = tf.indexOf('rotate')
let rotate = '' let rotate = ''
@ -258,29 +325,34 @@ export default defineComponent({
rotate = half.slice(0, half.indexOf(')')) rotate = half.slice(0, half.indexOf(')'))
} }
rotate && rotate &&
this.updateWidgetData({ store.dispatch("updateWidgetData", {
uuid: this.dActiveElement.uuid, uuid: dActiveElement.value.uuid,
key: 'rotate', key: 'rotate',
value: rotate, value: rotate,
}) })
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// key: 'rotate',
// value: rotate,
// })
}) })
.on('resizeStart', (args) => { .on('resizeStart', (args) => {
console.log(args.target.style.transform) console.log(args.target.style.transform)
if (!moveable) return
this.moveable.snappable = false moveable.snappable = false
if (this.dActiveElement.type === 'w-text') { if (dActiveElement.value.type === 'w-text') {
if (String(args.direction) === '1,0') { if (String(args.direction) === '1,0') {
moveable.keepRatio = false moveable.keepRatio = false
moveable.scalable = false moveable.scalable = false
} }
if (String(args.direction) === '1,1') { if (String(args.direction) === '1,1') {
moveable.keepRatio = false moveable.keepRatio = false
resizeStartWidth = args.target.offsetWidth resizeStartWidth = (args.target as HTMLElement).offsetWidth
this.startHL = Number(args.target!.style.lineHeight.replace('px', '')) startHL = Number(args.target!.style.lineHeight.replace('px', ''))
this.startLS = Number(args.target!.style.letterSpacing.replace('px', '')) startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
this.resetRatio = 1 resetRatio = 1
} }
} else if (this.dActiveElement.type === 'w-image' || this.dActiveElement.type === 'w-qrcode' || this.dActiveElement.type === 'w-svg') { } else if (dActiveElement.value.type === 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
const dirs = ['1,0', '0,-1', '-1,0', '0,1'] const dirs = ['1,0', '0,-1', '-1,0', '0,1']
dirs.includes(String(args.direction)) && (moveable.keepRatio = false) dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
} }
@ -288,34 +360,35 @@ export default defineComponent({
.on('resize', (args: any) => { .on('resize', (args: any) => {
const { target, width, height, dist, delta, clientX, clientY, direction } = args const { target, width, height, dist, delta, clientX, clientY, direction } = args
console.log(2, args) console.log(2, args)
if (this.dActiveElement.type === 'w-text') { if (dActiveElement.value.type === 'w-text') {
if (String(direction) === '1,1') { if (String(direction) === '1,1') {
this.resetRatio = width / resizeStartWidth resetRatio = width / resizeStartWidth
target!.style.fontSize = this.dActiveElement.fontSize * this.resetRatio + 'px' target!.style.fontSize = dActiveElement.value.fontSize * resetRatio + 'px'
target!.style.letterSpacing = this.startLS * this.resetRatio + 'px' target!.style.letterSpacing = startLS * resetRatio + 'px'
target!.style.lineHeight = this.startHL * this.resetRatio + 'px' target!.style.lineHeight = startHL * resetRatio + 'px'
} }
target.style.width = width target.style.width = width
target.style.height = height target.style.height = height
this.resizeTempData = { width, height } resizeTempData = { width, height }
// moveable.updateRect() // moveable.updateRect()
target.style.backgroundImage = 'none' target.style.backgroundImage = 'none'
// moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1) // moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
} else if (this.dActiveElement.type == 'w-image' || this.dActiveElement.type === 'w-qrcode' || this.dActiveElement.type === 'w-svg') { } else if (dActiveElement.value.type == 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
this.resizeTempData = { width, height } resizeTempData = { width, height }
} else if (this.dActiveElement.type == 'w-group') { } else if (dActiveElement.value.type == 'w-group') {
// let record = this.dActiveElement.record // let record = this.dActiveElement.record
// this.dActiveElement.tempScale = width / record.width // this.dActiveElement.tempScale = width / record.width
this.$store.commit('resize', { width: width, height: height }) store.commit('resize', { width: width, height: height })
// this.resizeTempData = { width, height } // this.resizeTempData = { width, height }
// let record = this.dActiveElement.record // let record = this.dActiveElement.record
// setTransformAttribute(target, 'scale', width / record.width) // setTransformAttribute(target, 'scale', width / record.width)
} else { } else {
this.$store.commit('resize', { width: width, height: height }) store.commit('resize', { width: width, height: height })
} }
this.dActiveElement.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${this.dActiveElement.rotate}`)) dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value.rotate}`))
}) })
.on('resizeEnd', (e: any) => { .on('resizeEnd', (e: any) => {
if (!moveable) return
moveable.resizable = true moveable.resizable = true
// moveable.scalable = true // moveable.scalable = true
moveable.snappable = true moveable.snappable = true
@ -325,7 +398,7 @@ export default defineComponent({
// // 临时屏蔽，抖得太严重 // // 临时屏蔽，抖得太严重
// return // return
// } // }
console.log('重置translate', this.dActiveElement) console.log('重置translate', dActiveElement.value)
// 转换成位置 // 转换成位置
// if (this.dActiveElement.cache && this.dActiveElement.cache.recordLeft) { // if (this.dActiveElement.cache && this.dActiveElement.cache.recordLeft) {
// const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.cache.recordLeft) // const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.cache.recordLeft)
@ -338,19 +411,32 @@ export default defineComponent({
// } // }
const left = e.lastEvent.drag.translate[0] const left = e.lastEvent.drag.translate[0]
const top = e.lastEvent.drag.translate[1] const top = e.lastEvent.drag.translate[1]
this.updateWidgetMultiple({ store.dispatch("updateWidgetMultiple", {
uuid: this.dActiveElement.uuid, uuid: dActiveElement.value.uuid,
data: [ data: [
{ {
key: 'left', key: 'left',
value: Number(this.dActiveElement.left) + left, value: Number(dActiveElement.value.left) + left,
}, },
{ {
key: 'top', key: 'top',
value: Number(this.dActiveElement.top) + top, value: Number(dActiveElement.value.top) + top,
}, },
], ],
}) })
// this.updateWidgetMultiple({
// uuid: this.dActiveElement.uuid,
// data: [
// {
// key: 'left',
// value: Number(this.dActiveElement.left) + left,
// },
// {
// key: 'top',
// value: Number(this.dActiveElement.top) + top,
// },
// ],
// })
// 重置translate // 重置translate
const tf = e.target.style.transform const tf = e.target.style.transform
const iof = tf.indexOf('translate') const iof = tf.indexOf('translate')
@ -361,47 +447,52 @@ export default defineComponent({
// this.moveable.updateRect() // this.moveable.updateRect()
// }, 10) // }, 10)
} }
if (this.resizeTempData) { if (resizeTempData) {
this.$store.commit('resize', this.resizeTempData) store.commit('resize', resizeTempData)
this.resizeTempData = null resizeTempData = null
setTimeout(async () => { setTimeout(async () => {
await this.$nextTick() await nextTick()
this.moveable.updateRect() if (moveable) {
moveable.updateRect()
}
}, 10) }, 10)
} }
try { try {
if (this.dActiveElement.type === 'w-text') { if (dActiveElement.value.type === 'w-text') {
const d = e.direction || e.lastEvent.direction const d = e.direction || e.lastEvent.direction
String(d) === '1,1' && (this.dActiveElement.fontSize = this.dActiveElement.fontSize * this.resetRatio) String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
} }
} catch (err) {} } catch (err) {}
moveable.keepRatio = true moveable.keepRatio = true
}) })
.on('scaleStart', (e) => { .on('scaleStart', (e) => {
if (this.dActiveElement.type === 'w-text') { if (dActiveElement.value.type === 'w-text') {
this.startHL = Number(e.target!.style.lineHeight.replace('px', '')) startHL = Number(e.target!.style.lineHeight.replace('px', ''))
this.startLS = Number(e.target!.style.letterSpacing.replace('px', '')) startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
this.resetRatio = 1 resetRatio = 1
} else { } else {
if (!moveable) return
moveable.scalable = false moveable.scalable = false
} }
}) })
.on('scale', (e) => { .on('scale', (e) => {
if (!moveable) return
moveable.resizable = false moveable.resizable = false
const { target, scale, transform } = e const { target, scale, transform } = e
this.resetRatio = scale[0] resetRatio = scale[0]
target!.style.transform = transform target!.style.transform = transform
this.dActiveElement.rotate && (target!.style.transform = target!.style.transform.replace('0deg', this.dActiveElement.rotate)) dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
}) })
.on('scaleEnd', (e) => { .on('scaleEnd', (e: Record<string, any>) => {
if (!moveable) return
moveable.resizable = true moveable.resizable = true
// moveable.scalable = true // moveable.scalable = true
moveable.keepRatio = true moveable.keepRatio = true
console.log(e.target.style.transform) console.log(e.target.style.transform)
try { try {
if (this.dActiveElement.type === 'w-text') { if (dActiveElement.value.type === 'w-text') {
const d = e.direction || e.lastEvent.direction const d = e.direction || e.lastEvent.direction
String(d) === '1,1' && (this.dActiveElement.fontSize = this.dActiveElement.fontSize * this.resetRatio) String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
} }
} catch (err) {} } catch (err) {}
}) })
@ -412,7 +503,7 @@ export default defineComponent({
const events = e.events const events = e.events
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const ev = events[i] const ev = events[i]
const currentWidget = this.dWidgets.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid')) const currentWidget = dWidgets.value.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
const left = Number(currentWidget.left) + ev.beforeTranslate[0] const left = Number(currentWidget.left) + ev.beforeTranslate[0]
// debug -- start -- // debug -- start --
if (i === 1) { if (i === 1) {
@ -429,12 +520,12 @@ export default defineComponent({
for (const key in holdGroupPosition) { for (const key in holdGroupPosition) {
if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) { if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
const item = holdGroupPosition[key] const item = holdGroupPosition[key]
this.updateWidgetData({ store.dispatch('updateWidgetData', {
uuid: key, uuid: key,
key: 'left', key: 'left',
value: item.left, value: item.left,
}) })
this.updateWidgetData({ store.dispatch("updateWidgetData", {
uuid: key, uuid: key,
key: 'top', key: 'top',
value: item.top, value: item.top,
@ -445,7 +536,7 @@ export default defineComponent({
// background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%); // background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
// background-size: 12px 1px; // background-size: 12px 1px;
}) })
.on('resizeGroupStart', ({ events }: any) => { .on('resizeGroupStart', ({ events }) => {
console.log(events) console.log(events)
// events.forEach((ev, i) => { // events.forEach((ev, i) => {
// const frame = this.frames[i]; // const frame = this.frames[i];
@ -462,7 +553,7 @@ export default defineComponent({
// ev.dragStart && ev.dragStart.set(frame.translate); // ev.dragStart && ev.dragStart.set(frame.translate);
// }); // });
}) })
.on('resizeGroup', (e: any) => { .on('resizeGroup', (e) => {
// events.forEach(({ target, width, height, drag }, i) => { // events.forEach(({ target, width, height, drag }, i) => {
// const frame = this.frames[i]; // const frame = this.frames[i];
// target.style.width = `${width}px`; // target.style.width = `${width}px`;
@ -473,26 +564,28 @@ export default defineComponent({
// = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`; // = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
// }); // });
}) })
.on('resizeGroupEnd', ({ targets, isDrag }: any) => { .on('resizeGroupEnd', ({ targets, isDrag }) => {
console.log('onResizeGroupEnd', targets, isDrag) console.log('onResizeGroupEnd', targets, isDrag)
}) })
// -- 选择功能 Start -- // -- 选择功能 Start --
useSelecto(this.moveable) useSelecto(moveable)
// -- 选择功能 END -- // -- 选择功能 END --
}, })
async created() {
async function created() {
await nextTick() await nextTick()
const Ele = document.getElementById('page-design') const Ele = document.getElementById('page-design')
// 后续可能加个节流 TODO // 后续可能加个节流 TODO
Ele?.addEventListener('scroll', () => { Ele?.addEventListener('scroll', () => {
this.moveable.updateRect() moveable && (moveable.updateRect())
}) })
}, }
methods: { created()
...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
}, // ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
})
</script> </script>
<style lang="less"> <style lang="less">