github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-28 04:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: moveable 迁移到vue3

Browse Source
This commit is contained in:
zackxizi 2024-04-04 09:46:10 +08:00
parent 50d193c067
commit 2ae7b0fd4c
33 changed files with 5872 additions and 2258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -25,3 +25,6 @@ pnpm-debug.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
**/dist/

2
.prettierrc.js
View File

@ -1,7 +1,7 @@
// .prettierrc.js 代码美化规则配置 // .prettierrc.js 代码美化规则配置
module.exports = { module.exports = {
// 一行最多 n 字符 // 一行最多 n 字符
printWidth: 1000, printWidth: 200,
// 使用 2 个空格缩进 // 使用 2 个空格缩进
tabWidth: 2, tabWidth: 2,
// 不使用缩进符，而使用空格 // 不使用缩进符，而使用空格

13
.vscode/settings.json vendored
View File

@ -9,5 +9,16 @@
}, },
"css.validate": false, "css.validate": false,
"less.validate": false, "less.validate": false,
"scss.validate": false "scss.validate": false,
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"cSpell.words": [
"clippable",
"pinchable",
"pinia",
"snappable",
"ungroup",
"warpable"
]
} }

2038
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -26,17 +26,18 @@
"fontfaceobserver": "^2.1.0", "fontfaceobserver": "^2.1.0",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"moveable": "^0.26.0",
"moveable-helper": "^0.4.0",
"nanoid": "^3.1.23", "nanoid": "^3.1.23",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"prepared": "^0.1.1",
"qr-code-styling": "^1.6.0-rc.1", "qr-code-styling": "^1.6.0-rc.1",
"selecto": "^1.13.0", "selecto": "^1.26.3",
"throttle-debounce": "^3.0.1", "throttle-debounce": "^3.0.1",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "3.4.19", "vue": "3.4.19",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vue3-moveable": "^0.28.0",
"vue3-selecto": "^1.12.3",
"vuedraggable": "^4.1.0" "vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
@ -53,6 +54,7 @@
"eslint-config-alloy": "~4.1.0", "eslint-config-alloy": "~4.1.0",
"eslint-plugin-vue": "^7.12.1", "eslint-plugin-vue": "^7.12.1",
"less": "^4.1.1", "less": "^4.1.1",
"prettier-eslint": "^16.3.0",
"terser": "^5.28.1", "terser": "^5.28.1",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"unplugin-element-plus": "^0.7.1", "unplugin-element-plus": "^0.7.1",

3096
screenshot/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/api/material.ts
View File

@ -47,7 +47,7 @@ export type TGetFontParam = {
/** 字体item数据 */ /** 字体item数据 */
export type TGetFontItemData = { export type TGetFontItemData = {
id: number id: number | string
alias: string alias: string
oid: string oid: string
value: string value: string

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

File diff suppressed because it is too large Load Diff

54
src/components/business/moveable/Selecto.ts
View File

@ -1,54 +0,0 @@
import Selecto from 'selecto'
import Moveable, { getElementInfo } from 'moveable'
// import store from '@/store'
import { useWidgetStore, useControlStore } from '@/store'
export default function(moveable: Moveable) {
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const selecto = new Selecto({
container: document.getElementById('page-design'),
selectableTargets: ['.layer'],
selectByClick: false,
// 是否从内部目标中选择(default: true)
selectFromInside: false,
// 选择后，是否与所选目标一起选择下一个目标
continueSelect: false,
// Determines which key to continue selecting the next target via keydown and keyup.
toggleContinueSelect: 'shift',
// The container for keydown and keyup events
keyContainer: document.getElementById('page-design'),
// 目标与要选择的拖动区域重叠的速率。(默认:100)
hitRate: 5,
getElementRect: getElementInfo,
})
selecto.on('select', (e) => {
e.added.forEach((el) => {
if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) {
el.classList.add('widget-selected')
widgetStore.selectWidgetsInOut({
uuid: el.getAttribute('data-uuid') || "",
})
// store.dispatch('selectWidgetsInOut', {
// uuid: el.getAttribute('data-uuid'),
// })
}
})
e.removed.forEach((el) => {
el.classList.remove('widget-selected')
widgetStore.selectWidgetsInOut({
uuid: el.getAttribute('data-uuid') || "",
})
// store.dispatch('selectWidgetsInOut', {
// uuid: el.getAttribute('data-uuid'),
// })
})
moveable.renderDirections = [] // ['nw', 'ne', 'sw', 'se'] // []
moveable.rotatable = false
moveable.target = [].slice.call(document.querySelectorAll('.widget-selected'))
}).on("dragStart", e => {
if (controlStore.dSpaceDown) {
e.stop();
}
})
}

50
src/components/business/right-click-menu/RcMenu.vue
View File

@ -4,7 +4,10 @@
<li <li
v-for="(item, index) in menuListData.list" v-for="(item, index) in menuListData.list"
:key="index" :key="index"
:class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" :class="{
'menu-item': true,
'disable-menu': dCopyElement.length === 0 && item.type === 'paste',
}"
@click.stop="selectMenu(item.type)" @click.stop="selectMenu(item.type)"
> >
{{ item.text }} {{ item.text }}
@ -15,29 +18,24 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { import { widgetMenu as widget, pageMenu as page, menuList as menu, TMenuItemData, TWidgetItemData } from './rcMenuData'
widgetMenu as widget,
pageMenu as page,
menuList as menu,
TMenuItemData, TWidgetItemData,
} from './rcMenuData'
import { getTarget } from '@/common/methods/target' import { getTarget } from '@/common/methods/target'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'; // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia'
import { useControlStore, useWidgetStore } from '@/store'; import { useControlStore, useWidgetStore } from '@/store'
const menuListData = ref<TMenuItemData>({...menu}) const menuListData = ref<TMenuItemData>({ ...menu })
const showMenuBg = ref<boolean>(false) const showMenuBg = ref<boolean>(false)
const widgetMenu = ref<TWidgetItemData[]>({...widget}) const widgetMenu = ref<TWidgetItemData[]>({ ...widget })
const pageMenu = ref<TWidgetItemData[]>({...page}) const pageMenu = ref<TWidgetItemData[]>({ ...page })
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const controlStore = useControlStore()
// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement']) // const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore) const { dActiveElement, dWidgets, dCopyElement } = storeToRefs(widgetStore)
const { dAltDown } = storeToRefs(useControlStore()) const { dAltDown } = storeToRefs(useControlStore())
const styleObj = computed(() => { const styleObj = computed(() => {
return { return {
left: menuListData.value.left + 'px', left: menuListData.value.left + 'px',
@ -64,12 +62,8 @@ async function mouseRightClick(e: MouseEvent) {
if (uuid !== '-1' && !dAltDown.value) { if (uuid !== '-1' && !dAltDown.value) {
let widget = dWidgets.value.find((item: any) => item.uuid === uuid) let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
if ( if (widget?.parent !== '-1' && widget?.parent !== dActiveElement.value?.uuid && widget?.parent !== dActiveElement.value?.parent) {
widget?.parent !== '-1' && uuid = widget?.parent || ''
widget?.parent !== dActiveElement.value?.uuid &&
widget?.parent !== dActiveElement.value?.parent
) {
uuid = widget?.parent || ""
} }
} }
widgetStore.selectWidget({ widgetStore.selectWidget({
@ -130,7 +124,7 @@ function selectMenu(type: TWidgetItemData['type']) {
break break
case 'index-up': case 'index-up':
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
value: 1, value: 1,
isGroup: dActiveElement.value?.isContainer, isGroup: dActiveElement.value?.isContainer,
}) })
@ -142,7 +136,7 @@ function selectMenu(type: TWidgetItemData['type']) {
break break
case 'index-down': case 'index-down':
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
value: -1, value: -1,
isGroup: dActiveElement.value?.isContainer, isGroup: dActiveElement.value?.isContainer,
}) })
@ -157,13 +151,21 @@ function selectMenu(type: TWidgetItemData['type']) {
// store.dispatch('deleteWidget') // store.dispatch('deleteWidget')
break break
case 'ungroup': case 'ungroup':
widgetStore.ungroup(dActiveElement.value?.uuid || "") widgetStore.ungroup(dActiveElement.value?.uuid || '')
// store.dispatch('ungroup', dActiveElement.value.uuid) // store.dispatch('ungroup', dActiveElement.value.uuid)
break break
case 'warpable':
controlStore.setWarpable(true)
break
case 'scalable':
controlStore.setScalable(true)
break
case 'resizable':
controlStore.setResizable(true)
break
} }
closeMenu() closeMenu()
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

16
src/components/business/right-click-menu/rcMenuData.ts
View File

@ -2,7 +2,7 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2021-07-30 17:38:50 * @Date: 2021-07-30 17:38:50
* @Description: * @Description:
* @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @Date: 2024-03-04 18:50:00 * @Date: 2024-03-04 18:50:00
*/ */
@ -19,7 +19,7 @@ export const menuList: TMenuItemData = {
} }
export type TWidgetItemData = { export type TWidgetItemData = {
type: 'copy' | 'paste' | 'index-up' | 'index-down' | 'del' | 'ungroup' type: 'copy' | 'paste' | 'index-up' | 'index-down' | 'del' | 'ungroup' | 'warpable' | 'scalable' | 'resizable'
text: string text: string
} }
@ -44,6 +44,18 @@ export const widgetMenu: TWidgetItemData[] = [
type: 'del', type: 'del',
text: '删除', text: '删除',
}, },
{
type: 'warpable',
text: '斜切',
},
{
type: 'scalable',
text: '缩放',
},
{
type: 'resizable',
text: '调整大小',
},
] ]
export const pageMenu: TWidgetItemData[] = [ export const pageMenu: TWidgetItemData[] = [

124
src/components/modules/layout/designBoard/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="main"> <div id="main">
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }" > <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }">
<div <div
id="out-page" id="out-page"
class="out-page" class="out-page"
@ -42,11 +42,17 @@
<component <component
:is="layer.type" :is="layer.type"
v-for="layer in getlayers()" v-for="layer in getlayers()"
:id="layer.uuid" :key="layer.uuid" :id="layer.uuid"
:key="layer.uuid"
:class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement?.parent === layer.uuid, 'layer-no-hover': dActiveElement?.uuid === 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" :data-title="layer.type"
:parent="dPage" :data-type="layer.type" :params="layer"
:parent="dPage"
:data-type="layer.type"
:data-uuid="layer.uuid" :data-uuid="layer.uuid"
:style="{
...widgetStyle(layer),
}"
> >
<template v-if="layer.isContainer"> <template v-if="layer.isContainer">
<!-- :class="{ <!-- :class="{
@ -58,10 +64,17 @@
<component <component
:is="widget.type" :is="widget.type"
v-for="widget in getChilds(layer.uuid)" v-for="widget in getChilds(layer.uuid)"
:key="widget.uuid" child :class="['layer', { 'layer-no-hover':dActiveElement?.uuid !== widget.parent && dActiveElement?.parent !== widget.parent }]" :key="widget.uuid"
:data-title="widget.type" :params="widget" child
:parent="layer" :data-type="widget.type" :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" :data-uuid="widget.uuid"
:style="{
...groupWidgetChildrenStyle(layer, widget),
}"
/> />
</template> </template>
</component> </component>
@ -75,7 +88,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue' import { CSSProperties, onMounted } from 'vue'
import { getTarget } from '@/common/methods/target' import { getTarget } from '@/common/methods/target'
import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData' import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
import PointImg from '@/utils/plugins/pointImg' import PointImg from '@/utils/plugins/pointImg'
@ -85,6 +98,8 @@ import { move, moveInit } from '@/mixins/move'
import { useCanvasStore, useControlStore, useGroupStore, useWidgetStore } from '@/store' import { useCanvasStore, useControlStore, useGroupStore, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { TPageState } from '@/store/design/canvas/d' import { TPageState } from '@/store/design/canvas/d'
import { TdWidgetData } from '@/store/design/widget'
import { getOffsetFromTransform, removeTranslate } from '@/utils/widgets/transferTranslate'
// 页面设计组件 // 页面设计组件
type TProps = { type TProps = {
pageDesignCanvasId: string pageDesignCanvasId: string
@ -108,7 +123,6 @@ const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
const { dDraging, showRotatable, dAltDown, dSpaceDown } = storeToRefs(controlStore) const { dDraging, showRotatable, dAltDown, dSpaceDown } = storeToRefs(controlStore)
const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore) const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
let _dropIn: string | null = '' let _dropIn: string | null = ''
let _srcCache: string | null = '' let _srcCache: string | null = ''
@ -146,14 +160,14 @@ onMounted(() => {
} }
}) })
// components: {lineGuides}, // components: {lineGuides},
// mixins: [moveInit], // mixins: [moveInit],
// ...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']), // ...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']),
// getBackground(data) { // getBackground(data) {
// if (data.startsWith('http')) return `url(${data})` // if (data.startsWith('http')) return `url(${data})`
// if (data.startsWith('linear-gradient')) return data // if (data.startsWith('linear-gradient')) return data
// }, // },
async function dropOver(e: MouseEvent) { async function dropOver(e: MouseEvent) {
if (!dActiveElement.value) return if (!dActiveElement.value) return
@ -172,7 +186,7 @@ async function dropOver(e: MouseEvent) {
if (!target) return if (!target) return
const uuid = target.getAttribute('data-uuid') const uuid = target.getAttribute('data-uuid')
widgetStore.setDropOver(uuid ?? "-1") widgetStore.setDropOver(uuid ?? '-1')
// store.dispatch('setDropOver', uuid) // store.dispatch('setDropOver', uuid)
const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
@ -201,7 +215,7 @@ async function drop(e: MouseEvent) {
const dropIn = _dropIn const dropIn = _dropIn
_dropIn = '' _dropIn = ''
widgetStore.setDropOver("-1") widgetStore.setDropOver('-1')
// store.dispatch('setDropOver', '-1') // store.dispatch('setDropOver', '-1')
// store.commit('setShowMoveable', false) // 清理上一次的选择 // store.commit('setShowMoveable', false) // 清理上一次的选择
@ -239,7 +253,7 @@ async function drop(e: MouseEvent) {
}) })
const half = { const half = {
x: parent.width ? (parent.width * dZoom.value) / 100 / 2 : 0, x: parent.width ? (parent.width * dZoom.value) / 100 / 2 : 0,
y: parent.height ? (parent.height * dZoom.value) / 100 / 2 : 0 y: parent.height ? (parent.height * dZoom.value) / 100 / 2 : 0,
} }
componentItem.forEach((element) => { componentItem.forEach((element) => {
element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value) element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
@ -250,9 +264,9 @@ async function drop(e: MouseEvent) {
// addGroup(item) // addGroup(item)
} }
// 设置坐标 // 设置坐标
const half = { const half = {
x: setting.width ? (setting.width * dZoom.value) / 100 / 2 : 0, x: setting.width ? (setting.width * dZoom.value) / 100 / 2 : 0,
y: setting.height ? (setting.height * dZoom.value) / 100 / 2 : 0 y: setting.height ? (setting.height * dZoom.value) / 100 / 2 : 0,
} }
// const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 } // 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 / dZoom.value) setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
@ -268,7 +282,7 @@ async function drop(e: MouseEvent) {
// store.commit('setShowMoveable', true) // 恢复选择 // store.commit('setShowMoveable', true) // 恢复选择
controlStore.setShowMoveable(true) // 恢复选择 controlStore.setShowMoveable(true) // 恢复选择
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid) const widget = dWidgets.value.find((item: { uuid: string }) => item.uuid === uuid)
if (!widget) return if (!widget) return
widget.imgUrl = item.value.url widget.imgUrl = item.value.url
// if (e.target.className.baseVal) { // if (e.target.className.baseVal) {
@ -277,14 +291,13 @@ async function drop(e: MouseEvent) {
// } // }
} else { } else {
if (dropIn) { if (dropIn) {
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn) const widget = dWidgets.value.find((item: { uuid: string }) => item.uuid == dropIn)
if (!widget) return if (!widget) return
widget.imgUrl = item.value.url widget.imgUrl = item.value.url
console.log('加入+', widget) console.log('加入+', widget)
// store.commit('setShowMoveable', true) // 恢复选择 // store.commit('setShowMoveable', true) // 恢复选择
controlStore.setShowMoveable(true) // 恢复选择 controlStore.setShowMoveable(true) // 恢复选择
} else { } else {
widgetStore.addWidget(setting as Required<TPageState>) widgetStore.addWidget(setting as Required<TPageState>)
// store.dispatch('addWidget', setting) // 正常加入面板 // store.dispatch('addWidget', setting) // 正常加入面板
@ -343,7 +356,7 @@ async function handleSelection(e: MouseEvent) {
if (type) { if (type) {
let uuid = target.getAttribute('data-uuid') let uuid = target.getAttribute('data-uuid')
if (uuid !== '-1' && !dAltDown.value) { if (uuid !== '-1' && !dAltDown.value) {
let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid) let widget = dWidgets.value.find((item: { uuid: string }) => item.uuid === uuid)
if (!widget || !dActiveElement.value) return if (!widget || !dActiveElement.value) return
if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) { if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
uuid = widget.parent || null uuid = widget.parent || null
@ -352,14 +365,18 @@ async function handleSelection(e: MouseEvent) {
// 设置选中元素 // 设置选中元素
// this.$store.commit('setMoveable', false) // this.$store.commit('setMoveable', false)
if (showRotatable.value !== false) { /* if (showRotatable.value !== false) {
widgetStore.selectWidget({ widgetStore.selectWidget({
uuid: uuid ?? " -1", uuid: uuid ?? ' -1',
}) })
// store.dispatch('selectWidget', { // store.dispatch('selectWidget', {
// uuid: uuid, // uuid: uuid,
// }) // })
} } */
widgetStore.selectWidget({
uuid: uuid ?? ' -1',
})
if (uuid !== '-1') { if (uuid !== '-1') {
moveInit.methods.initmovement(e) // 参见 mixins moveInit.methods.initmovement(e) // 参见 mixins
@ -367,7 +384,7 @@ async function handleSelection(e: MouseEvent) {
} else { } else {
// 取消选中元素 // 取消选中元素
widgetStore.selectWidget({ widgetStore.selectWidget({
uuid: "-1" uuid: '-1',
}) })
// store.dispatch('selectWidget', { // store.dispatch('selectWidget', {
// uuid: '-1', // uuid: '-1',
@ -382,22 +399,47 @@ function getlayers() {
function getChilds(uuid: string) { function getChilds(uuid: string) {
return dWidgets.value.filter((item) => item.parent === uuid) return dWidgets.value.filter((item) => item.parent === uuid)
} }
// getIsActive(uuid) { // getIsActive(uuid) {
// if (this.dSelectWidgets.length > 0) { // if (this.dSelectWidgets.length > 0) {
// let widget = this.dSelectWidgets.find((item) => item.uuid === uuid) // let widget = this.dSelectWidgets.find((item) => item.uuid === uuid)
// if (widget) { // if (widget) {
// return true // return true
// } // }
// return false // return false
// } else { // } else {
// return uuid === this.dActiveElement.uuid // return uuid === this.dActiveElement.uuid
// } // }
// }, // },
const widgetStyle = (widgetData: TdWidgetData): CSSProperties => {
const { transform, transformOrigin, width, height } = widgetData
const style: CSSProperties = { position: 'absolute' }
if (transform) style.transform = transform
if (transformOrigin) style.transformOrigin = transformOrigin
if (width !== undefined) style.width = `${width}px`
if (height !== undefined) style.height = `${height}px`
return style
}
const groupWidgetChildrenStyle = (groupWidgetData: TdWidgetData, widgetData: TdWidgetData): CSSProperties => {
const { transform, transformOrigin, width, height } = widgetData
const { transform: gTransform } = groupWidgetData
const { x: gX, y: gY } = getOffsetFromTransform(gTransform || '')
const { x, y } = getOffsetFromTransform(transform || '')
const style: CSSProperties = { position: 'absolute' }
if (transform) style.transform = removeTranslate(transform)
if (transformOrigin) style.transformOrigin = transformOrigin
if (width !== undefined) style.width = `${width}px`
if (height !== undefined) style.height = `${height}px`
style.transform = `translate(${x - gX}px, ${y - gY}px) ${style.transform}`
return style
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#main { #main {
overflow: auto; position: relative; overflow: auto;
position: relative;
} }
#page-design { #page-design {
scrollbar-width: none; scrollbar-width: none;

2
src/components/modules/widgets/wGroup/groupSetting.ts
View File

@ -8,7 +8,7 @@ export const wGroupSetting = {
height: 0, height: 0,
left: 0, left: 0,
top: 0, top: 0,
transform: '', transform: 'translate(0,0) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)',
opacity: 1, opacity: 1,
parent: '-1', parent: '-1',
isContainer: true, isContainer: true,

33
src/components/modules/widgets/wGroup/wGroup.vue
View File

@ -2,22 +2,11 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2021-08-02 09:41:41 * @Date: 2021-08-02 09:41:41
* @Description: * @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @LastEditors: xi_zi
* @LastEditTime: 2023-10-16 00:30:03 * @LastEditTime: 2024-04-03 23:31:12
--> -->
<template> <template>
<div <div ref="widget" :class="['w-group', { 'layer-lock': props.params?.lock }]">
ref="widget"
:class="['w-group', { 'layer-lock': props.params?.lock }]"
:style="{
position: 'absolute',
left: (props.params.left || 0) - (props.parent?.left || 0) + 'px',
top: (props.params.top || 0) - (props.parent.top || 0) + 'px',
width: params.width + 'px',
height: params.height + 'px',
opacity: params.opacity,
}"
>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -28,8 +17,8 @@ const NAME = 'w-group'
import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue' import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
import { setTransformAttribute } from '@/common/methods/handleTransform' import { setTransformAttribute } from '@/common/methods/handleTransform'
import { useWidgetStore } from '@/store'; import { useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'; // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
export type TParamsData = { export type TParamsData = {
@ -46,13 +35,12 @@ export type TParamsData = {
type TProps = { type TProps = {
params?: Partial<TParamsData> params?: Partial<TParamsData>
parent?: Partial<Pick<TParamsData, "top" | "left">> parent?: Partial<Pick<TParamsData, 'top' | 'left'>>
} }
const props = withDefaults(defineProps<TProps>(), { const props = withDefaults(defineProps<TProps>(), {
params: () => ({}), params: () => ({}),
parent: () => ({}) parent: () => ({}),
}) })
;
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const widget = ref<HTMLElement | null>(null) const widget = ref<HTMLElement | null>(null)
@ -105,7 +93,7 @@ onMounted(async () => {
document.addEventListener('mousedown', touchstart, false) document.addEventListener('mousedown', touchstart, false)
document.addEventListener('mouseup', touchend, false) document.addEventListener('mouseup', touchend, false)
if (props.params?.rotate && widget.value) { if (props.params?.rotate && widget.value) {
(widget.value.style.transform += `rotate(${props.params.rotate})`) widget.value.style.transform += `rotate(${props.params.rotate})`
} }
}) })
@ -115,7 +103,7 @@ onBeforeUnmount(() => {
}) })
// ...mapActions(['updateWidgetData']), // ...mapActions(['updateWidgetData']),
function updateRecord(tempScale ?: number) { function updateRecord(tempScale?: number) {
if (dActiveElement.value?.uuid === props.params.uuid) { if (dActiveElement.value?.uuid === props.params.uuid) {
// clearTimeout(this.timer) // clearTimeout(this.timer)
let record = dActiveElement.value?.record let record = dActiveElement.value?.record
@ -238,14 +226,13 @@ function keySetValue(uuid: string, key: keyof TParamsData, value: number) {
setTimeout(() => { setTimeout(() => {
const widget = dWidgets.value.find((item) => item.uuid === uuid) const widget = dWidgets.value.find((item) => item.uuid === uuid)
if (!widget) return if (!widget) return
(widget[key] as Number) = value + Number(props.params[key] || '') ;(widget[key] as Number) = value + Number(props.params[key] || '')
}, 10) }, 10)
} }
// defineExpose({ // defineExpose({
// setting // setting
// }) // })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

50
src/components/modules/widgets/wGroup/wGroupStyle.vue
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2021-08-09 11:21:37 * @Date: 2021-08-09 11:21:37
* @Description: 组合设置 * @Description: 组合设置
* @LastEditors: ShawnPhang <site: book.palxp.com> * @LastEditors: xi_zi
* @LastEditTime: 2023-06-29 17:57:24 * @LastEditTime: 2024-04-03 15:44:34
--> -->
<template> <template>
<div id="w-group-style"> <div id="w-group-style">
@ -18,12 +18,7 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="样式设置" name="2"> <el-collapse-item title="样式设置" name="2">
<!-- <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button> --> <!-- <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button> -->
<div <div class="ungroup style-item" @click="widgetStore.ungroup(String(state.innerElement.uuid))">取消组合</div>
class="ungroup style-item"
@click="widgetStore.ungroup(String(state.innerElement.uuid))"
>
取消组合
</div>
<number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" /> <number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
<br /> <br />
<icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" /> <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@ -52,13 +47,13 @@ import { TUpdateAlignData } from '@/store/design/widget/actions/align'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters' // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
type TState = { type TState = {
activeNames: string[], activeNames: string[]
// defaultValue: 0, // defaultValue: 0,
innerElement: typeof wGroupSetting, innerElement: typeof wGroupSetting
tag: boolean, tag: boolean
ingoreKeys: string[], ingoreKeys: string[]
layerIconList: TIconItemSelectData[], layerIconList: TIconItemSelectData[]
alignIconList: TIconItemSelectData[], alignIconList: TIconItemSelectData[]
} }
const state = reactive<TState>({ const state = reactive<TState>({
@ -86,7 +81,7 @@ watch(
(newValue, oldValue) => { (newValue, oldValue) => {
change() change()
}, },
{ deep: true } { deep: true },
) )
watch( watch(
@ -94,7 +89,7 @@ watch(
(newValue, oldValue) => { (newValue, oldValue) => {
changeValue() changeValue()
}, },
{ deep: true } { deep: true },
) )
function created() { function created() {
@ -104,7 +99,7 @@ function created() {
created() created()
// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']), // ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
function change() { function change() {
state.tag = true state.tag = true
state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value)) state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
@ -121,12 +116,12 @@ function changeValue() {
for (let key in state.innerElement) { for (let key in state.innerElement) {
const itemKey = key as keyof typeof wGroupSetting const itemKey = key as keyof typeof wGroupSetting
if (state.ingoreKeys.indexOf(itemKey) !== -1) { if (state.ingoreKeys.indexOf(itemKey) !== -1) {
(dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey] ;(dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]) { } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]) {
widgetStore.updateWidgetData({ widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
key: (key as TUpdateWidgetPayload['key']), key: key as TUpdateWidgetPayload['key'],
value: (state.innerElement[itemKey] as TUpdateWidgetPayload['value']), value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
}) })
// store.dispatch("updateWidgetData", { // store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value?.uuid, // uuid: dActiveElement.value?.uuid,
@ -137,12 +132,11 @@ function changeValue() {
} }
} }
function finish(key: string, value: string | number | number[]) { function finish(key: string, value: string | number | number[]) {
widgetStore.updateWidgetData({ widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
key: key as TUpdateWidgetPayload['key'], key: key as TUpdateWidgetPayload['key'],
value: value as TUpdateWidgetPayload['value'], value: value as TUpdateWidgetPayload['value'],
pushHistory: true, pushHistory: true,
}) })
// store.dispatch("updateWidgetData", { // store.dispatch("updateWidgetData", {
@ -155,8 +149,8 @@ function finish(key: string, value: string | number | number[]) {
function layerAction(item: TIconItemSelectData) { function layerAction(item: TIconItemSelectData) {
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
value: (item.value as TupdateLayerIndexData['value']), value: item.value as TupdateLayerIndexData['value'],
isGroup: true, isGroup: true,
}) })
// store.dispatch("updateLayerIndex", { // store.dispatch("updateLayerIndex", {
@ -168,8 +162,8 @@ function layerAction(item: TIconItemSelectData) {
function alignAction(item: TIconItemSelectData) { function alignAction(item: TIconItemSelectData) {
widgetStore.updateAlign({ widgetStore.updateAlign({
align: (item.value as TUpdateAlignData['align']), align: item.value as TUpdateAlignData['align'],
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
}) })
// store.dispatch("updateAlign", { // store.dispatch("updateAlign", {
// align: item.value, // align: item.value,

73
src/components/modules/widgets/wImage/wImage.vue
View File

@ -3,30 +3,30 @@
:id="params.uuid" :id="params.uuid"
ref="widgetRef" ref="widgetRef"
:class="['w-image', { 'layer-lock': params.lock }]" :class="['w-image', { 'layer-lock': params.lock }]"
:style="{
position: state.position,
left: params.left - parent.left + 'px',
top: params.top - parent.top + 'px',
width: params.width + 'px',
height: params.height + 'px',
opacity: params.opacity,
}"
> >
<div <div>
v-if="cropEdit" <div v-if="cropEdit" :id="params.uuid + '_ebox'" :ref="params.uuid + '_ebox'" :style="state.editBoxStyle" class="svg__edit__wrap">
:id="params.uuid + '_ebox'" <img class="edit__model" :src="params.imgUrl" />
:ref="params.uuid + '_ebox'" </div>
:style="state.editBoxStyle" <div
class="svg__edit__wrap" :style="{
> transform: params.flip ? `rotate${params.flip}(180deg)` : undefined,
<img class="edit__model" :src="params.imgUrl" /> borderRadius: params.radius + 'px',
</div> '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : 'initial'}`,
<div :style="{ transform: params.flip ? `rotate${params.flip}(180deg)` : undefined, borderRadius: params.radius + 'px', '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : 'initial'}` }" :class="['img__box', { mask: params.mask }]"> }"
<div v-if="params.isNinePatch" ref="targetRef" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div> :class="['img__box', { mask: params.mask }]"
<img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" /> >
</div> <div
<div v-if="isMask" class="drop__mask"> v-if="params.isNinePatch"
<div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div> ref="targetRef"
class="target"
:style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"
></div>
<img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" />
</div>
<div v-if="isMask" class="drop__mask">
<div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -37,7 +37,7 @@
import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue' import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
import { getMatrix } from '@/common/methods/handleTransform' import { getMatrix } from '@/common/methods/handleTransform'
import setting from "./wImageSetting" import setting from './wImageSetting'
import PointImg from '@/utils/plugins/pointImg' import PointImg from '@/utils/plugins/pointImg'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters' // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
@ -53,8 +53,8 @@ type TProps = {
} }
type TState = { type TState = {
position: 'absolute' | 'relative', // 'absolute'relative position: 'absolute' | 'relative' // 'absolute'relative
editBoxStyle: CSSProperties, editBoxStyle: CSSProperties
cropWidgetXY: { cropWidgetXY: {
x: number x: number
y: number y: number
@ -79,11 +79,10 @@ const state = reactive<TState>({
holdPosition: { holdPosition: {
left: 0, left: 0,
top: 0, top: 0,
} },
}) })
const route = useRoute() const route = useRoute()
const controlStore = useControlStore() const controlStore = useControlStore()
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const forceStore = useForceStore() const forceStore = useForceStore()
@ -98,9 +97,7 @@ let flipTemp: string | null = null
// dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid // dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']) // } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
const { dZoom } = storeToRefs(useCanvasStore()) const { dZoom } = storeToRefs(useCanvasStore())
const { const { dActiveElement, dWidgets, dMouseXY, dDropOverUuid } = storeToRefs(widgetStore)
dActiveElement, dWidgets, dMouseXY, dDropOverUuid
} = storeToRefs(widgetStore)
const { dCropUuid } = storeToRefs(controlStore) const { dCropUuid } = storeToRefs(controlStore)
// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']), // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
@ -129,7 +126,7 @@ watch(
} }
fixRotate() fixRotate()
lockOthers(val) lockOthers(val)
} },
) )
watch( watch(
@ -137,7 +134,7 @@ watch(
async () => { async () => {
await nextTick() await nextTick()
updateRecord() updateRecord()
} },
) )
onUpdated(() => { onUpdated(() => {
@ -241,7 +238,7 @@ function updateRecord() {
} }
function setTransform(attrName: string, value: string | number) { function setTransform(attrName: string, value: string | number) {
const iof = props.params.transform.indexOf(attrName) /* const iof = props.params.transform.indexOf(attrName)
let setValue = '' let setValue = ''
if (iof != -1) { if (iof != -1) {
const index = iof + attrName.length const index = iof + attrName.length
@ -267,11 +264,11 @@ function setTransform(attrName: string, value: string | number) {
// }) // })
if (props.params.transform && targetRef.value) { if (props.params.transform && targetRef.value) {
targetRef.value.style.transform = props.params.transform targetRef.value.style.transform = props.params.transform
} } */
} }
function setEditBox(attrName: string, value: string | number) { function setEditBox(attrName: string, value: string | number) {
const iof = state.editBoxStyle.transform?.indexOf(attrName) /* const iof = state.editBoxStyle.transform?.indexOf(attrName)
let setValue = '' let setValue = ''
if (iof != -1 && iof != undefined) { if (iof != -1 && iof != undefined) {
const index = iof + attrName.length const index = iof + attrName.length
@ -283,7 +280,7 @@ function setEditBox(attrName: string, value: string | number) {
} else { } else {
setValue = state.editBoxStyle.transform + ` ${attrName}(${value})` setValue = state.editBoxStyle.transform + ` ${attrName}(${value})`
} }
state.editBoxStyle.transform = setValue state.editBoxStyle.transform = setValue */
} }
function updateZoom() { function updateZoom() {
@ -320,7 +317,7 @@ function lockOthers(isCrop) {
for (const widget of dWidgets.value) { for (const widget of dWidgets.value) {
if (widget.uuid === props.params.uuid) { if (widget.uuid === props.params.uuid) {
widget.lock = false widget.lock = false
break; break
} }
} }
} }

82
src/components/modules/widgets/wImage/wImageStyle.vue
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2021-08-09 11:41:53 * @Date: 2021-08-09 11:41:53
* @Description: * @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-22 16:14:48 * @LastEditTime: 2024-04-03 13:44:42
--> -->
<template> <template>
<div id="w-image-style"> <div id="w-image-style">
@ -31,22 +31,20 @@
<container-wrap @change="changeContainer" /> <container-wrap @change="changeContainer" />
<div class="slide-wrap"> <div class="slide-wrap">
<number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" /> <number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
<number-slider v-model="state.innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))" @finish="(value) => finish('radius', value)" /> <number-slider
v-model="state.innerElement.radius"
style="font-size: 14px"
label="圆角"
:maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))"
@finish="(value) => finish('radius', value)"
/>
<!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" /> <!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" />
<number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> --> <number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> -->
</div> </div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3"> <el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3">
<number-slider <number-slider v-model="state.innerElement.sliceData.ratio" :step="0.01" label="比率" :maxValue="10" @finish="(value) => finishSliceData('ratio', value)" />
v-model="state.innerElement.sliceData.ratio" <number-slider v-model="state.innerElement.sliceData.left" :step="0.5" label="大小" @finish="(value) => finishSliceData('left', value)" />
:step="0.01" label="比率" :maxValue="10"
@finish="(value) => finishSliceData('ratio', value)"
/>
<number-slider
v-model="state.innerElement.sliceData.left"
:step="0.5" label="大小"
@finish="(value) => finishSliceData('left', value)"
/>
</el-collapse-item> </el-collapse-item>
<br /> <br />
<icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" /> <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@ -55,11 +53,7 @@
</el-collapse> </el-collapse>
<!-- <CropImage ref="crop" @done="cropDone" /> --> <!-- <CropImage ref="crop" @done="cropDone" /> -->
<inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle"> <inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle">
<number-slider <number-slider v-model="state.innerElement.zoom" class="inner-bar" label="缩放" labelWidth="40px" :step="0.01" :minValue="1" :maxValue="3" />
v-model="state.innerElement.zoom"
class="inner-bar" label="缩放" labelWidth="40px"
:step="0.01" :minValue="1" :maxValue="3"
/>
<i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" /> <i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" />
</inner-tool-bar> </inner-tool-bar>
<picBox ref="picBoxRef" @select="selectDone" /> <picBox ref="picBoxRef" @select="selectDone" />
@ -134,7 +128,6 @@ const state = reactive<TState>({
const picBoxRef = ref<typeof picBox | null>(null) const picBoxRef = ref<typeof picBox | null>(null)
const imageCutoutRef = ref<typeof imageCutout | null>(null) const imageCutoutRef = ref<typeof imageCutout | null>(null)
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const forceStore = useForceStore() const forceStore = useForceStore()
const canvasStore = useCanvasStore() const canvasStore = useCanvasStore()
@ -145,10 +138,9 @@ const controlStore = useControlStore()
const { dMoving } = storeToRefs(controlStore) const { dMoving } = storeToRefs(controlStore)
const { dActiveElement, dWidgets } = storeToRefs(widgetStore) const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
let lastUuid: string | undefined = undefined let lastUuid: string | undefined = undefined
let tag: boolean let tag: boolean
let toolBarStyle: { left: string, top: string } | null = null let toolBarStyle: { left: string; top: string } | null = null
onBeforeUnmount(() => { onBeforeUnmount(() => {
imgCrop(false) imgCrop(false)
@ -166,7 +158,7 @@ watch(
} }
lastUuid = newValue.uuid lastUuid = newValue.uuid
}, },
{ deep: true } { deep: true },
) )
watch( watch(
@ -175,7 +167,7 @@ watch(
changeValue() changeValue()
cropHandle() cropHandle()
}, },
{ deep: true } { deep: true },
) )
function created() { function created() {
@ -201,15 +193,12 @@ function changeValue() {
} }
for (let key in state.innerElement) { for (let key in state.innerElement) {
if (state.ingoreKeys.indexOf(key) !== -1) { if (state.ingoreKeys.indexOf(key) !== -1) {
(dActiveElement.value as Record<string, any>)[key] = state.innerElement[(key as keyof TImageSetting)] ;(dActiveElement.value as Record<string, any>)[key] = state.innerElement[key as keyof TImageSetting]
} else if ( } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[key as keyof TImageSetting] !== (dActiveElement.value as Record<string, any>)[key]) {
key !== 'cropEdit' && key !== 'record' &&
state.innerElement[(key as keyof TImageSetting)] !== (dActiveElement.value as Record<string, any>)[key]
) {
widgetStore.updateWidgetData({ widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
key: (key as TUpdateWidgetPayload['key']), key: key as TUpdateWidgetPayload['key'],
value: (state.innerElement[(key as keyof TImageSetting)] as TUpdateWidgetPayload['value']), value: state.innerElement[key as keyof TImageSetting] as TUpdateWidgetPayload['value'],
}) })
// store.dispatch('updateWidgetData', { // store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid, // uuid: dActiveElement.value.uuid,
@ -240,10 +229,10 @@ function finishSliceData(key: string, value: number | number[]) {
} }
} }
function finish(key: string = "", value: string | number | (string | number)[] | null = "") { function finish(key: string = '', value: string | number | (string | number)[] | null = '') {
widgetStore.updateWidgetData({ widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
key: (key as TUpdateWidgetPayload['key']), key: key as TUpdateWidgetPayload['key'],
value: value as TUpdateWidgetPayload['value'], value: value as TUpdateWidgetPayload['value'],
pushHistory: true, pushHistory: true,
}) })
@ -258,22 +247,22 @@ function finish(key: string = "", value: string | number | (string | number)[] |
function layerAction(item: TIconItemSelectData) { function layerAction(item: TIconItemSelectData) {
if (item.key === 'zIndex') { if (item.key === 'zIndex') {
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
value: (item.value as TupdateLayerIndexData['value']), value: item.value as TupdateLayerIndexData['value'],
}) })
// store.dispatch("updateLayerIndex", { // store.dispatch("updateLayerIndex", {
// uuid: dActiveElement.value.uuid, // uuid: dActiveElement.value.uuid,
// value: item.value, // value: item.value,
// }) // })
} else { } else {
finish(item.key || "", item.value === dActiveElement.value?.flip ? null : item.value) finish(item.key || '', item.value === dActiveElement.value?.flip ? null : item.value)
} }
} }
async function alignAction(item: TIconItemSelectData) { async function alignAction(item: TIconItemSelectData) {
widgetStore.updateAlign({ widgetStore.updateAlign({
align: (item.value as TUpdateAlignData['align']), align: item.value as TUpdateAlignData['align'],
uuid: dActiveElement.value?.uuid || "", uuid: dActiveElement.value?.uuid || '',
}) })
// store.dispatch("updateAlign", { // store.dispatch("updateAlign", {
// align: item.value, // align: item.value,
@ -295,7 +284,6 @@ function openCropper() {
// this.innerElement.height = height.toFixed(0) // this.innerElement.height = height.toFixed(0)
// } // }
async function changeContainer(setting: any) { async function changeContainer(setting: any) {
state.innerElement.mask = setting.svgUrl state.innerElement.mask = setting.svgUrl
// const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid) // const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
@ -318,26 +306,25 @@ async function changeContainer(setting: any) {
// this.$store.commit('setShowMoveable', true) // this.$store.commit('setShowMoveable', true)
// } // }
async function selectDone(img: TGetImageListResult) { async function selectDone(img: TGetImageListResult) {
state.innerElement.imgUrl = img.url state.innerElement.imgUrl = img.url
const loadImg = await getImage(img.url) const loadImg = await getImage(img.url)
state.innerElement.width = loadImg.width * canvasStore.dZoom / 100 state.innerElement.width = (loadImg.width * canvasStore.dZoom) / 100
state.innerElement.height = loadImg.height * canvasStore.dZoom / 100 state.innerElement.height = (loadImg.height * canvasStore.dZoom) / 100
// this.imgCrop(true) // this.imgCrop(true)
} }
function imgCrop(val: boolean) { async function imgCrop(val: boolean) {
// TODO: 画布内图像裁剪 // TODO: 画布内图像裁剪
const el = document.getElementById(state.innerElement.uuid || "") const el = document.getElementById(state.innerElement.uuid || '')
if (!el) return if (!el) return
const { left, top } = el.getBoundingClientRect() const { left, top } = el.getBoundingClientRect()
toolBarStyle = { left: left + 'px', top: top + 'px' } toolBarStyle = { left: left + 'px', top: top + 'px' }
state.innerElement.cropEdit = val state.innerElement.cropEdit = val
await nextTick()
controlStore.setShowRotatable(!val) controlStore.setShowRotatable(!val)
} }
function cropHandle() { function cropHandle() {
controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1') controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1')
// store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1) // store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
@ -352,7 +339,7 @@ function openPicBox() {
// 打开抠图 // 打开抠图
function openImageCutout() { function openImageCutout() {
fetch(state.innerElement.imgUrl || "") fetch(state.innerElement.imgUrl || '')
.then((response) => response.blob()) .then((response) => response.blob())
.then((blob) => { .then((blob) => {
const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' }) const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
@ -371,7 +358,6 @@ async function cutImageDone(url: string) {
state.innerElement.imgUrl = url state.innerElement.imgUrl = url
}, 300) }, 300)
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

46
src/components/modules/widgets/wQrcode/wQrcode.vue
View File

@ -2,32 +2,12 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2022-03-13 15:59:52 * @Date: 2022-03-13 15:59:52
* @Description: 二维码 * @Description: 二维码
* @LastEditors: ShawnPhang <site: book.palxp.com> * @LastEditors: xi_zi
* @LastEditTime: 2023-06-29 15:54:10 * @LastEditTime: 2024-04-03 23:32:14
--> -->
<template> <template>
<div <div :id="`${params.uuid}`" ref="widgetRef" :class="['w-qrcode', { 'layer-lock': params.lock }]">
:id="`${params.uuid}`" <QRCode ref="qrcode" v-bind="state.qrCodeOptions" :width="width" :height="width" class="target" :image="params.url" :value="params.value" />
ref="widgetRef"
:class="['w-qrcode', { 'layer-lock': params.lock }]"
:style="{
position: 'absolute',
left: params.left - parent.left + 'px',
top: params.top - parent.top + 'px',
width: params.width + 'px',
height: params.height + 'px',
opacity: params.opacity,
}"
>
<QRCode
ref="qrcode"
v-bind="state.qrCodeOptions"
:width="width"
:height="width"
class="target"
:image="params.url"
:value="params.value"
/>
</div> </div>
</template> </template>
@ -35,14 +15,13 @@
// 图片组件 // 图片组件
// const NAME = 'w-qrcode' // const NAME = 'w-qrcode'
import QRCode from '@/components/business/qrcode' import QRCode from '@/components/business/qrcode'
import { TWQrcodeSetting } from './wQrcodeSetting'; import { TWQrcodeSetting } from './wQrcodeSetting'
import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue'; import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'; // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { Options } from 'qr-code-styling'; import { Options } from 'qr-code-styling'
import { useForceStore, useWidgetStore } from '@/store'; import { useForceStore, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia'
type TProps = { type TProps = {
params: TWQrcodeSetting & { params: TWQrcodeSetting & {
@ -59,12 +38,11 @@ type TState = {
qrCodeOptions: Options qrCodeOptions: Options
} }
const forceStore = useForceStore() const forceStore = useForceStore()
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const props = defineProps<TProps>() const props = defineProps<TProps>()
const state = reactive<TState>({ const state = reactive<TState>({
qrCodeOptions: {} qrCodeOptions: {},
}) })
// const { dActiveElement } = useSetupMapGetters(['dActiveElement']) // const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
const { dActiveElement } = storeToRefs(widgetStore) const { dActiveElement } = storeToRefs(widgetStore)
@ -76,7 +54,7 @@ watch(
() => { () => {
changeValues() changeValues()
}, },
{ immediate: true, deep: true, } { immediate: true, deep: true },
) )
onUpdated(() => { onUpdated(() => {
@ -88,7 +66,7 @@ onUpdated(() => {
onMounted(async () => { onMounted(async () => {
updateRecord() updateRecord()
await nextTick() await nextTick()
if (widgetRef.value){ if (widgetRef.value) {
props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`) props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
} }
}) })

44
src/components/modules/widgets/wSvg/wSvg.vue
View File

@ -2,30 +2,18 @@
TODO: 重构 TODO: 重构
--> -->
<template> <template>
<div <div :id="params.uuid" ref="widgetRef" class="w-svg"></div>
:id="params.uuid"
ref="widgetRef"
class="w-svg"
:style="{
position: state.position,
left: params.left - parent.left + 'px',
top: params.top - parent.top + 'px',
width: params.width + 'px',
height: params.height + 'px',
opacity: params.opacity,
}"
></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// svg // svg
// const NAME = 'w-svg' // const NAME = 'w-svg'
import { useCanvasStore, useForceStore, useWidgetStore } from '@/store'; import { useCanvasStore, useForceStore, useWidgetStore } from '@/store'
import { TWSvgSetting } from './wSvgSetting' import { TWSvgSetting } from './wSvgSetting'
import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue'; import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia'
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'; import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'; // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
type TProps = { type TProps = {
@ -37,12 +25,12 @@ type TProps = {
} }
type TState = { type TState = {
position: CSSProperties['position'], // 'absolute'relative position: CSSProperties['position'] // 'absolute'relative
editBoxStyle: CSSProperties, editBoxStyle: CSSProperties
editBoxs: Record<string, any>, editBoxs: Record<string, any>
editingKey: string, editingKey: string
cropWidgetXY: Record<string, any>, // 裁剪框移动作用 cropWidgetXY: Record<string, any> // 裁剪框移动作用
attrRecord: Record<string, any>, // 记录可更改的属性 attrRecord: Record<string, any> // 记录可更改的属性
svgImg: Record<string, any> | null svgImg: Record<string, any> | null
} }
@ -56,7 +44,7 @@ const state = reactive<TState>({
editingKey: '', editingKey: '',
cropWidgetXY: {}, // 裁剪框移动作用 cropWidgetXY: {}, // 裁剪框移动作用
attrRecord: {}, // 记录可更改的属性 attrRecord: {}, // 记录可更改的属性
svgImg: null svgImg: null,
}) })
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
@ -88,7 +76,7 @@ watch(
() => { () => {
attrsChange() attrsChange()
}, },
{ immediate: true, deep: true } { immediate: true, deep: true },
) )
watch( watch(
@ -96,7 +84,7 @@ watch(
async () => { async () => {
await nextTick() await nextTick()
updateRecord() updateRecord()
} },
) )
watch( watch(
@ -106,7 +94,7 @@ watch(
state.svgImg.attr({ state.svgImg.attr({
'xlink:href': props.params.imgUrl, 'xlink:href': props.params.imgUrl,
}) })
} },
) )
watch( watch(
@ -118,7 +106,7 @@ watch(
} else { } else {
el?.removeEventListener('mousedown', touchstart, false) el?.removeEventListener('mousedown', touchstart, false)
} }
} },
) )
onUpdated(() => { onUpdated(() => {

70
src/components/modules/widgets/wText/wText.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<div <div
:id="`${params.uuid}`" :id="`${params.uuid}`"
ref="widget" v-bind="$attrs"
v-loading="state.loading" class="element-inner"
:class="['w-text', { editing: state.editable, 'layer-lock': params.lock }, params.uuid]" :class="['w-text', { editing: state.editable, 'layer-lock': params.lock }, params.uuid]"
ref="widget"
:style="{ :style="{
position: 'absolute', // minWidth: params.fontSize + 'px',
left: params.left - parent.left + 'px', // minHeight: params.fontSize * params.lineHeight + 'px',
top: params.top - parent.top + 'px',
width: params.width + 'px',
minWidth: params.fontSize + 'px',
minHeight: params.fontSize * params.lineHeight + 'px',
height: params.height + 'px', height: params.height + 'px',
width: params.width + 'px',
lineHeight: params.fontSize * params.lineHeight + 'px', lineHeight: params.fontSize * params.lineHeight + 'px',
letterSpacing: (params.fontSize * params.letterSpacing) / 100 + 'px', letterSpacing: (params.fontSize * params.letterSpacing) / 100 + 'px',
fontSize: params.fontSize + 'px', fontSize: params.fontSize + 'px',
@ -46,12 +44,15 @@
></div> ></div>
</template> </template>
<div <div
ref="editWrap" :style="{ fontFamily: `'${params.fontClass.value}'` }" ref="editWrap"
class="edit-text" spellcheck="false" :style="{ fontFamily: `'${params.fontClass.value}'` }"
class="edit-text"
spellcheck="false"
:contenteditable="state.editable ? 'plaintext-only' : false" :contenteditable="state.editable ? 'plaintext-only' : false"
@input="writingText($event)" @input="writingText($event)"
@blur="writeDone($event)" @blur="writeDone($event)"
v-html="params.text"></div> v-html="params.text"
></div>
</div> </div>
</template> </template>
@ -65,12 +66,21 @@ import { fontWithDraw } from '@/utils/widgets/loadFontRule'
import getGradientOrImg from './getGradientOrImg' import getGradientOrImg from './getGradientOrImg'
import { wTextSetting } from './wTextSetting' import { wTextSetting } from './wTextSetting'
import { useForceStore, useHistoryStore, useWidgetStore } from '@/store' import { useForceStore, useHistoryStore, useWidgetStore } from '@/store'
import { addFont } from '@/utils/addFont'
export type TwTextParams = { export type TwTextParams = {
rotate?: number rotate?: number
lock?: boolean lock?: boolean
width?: number width?: number
height?: number height?: number
imageTransform?: {
a: number
b: number
c: number
d: number
tx: number
ty: number
}
} & typeof wTextSetting } & typeof wTextSetting
type TProps = { type TProps = {
@ -92,7 +102,9 @@ const state = reactive({
loadFontDone: '', loadFontDone: '',
}) })
const widget = ref<HTMLElement | null>(null) const widget = ref<HTMLElement | null>(null)
const widgetWrap = ref<HTMLElement | null>(null)
const editWrap = ref<HTMLElement | null>(null) const editWrap = ref<HTMLElement | null>(null)
const editorElRef = ref<HTMLElement | null>(null)
const dActiveElement = computed(() => widgetStore.dActiveElement) const dActiveElement = computed(() => widgetStore.dActiveElement)
const isDraw = computed(() => route.name === 'Draw' && fontWithDraw) const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
@ -103,11 +115,6 @@ onUpdated(() => {
onMounted(() => { onMounted(() => {
updateRecord() updateRecord()
if (!widget.value) return
props.params.transform && (widget.value.style.transform = props.params.transform)
props.params.rotate && (widget.value.style.transform += `translate(0px, 0px) rotate(${props.params.rotate}) scale(1, 1)`)
// store.commit('updateRect')
}) })
watch( watch(
@ -128,9 +135,7 @@ watch(
return return
} }
state.loading = !isDraw.value state.loading = !isDraw.value
const loadFont = new window.FontFace(font.value, `url(${font.url})`) await addFont(font.value, font.url)
await loadFont.load()
document.fonts.add(loadFont)
state.loadFontDone = font.value state.loadFontDone = font.value
state.loading = false state.loading = false
} else { } else {
@ -171,7 +176,7 @@ function updateRecord() {
} }
function updateText(e?: Event) { function updateText(e?: Event) {
const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text//.replace(/\n/g, '<br/>') const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text //.replace(/\n/g, '<br/>')
if (value !== props.params.text) { if (value !== props.params.text) {
widgetStore.updateWidgetData({ widgetStore.updateWidgetData({
uuid: String(props.params.uuid), uuid: String(props.params.uuid),
@ -212,7 +217,7 @@ function writingText(e?: Event) {
function writeDone(e: Event) { function writeDone(e: Event) {
state.editable = false state.editable = false
setTimeout(() => { setTimeout(() => {
historyStore.pushHistory("文字修改") historyStore.pushHistory('文字修改')
// store.dispatch('pushHistory', '文字修改') // store.dispatch('pushHistory', '文字修改')
}, 100) }, 100)
updateText(e) updateText(e)
@ -231,9 +236,9 @@ function dblclickText(_: MouseEvent) {
range.select() range.select()
} else { } else {
const range = document.createRange() const range = document.createRange()
range.selectNodeContents(el); range.selectNodeContents(el)
window.getSelection()?.removeAllRanges(); window.getSelection()?.removeAllRanges()
window.getSelection()?.addRange(range); window.getSelection()?.addRange(range)
} }
}, 100) }, 100)
} }
@ -251,6 +256,23 @@ defineExpose({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.element-inner {
position: absolute;
// z-index: 1;
// width: 100%;
// height: 100%;
font-size: 0;
white-space: nowrap;
writing-mode: horizontal-tb;
// transform-origin: 0 0;
.element-inner-position {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.w-text { .w-text {
// cursor: pointer; // cursor: pointer;
user-select: none; user-select: none;

1
src/components/modules/widgets/wText/wTextSetting.ts
View File

@ -8,6 +8,7 @@ export type TwTextData = {
left: number left: number
top: number top: number
transform: string transform: string
transformOrigin: string
lineHeight: number lineHeight: number
letterSpacing: number letterSpacing: number
fontSize: number fontSize: number

4
src/store/design/canvas/d.ts
View File

@ -48,8 +48,8 @@ export type TPageState = {
name: string name: string
type: string type: string
uuid: string uuid: string
left: number left?: number
top: number top?: number
/** 画布宽度 */ /** 画布宽度 */
width: number width: number
/** 画布高度 */ /** 画布高度 */

57
src/store/design/control/index.ts
View File

@ -3,8 +3,8 @@
* @Author: Jeremy Yu * @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00 * @Date: 2024-03-18 21:00:00
* @Description: * @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-18 21:00:00 * @LastEditTime: 2024-04-03 10:26:38
*/ */
import { useHistoryStore } from "@/store"; import { useHistoryStore } from "@/store";
@ -27,8 +27,11 @@ type TControlState = {
dAltDown: boolean dAltDown: boolean
// 是否按下空格键 // 是否按下空格键
dSpaceDown: boolean dSpaceDown: boolean
/** 正在编辑or裁剪的组件id */ /** 正在编辑or裁剪的组件id **/
dCropUuid: string dCropUuid: string
warpable: boolean, // 是否开启斜切
scalable: boolean, // 是否开启缩放
resizable: boolean, // 是否开启拖拽
} }
type TControlAction = { type TControlAction = {
@ -45,11 +48,29 @@ type TControlAction = {
stopDMove: () => void stopDMove: () => void
/** 设置正在裁剪or编辑的组件 */ /** 设置正在裁剪or编辑的组件 */
setCropUuid: (uuid: string) => void setCropUuid: (uuid: string) => void
/**
* 设置斜切
* @param able
* @returns
*/
setWarpable: (able: boolean) => void
/**
* 设置尺寸控制
* @param able
* @returns
*/
setResizable: (able: boolean) => void
/**
* 设置缩放
* @param able
* @returns
*/
setScalable: (able: boolean) => void
setSpaceDown: (uuid: boolean) => void // 设置是否按下空格键 setSpaceDown: (uuid: boolean) => void // 设置是否按下空格键
} }
/** 全局控制配置 */ /** 全局控制配置 */
const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", { const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
state: () => ({ state: () => ({
dMoving: false, // 是否正在移动组件 dMoving: false, // 是否正在移动组件
dDraging: false, // 是否正在抓取组件 dDraging: false, // 是否正在抓取组件
@ -59,6 +80,9 @@ const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAct
showRotatable: true, // 是否显示moveable的旋转按钮 showRotatable: true, // 是否显示moveable的旋转按钮
dAltDown: false, // 记录是否按下alt键 / 或ctrl dAltDown: false, // 记录是否按下alt键 / 或ctrl
dCropUuid: '-1', // 正在编辑or裁剪的组件id dCropUuid: '-1', // 正在编辑or裁剪的组件id
warpable: false, // 是否开启斜切
scalable: false, // 是否开启缩放
resizable: true, // 是否开启拖拽
dSpaceDown: false, // 记录是否按下空格键 dSpaceDown: false, // 记录是否按下空格键
}), }),
getters: {}, getters: {},
@ -112,6 +136,31 @@ const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAct
// 设置正在裁剪or编辑的组件 // 设置正在裁剪or编辑的组件
this.dCropUuid = uuid this.dCropUuid = uuid
}, },
setWarpable(able: boolean) {
this.warpable = able
if (able) {
this.scalable = false
this.resizable = false
} else {
this.resizable = true
}
},
setResizable(able: boolean) {
this.resizable = able
if (able) {
this.warpable = false
this.scalable = false
}
},
setScalable(able: boolean) {
this.scalable = able
if (able) {
this.warpable = false
this.resizable = false
} else {
this.resizable = true
}
},
setSpaceDown(val: boolean) { setSpaceDown(val: boolean) {
this.dSpaceDown = val this.dSpaceDown = val
} }

40
src/store/design/group/action/index.ts
View File

@ -2,21 +2,21 @@
* @Author: Jeremy Yu * @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00 * @Date: 2024-03-28 14:00:00
* @Description: * @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-28 14:00:00 * @LastEditTime: 2024-04-03 23:34:21
*/ */
import { customAlphabet } from 'nanoid/non-secure' import { customAlphabet } from 'nanoid/non-secure'
import { TGroupStore } from '..' import { TGroupStore } from '..'
import { useHistoryStore, useCanvasStore, useWidgetStore } from '@/store' import { useHistoryStore, useCanvasStore, useWidgetStore } from '@/store'
import { TdWidgetData } from '../../widget' import { TdWidgetData } from '../../widget'
import { getOffsetFromTransform, transferTransformWidget } from '@/utils/widgets/transferTranslate'
const nanoid = customAlphabet('1234567890abcdef', 12) const nanoid = customAlphabet('1234567890abcdef', 12)
export function realCombined(store: TGroupStore) { export function realCombined(store: TGroupStore) {
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const pageStore = useCanvasStore() const pageStore = useCanvasStore()
const historyStore = useHistoryStore() const historyStore = useHistoryStore()
const selectWidgets = widgetStore.dSelectWidgets const selectWidgets = widgetStore.dSelectWidgets
if (selectWidgets.length > 1) { if (selectWidgets.length > 1) {
const widgets = widgetStore.dWidgets const widgets = widgetStore.dWidgets
@ -60,10 +60,12 @@ export function realCombined(store: TGroupStore) {
// index: index, // index: index,
// widget: widget, // widget: widget,
// }) // })
left = Math.min(left, widget.left) const { x, y } = getOffsetFromTransform(widget.transform ?? '')
top = Math.min(top, widget.top) left = Math.min(left, x)
right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left)) top = Math.min(top, y)
bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top)) const rect = document.getElementById(`${widget.uuid}`)?.getBoundingClientRect()
right = Math.max(right, Number((rect?.width ?? 0) / (pageStore.dZoom / 100) || widget.record.width) + Number(x))
bottom = Math.max(bottom, Number((rect?.height ?? 0) / (pageStore.dZoom / 100) || widget.record.height) + Number(y))
} }
// sortWidgets.sort((a, b) => a.index > b.index) // sortWidgets.sort((a, b) => a.index > b.index)
// for (let i = 0; i < sortWidgets.length; ++i) { // for (let i = 0; i < sortWidgets.length; ++i) {
@ -71,9 +73,9 @@ export function realCombined(store: TGroupStore) {
// widgets.splice(index, 1) // widgets.splice(index, 1)
// widgets.push(sortWidgets[i].widget) // widgets.push(sortWidgets[i].widget)
// } // }
// group.left = Number(left)
group.left = Number(left) // group.top = Number(top)
group.top = Number(top) group.transform = `translate(${left}px,${top}px)`
group.width = Number(right - left) group.width = Number(right - left)
group.height = Number(bottom - top) group.height = Number(bottom - top)
widgetStore.dActiveElement = group widgetStore.dActiveElement = group
@ -92,6 +94,7 @@ export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
const selectWidgets = widgetStore.dSelectWidgets const selectWidgets = widgetStore.dSelectWidgets
return new Promise((resolve) => { return new Promise((resolve) => {
if (selectWidgets.length > 1) { if (selectWidgets.length > 1) {
const widgets = widgetStore.dWidgets const widgets = widgetStore.dWidgets
const group = JSON.parse(store.dGroupJson) const group = JSON.parse(store.dGroupJson)
group.uuid = nanoid() group.uuid = nanoid()
@ -109,16 +112,17 @@ export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
const uuid = sortWidgets[i].uuid const uuid = sortWidgets[i].uuid
const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid) const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
const widget = { ...widgets[index] } // clone const widget = { ...widgets[index] } // clone
left = Math.min(left, widget.left) const { x, y } = getOffsetFromTransform(widget.transform ?? '')
top = Math.min(top, widget.top) left = Math.min(left, x)
right = Math.max(right, Number(widget.width) + Number(widget.left)) top = Math.min(top, y)
bottom = Math.max(bottom, Number(widget.height) + Number(widget.top)) const rect = document.getElementById(`${widget.uuid}`)?.getBoundingClientRect()
right = Math.max(right, Number((rect?.width ?? 0) / (pageStore.dZoom / 100) || widget.record.width) + Number(x))
bottom = Math.max(bottom, Number((rect?.height ?? 0) / (pageStore.dZoom / 100) || widget.record.height) + Number(y))
} }
group.left = left group.transform = `translate(${left}px,${top}px)`
group.top = top group.width = Number(right - left)
group.width = right - left group.height = Number(bottom - top)
group.height = bottom - top
resolve(group) resolve(group)
} }

10
src/store/design/widget/actions/group.ts
View File

@ -2,13 +2,14 @@
* @Author: Jeremy Yu * @Author: Jeremy Yu
* @Date: 2024-03-28 21:00:00 * @Date: 2024-03-28 21:00:00
* @Description: * @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-28 14:00:00 * @LastEditTime: 2024-04-03 16:02:46
*/ */
import { useCanvasStore, useHistoryStore } from "@/store" import { useCanvasStore, useHistoryStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".." import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure' import { customAlphabet } from 'nanoid/non-secure'
import { transferTransformWidgets } from "@/utils/widgets/transferTranslate"
const nanoid = customAlphabet('1234567890abcdef', 12) const nanoid = customAlphabet('1234567890abcdef', 12)
@ -16,11 +17,12 @@ export function addGroup(store: TWidgetStore, group: TdWidgetData[]) {
const historyStore = useHistoryStore() const historyStore = useHistoryStore()
const canvasStore = useCanvasStore() const canvasStore = useCanvasStore()
let parent: TdWidgetData | null = null let parent: TdWidgetData | null = null
group.forEach((item) => { const tGroup = transferTransformWidgets(group)
tGroup.forEach((item) => {
item.uuid = nanoid() // 重设id item.uuid = nanoid() // 重设id
item.type === 'w-group' && (parent = item) // 找出父组件 item.type === 'w-group' && (parent = item) // 找出父组件
}) })
group.forEach((item) => { tGroup.forEach((item) => {
!item.isContainer && parent && (item.parent = parent.uuid) // 重设父id !item.isContainer && parent && (item.parent = parent.uuid) // 重设父id
item.text && (item.text = decodeURIComponent(item.text)) item.text && (item.text = decodeURIComponent(item.text))
store.dWidgets.push(item) store.dWidgets.push(item)

3
src/store/design/widget/actions/template.ts
View File

@ -10,13 +10,14 @@
import { customAlphabet } from 'nanoid/non-secure' import { customAlphabet } from 'nanoid/non-secure'
import { TWidgetStore, TdWidgetData } from '..' import { TWidgetStore, TdWidgetData } from '..'
import { useCanvasStore, useHistoryStore } from '@/store' import { useCanvasStore, useHistoryStore } from '@/store'
import { transferTransformWidgets } from '@/utils/widgets/transferTranslate'
const nanoid = customAlphabet('1234567890abcdef', 12) const nanoid = customAlphabet('1234567890abcdef', 12)
// TODO: 选择模板 // TODO: 选择模板
export function setTemplate(store: TWidgetStore, allWidgets: TdWidgetData[]) { export function setTemplate(store: TWidgetStore, allWidgets: TdWidgetData[]) {
const historyStore = useHistoryStore() const historyStore = useHistoryStore()
const canvasStore = useCanvasStore() const canvasStore = useCanvasStore()
allWidgets.forEach((item) => { transferTransformWidgets(allWidgets).forEach((item) => {
Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
item.text && (item.text = decodeURIComponent(item.text)) item.text && (item.text = decodeURIComponent(item.text))
store.dWidgets.push(item) store.dWidgets.push(item)

97
src/store/design/widget/actions/widget.ts
View File

@ -2,13 +2,14 @@
* @Author: Jeremy Yu * @Author: Jeremy Yu
* @Date: 2024-03-28 21:00:00 * @Date: 2024-03-28 21:00:00
* @Description: * @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-28 14:00:00 * @LastEditTime: 2024-04-03 23:23:56
*/ */
import { useCanvasStore, useHistoryStore } from "@/store" import { useCanvasStore, useHistoryStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".." import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure' import { customAlphabet } from 'nanoid/non-secure'
import { getOffsetFromTransform, removeTranslate, transferTransformWidget, transferTransformWidgets } from "@/utils/widgets/transferTranslate"
const nanoid = customAlphabet('1234567890abcdef', 12) const nanoid = customAlphabet('1234567890abcdef', 12)
type TUpdateWidgetKey = keyof TdWidgetData type TUpdateWidgetKey = keyof TdWidgetData
@ -37,7 +38,7 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
break break
case 'left': case 'left':
case 'top': case 'top':
if (widget.isContainer) { /* if (widget.isContainer) {
let dLeft = widget.left - Number(value) let dLeft = widget.left - Number(value)
let dTop = widget.top - Number(value) let dTop = widget.top - Number(value)
if (key === 'left') { if (key === 'left') {
@ -54,8 +55,32 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
child.top -= dTop child.top -= dTop
} }
} }
} } */
delete widget.left
delete widget.top
break break
case 'transform':
if (widget.isContainer) {
const { x: gX1, y: gY1 } = getOffsetFromTransform(value as any)
const { x: gX, y: gY } = getOffsetFromTransform(widget.transform)
const dLeft = gX - gX1
const dTop = gY - gY1
const len = store.dWidgets.length
for (let i = 0; i < len; ++i) {
const child = store.dWidgets[i]
if (child.parent === widget.uuid) {
let cTransform = removeTranslate(child.transform)
const { x, y } = getOffsetFromTransform(child.transform)
cTransform = `translate(${x - dLeft}px, ${y - dTop}px) ${cTransform}`
child.transform = cTransform
}
}
}
// widget.transform = value as string
break;
case 'transformOrigin':
// widget.transformOrigin = value as string
break;
} }
(widget[key] as TUpdateWidgetPayload['value']) = value (widget[key] as TUpdateWidgetPayload['value']) = value
if (pushHistory) { if (pushHistory) {
@ -73,7 +98,8 @@ export type TUpdateWidgetMultiplePayload = {
uuid: string uuid: string
data: { data: {
key: TUpdateWidgetKey key: TUpdateWidgetKey
value: number // value: number
value: string | number | boolean | Record<string, any>
}[] }[]
pushHistory?: boolean pushHistory?: boolean
} }
@ -82,33 +108,34 @@ export type TUpdateWidgetMultiplePayload = {
export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHistory }: TUpdateWidgetMultiplePayload) { export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHistory }: TUpdateWidgetMultiplePayload) {
for (const item of data) { for (const item of data) {
const { key, value } = item const { key, value } = item
const widget = store.dWidgets.find((item) => item.uuid === uuid) updateWidgetData(store, { uuid, key, value })
if (widget && (widget[key] !== value || pushHistory)) { /* const widget = store.dWidgets.find((item) => item.uuid === uuid)
switch (key) { if (widget && (widget[key] !== value || pushHistory)) {
case 'left': switch (key) {
case 'top': case 'left':
if (widget.isContainer) { case 'top':
let dLeft = widget.left - value if (widget.isContainer) {
let dTop = widget.top - value let dLeft = widget.left - value
if (key === 'left') { let dTop = widget.top - value
dTop = 0 if (key === 'left') {
} dTop = 0
if (key === 'top') { }
dLeft = 0 if (key === 'top') {
} dLeft = 0
const len = store.dWidgets.length }
for (let i = 0; i < len; ++i) { const len = store.dWidgets.length
const child = store.dWidgets[i] for (let i = 0; i < len; ++i) {
if (child.parent === widget.uuid) { const child = store.dWidgets[i]
child.left -= dLeft if (child.parent === widget.uuid) {
child.top -= dTop child.left -= dLeft
} child.top -= dTop
} }
} }
break }
} break
(widget[key] as number | string) = value }
} (widget[key] as number | string) = value
} */
} }
setTimeout(() => { setTimeout(() => {
const historyStore = useHistoryStore() const historyStore = useHistoryStore()
@ -122,7 +149,7 @@ export function addWidget(store: TWidgetStore, setting: TdWidgetData) {
const historyStore = useHistoryStore() const historyStore = useHistoryStore()
const canvasStore = useCanvasStore() const canvasStore = useCanvasStore()
setting.uuid = nanoid() setting.uuid = nanoid()
store.dWidgets.push(setting) store.dWidgets.push(transferTransformWidget(setting))
const len = store.dWidgets.length const len = store.dWidgets.length
// store.state.dActiveElement = store.state.dWidgets[len - 1] // store.state.dActiveElement = store.state.dWidgets[len - 1]
@ -157,7 +184,7 @@ export function deleteWidget(store: TWidgetStore) {
try { try {
// 清除掉可能存在的选中框 // 清除掉可能存在的选中框
document.getElementById(uuid)?.classList.remove('widget-selected') document.getElementById(uuid)?.classList.remove('widget-selected')
} catch (e) {} } catch (e) { }
} }
store.dSelectWidgets = [] store.dSelectWidgets = []
} else { } else {
@ -233,7 +260,7 @@ export function setWidgetStyle(state: TWidgetStore, { uuid, key, value, pushHist
} }
export function setDWidgets(state: TWidgetStore, e: TdWidgetData[]) { export function setDWidgets(state: TWidgetStore, e: TdWidgetData[]) {
state.dWidgets = e state.dWidgets = transferTransformWidgets(e)
} }
// 锁定所有图层 / 再次调用时还原图层 // 锁定所有图层 / 再次调用时还原图层

5
src/store/design/widget/index.ts
View File

@ -2,8 +2,8 @@
* @Author: Jeremy Yu * @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00 * @Date: 2024-03-18 21:00:00
* @Description: Store方法export * @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn> * @LastEditors: xi_zi
* @LastEditTime: 2024-03-28 14:00:00 * @LastEditTime: 2024-04-03 15:26:46
*/ */
import { Store, defineStore } from "pinia"; import { Store, defineStore } from "pinia";
@ -28,6 +28,7 @@ export type TdWidgetData = TPageState & Partial<TCommonItemData> & {
imgUrl?: string imgUrl?: string
rotate?: string rotate?: string
transform?: string transform?: string
transformOrigin?: string
sliceData?: Record<string, any> sliceData?: Record<string, any>
flip?: boolean flip?: boolean
cropEdit?: boolean cropEdit?: boolean

30
src/utils/addFont.ts Normal file
View File

@ -0,0 +1,30 @@
/*
* @Description: 添加字体
* @Author: xi_zi
* @Date: 2024-03-20 14:59:26
* @LastEditTime: 2024-03-20 16:11:12
* @LastEditors: xi_zi
*/
/**
* 字体缓存
*/
const fonts = new Map()
/**
* 添加字体
* @param family
* @param url
* @returns
*/
export const addFont = async (family: string, url: string) => {
const key = `${family}_${url}`
if (fonts.has(key)) return { loadFont: fonts.get(key), family, url }
const loadFont = new window.FontFace(family, `url(${url})`)
await loadFont.load()
document.fonts.add(loadFont)
fonts.set(key, loadFont)
return { loadFont, family, url }
}

971
src/utils/magic.ts Normal file
View File

@ -0,0 +1,971 @@
export default {
"version": "2.0.0",
"type": "page",
"uuid": -1,
"global": {
"unit": "px",
"name": "弹窗-运营类_9cd1ee.psd",
"backgroundColor": "#ffffffff",
"layout": {
"left": 0,
"top": 0,
"height": 1176,
"width": 840,
"backgroundImage": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/弹窗_运营类_a4c646.png"
}
},
"layouts": [
{
"uuid": "f069f2ba-5e3a-4dd2-b2b0-d6d2d7e4470a",
"imageUrl": "",
"title": "弹窗-运营类",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "7e156a83-6cea-4eca-94e7-975c4d9548d0",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/bg_2bdb0d.png",
"title": "bg",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1175,
"left": 0,
"top": 0,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "7ec68f3b-123b-40fd-a868-2e2d71558799",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/搬家4_14ff9d.png",
"title": "搬家4",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 287,
"height": 56,
"left": 277,
"top": 1095,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "979d4e6a-700a-4fae-b830-18f5d270dd6d",
"imageUrl": "",
"title": "主视觉",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "b4561c96-bea7-4d3b-b4b7-307a25d8f8eb",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_894_156f13.png",
"title": "椭圆 894",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 767,
"height": 41,
"left": 53,
"top": 849,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "cedabc3d-0025-46a6-b4f1-c3db7d7106b3",
"imageUrl": "",
"title": "红包 拷贝",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "d058c4cb-f02b-49f3-b6a1-2ee5dfe126cb",
"imageUrl": "",
"title": "组 3231 拷贝 2",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "6738b1b4-3b1f-44fe-9f04-814c3e634280",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/图层_4_a21999.png",
"title": "图层 4",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 703,
"height": 528,
"left": 68,
"top": 345,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "974ae464-0066-4344-845a-398c9324eaa9",
"imageUrl": "",
"title": "底板2",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "af29f40a-beb0-4af3-94a5-d5f1f9dfa9f2",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/矩形_1066_5f9ff7.png",
"title": "矩形 1066",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 594,
"height": 333,
"left": 128,
"top": 322,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
}
]
}
]
}
]
},
{
"uuid": "76389660-f7a1-4e17-a2b5-eda27a4a90d1",
"imageUrl": "",
"title": "组 3998",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "064794d0-9f82-47cf-8b40-c2e6c5fbef51",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/形状_1765_f0b506.png",
"title": "形状 1765",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 375,
"height": 68,
"left": 444,
"top": 851,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "3e0e6cef-690e-4562-b541-b86eb11307f9",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/形状_517_93ba60.png",
"title": "形状 517",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 324,
"height": 72,
"left": 8,
"top": 847,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "572a49fd-298a-4687-9ae0-1a2773ed7fa2",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/图层_22_b0a7ae.png",
"title": "图层 22",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 340,
"height": 193,
"left": 469,
"top": 714,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
}
]
},
{
"uuid": "f9664870-5a00-4cf9-82e8-62afeea201c3",
"imageUrl": "",
"title": "组 3182",
"opacity": 148,
"padding": [
0,
0,
0,
0
],
"width": 840,
"height": 1176,
"left": 0,
"top": 0,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "group",
"elements": [
{
"uuid": "f155cb71-11cf-481c-8a2c-ab3522115c09",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_6b48d5.png",
"title": "椭圆 672",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 4,
"height": 5,
"left": 27,
"top": 465,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "fc9b296c-d124-4ca7-8253-e3ca1b725ce9",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_拷贝_3_43f79c.png",
"title": "椭圆 672 拷贝 3",
"opacity": 128,
"padding": [
0,
0,
0,
0
],
"width": 5,
"height": 4,
"left": 727,
"top": 527,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "c209f903-5994-4ce9-a3c3-89858a72f367",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_拷贝_4_d491e3.png",
"title": "椭圆 672 拷贝 4",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 3,
"height": 3,
"left": 729,
"top": 317,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "188e84a5-0524-4765-9ed7-22bfc80c25ac",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_拷贝_c115d0.png",
"title": "椭圆 672 拷贝",
"opacity": 89,
"padding": [
0,
0,
0,
0
],
"width": 2,
"height": 2,
"left": 12,
"top": 260,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "8ba537f5-5fc5-40f8-95ad-86e84915e91a",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_拷贝_5_2c7e71.png",
"title": "椭圆 672 拷贝 5",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 4,
"height": 3,
"left": 135,
"top": 249,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "8d33d44c-5891-47ff-b76d-ab8040ee0c0b",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/椭圆_672_拷贝_2_416355.png",
"title": "椭圆 672 拷贝 2",
"opacity": 77,
"padding": [
0,
0,
0,
0
],
"width": 5,
"height": 5,
"left": 60,
"top": 528,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
}
]
},
{
"uuid": "aa703ab3-7678-4b1e-9472-c5e910b43b44",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/图层_516_04e9fe.png",
"title": "图层 516",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 262,
"height": 171,
"left": 49,
"top": 737,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
}
]
},
{
"uuid": "43fb0ac4-48c9-4ec3-8b53-45eaaa1fd6b8",
"imageUrl": "",
"title": "200元",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 459,
"height": 167,
"left": 195,
"top": 410,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "text",
"elements": [
],
"color": "#F92826FF",
"fontFamily": "Alibaba-PuHuiTi-B",
"fontStyle": "normal",
"fontWeight": 400,
"fontSize": 230,
"lineHeight": 60,
"textType": "paint",
"letterSpacing": 0,
"textDecoration": "none",
"orientation": "horizontal",
"textAlign": "center",
"content": "200元",
"contents": [
],
"boundingBox": {
"left": 195,
"top": 410,
"right": 654,
"bottom": 577,
"width": 459,
"height": 167
},
"textEffects": [
],
"shadows": [
]
},
{
"uuid": "6d054275-770d-4405-9ea0-e671eed9e591",
"imageUrl": "",
"title": "现金",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 89,
"height": 42,
"left": 381,
"top": 333,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "text",
"elements": [
],
"color": "#FF9FA0FF",
"fontFamily": "AdobeHeitiStd-Regular",
"fontStyle": "normal",
"fontWeight": 400,
"fontSize": 46,
"lineHeight": 60,
"textType": "paint",
"letterSpacing": 0,
"textDecoration": "none",
"orientation": "horizontal",
"textAlign": "center",
"content": "现金",
"contents": [
],
"boundingBox": {
"left": 381,
"top": 333,
"right": 470,
"bottom": 375,
"width": 89,
"height": 42
},
"textEffects": [
],
"shadows": [
]
},
{
"uuid": "67824131-6231-4f3d-be98-c9c199167b61",
"imageUrl": "/var/folders/g4/6lr6kwj90_z6mc6njkw1rrkm0000gn/T/com.magic-panel.cep/矩形_976_48da88.png",
"title": "矩形 976",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 744,
"height": 167,
"left": 48,
"top": 913,
"transform": "",
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "image",
"elements": [
]
},
{
"uuid": "b8367b42-a1ad-4082-b43d-3dbb580d2dff",
"imageUrl": "",
"title": "去领取",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 194,
"height": 63,
"left": 325,
"top": 954,
"transform": {
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "text",
"elements": [
],
"color": "#FFFFFFFF",
"fontFamily": "SourceHanSansCN-Bold",
"fontStyle": "normal",
"fontWeight": 400,
"fontSize": 66,
"lineHeight": 60,
"textType": "paint",
"letterSpacing": 0,
"textDecoration": "none",
"orientation": "horizontal",
"textAlign": "center",
"content": "去领取",
"contents": [
],
"boundingBox": {
"left": 325,
"top": 954,
"right": 519,
"bottom": 1017,
"width": 194,
"height": 63
},
"textEffects": [
],
"shadows": [
]
},
{
"uuid": "438d2f8b-3d6a-467c-b96c-d072611f0928",
"imageUrl": "",
"title": "赢现金奖励",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 636,
"height": 159,
"left": 97,
"top": 138,
"transform": {
"a": 1.07171211757033,
"b": 0,
"c": 0,
"d": 1.0695627658834,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "text",
"elements": [
],
"color": "#FFFFFFFF",
"fontFamily": "MFYuanHei-Regular",
"fontStyle": "italic",
"fontWeight": 400,
"fontSize": 110.32544708252,
"lineHeight": 120,
"textType": "paint",
"letterSpacing": 0,
"textDecoration": "none",
"orientation": "horizontal",
"textAlign": "left",
"content": "赢现金奖励",
"contents": [
],
"boundingBox": {
"left": 97,
"top": 138,
"right": 733,
"bottom": 297,
"width": 636,
"height": 159
},
"textEffects": [
{
"enable": true,
"shadow": {
"enable": true,
"blur": 22.39407356372,
"offsetX": 3.44029429027805,
"offsetY": -1.45024358655247,
"color": "#0078FFFF"
}
},
{
"enable": true,
"stroke": {
"width": 1.86617279697666,
"color": "#FFFFFFFF",
"enable": true,
"type": "outer"
}
},
{
"enable": true,
"filling": {
"color": "linear-gradient(-183deg, #FFFFFFFF 12%,#FFDD80FF 99%)",
"enable": true,
"type": 2,
"gradient": {
"byLine": 0,
"angle": -183,
"stops": [
{
"color": "#FFFFFFFF",
"offset": 0.12
},
{
"color": "#FFDD80FF",
"offset": 0.99
}
]
}
}
}
],
"shadows": [
]
},
{
"uuid": "4f7dc2ad-c359-42ee-86f5-86f91de4f7d1",
"imageUrl": "",
"title": "接单码邀冷藏新客 ",
"opacity": 255,
"padding": [
0,
0,
0,
0
],
"width": 559,
"height": 108,
"left": 140,
"top": 46,
"transform": {
"a": 0.85062213156219,
"b": 0,
"c": 0,
"d": 0.84891618265722,
"tx": 0,
"ty": 0
},
"hidden": false,
"lock": false,
"metaInfo": null,
"type": "text",
"elements": [
],
"color": "#FFFFFFFF",
"fontFamily": "MFYuanHei-Regular",
"fontStyle": "italic",
"fontWeight": 400,
"fontSize": 74.7969207763672,
"lineHeight": 120,
"textType": "paint",
"letterSpacing": 0,
"textDecoration": "none",
"orientation": "horizontal",
"textAlign": "left",
"content": "接单码邀冷藏新客\r",
"contents": [
],
"boundingBox": {
"left": 140,
"top": 46,
"right": 699,
"bottom": 154,
"width": 559,
"height": 108
},
"textEffects": [
{
"enable": true,
"shadow": {
"enable": true,
"blur": 28.2146432704769,
"offsetX": 4.33448054323216,
"offsetY": -1.82718455994381,
"color": "#0078FFFF"
}
},
{
"enable": true,
"stroke": {
"width": 2.35122027253975,
"color": "#FFFFFFFF",
"enable": true,
"type": "outer"
}
}
],
"shadows": [
]
}
]
}
]
}

52
src/utils/widgets/tansferTLS.ts Normal file
View File

@ -0,0 +1,52 @@
/*
* @Description: 根据 Matrix 转换位置&尺寸
* @Author: xi_zi
* @Date: 2024-03-20 23:32:07
* @LastEditTime: 2024-03-20 23:52:28
* @LastEditors: xi_zi
*/
/**
* 根据 Matrix 转换宽度
* @param matrix
* @param width
* @returns
*/
export const transferMatrixWidth = (width: number, matrix?: { a: number, b: number, c: number, d: number, tx: number, ty: number }) => {
if (matrix?.a === undefined) return width
return width / Math.pow(Math.abs(matrix.a), 1)
}
/**
* 根据 Matrix 转换高度
* @param matrix
* @param height
* @returns
*/
export const transferMatrixHeight = (height: number, matrix?: { a: number, b: number, c: number, d: number, tx: number, ty: number }) => {
if (matrix?.d === undefined) return height
return height / Math.pow(Math.abs(matrix.d), 1)
}
/**
* 根据 Matrix 转换左侧定位
* @param matrix
* @param left
* @returns
*/
export const transferMatrixLeft = (left: number, matrix?: { a: number, b: number, c: number, d: number, tx: number, ty: number }) => {
if (matrix?.a === undefined) return left
return left * Math.pow(Math.abs(matrix.a), 1)
}
/**
* 根据 Matrix 转换顶部定位
* @param matrix
* @param top
* @returns
*/
export const transferMatrixTop = (top: number, matrix?: { a: number, b: number, c: number, d: number, tx: number, ty: number }) => {
if (matrix?.d === undefined) return top
return top * Math.pow(Math.abs(matrix.d), 1)
}

61
src/utils/widgets/transferTranslate.ts Normal file
View File

@ -0,0 +1,61 @@
/*
* @Description: transform 工具
* @Author: xi_zi
* @Date: 2024-04-03 15:17:57
* @LastEditTime: 2024-04-03 23:11:53
* @LastEditors: xi_zi
*/
import { TdWidgetData } from "@/store/design/widget";
/**
* 兼容旧版 top left 数据
* @param widgetData
* @returns
*/
export const transferTransformWidgets = (widgetData: TdWidgetData[]): TdWidgetData[] => {
return widgetData.map(data => transferTransformWidget(data))
}
/**
* 兼容旧版 top left 数据
* @param data
* @returns
*/
export const transferTransformWidget = (data: TdWidgetData): TdWidgetData => {
const resData = { ...data }
const { left, top, transform, } = resData
console.log(data, 'widgetTransformStyle')
if (left !== undefined || top !== undefined) {
const regex = /translate\([^)]*\)/g
resData.transform = `translate(${left ?? 0}px, ${top ?? 0}px) ${(transform ?? '').replace(regex, '')}`
delete resData.left;
delete resData.top
} else if (transform?.includes('translate')) {
resData.transform = transform
}
console.log(resData, 'widgetTransformStyle==end')
return resData
}
/**
* 将transform中的translate移除
* @param transform
* @returns
*/
export const removeTranslate = (transform: string = '') => `${(transform ?? '').replace(/translate\([^)]*\)/g, '')}`
/**
* 获取transform中的translate
* @param transform
* @returns
*/
export const getOffsetFromTransform = (transform: string = '') => {
const res = { x: 0, y: 0 }
const regex = /translate\((-?\d+(\.\d+)?)(px)?,\s*(-?\d+(\.\d+)?)(px)?\)/g
transform.replace(regex, (_match, x, _1, _2, y) => {
res.x = parseFloat(x ?? 0)
res.y = parseFloat(y ?? 0)
return ''
});
return res
}

47
src/views/Index.vue
View File

@ -2,9 +2,9 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2023-09-18 17:34:44 * @Date: 2023-09-18 17:34:44
* @Description: * @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @LastEditors: xi_zi
* @LastUpdateContent: Support typescript * @LastUpdateContent: Support typescript
* @LastEditTime: 2024-04-03 10:58:42 * @LastEditTime: 2024-04-03 11:11:39
--> -->
<template> <template>
<div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color"> <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
@ -39,46 +39,36 @@
<zoom-control ref="zoomControlRef" /> <zoom-control ref="zoomControlRef" />
<!-- 右键菜单 --> <!-- 右键菜单 -->
<right-click-menu /> <right-click-menu />
<!-- 旋转缩放组件 -->
<Moveable /> <moveable />
<!-- 遮罩百分比进度条 --> <!-- 遮罩百分比进度条 -->
<ProgressLoading <ProgressLoading :percent="state.downloadPercent" :text="state.downloadText" cancelText="取消" @cancel="downloadCancel" @done="state.downloadPercent = 0" />
:percent="state.downloadPercent"
:text="state.downloadText"
:msg="state.downloadMsg"
cancelText="取消"
@cancel="downloadCancel"
@done="state.downloadPercent = 0"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import _config from '../config' import _config from '../config'
import { import { CSSProperties, computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
CSSProperties, computed, nextTick,
onBeforeUnmount, onMounted, reactive, ref,
} from 'vue'
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 designBoard from '@/components/modules/layout/designBoard/index.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'
import shortcuts from '@/mixins/shortcuts' import shortcuts from '@/mixins/shortcuts'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue' // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import HeaderOptions from './components/HeaderOptions.vue' import HeaderOptions from './components/HeaderOptions.vue'
import ProgressLoading from '@/components/common/ProgressLoading/download.vue' import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters' // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting' import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useCanvasStore, useControlStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store' import { useCanvasStore, useControlStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'
import Moveable from '@/components/business/moveable/Moveable.vue'
type TState = { type TState = {
style: CSSProperties style: CSSProperties
downloadPercent: number // 下载进度 downloadPercent: number // 下载进度
downloadText: string downloadText: string
downloadMsg: string | undefined
isContinue: boolean isContinue: boolean
APP_NAME: string APP_NAME: string
showLineGuides: boolean showLineGuides: boolean
@ -95,7 +85,6 @@ const { dZoom } = storeToRefs(useCanvasStore())
const { dHistoryParams } = storeToRefs(useHistoryStore()) const { dHistoryParams } = storeToRefs(useHistoryStore())
const { dActiveElement, dCopyElement } = storeToRefs(widgetStore) const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
const state = reactive<TState>({ const state = reactive<TState>({
style: { style: {
left: '0px', left: '0px',
@ -103,7 +92,6 @@ const state = reactive<TState>({
// openDraw: false, // openDraw: false,
downloadPercent: 0, // 下载进度 downloadPercent: 0, // 下载进度
downloadText: '', downloadText: '',
downloadMsg: '',
isContinue: true, isContinue: true,
APP_NAME: _config.APP_NAME, APP_NAME: _config.APP_NAME,
showLineGuides: false, showLineGuides: false,
@ -115,8 +103,8 @@ const route = useRoute()
const beforeUnload = function (e: Event): any { const beforeUnload = function (e: Event): any {
if (dHistoryParams.value.length > 0) { if (dHistoryParams.value.length > 0) {
const confirmationMessage: string = '系统不会自动保存您未修改的内容'; const confirmationMessage: string = '系统不会自动保存您未修改的内容'
(e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident ;(e || window.event).returnValue = confirmationMessage as any // Gecko and Trident
return confirmationMessage // Gecko and WebKit return confirmationMessage // Gecko and WebKit
} else return false } else return false
} }
@ -134,9 +122,7 @@ defineExpose({
}) })
const undoable = computed(() => { const undoable = computed(() => {
return !( return !(dHistoryParams.value.index === -1 || (dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
dHistoryParams.value.index === -1 ||
(dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
}) })
const redoable = computed(() => { const redoable = computed(() => {
@ -180,9 +166,9 @@ onBeforeUnmount(() => {
document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false) document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
document.oncontextmenu = null document.oncontextmenu = null
}) })
// ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']), // ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
function handleHistory(data: "undo" | "redo") { function handleHistory(data: 'undo' | 'redo') {
historyStore.handleHistory(data) historyStore.handleHistory(data)
// store.dispatch('handleHistory', data) // store.dispatch('handleHistory', data)
} }
@ -204,7 +190,7 @@ function loadData() {
if (!zoomControlRef.value) return if (!zoomControlRef.value) return
// await nextTick() // await nextTick()
// zoomControlRef.value.screenChange() // zoomControlRef.value.screenChange()
// 初始化激活的控件为page // 初始化激活的控件为page
widgetStore.selectWidget({ uuid: '-1' }) widgetStore.selectWidget({ uuid: '-1' })
// store.dispatch('selectWidget', { uuid: '-1' }) // store.dispatch('selectWidget', { uuid: '-1' })
@ -220,10 +206,9 @@ function fixTopBarScroll() {
// console.log('click listener', e) // console.log('click listener', e)
// } // }
function optionsChange({ downloadPercent, downloadText, downloadMsg }: { downloadPercent: number, downloadText: string, downloadMsg?: string }) { function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number; downloadText: string }) {
state.downloadPercent = downloadPercent state.downloadPercent = downloadPercent
state.downloadText = downloadText state.downloadText = downloadText
state.downloadMsg = downloadMsg
} }
</script> </script>